Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

t/ckeditor5/815: The input focus outline should not overwhelm the surrounding form #140

Merged
merged 3 commits into from
Feb 16, 2018
Merged

t/ckeditor5/815: The input focus outline should not overwhelm the surrounding form #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2883114
Fix: The input focus outline should not overwhelm the surrounding for…
oleq Feb 15, 2018
021b6ef
Added a delicate animation to the input's border and box shadow.
oleq Feb 15, 2018
cfbe036
Removed unnecesary white space.
oleq Feb 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions theme/ckeditor5-ui/components/inputtext/inputtext.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

@dkonopka dkonopka Feb 16, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should variable for duration and/or timing-function like

--ck-input-text-transition: .2s ease-in-out

I really like that transition! WDYT about using a shorthand CSS syntax?

transition: box-shadow, border var(--ck-input-text-transition);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's for sure. But TBH, I'd do that in ckeditor/ckeditor5#810 because most likely we'd have to figure out a set of variables to control transitions/animations across the theme anyway.


&:focus {
@mixin ck-focus-ring;
@mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);
Expand Down
2 changes: 1 addition & 1 deletion theme/ckeditor5-ui/globals/_focus.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down