8
0
Просмотр исходного кода

Implemented styles for inputs with errors.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
880dc403da

+ 8 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css

@@ -42,4 +42,12 @@
 			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow), var(--ck-inner-shadow);
 		}
 	}
+
+	&.ck-error {
+		border-color: var(--ck-color-input-error-border);
+
+		&:focus {
+			@mixin ck-box-shadow var(--ck-focus-error-outer-shadow), var(--ck-inner-shadow);
+		}
+	}
 }

+ 9 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledinput/labeledinput.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck.ck-labeled-input .ck-labeled-input__error {
+	font-size: var(--ck-font-size-small);
+	color: var(--ck-color-base-error);
+}

+ 3 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -12,12 +12,14 @@
 	--ck-color-base-text: 										hsl(0, 0%, 20%);
 	--ck-color-base-active: 									hsl(208, 88%, 52%);
 	--ck-color-base-active-focus:								hsl(208, 88%, 47%);
+	--ck-color-base-error:										hsl(15, 100%, 43%);
 
 	/* -- Generic colors ------------------------------------------------------------------------ */
 
 	--ck-color-focus-border: 									hsl(208, 90%, 62%);
 	--ck-color-focus-shadow:									hsla(209, 90%, 72%,.5);
 	--ck-color-focus-disabled-shadow:							hsla(209, 90%, 72%,.3);
+	--ck-color-focus-error-shadow:								hsla(9,100%,56%,.3);
 	--ck-color-text: 											var(--ck-color-base-text);
 	--ck-color-shadow-drop: 									hsla(0, 0%, 0%, 0.15);
 	--ck-color-shadow-inner: 									hsla(0, 0%, 0%, 0.1);
@@ -59,6 +61,7 @@
 
 	--ck-color-input-background: 								var(--ck-color-base-background);
 	--ck-color-input-border: 									hsl(0, 0%, 78%);
+	--ck-color-input-error-border:								var(--ck-color-base-error);
 	--ck-color-input-text: 										var(--ck-color-base-text);
 	--ck-color-input-disabled-background: 						hsl(0, 0%, 95%);
 	--ck-color-input-disabled-border: 							hsl(0, 0%, 78%);

+ 5 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css

@@ -19,6 +19,11 @@
 	 */
 	--ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);
 
+	/**
+	 * A visual style of focused element's outer shadow (when has errors).
+	 */
+	--ck-focus-error-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-error-shadow);
+
 	/**
 	 * A visual style of focused element's border or outline.
 	 */