|
|
@@ -0,0 +1,49 @@
|
|
|
+/*
|
|
|
+ * 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.ck-labeled-view {
|
|
|
+ & .ck.ck-labeled-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-view__status {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes ck-table-form-labeled-view-status-appear {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|