8
0

inputtext.css 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. @import "../../../mixins/_rounded.css";
  6. @import "../../../mixins/_focus.css";
  7. @import "../../../mixins/_shadow.css";
  8. :root {
  9. --ck-input-text-width: 18em;
  10. }
  11. .ck.ck-input-text {
  12. @mixin ck-rounded-corners;
  13. @mixin ck-box-shadow var(--ck-inner-shadow);
  14. background: var(--ck-color-input-background);
  15. border: 1px solid var(--ck-color-input-border);
  16. padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
  17. min-width: var(--ck-input-text-width);
  18. /* This is important to stay of the same height as surrounding buttons */
  19. min-height: var(--ck-ui-component-min-height);
  20. /* Apply some smooth transition to the box-shadow and border. */
  21. transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
  22. &:focus {
  23. @mixin ck-focus-ring;
  24. @mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);
  25. }
  26. &[readonly] {
  27. border: 1px solid var(--ck-color-input-disabled-border);
  28. background: var(--ck-color-input-disabled-background);
  29. color: var(--ck-color-input-disabled-text);
  30. &:focus {
  31. /* The read-only input should have a slightly less visible shadow when focused. */
  32. @mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow), var(--ck-inner-shadow);
  33. }
  34. }
  35. &.ck-error {
  36. border-color: var(--ck-color-input-error-border);
  37. animation: ck-text-input-shake .3s ease both;
  38. &:focus {
  39. @mixin ck-box-shadow var(--ck-focus-error-outer-shadow), var(--ck-inner-shadow);
  40. }
  41. }
  42. }
  43. @keyframes ck-text-input-shake {
  44. 20% {
  45. transform: translateX(-2px);
  46. }
  47. 40% {
  48. transform: translateX(2px);
  49. }
  50. 60% {
  51. transform: translateX(-1px);
  52. }
  53. 80% {
  54. transform: translateX(1px);
  55. }
  56. }