From ec78474b1db2be8c00da8029cdbbe5e132b913e6 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Thu, 15 Feb 2018 10:30:49 +0100 Subject: [PATCH 01/18] Removed styling for .ck-editor-toolbar. --- .../components/editorui/editorui.css | 30 ++----------------- 1 file changed, 2 insertions(+), 28 deletions(-) diff --git a/theme/ckeditor5-ui/components/editorui/editorui.css b/theme/ckeditor5-ui/components/editorui/editorui.css index c6ffb96..34c85fd 100644 --- a/theme/ckeditor5-ui/components/editorui/editorui.css +++ b/theme/ckeditor5-ui/components/editorui/editorui.css @@ -29,34 +29,8 @@ } } -.ck-editor-toolbar { - & .ck-button, - & .ck-button:focus { - border-width: 0; - } - - /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/120 */ - /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/131 */ - & > .ck-button, - & > .ck-dropdown > .ck-button, - & > .ck-dropdown > .ck-splitbutton > .ck-button { - &:not(:hover):not(:focus):not(.ck-on), - &.ck-disabled { - background: transparent; - } - - &.ck-on { - @mixin ck-button-colors --ck-color-editor-toolbar-button-on; - } - } - - @nest .ck-toolbar-container & { - background: var(--ck-color-editor-toolbar-background); - } -} - /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */ -.ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] { +/* .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] { &::after { border-bottom-color: var(--ck-color-base-foreground); } @@ -66,4 +40,4 @@ &::after { border-top-color: var(--ck-color-base-foreground); } -} +} */ From c9015533fd5f71b6f05c087158185118043a4aab Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Thu, 15 Feb 2018 11:43:34 +0100 Subject: [PATCH 02/18] Removed button variables for ck-editor-toolbar. --- theme/ckeditor5-ui/globals/_colors.css | 29 ++++++++------------------ 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index 5b74ba8..a0890ef 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -33,15 +33,15 @@ --ck-color-button-default-disabled-background: hsl(0, 0%, 100%); --ck-color-button-default-disabled-border: hsl(0, 0%, 78%); - --ck-color-button-on-background: var(--ck-color-base-foreground); - --ck-color-button-on-border: hsl(0, 0%, 72%); - --ck-color-button-on-focus-background: hsl(0, 0%, 87%); - --ck-color-button-on-focus-border: hsl(0, 0%, 62%); - --ck-color-button-on-active-background: hsl(0, 0%, 82%); - --ck-color-button-on-active-border: hsl(0, 0%, 57%); - --ck-color-button-on-active-shadow: hsl(0, 0%, 72%); - --ck-color-button-on-disabled-background: hsl(0, 0%, 100%); - --ck-color-button-on-disabled-border: hsl(0, 0%, 75%); + --ck-color-button-on-background: hsl(0, 0%, 87%); + --ck-color-button-on-border: transparent; + --ck-color-button-on-focus-background: hsl(0, 0%, 77%); + --ck-color-button-on-focus-border: transparent; + --ck-color-button-on-active-background: hsl(0, 0%, 73%); + --ck-color-button-on-active-border: transparent + --ck-color-button-on-active-shadow: hsl(0, 0%, 63%); + --ck-color-button-on-disabled-background: hsl(0, 0%, 87%); + --ck-color-button-on-disabled-border: transparent --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-border: var(--ck-color-base-action); @@ -97,17 +97,6 @@ --ck-color-editor-border: var(--ck-color-base-border); --ck-color-editor-toolbar-background: var(--ck-color-base-foreground); - - --ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 87%); - --ck-color-editor-toolbar-button-on-border: transparent; - --ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 77%); - --ck-color-editor-toolbar-button-on-focus-border: transparent; - --ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 73%); - --ck-color-editor-toolbar-button-on-active-border: transparent; - --ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 63%); - --ck-color-editor-toolbar-button-on-disabled-background: hsl(0, 0%, 87%); - --ck-color-editor-toolbar-button-on-disabled-border: transparent; - --ck-color-editor-dropdown-background: var(--ck-color-base-background); /* -- Engine -------------------------------------------------------------------------------- */ From 5a51a621806a856393dd2c2f9e4bd73630f779a1 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Thu, 15 Feb 2018 11:50:37 +0100 Subject: [PATCH 03/18] Added missing semicolons. --- theme/ckeditor5-ui/globals/_colors.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index a0890ef..539b9e3 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -38,10 +38,10 @@ --ck-color-button-on-focus-background: hsl(0, 0%, 77%); --ck-color-button-on-focus-border: transparent; --ck-color-button-on-active-background: hsl(0, 0%, 73%); - --ck-color-button-on-active-border: transparent + --ck-color-button-on-active-border: transparent; --ck-color-button-on-active-shadow: hsl(0, 0%, 63%); --ck-color-button-on-disabled-background: hsl(0, 0%, 87%); - --ck-color-button-on-disabled-border: transparent + --ck-color-button-on-disabled-border: transparent; --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-border: var(--ck-color-base-action); From 48696a18cbadaf8a4b329fea34a2b82069e3f538 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Thu, 15 Feb 2018 12:14:19 +0100 Subject: [PATCH 04/18] Changed default button border and background to transparent color. --- theme/ckeditor5-ui/globals/_colors.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index 539b9e3..bacfa7f 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -23,14 +23,14 @@ /* -- Buttons ------------------------------------------------------------------------------- */ - --ck-color-button-default-background: var(--ck-color-base-background); - --ck-color-button-default-border: var(--ck-color-base-border); - --ck-color-button-default-focus-background: hsl(0, 0%, 90%); - --ck-color-button-default-focus-border: hsl(0, 0%, 65%); + --ck-color-button-default-background: transparent; + --ck-color-button-default-border: transparent; + --ck-color-button-default-focus-background: transparent; + --ck-color-button-default-focus-border: transparent; --ck-color-button-default-active-background: hsl(0, 0%, 85%); - --ck-color-button-default-active-border: hsl(0, 0%, 60%); + --ck-color-button-default-active-border: transparent; --ck-color-button-default-active-shadow: hsl(0, 0%, 75%); - --ck-color-button-default-disabled-background: hsl(0, 0%, 100%); + --ck-color-button-default-disabled-background: transparent; --ck-color-button-default-disabled-border: hsl(0, 0%, 78%); --ck-color-button-on-background: hsl(0, 0%, 87%); From 9610961b1e0d9058cfb1261f80a53d36c0d77075 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Thu, 15 Feb 2018 12:31:42 +0100 Subject: [PATCH 05/18] Docs: removed . ck-editor-toolbar-button. --- docs/_snippets/examples/custom.css | 29 ++++++-------------- docs/framework/guides/theme-customization.md | 29 ++++++-------------- tests/manual/inverted.html | 18 ++++++------ theme/ckeditor5-ui/globals/_colors.css | 4 +-- 4 files changed, 29 insertions(+), 51 deletions(-) diff --git a/docs/_snippets/examples/custom.css b/docs/_snippets/examples/custom.css index 70fb229..ed38437 100644 --- a/docs/_snippets/examples/custom.css +++ b/docs/_snippets/examples/custom.css @@ -35,15 +35,15 @@ --ck-color-button-default-disabled-background: var(--ck-custom-background); --ck-color-button-default-disabled-border: var(--ck-custom-border); - --ck-color-button-on-background: var(--ck-custom-foreground); - --ck-color-button-on-border: var(--ck-custom-border); - --ck-color-button-on-focus-background: hsl(255, 4%, 21%); - --ck-color-button-on-focus-border: hsl(0, 0%, 20%); - --ck-color-button-on-active-background: hsl(255, 4%, 20%); - --ck-color-button-on-active-border: hsl(300, 1%, 19%); - --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); - --ck-color-button-on-disabled-background: var(--ck-custom-foreground); - --ck-color-button-on-disabled-border: var(--ck-custom-border); + --ck-color-button-on-background: hsl(0, 0%, 24%); + --ck-color-button-on-border: transparent; + --ck-color-button-on-focus-background: hsl(0, 0%, 21%); + --ck-color-button-on-focus-border: transparent; + --ck-color-button-on-active-background: hsl(0, 0%, 15%); + --ck-color-button-on-active-border: transparent; + --ck-color-button-on-active-shadow: hsl(0, 0%, 18%); + --ck-color-button-on-disabled-background: transparent; + --ck-color-button-on-disabled-border: transparent; --ck-color-button-action-background: hsl(168, 76%, 42%); --ck-color-button-action-border: hsl(168, 60%, 55%); @@ -97,17 +97,6 @@ --ck-color-editor-border: var(--ck-custom-background); --ck-color-editor-toolbar-background: var(--ck-custom-background); - - --ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 24%); - --ck-color-editor-toolbar-button-on-border: transparent; - --ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 21%); - --ck-color-editor-toolbar-button-on-focus-border: transparent; - --ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 15%); - --ck-color-editor-toolbar-button-on-active-border: transparent; - --ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 18%); - --ck-color-editor-toolbar-button-on-disabled-background: transparent; - --ck-color-editor-toolbar-button-on-disabled-border: transparent; - --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ diff --git a/docs/framework/guides/theme-customization.md b/docs/framework/guides/theme-customization.md index fa2e05d..8e43ea6 100644 --- a/docs/framework/guides/theme-customization.md +++ b/docs/framework/guides/theme-customization.md @@ -102,15 +102,15 @@ The file containing custom variables will be named `custom.css` and it will look --ck-color-button-default-disabled-background: var(--ck-custom-background); --ck-color-button-default-disabled-border: var(--ck-custom-border); - --ck-color-button-on-background: var(--ck-custom-foreground); - --ck-color-button-on-border: var(--ck-custom-border); - --ck-color-button-on-focus-background: hsl(255, 4%, 21%); - --ck-color-button-on-focus-border: hsl(0, 0%, 20%); - --ck-color-button-on-active-background: hsl(255, 4%, 20%); - --ck-color-button-on-active-border: hsl(300, 1%, 19%); - --ck-color-button-on-active-shadow: hsl(240, 3%, 19%); - --ck-color-button-on-disabled-background: var(--ck-custom-foreground); - --ck-color-button-on-disabled-border: var(--ck-custom-border); + --ck-color-button-on-background: hsl(0, 0%, 24%); + --ck-color-button-on-border: transparent; + --ck-color-button-on-focus-background: hsl(0, 0%, 21%); + --ck-color-button-on-focus-border: transparent; + --ck-color-button-on-active-background: hsl(0, 0%, 15%); + --ck-color-button-on-active-border: transparent; + --ck-color-button-on-active-shadow: hsl(0, 0%, 18%); + --ck-color-button-on-disabled-background: transparent; + --ck-color-button-on-disabled-border: transparent; --ck-color-button-action-background: hsl(168, 76%, 42%); --ck-color-button-action-border: hsl(168, 60%, 55%); @@ -164,17 +164,6 @@ The file containing custom variables will be named `custom.css` and it will look --ck-color-editor-border: var(--ck-custom-background); --ck-color-editor-toolbar-background: var(--ck-custom-background); - - --ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 24%); - --ck-color-editor-toolbar-button-on-border: transparent; - --ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 21%); - --ck-color-editor-toolbar-button-on-focus-border: transparent; - --ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 15%); - --ck-color-editor-toolbar-button-on-active-border: transparent; - --ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 18%); - --ck-color-editor-toolbar-button-on-disabled-background: transparent; - --ck-color-editor-toolbar-button-on-disabled-border: transparent; - --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ diff --git a/tests/manual/inverted.html b/tests/manual/inverted.html index 4b8fa83..961eaff 100644 --- a/tests/manual/inverted.html +++ b/tests/manual/inverted.html @@ -94,15 +94,15 @@ --ck-color-editor-border: var(--ck-custom-background); --ck-color-editor-toolbar-background: var(--ck-custom-background); - --ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 18%); - --ck-color-editor-toolbar-button-on-border: transparent; - --ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 21%); - --ck-color-editor-toolbar-button-on-focus-border: transparent; - --ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 15%); - --ck-color-editor-toolbar-button-on-active-border: transparent; - --ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 18%); - --ck-color-editor-toolbar-button-on-disabled-background: transparent; - --ck-color-editor-toolbar-button-on-disabled-border: transparent; + --ck-color-button-on-background: hsl(0, 0%, 18%); + --ck-color-button-on-border: transparent; + --ck-color-button-on-focus-background: hsl(0, 0%, 21%); + --ck-color-button-on-focus-border: transparent; + --ck-color-button-on-active-background: hsl(0, 0%, 15%); + --ck-color-button-on-active-border: transparent; + --ck-color-button-on-active-shadow: hsl(0, 0%, 18%); + --ck-color-button-on-disabled-background: transparent; + --ck-color-button-on-disabled-border: transparent; --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index bacfa7f..ecb0970 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -25,13 +25,13 @@ --ck-color-button-default-background: transparent; --ck-color-button-default-border: transparent; - --ck-color-button-default-focus-background: transparent; + --ck-color-button-default-focus-background: hsl(0, 0%, 90%); --ck-color-button-default-focus-border: transparent; --ck-color-button-default-active-background: hsl(0, 0%, 85%); --ck-color-button-default-active-border: transparent; --ck-color-button-default-active-shadow: hsl(0, 0%, 75%); --ck-color-button-default-disabled-background: transparent; - --ck-color-button-default-disabled-border: hsl(0, 0%, 78%); + --ck-color-button-default-disabled-border: transparent; --ck-color-button-on-background: hsl(0, 0%, 87%); --ck-color-button-on-border: transparent; From 46523c058ad5818123fd1d050ad968bcca0c581a Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Thu, 15 Feb 2018 14:34:48 +0100 Subject: [PATCH 06/18] Removed obsolete variable ck-editor-toolbar background. --- docs/_snippets/examples/custom.css | 1 - docs/framework/guides/theme-customization.md | 3 +-- tests/manual/inverted.html | 3 +-- theme/ckeditor5-editor-classic/classiceditor.css | 2 +- theme/ckeditor5-ui/globals/_colors.css | 4 ++-- 5 files changed, 5 insertions(+), 8 deletions(-) diff --git a/docs/_snippets/examples/custom.css b/docs/_snippets/examples/custom.css index ed38437..976b712 100644 --- a/docs/_snippets/examples/custom.css +++ b/docs/_snippets/examples/custom.css @@ -96,7 +96,6 @@ /* -- Overrides the default colors used by the editor --------------------------------------- */ --ck-color-editor-border: var(--ck-custom-background); - --ck-color-editor-toolbar-background: var(--ck-custom-background); --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ diff --git a/docs/framework/guides/theme-customization.md b/docs/framework/guides/theme-customization.md index 8e43ea6..577a1d6 100644 --- a/docs/framework/guides/theme-customization.md +++ b/docs/framework/guides/theme-customization.md @@ -152,7 +152,7 @@ The file containing custom variables will be named `custom.css` and it will look /* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */ - --ck-color-toolbar-background: var(--ck-custom-foreground); + --ck-color-toolbar-background: var(--ck-custom-background); --ck-color-toolbar-border: var(--ck-custom-border); /* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */ @@ -163,7 +163,6 @@ The file containing custom variables will be named `custom.css` and it will look /* -- Overrides the default colors used by the editor --------------------------------------- */ --ck-color-editor-border: var(--ck-custom-background); - --ck-color-editor-toolbar-background: var(--ck-custom-background); --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ diff --git a/tests/manual/inverted.html b/tests/manual/inverted.html index 961eaff..d4c724c 100644 --- a/tests/manual/inverted.html +++ b/tests/manual/inverted.html @@ -81,7 +81,7 @@ /* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */ - --ck-color-toolbar-background: var(--ck-custom-foreground); + --ck-color-toolbar-background: var(--ck-custom-background); --ck-color-toolbar-border: var(--ck-custom-border); /* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */ @@ -92,7 +92,6 @@ /* -- Overrides the default colors used by the editor --------------------------------------- */ --ck-color-editor-border: var(--ck-custom-background); - --ck-color-editor-toolbar-background: var(--ck-custom-background); --ck-color-button-on-background: hsl(0, 0%, 18%); --ck-color-button-on-border: transparent; diff --git a/theme/ckeditor5-editor-classic/classiceditor.css b/theme/ckeditor5-editor-classic/classiceditor.css index 9b45106..56c8bf6 100644 --- a/theme/ckeditor5-editor-classic/classiceditor.css +++ b/theme/ckeditor5-editor-classic/classiceditor.css @@ -13,7 +13,7 @@ border-bottom-right-radius: 0; } - background: var(--ck-color-editor-toolbar-background); + background: var(--ck-color-toolbar-background); border-bottom-width: 0; } diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index ecb0970..a1a1132 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -80,12 +80,12 @@ /* -- Panel --------------------------------------------------------------------------------- */ - --ck-color-panel-background: var(--ck-color-base-background); + --ck-color-panel-background: var(--ck-color-base-foreground); --ck-color-panel-border: var(--ck-color-base-border); /* -- Toolbar ------------------------------------------------------------------------------- */ - --ck-color-toolbar-background: var(--ck-color-base-background); + --ck-color-toolbar-background: var(--ck-color-base-foreground); --ck-color-toolbar-border: var(--ck-color-base-border); /* -- Tooltip ------------------------------------------------------------------------------- */ From 633bdc12a4ae59b5788df4aed8d669af1148ef26 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Thu, 15 Feb 2018 14:51:58 +0100 Subject: [PATCH 07/18] Removed not used CSS fix. --- .../components/editorui/editorui.css | 43 ------------------- 1 file changed, 43 deletions(-) diff --git a/theme/ckeditor5-ui/components/editorui/editorui.css b/theme/ckeditor5-ui/components/editorui/editorui.css index 49182d9..81936cc 100644 --- a/theme/ckeditor5-ui/components/editorui/editorui.css +++ b/theme/ckeditor5-ui/components/editorui/editorui.css @@ -28,46 +28,3 @@ margin-top: var(--ck-spacing-standard); } } - -<<<<<<< HEAD -======= -.ck-editor-toolbar { - & .ck-button, - & .ck-button:focus { - border-width: 0; - } - - /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/120 */ - /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/131 */ - & > .ck-button, - & > .ck-dropdown > .ck-button, - & > .ck-file-dialog-button > .ck-button, - & > .ck-dropdown > .ck-splitbutton > .ck-button { - &:not(:hover):not(:focus):not(.ck-on), - &.ck-disabled { - background: transparent; - } - - &.ck-on { - @mixin ck-button-colors --ck-color-editor-toolbar-button-on; - } - } - - @nest .ck-toolbar-container & { - background: var(--ck-color-editor-toolbar-background); - } -} - ->>>>>>> f223d6a2faf2e848edead9c49fdad72b4bc9c95f -/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */ -/* .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] { - &::after { - border-bottom-color: var(--ck-color-base-foreground); - } -} - -.ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] { - &::after { - border-top-color: var(--ck-color-base-foreground); - } -} */ From 5980302bfc1d04d9a2d85e4662f7863ff953e031 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 16 Feb 2018 09:02:50 +0100 Subject: [PATCH 08/18] Removed `.ck-editor-toolbar` CSS variables. --- docs/_snippets/examples/custom.css | 4 ++-- docs/framework/guides/theme-customization.md | 4 ++-- tests/manual/inverted.html | 4 ++-- theme/ckeditor5-editor-classic/classiceditor.css | 2 +- theme/ckeditor5-ui/globals/_colors.css | 6 ------ 5 files changed, 7 insertions(+), 13 deletions(-) diff --git a/docs/_snippets/examples/custom.css b/docs/_snippets/examples/custom.css index 976b712..30e839a 100644 --- a/docs/_snippets/examples/custom.css +++ b/docs/_snippets/examples/custom.css @@ -95,8 +95,8 @@ /* -- Overrides the default colors used by the editor --------------------------------------- */ - --ck-color-editor-border: var(--ck-custom-background); - --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); + --ck-color-base-border: var(--ck-custom-background); + --ck-color-dropdown-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ diff --git a/docs/framework/guides/theme-customization.md b/docs/framework/guides/theme-customization.md index 577a1d6..2e2aabf 100644 --- a/docs/framework/guides/theme-customization.md +++ b/docs/framework/guides/theme-customization.md @@ -162,8 +162,8 @@ The file containing custom variables will be named `custom.css` and it will look /* -- Overrides the default colors used by the editor --------------------------------------- */ - --ck-color-editor-border: var(--ck-custom-background); - --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); + --ck-color-base-border: var(--ck-custom-background); + --ck-color-dropdown-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ diff --git a/tests/manual/inverted.html b/tests/manual/inverted.html index d4c724c..011c8ac 100644 --- a/tests/manual/inverted.html +++ b/tests/manual/inverted.html @@ -91,7 +91,7 @@ /* -- Overrides the default colors used by the editor --------------------------------------- */ - --ck-color-editor-border: var(--ck-custom-background); + --ck-color-base-border: var(--ck-custom-background); --ck-color-button-on-background: hsl(0, 0%, 18%); --ck-color-button-on-border: transparent; @@ -103,7 +103,7 @@ --ck-color-button-on-disabled-background: transparent; --ck-color-button-on-disabled-border: transparent; - --ck-color-editor-dropdown-background: hsl(270, 1%, 33%); + --ck-color-editor-background: hsl(270, 1%, 33%); /* -- Overrides the default colors used by ckeditor5-image package -------------------------- */ diff --git a/theme/ckeditor5-editor-classic/classiceditor.css b/theme/ckeditor5-editor-classic/classiceditor.css index 56c8bf6..c2d9fea 100644 --- a/theme/ckeditor5-editor-classic/classiceditor.css +++ b/theme/ckeditor5-editor-classic/classiceditor.css @@ -38,6 +38,6 @@ } &:not(.ck-focused) { - border-color: var(--ck-color-editor-border); + border-color: var(--ck-color-base-border); } } diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index a1a1132..0f49fe0 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -93,12 +93,6 @@ --ck-color-tooltip-background: var(--ck-color-base-text); --ck-color-tooltip-text: var(--ck-color-base-background); - /* -- Editor -------------------------------------------------------------------------------- */ - - --ck-color-editor-border: var(--ck-color-base-border); - --ck-color-editor-toolbar-background: var(--ck-color-base-foreground); - --ck-color-editor-dropdown-background: var(--ck-color-base-background); - /* -- Engine -------------------------------------------------------------------------------- */ --ck-color-engine-placeholder-text: hsl(0, 0%, 76%); From ff9c586b35afebe1d4dfa589ca8918ac06c5cd65 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 16 Feb 2018 09:50:11 +0100 Subject: [PATCH 09/18] Tests: Wrapped buttons and icons in ck-toolbar. --- tests/manual/theme.html | 6 -- tests/manual/theme.js | 217 ++++++++++++++++++++-------------------- 2 files changed, 111 insertions(+), 112 deletions(-) diff --git a/tests/manual/theme.html b/tests/manual/theme.html index 9195618..4fc15f8 100644 --- a/tests/manual/theme.html +++ b/tests/manual/theme.html @@ -53,7 +53,6 @@

