/* * 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"; :root { --ck-table-properties-error-arrow-size: 6px; --ck-table-properties-min-error-width: 150px; } .ck.ck-table-form { & .ck-form__row { &.ck-table-form__border-row { & .ck-labeled-field-view { & > .ck-label { font-size: var(--ck-font-size-tiny); text-align: center; } } & .ck-table-form__border-style { width: 80px; min-width: 80px; } & .ck-table-form__border-width { width: 50px; min-width: 50px; } } &.ck-table-form__dimensions-row { padding: 0; & .ck-labeled-field-view > .ck-label { font-size: 10px; text-align: center; } & .ck-table-form__dimensions-row__width, & .ck-table-form__dimensions-row__height { margin: 0 } & .ck-table-form__dimension-operator { align-self: start; display: inline-block; height: var(--ck-ui-component-min-height); line-height: var(--ck-ui-component-min-height); margin: 0 var(--ck-spacing-small); } } } & .ck.ck-labeled-field-view { & .ck.ck-labeled-field-view__status { @mixin ck-rounded-corners; background: var(--ck-color-base-error); color: var(--ck-color-base-background); padding: var(--ck-spacing-small) var(--ck-spacing-medium); min-width: var(--ck-table-properties-min-error-width); text-align: center; /* The arrow pointing towards the field. */ &::after { border-color: transparent transparent var(--ck-color-base-error) transparent; border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size); border-style: solid; } animation: ck-table-form-labeled-view-status-appear .15s ease both; } /* Hide the error balloon when the field is blurred. Makes the experience much more clear. */ & .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status { display: none; } } } @keyframes ck-table-form-labeled-view-status-appear { 0% { opacity: 0; } 100% { opacity: 1; } }