/* * 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); } }