From 2883114eaf844ce72a8c75670d2ec5cf6cd4b281 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 15 Feb 2018 16:31:05 +0100 Subject: [PATCH 1/3] Fix: The input focus outline should not overwhelm the surrounding form. Closes ckeditor/ckeditor5#815. --- theme/ckeditor5-ui/globals/_focus.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/globals/_focus.css b/theme/ckeditor5-ui/globals/_focus.css index 0c77f4e..6696098 100644 --- 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. From 021b6ef88f4d5e07d8ecd14abd07927f989e06d6 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 15 Feb 2018 16:37:51 +0100 Subject: [PATCH 2/3] Added a delicate animation to the input's border and box shadow. --- theme/ckeditor5-ui/components/inputtext/inputtext.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/theme/ckeditor5-ui/components/inputtext/inputtext.css b/theme/ckeditor5-ui/components/inputtext/inputtext.css index 6d50886..8ff77c4 100644 --- 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); From cfbe036baa187075d1d38eea3da28225669d0432 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 15 Feb 2018 16:41:26 +0100 Subject: [PATCH 3/3] Removed unnecesary white space. --- theme/ckeditor5-ui/components/inputtext/inputtext.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/components/inputtext/inputtext.css b/theme/ckeditor5-ui/components/inputtext/inputtext.css index 8ff77c4..d0073f0 100644 --- a/theme/ckeditor5-ui/components/inputtext/inputtext.css +++ b/theme/ckeditor5-ui/components/inputtext/inputtext.css @@ -23,7 +23,7 @@ /* 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-property: box-shadow,border; transition: .2s ease-in-out; &:focus {