inputtext.css 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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. background: var(--ck-color-input-background);
  14. border: 1px solid var(--ck-color-input-border);
  15. padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
  16. min-width: var(--ck-input-text-width);
  17. /* This is important to stay of the same height as surrounding buttons */
  18. min-height: var(--ck-ui-component-min-height);
  19. /* Apply some smooth transition to the box-shadow and border. */
  20. transition: box-shadow .1s ease-in-out, border .1s ease-in-out;
  21. &:focus {
  22. @mixin ck-focus-ring;
  23. @mixin ck-box-shadow var(--ck-focus-outer-shadow);
  24. }
  25. &[readonly] {
  26. border: 1px solid var(--ck-color-input-disabled-border);
  27. background: var(--ck-color-input-disabled-background);
  28. color: var(--ck-color-input-disabled-text);
  29. &:focus {
  30. /* The read-only input should have a slightly less visible shadow when focused. */
  31. @mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow);
  32. }
  33. }
  34. &.ck-error {
  35. border-color: var(--ck-color-input-error-border);
  36. animation: ck-text-input-shake .3s ease both;
  37. &:focus {
  38. @mixin ck-box-shadow var(--ck-focus-error-outer-shadow);
  39. }
  40. }
  41. }
  42. @keyframes ck-text-input-shake {
  43. 20% {
  44. transform: translateX(-2px);
  45. }
  46. 40% {
  47. transform: translateX(2px);
  48. }
  49. 60% {
  50. transform: translateX(-1px);
  51. }
  52. 80% {
  53. transform: translateX(1px);
  54. }
  55. }