Merge pull request #140 from ckeditor/t/ckeditor5/815

Fix: The input focus outline should not stand out too much. Closes ckeditor/ckeditor5#815.
ckeditor · Feb 16, 2018 · 0ec33f6 · 0ec33f6
2 parents 18809f6 + cfbe036
commit 0ec33f6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/theme/ckeditor5-ui/components/inputtext/inputtext.css b/theme/ckeditor5-ui/components/inputtext/inputtext.css
@@ -23,6 +23,9 @@
 	/* This is important to stay of the same height as surrounding buttons */
 	min-height: var(--ck-ui-component-min-height);
 
+	transition-property: box-shadow,border;
+	transition: .2s ease-in-out;
+
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);

diff --git a/theme/ckeditor5-ui/globals/_focus.css b/theme/ckeditor5-ui/globals/_focus.css
@@ -7,7 +7,7 @@
 	/**
 	 * A visual style of focused element's outer shadow.
 	 */
-	--ck-focus-outer-shadow: 0 0 3px 1px var(--ck-color-focus-shadow);
+	--ck-focus-outer-shadow: 0 0 3px var(--ck-color-focus-shadow);
 
 	/**
 	 * A visual style of focused element's border or outline.