Browse Source

Merge pull request #196 from ckeditor/t/ckeditor5-media-embed/1

Feature: Added styles for errors in the labeled inputs. See ckeditor/ckeditor5-media-embed#1.
Piotrek Koszuliński 7 years ago
parent
commit
8ab9d699f3

+ 1 - 0
packages/ckeditor5-theme-lark/package.json

@@ -24,6 +24,7 @@
     "@ckeditor/ckeditor5-highlight": "^10.0.2",
     "@ckeditor/ckeditor5-link": "^10.0.3",
     "@ckeditor/ckeditor5-list": "^11.0.1",
+    "@ckeditor/ckeditor5-media-embed": "^0.0.1",
     "@ckeditor/ckeditor5-paragraph": "^10.0.2",
     "@ckeditor/ckeditor5-undo": "^10.0.2",
     "@ckeditor/ckeditor5-utils": "^10.2.0",

+ 5 - 0
packages/ckeditor5-theme-lark/tests/manual/iconset.js

@@ -48,6 +48,8 @@ import unlink from '@ckeditor/ckeditor5-link/theme/icons/unlink.svg';
 import bulletedList from '@ckeditor/ckeditor5-list/theme/icons/bulletedlist.svg';
 import numberedList from '@ckeditor/ckeditor5-list/theme/icons/numberedlist.svg';
 
+import media from '@ckeditor/ckeditor5-media-embed/theme/icons/media.svg';
+
 import paragraph from '@ckeditor/ckeditor5-paragraph/theme/icons/paragraph.svg';
 
 import table from '@ckeditor/ckeditor5-table/theme/icons/table.svg';
@@ -85,6 +87,9 @@ const icons = {
 	// list
 	bulletedList, numberedList,
 
+	// media-embed
+	media,
+
 	// paragraph
 	paragraph,
 

File diff suppressed because it is too large
+ 116 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaembedediting.css


+ 16 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck.ck-media-form {
+	padding: var(--ck-spacing-standard);
+
+	&:focus {
+		outline: none;
+	}
+
+	& > :not(:first-child) {
+		margin-left: var(--ck-spacing-standard);
+	}
+}

+ 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);
+		}
+	}
 }

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

@@ -0,0 +1,10 @@
+/*
+ * 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);
+	margin-top: var(--ck-spacing-small);
+}

+ 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

@@ -20,6 +20,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.
 	 */
 	--ck-focus-ring: 1px solid var(--ck-color-focus-border);