| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- /*
- * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- @import "../../../mixins/_rounded.css";
- @import "../../../mixins/_focus.css";
- @import "../../../mixins/_shadow.css";
- :root {
- --ck-input-text-width: 18em;
- }
- .ck.ck-input-text {
- @mixin ck-rounded-corners;
- @mixin ck-box-shadow var(--ck-inner-shadow);
- background: var(--ck-color-input-background);
- border: 1px solid var(--ck-color-input-border);
- padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
- min-width: var(--ck-input-text-width);
- /* This is important to stay of the same height as surrounding buttons */
- min-height: var(--ck-ui-component-min-height);
- /* Apply some smooth transition to the box-shadow and border. */
- transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
- &:focus {
- @mixin ck-focus-ring;
- @mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);
- }
- &[readonly] {
- border: 1px solid var(--ck-color-input-disabled-border);
- background: var(--ck-color-input-disabled-background);
- color: var(--ck-color-input-disabled-text);
- &:focus {
- /* The read-only input should have a slightly less visible shadow when focused. */
- @mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow), var(--ck-inner-shadow);
- }
- }
- &.ck-error {
- border-color: var(--ck-color-input-error-border);
- animation: ck-text-input-shake .3s ease both;
- &:focus {
- @mixin ck-box-shadow var(--ck-focus-error-outer-shadow), var(--ck-inner-shadow);
- }
- }
- }
- @keyframes ck-text-input-shake {
- 20% {
- transform: translateX(-2px);
- }
- 40% {
- transform: translateX(2px);
- }
- 60% {
- transform: translateX(-1px);
- }
- 80% {
- transform: translateX(1px);
- }
- }
|