Button: Icon

-

@@ -68,7 +67,6 @@

Button: Responsiveness

Button: Tooltip

-

Dropdown

@@ -78,8 +76,6 @@

ListDropdown

ButtonDropdown

-
-

Toolbar

Toolbar: Text

@@ -100,8 +96,6 @@

Toolbar: Item separators

Toolbar: Multi-row

-
-

Inputs

Labeled

diff --git a/tests/manual/theme.js b/tests/manual/theme.js index fd5987c..329b3f4 100644 --- a/tests/manual/theme.js +++ b/tests/manual/theme.js @@ -95,19 +95,19 @@ function renderIcon() { function renderButton() { // --- States ------------------------------------------------------------ - ui.buttonStates.add( button( { - label: 'State: normal (none)', - } ) ); - - ui.buttonStates.add( button( { - label: 'State: disabled', - isEnabled: false - } ) ); - - ui.buttonStates.add( button( { - label: 'State: on', - isOn: true - } ) ); + ui.buttonStates.add( toolbar( [ + button( { + label: 'State: normal (none)', + } ), + button( { + label: 'State: disabled', + isEnabled: false + } ), + button( { + label: 'State: on', + isOn: true + } ) + ] ) ); // --- Types ------------------------------------------------------------ @@ -115,9 +115,9 @@ function renderButton() { const roundedButton = button( { label: 'Rounded corners' } ); const boldButton = button( { label: 'Bold text' } ); - ui.buttonTypes.add( actionButton ); - ui.buttonTypes.add( roundedButton ); - ui.buttonTypes.add( boldButton ); + ui.buttonTypes.add( toolbar( [ + actionButton, roundedButton, boldButton + ] ) ); // TODO: It requires model interface. actionButton.element.classList.add( 'ck-button-action' ); @@ -130,59 +130,50 @@ function renderButton() { // --- Icon ------------------------------------------------------------ - ui.buttonIcon.add( button( { - label: 'Bold', - icon: boldIcon - } ) ); + ui.buttonIcon.add( toolbar( [ + button( { + label: 'Bold', + icon: boldIcon + } ) + ] ) ); const styledButton = button( { label: 'Button with an icon and custom styles', icon: italicIcon } ); - ui.buttonIconCustom.add( styledButton ); + ui.buttonIconCustom.add( toolbar( [ styledButton ] ) ); // TODO: It probably requires model interface. styledButton.element.setAttribute( 'style', 'border-radius: 100px; border: 0' ); - ui.buttonIconStates.add( button( { - label: 'Disabled', - icon: boldIcon, - isEnabled: false - } ) ); - const disabledActionButton = button( { label: 'Disabled action', icon: boldIcon, isEnabled: false } ); - ui.buttonIconStates.add( disabledActionButton ); + ui.buttonIconStates.add( toolbar( [ + button( { + label: 'Disabled', + icon: boldIcon, + isEnabled: false + } ), + disabledActionButton, + button( { + label: 'Bold', + withText: false, + tooltip: true, + icon: boldIcon + } ) + ] ) ); // TODO: It requires model interface. disabledActionButton.element.classList.add( 'ck-button-action' ); - ui.buttonIconStates.add( button( { - label: 'Bold', - withText: false, - tooltip: true, - icon: boldIcon - } ) ); - // --- Responsive ------------------------------------------------------------ for ( let i = 1; i < 4; i++ ) { - ui[ `buttonResponsive${ i }` ].add( button( { - label: 'A button', - isEnabled: true - } ) ); - - ui[ `buttonResponsive${ i }` ].add( button( { - label: 'Bold', - icon: boldIcon, - isEnabled: true - } ) ); - const notextButton = button( { label: 'Bold', withText: false, @@ -190,7 +181,18 @@ function renderButton() { icon: boldIcon } ); - ui[ `buttonResponsive${ i }` ].add( notextButton ); + ui[ `buttonResponsive${ i }` ].add( toolbar( [ + button( { + label: 'A button', + isEnabled: true + } ), + button( { + label: 'Bold', + icon: boldIcon, + isEnabled: true + } ), + notextButton + ] ) ); // TODO: It requires model interface. notextButton.element.classList.add( 'ck-button-action' ); @@ -198,19 +200,20 @@ function renderButton() { // --- Tooltip ------------------------------------------------------------ - ui.buttonTooltip.add( button( { - label: 'This button has a tooltip (south)', - withText: true, - tooltip: 'The content of the tooltip', - } ) ); - - ui.buttonTooltip.add( button( { - label: 'This one too – north', - withText: true, - keystroke: 'Ctrl+N', - tooltip: true, - tooltipPosition: 'n' - } ) ); + ui.buttonTooltip.add( toolbar( [ + button( { + label: 'This button has a tooltip (south)', + withText: true, + tooltip: 'The content of the tooltip', + } ), + button( { + label: 'This one too – north', + withText: true, + keystroke: 'Ctrl+N', + tooltip: true, + tooltipPosition: 'n' + } ) + ] ) ); } function renderDropdown() { @@ -225,53 +228,55 @@ function renderDropdown() { } ) ); } ); - ui.listDropdown.add( listDropdown( { - label: 'Normal state', - isEnabled: true, - items: collection - } ) ); - - ui.listDropdown.add( listDropdown( { - label: 'Disabled', - isEnabled: false, - items: collection - } ) ); - - ui.buttonDropdown.add( toolbarDropdown( { - label: 'Normal state', - isEnabled: true, - buttons: [ - button( { - withText: false, - label: 'foo', - icon: boldIcon - } ), - button( { - withText: false, - label: 'foo', - icon: italicIcon - } ) - ] - } ) ); + ui.listDropdown.add( toolbar( [ + listDropdown( { + label: 'Normal state', + isEnabled: true, + items: collection + } ), + listDropdown( { + label: 'Disabled', + isEnabled: false, + items: collection + } ) + ] ) ); - ui.buttonDropdown.add( toolbarDropdown( { - label: 'Disabled', - isEnabled: false, - buttons: [ - button( { - withText: false, - isEnabled: false, - label: 'foo', - icon: boldIcon - } ), - button( { - withText: false, - isEnabled: false, - label: 'foo', - icon: italicIcon - } ) - ] - } ) ); + ui.buttonDropdown.add( toolbar( [ + toolbarDropdown( { + label: 'Normal state', + isEnabled: true, + buttons: [ + button( { + withText: false, + label: 'foo', + icon: boldIcon + } ), + button( { + withText: false, + label: 'foo', + icon: italicIcon + } ) + ] + } ), + toolbarDropdown( { + label: 'Disabled', + isEnabled: false, + buttons: [ + button( { + withText: false, + isEnabled: false, + label: 'foo', + icon: boldIcon + } ), + button( { + withText: false, + isEnabled: false, + label: 'foo', + icon: italicIcon + } ) + ] + } ) + ] ) ); } function renderToolbar() { From eea41d8195279ff562a3443d7c487d4176febc4c Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 16 Feb 2018 10:02:42 +0100 Subject: [PATCH 10/18] Fixed failing test - typo. --- tests/manual/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/manual/theme.js b/tests/manual/theme.js index 329b3f4..f156628 100644 --- a/tests/manual/theme.js +++ b/tests/manual/theme.js @@ -107,7 +107,7 @@ function renderButton() { label: 'State: on', isOn: true } ) - ] ) ); + ] ) ); // --- Types ------------------------------------------------------------ From d43a6a5803204958c2befb0acda6f7a6468ee2b4 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 16 Feb 2018 11:04:35 +0100 Subject: [PATCH 11/18] Bringing back white background for panel-background. --- theme/ckeditor5-ui/globals/_colors.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index 0f49fe0..6cca63a 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -80,7 +80,7 @@ /* -- Panel --------------------------------------------------------------------------------- */ - --ck-color-panel-background: var(--ck-color-base-foreground); + --ck-color-panel-background: var(--ck-color-base-background); --ck-color-panel-border: var(--ck-color-base-border); /* -- Toolbar ------------------------------------------------------------------------------- */ From 9710ab865fdfe6182eb9888c01e29f59f9163ede Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 16 Feb 2018 11:38:45 +0100 Subject: [PATCH 12/18] Moved `.ck-toolbar` background to toolbar.css from editorclassic.css --- theme/ckeditor5-editor-classic/classiceditor.css | 1 - theme/ckeditor5-ui/components/toolbar/toolbar.css | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-editor-classic/classiceditor.css b/theme/ckeditor5-editor-classic/classiceditor.css index c2d9fea..f5cb8b4 100644 --- a/theme/ckeditor5-editor-classic/classiceditor.css +++ b/theme/ckeditor5-editor-classic/classiceditor.css @@ -13,7 +13,6 @@ border-bottom-right-radius: 0; } - background: var(--ck-color-toolbar-background); border-bottom-width: 0; } diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index 17aa864..0bf22b3 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -8,6 +8,7 @@ .ck-toolbar { @mixin ck-rounded-corners; + background: var(--ck-color-toolbar-background); padding: 0 var(--ck-spacing-small); border: 1px solid var(--ck-color-toolbar-border); From 9e8550ec03cbce37529b63d6cfd83a68f1842854 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 16 Feb 2018 11:55:45 +0100 Subject: [PATCH 13/18] Changed to transparent border for button-action. --- theme/ckeditor5-ui/globals/_colors.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index 6cca63a..0c1d9e0 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -46,12 +46,12 @@ --ck-color-button-action-background: var(--ck-color-base-action); --ck-color-button-action-border: var(--ck-color-base-action); --ck-color-button-action-focus-background: hsl(104, 44%, 43%); - --ck-color-button-action-focus-border: hsl(104, 44%, 35%); + --ck-color-button-action-focus-border: transparent; --ck-color-button-action-active-background: hsl(104, 44%, 41%); - --ck-color-button-action-active-border: hsl(104, 44%, 33%); + --ck-color-button-action-active-border: transparent; --ck-color-button-action-active-shadow: hsl(104, 44%, 36%); --ck-color-button-action-disabled-background: hsl(104, 44%, 58%); - --ck-color-button-action-disabled-border: hsl(104, 44%, 38%); + --ck-color-button-action-disabled-border: transparent; --ck-color-button-action-text: var(--ck-color-base-background); /* -- Dropdown ------------------------------------------------------------------------------ */ From febcfb647666583c6403b07d62e8844a8d0252d1 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 16 Feb 2018 12:11:16 +0100 Subject: [PATCH 14/18] Removed green border from action-button default state. --- theme/ckeditor5-ui/globals/_colors.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index 0c1d9e0..e878582 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -44,7 +44,7 @@ --ck-color-button-on-disabled-border: transparent; --ck-color-button-action-background: var(--ck-color-base-action); - --ck-color-button-action-border: var(--ck-color-base-action); + --ck-color-button-action-border: transparent; --ck-color-button-action-focus-background: hsl(104, 44%, 43%); --ck-color-button-action-focus-border: transparent; --ck-color-button-action-active-background: hsl(104, 44%, 41%); From 88d35cb1bad1e2c4ba05a8d9a1126bde0184499e Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 16 Feb 2018 13:52:51 +0100 Subject: [PATCH 15/18] Removed border from `.ck-button`. --- theme/ckeditor5-image/textalternativeform.css | 4 ---- theme/ckeditor5-link/linkactions.css | 5 ----- theme/ckeditor5-link/linkform.css | 4 ---- theme/ckeditor5-ui/components/button/button.css | 2 -- theme/ckeditor5-ui/globals/_colors.css | 12 ------------ theme/ckeditor5-ui/mixins/_button.css | 4 ---- 6 files changed, 31 deletions(-) diff --git a/theme/ckeditor5-image/textalternativeform.css b/theme/ckeditor5-image/textalternativeform.css index f5dd33b..c0edf4f 100644 --- a/theme/ckeditor5-image/textalternativeform.css +++ b/theme/ckeditor5-image/textalternativeform.css @@ -6,10 +6,6 @@ .ck-text-alternative-form { padding: var(--ck-spacing-standard); - & .ck-button { - border-width: 0; - } - &:focus { /* https://github.com/ckeditor/ckeditor5-link/issues/90 */ outline: none; diff --git a/theme/ckeditor5-link/linkactions.css b/theme/ckeditor5-link/linkactions.css index 9665472..5091ae7 100644 --- a/theme/ckeditor5-link/linkactions.css +++ b/theme/ckeditor5-link/linkactions.css @@ -11,10 +11,6 @@ .ck-link-actions { padding: var(--ck-spacing-standard); - & .ck-button { - border: 0; - } - & .ck-button.ck-link-actions__preview { padding-left: 0; padding-right: 0; @@ -24,7 +20,6 @@ &:focus, &:active { background: none; - border: 0; } &:active { diff --git a/theme/ckeditor5-link/linkform.css b/theme/ckeditor5-link/linkform.css index d679b6f..3b41169 100644 --- a/theme/ckeditor5-link/linkform.css +++ b/theme/ckeditor5-link/linkform.css @@ -6,10 +6,6 @@ .ck-link-form { padding: var(--ck-spacing-standard); - & .ck-button { - border-width: 0; - } - &:focus { /* https://github.com/ckeditor/ckeditor5-link/issues/90 */ outline: none; diff --git a/theme/ckeditor5-ui/components/button/button.css b/theme/ckeditor5-ui/components/button/button.css index 373db22..2c40ae9 100644 --- a/theme/ckeditor5-ui/components/button/button.css +++ b/theme/ckeditor5-ui/components/button/button.css @@ -14,8 +14,6 @@ a.ck-button { @mixin ck-button-colors --ck-color-button-default; @mixin ck-rounded-corners; - border-width: 1px; - border-style: solid; white-space: nowrap; cursor: default; vertical-align: middle; diff --git a/theme/ckeditor5-ui/globals/_colors.css b/theme/ckeditor5-ui/globals/_colors.css index e878582..75639ce 100644 --- a/theme/ckeditor5-ui/globals/_colors.css +++ b/theme/ckeditor5-ui/globals/_colors.css @@ -24,34 +24,22 @@ /* -- Buttons ------------------------------------------------------------------------------- */ --ck-color-button-default-background: transparent; - --ck-color-button-default-border: transparent; --ck-color-button-default-focus-background: hsl(0, 0%, 90%); - --ck-color-button-default-focus-border: transparent; --ck-color-button-default-active-background: hsl(0, 0%, 85%); - --ck-color-button-default-active-border: transparent; --ck-color-button-default-active-shadow: hsl(0, 0%, 75%); --ck-color-button-default-disabled-background: transparent; - --ck-color-button-default-disabled-border: transparent; --ck-color-button-on-background: hsl(0, 0%, 87%); - --ck-color-button-on-border: transparent; --ck-color-button-on-focus-background: hsl(0, 0%, 77%); - --ck-color-button-on-focus-border: transparent; --ck-color-button-on-active-background: hsl(0, 0%, 73%); - --ck-color-button-on-active-border: transparent; --ck-color-button-on-active-shadow: hsl(0, 0%, 63%); --ck-color-button-on-disabled-background: hsl(0, 0%, 87%); - --ck-color-button-on-disabled-border: transparent; --ck-color-button-action-background: var(--ck-color-base-action); - --ck-color-button-action-border: transparent; --ck-color-button-action-focus-background: hsl(104, 44%, 43%); - --ck-color-button-action-focus-border: transparent; --ck-color-button-action-active-background: hsl(104, 44%, 41%); - --ck-color-button-action-active-border: transparent; --ck-color-button-action-active-shadow: hsl(104, 44%, 36%); --ck-color-button-action-disabled-background: hsl(104, 44%, 58%); - --ck-color-button-action-disabled-border: transparent; --ck-color-button-action-text: var(--ck-color-base-background); /* -- Dropdown ------------------------------------------------------------------------------ */ diff --git a/theme/ckeditor5-ui/mixins/_button.css b/theme/ckeditor5-ui/mixins/_button.css index 386e678..4675900 100644 --- a/theme/ckeditor5-ui/mixins/_button.css +++ b/theme/ckeditor5-ui/mixins/_button.css @@ -11,18 +11,15 @@ */ @define-mixin ck-button-colors $prefix { background: var($(prefix)-background); - border-color: var($(prefix)-border); &:not(.ck-disabled) { &:hover, &:focus { background: var($(prefix)-focus-background); - border-color: var($(prefix)-focus-border); } &:active { background: var($(prefix)-active-background); - border-color: var($(prefix)-active-border); box-shadow: inset 0 2px 2px var($(prefix)-active-shadow); } } @@ -30,6 +27,5 @@ /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ &.ck-disabled { background: var($(prefix)-disabled-background); - border-color: var($(prefix)-disabled-border); } } From 5c9fc0dd45a9b5f048f9de0ca527a56e7f25a9db Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 16 Feb 2018 14:09:11 +0100 Subject: [PATCH 16/18] Added a transparent border to all buttons to prevent flickering when the focus border shows up. --- theme/ckeditor5-ui/components/button/button.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/theme/ckeditor5-ui/components/button/button.css b/theme/ckeditor5-ui/components/button/button.css index 2c40ae9..c69883b 100644 --- a/theme/ckeditor5-ui/components/button/button.css +++ b/theme/ckeditor5-ui/components/button/button.css @@ -31,6 +31,9 @@ a.ck-button { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; + /* Avoid flickering when the foucs border shows up. */ + border: 1px solid transparent; + &:focus { @mixin ck-focus-ring; @mixin ck-box-shadow var(--ck-focus-outer-shadow); From fa57d3d2e3419663a4bbb337f108ee5ab57e61d4 Mon Sep 17 00:00:00 2001 From: Damian Konopka Date: Fri, 16 Feb 2018 14:29:58 +0100 Subject: [PATCH 17/18] Fixed proper background for toolbar arrow. --- theme/ckeditor5-ui/components/editorui/editorui.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/theme/ckeditor5-ui/components/editorui/editorui.css b/theme/ckeditor5-ui/components/editorui/editorui.css index 81936cc..c6159a2 100644 --- a/theme/ckeditor5-ui/components/editorui/editorui.css +++ b/theme/ckeditor5-ui/components/editorui/editorui.css @@ -28,3 +28,16 @@ margin-top: var(--ck-spacing-standard); } } + +/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */ +.ck-toolbar-container[class*="arrow_n"] { + &::after { + border-bottom-color: var(--ck-color-base-foreground); + } +} + +.ck-toolbar-container[class*="arrow_s"] { + &::after { + border-top-color: var(--ck-color-base-foreground); + } +} From f19411f9f38ce54529217d16d334a53c6b1753d4 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 16 Feb 2018 14:33:53 +0100 Subject: [PATCH 18/18] Removed button border when :focused because it was too strong. --- theme/ckeditor5-ui/components/button/button.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/theme/ckeditor5-ui/components/button/button.css b/theme/ckeditor5-ui/components/button/button.css index c69883b..7fdcd17 100644 --- a/theme/ckeditor5-ui/components/button/button.css +++ b/theme/ckeditor5-ui/components/button/button.css @@ -37,6 +37,9 @@ a.ck-button { &:focus { @mixin ck-focus-ring; @mixin ck-box-shadow var(--ck-focus-outer-shadow); + + /* Disable border part of the focus ring for the buttons. It is too much. */ + border-color: transparent; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */