瀏覽代碼

Add styles for ColorInputView

panr 5 年之前
父節點
當前提交
e9e64df11f

+ 65 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorinputview/colorinputview.css

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+.ck.ck-table-form .ck-table-form__border-row {
+	& > .ck-input-color-picker {
+		& > .ck.ck-dropdown__color-picker {
+			display: flex;
+			align-items: center;
+			flex-direction: row;
+			min-width: 100%;
+
+			& > .ck.ck-input-text {
+				min-width: auto;
+				flex-grow: 1;
+			}
+
+			& > .ck.ck-dropdown {
+				min-width: auto;
+			}
+
+			& .ck-input-text {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+
+				&:active,
+				&:focus {
+					z-index: 1;
+				}
+			}
+
+			& .ck.ck-dropdown__color-picker-button {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				margin-left: -1px;
+
+				&.ck-disabled {
+					background: var(--ck-color-input-disabled-background);
+				}
+			}
+
+			& .ck.ck-dropdown__color-picker-preview {
+				width: 20px;
+				height: 20px;
+				border: 1px solid var(--ck-color-input-border);
+
+				@mixin ck-rounded-corners;
+			}
+
+			& .ck.ck-dropdown__color-picker-remove-color {
+				width: 100%;
+				border-bottom: 1px solid var(--ck-color-input-border);
+			}
+		}
+	}
+}