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

t/ckeditor5-ui/394: Used a solid box-shadow to indicate the :focus state of the .ck-button #187

Merged
merged 4 commits into from
Jul 6, 2018
Merged

t/ckeditor5-ui/394: Used a solid box-shadow to indicate the :focus state of the .ck-button #187

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0821df1
Other: Used a solid box-shadow to indicate the :focus state of the .c…
oleq Jul 4, 2018
7529fce
Tests: Added the pilcrow (ckeditor5-core) icon to the iconset manual …
oleq Jul 4, 2018
da2ac7c
Made button and input box-shadows less visible when :focused but disa…
oleq Jul 4, 2018
d7646ba
Fixed the code style in the input text styles sheet.
oleq Jul 5, 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
6 changes: 3 additions & 3 deletions docs/_snippets/examples/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,19 @@
/* -- Overrides the default .ck-button class colors. ---------------------------------------- */

--ck-color-button-default-background: var(--ck-custom-background);
--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
--ck-color-button-default-active-background: hsl(270, 2%, 20%);
--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
--ck-color-button-default-disabled-background: var(--ck-custom-background);

--ck-color-button-on-background: var(--ck-custom-foreground);
--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
--ck-color-button-on-active-background: hsl(255, 4%, 14%);
--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
--ck-color-button-on-disabled-background: var(--ck-custom-foreground);

--ck-color-button-action-background: hsl(168, 76%, 42%);
--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
--ck-color-button-action-active-background: hsl(168, 76%, 36%);
--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
Expand Down
6 changes: 3 additions & 3 deletions docs/framework/guides/theme-customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,19 +93,19 @@ The file containing custom variables will be named `custom.css` and it will look
/* -- Overrides the default .ck-button class colors. ---------------------------------------- */

--ck-color-button-default-background: var(--ck-custom-background);
--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
--ck-color-button-default-active-background: hsl(270, 2%, 20%);
--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
--ck-color-button-default-disabled-background: var(--ck-custom-background);

--ck-color-button-on-background: var(--ck-custom-foreground);
--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
--ck-color-button-on-active-background: hsl(255, 4%, 14%);
--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
--ck-color-button-on-disabled-background: var(--ck-custom-foreground);

--ck-color-button-action-background: hsl(168, 76%, 42%);
--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
--ck-color-button-action-active-background: hsl(168, 76%, 36%);
--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
Expand Down
3 changes: 2 additions & 1 deletion tests/manual/iconset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import objectCenter from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg
import objectRight from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
import pencil from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
import pilcrow from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';

import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
Expand Down Expand Up @@ -67,7 +68,7 @@ const icons = {
bold, italic, underline, code, strikethrough,

// core
check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil,
check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil, pilcrow,

// font
fontFamily, fontSize,
Expand Down
6 changes: 3 additions & 3 deletions tests/manual/inverted.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,19 @@
/* -- Overrides the default .ck-button class colors ----------------------------------------- */

--ck-color-button-default-background: var(--ck-custom-background);
--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
--ck-color-button-default-hover-background: hsl(270, 1%, 22%);
--ck-color-button-default-active-background: hsl(270, 2%, 20%);
--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
--ck-color-button-default-disabled-background: var(--ck-custom-background);

--ck-color-button-on-background: var(--ck-custom-foreground);
--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
--ck-color-button-on-hover-background: hsl(255, 4%, 16%);
--ck-color-button-on-active-background: hsl(255, 4%, 14%);
--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
--ck-color-button-on-disabled-background: var(--ck-custom-foreground);

--ck-color-button-action-background: hsl(168, 76%, 42%);
--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
--ck-color-button-action-hover-background: hsl(168, 76%, 38%);
--ck-color-button-action-active-background: hsl(168, 76%, 36%);
--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
Expand Down
3 changes: 3 additions & 0 deletions theme/ckeditor5-ui/components/button/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ a.ck.ck-button {
/* Avoid flickering when the foucs border shows up. */
border: 1px solid transparent;

/* Apply some smooth transition to the box-shadow. */
transition: box-shadow 200ms ease-in-out;

&:active,
&:focus {
@mixin ck-focus-ring;
Expand Down
2 changes: 1 addition & 1 deletion theme/ckeditor5-ui/components/dropdown/dropdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,6 @@
border: 1px solid var(--ck-color-dropdown-panel-border);
bottom: 0;

/* Make sure the panel is at least as wide as the dropdown's button. */
/* Make sure the panel is at least as wide as the drop-down's button. */
min-width: 100%;
}
19 changes: 19 additions & 0 deletions theme/ckeditor5-ui/components/dropdown/listdropdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,23 @@
@mixin ck-rounded-corners {
border-top-left-radius: 0;
}

/* Make sure the button belonging to the first/last child of the list goes well with the
border radius of the entire panel. */
& .ck-list__item {
&:first-child .ck-button {
@mixin ck-rounded-corners {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}

&:last-child .ck-button {
@mixin ck-rounded-corners {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}
}
1 change: 1 addition & 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,7 @@
/* This is important to stay of the same height as surrounding buttons */
min-height: var(--ck-ui-component-min-height);

/* Apply some smooth transition to the box-shadow and border. */
transition-property: box-shadow,border;
Copy link
Contributor

Choose a reason for hiding this comment

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

Missing space before second property.

transition: .2s ease-in-out;

Expand Down
9 changes: 3 additions & 6 deletions theme/ckeditor5-ui/components/list/list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,7 @@
background: var(--ck-color-list-button-on-background);
color: var(--ck-color-list-button-on-text);

&:hover:not(ck-disabled),
&:focus {
&:hover:not(ck-disabled) {
background: var(--ck-color-list-button-on-background-focus);
}

Expand All @@ -55,8 +54,7 @@
}
}

&:hover:not(.ck-disabled),
&:focus {
&:hover:not(.ck-disabled) {
background: var(--ck-color-list-button-hover-background);
}
}
Expand All @@ -68,8 +66,7 @@
background: var(--ck-color-list-background);
color: inherit;

&:hover:not(ck-disabled),
&:focus {
&:hover:not(ck-disabled) {
background: var(--ck-color-list-button-hover-background);
color: inherit;
}
Expand Down
8 changes: 4 additions & 4 deletions theme/ckeditor5-ui/globals/_colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,27 @@
/* -- Generic colors ------------------------------------------------------------------------ */

--ck-color-focus-border: hsl(208, 90%, 62%);
--ck-color-focus-shadow: hsl(209, 90%, 72%);
--ck-color-focus-shadow: hsla(209, 90%, 72%,.5);
--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);

/* -- Buttons ------------------------------------------------------------------------------- */

--ck-color-button-default-background: transparent;
--ck-color-button-default-focus-background: hsl(0, 0%, 90%);
--ck-color-button-default-hover-background: hsl(0, 0%, 90%);
--ck-color-button-default-active-background: hsl(0, 0%, 85%);
--ck-color-button-default-active-shadow: hsl(0, 0%, 75%);
--ck-color-button-default-disabled-background: transparent;

--ck-color-button-on-background: hsl(0, 0%, 87%);
--ck-color-button-on-focus-background: hsl(0, 0%, 77%);
--ck-color-button-on-hover-background: hsl(0, 0%, 77%);
--ck-color-button-on-active-background: hsl(0, 0%, 73%);
--ck-color-button-on-active-shadow: hsl(0, 0%, 63%);
--ck-color-button-on-disabled-background: hsl(0, 0%, 87%);

--ck-color-button-action-background: var(--ck-color-base-action);
--ck-color-button-action-focus-background: hsl(104, 44%, 43%);
--ck-color-button-action-hover-background: hsl(104, 44%, 43%);
--ck-color-button-action-active-background: hsl(104, 44%, 41%);
--ck-color-button-action-active-shadow: hsl(104, 44%, 36%);
--ck-color-button-action-disabled-background: hsl(104, 44%, 58%);
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 var(--ck-color-focus-shadow);
--ck-focus-outer-shadow: 0 0 0 3px var(--ck-color-focus-shadow);

/**
* A visual style of focused element's border or outline.
Expand Down
5 changes: 2 additions & 3 deletions theme/ckeditor5-ui/mixins/_button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,8 @@
background: var($(prefix)-background);

&:not(.ck-disabled) {
&:hover,
&:focus {
background: var($(prefix)-focus-background);
&:hover {
background: var($(prefix)-hover-background);
}

&:active {
Expand Down