From 9e8c6fcc2015be7269844730ecbb1091072096dc Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 2 Mar 2020 10:46:35 +0100 Subject: [PATCH 01/11] Add support to RTL in colorinput --- theme/ckeditor5-table/colorinput.css | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/theme/ckeditor5-table/colorinput.css b/theme/ckeditor5-table/colorinput.css index 629f10f..acf4db1 100644 --- a/theme/ckeditor5-table/colorinput.css +++ b/theme/ckeditor5-table/colorinput.css @@ -3,21 +3,38 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ +@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css"; @import "../mixins/_rounded.css"; .ck.ck-input-color { & > .ck.ck-input-text { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + @mixin ck-dir ltr { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + @mixin ck-dir rtl { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } } & > .ck.ck-dropdown { & > .ck.ck-input-color__button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - margin-left: -1px; padding: 0; + @mixin ck-dir ltr { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; + } + + @mixin ck-dir rtl { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: -1px; + } + &.ck-disabled { background: var(--ck-color-input-disabled-background); } From 4f0cc1af95f840e74de987d347b7ffbc70bbdca6 Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 2 Mar 2020 10:47:10 +0100 Subject: [PATCH 02/11] Add support RTL to formrow --- theme/ckeditor5-table/formrow.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/theme/ckeditor5-table/formrow.css b/theme/ckeditor5-table/formrow.css index e4de50a..a57cb47 100644 --- a/theme/ckeditor5-table/formrow.css +++ b/theme/ckeditor5-table/formrow.css @@ -3,13 +3,21 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ + @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css"; + .ck.ck-form__row { padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0; /* Ignore labels that work as fieldset legends */ & > *:not(.ck-label) { & + * { - margin-left: var(--ck-spacing-large); + @mixin ck-dir ltr { + margin-left: var(--ck-spacing-large); + } + + @mixin ck-dir rtl { + margin-right: var(--ck-spacing-large); + } } } From 270882ce461f7fea6bab45c66ed6db9fb1db668c Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 2 Mar 2020 10:48:27 +0100 Subject: [PATCH 03/11] Add support RTL to tabelcellproperties and fix buttons' border-radius --- theme/ckeditor5-table/tablecellproperties.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/theme/ckeditor5-table/tablecellproperties.css b/theme/ckeditor5-table/tablecellproperties.css index 27bc2ff..630f506 100644 --- a/theme/ckeditor5-table/tablecellproperties.css +++ b/theme/ckeditor5-table/tablecellproperties.css @@ -2,6 +2,7 @@ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ +@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css"; .ck.ck-table-cell-properties-form { width: 320px; @@ -15,6 +16,24 @@ &.ck-table-cell-properties-form__alignment-row { & .ck.ck-toolbar { background: none; + + & .ck-button { + margin: 0; + + @mixin ck-dir rtl { + &:first-child { + border-radius: var(--ck-border-radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + &:last-child { + border-radius: var(--ck-border-radius); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + } } } } From 3a512968c69e1519ce9e62864ba7a05114077019 Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 2 Mar 2020 10:50:17 +0100 Subject: [PATCH 04/11] Move margins to `.ck-table-form__dimension-operator` for more universal styling for both LTR and RTL mode --- theme/ckeditor5-table/tableform.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/theme/ckeditor5-table/tableform.css b/theme/ckeditor5-table/tableform.css index 5f6c4cc..00f6562 100644 --- a/theme/ckeditor5-table/tableform.css +++ b/theme/ckeditor5-table/tableform.css @@ -39,20 +39,17 @@ text-align: center; } - & .ck-table-form__dimensions-row__width { - margin-right: var(--ck-spacing-small); - } - + & .ck-table-form__dimensions-row__width, & .ck-table-form__dimensions-row__height { - margin-left: var(--ck-spacing-small); + margin: 0 } & .ck-table-form__dimension-operator { - margin: 0; align-self: start; display: inline-block; height: var(--ck-ui-component-min-height); line-height: var(--ck-ui-component-min-height); + margin: 0 var(--ck-spacing-small); } } } From 56e93257a5a940ca97381b68986f3d58770faca0 Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 2 Mar 2020 11:03:11 +0100 Subject: [PATCH 05/11] Add support RTL to tabelproperties, fix buttons' border-radius and reset margins --- theme/ckeditor5-table/tableproperties.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/theme/ckeditor5-table/tableproperties.css b/theme/ckeditor5-table/tableproperties.css index 1cc01b3..8f84ee7 100644 --- a/theme/ckeditor5-table/tableproperties.css +++ b/theme/ckeditor5-table/tableproperties.css @@ -2,6 +2,7 @@ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ + @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css"; .ck.ck-table-properties-form { width: 320px; @@ -16,6 +17,25 @@ & .ck-toolbar__items > * { width: 40px; } + + & .ck-button { + margin: 0; + + @mixin ck-dir rtl { + &:first-child { + border-radius: var(--ck-border-radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + &:last-child { + border-radius: var(--ck-border-radius); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + } + } } } From 6752738224ee7a4d455dc2743f71098fc5a05674 Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 9 Mar 2020 12:56:09 +0100 Subject: [PATCH 06/11] Fix RTL styling in the table properties --- theme/ckeditor5-table/colorinput.css | 5 +++ theme/ckeditor5-table/tablecellproperties.css | 19 ---------- theme/ckeditor5-table/tableproperties.css | 20 ---------- .../components/toolbar/toolbar.css | 38 +++++++++++++++---- 4 files changed, 35 insertions(+), 47 deletions(-) diff --git a/theme/ckeditor5-table/colorinput.css b/theme/ckeditor5-table/colorinput.css index acf4db1..a7be9b9 100644 --- a/theme/ckeditor5-table/colorinput.css +++ b/theme/ckeditor5-table/colorinput.css @@ -67,6 +67,11 @@ & .ck.ck-icon { margin-right: var(--ck-spacing-standard); + + @mixin ck-dir rtl { + margin-right: 0; + margin-left: var(--ck-spacing-standard); + } } } } diff --git a/theme/ckeditor5-table/tablecellproperties.css b/theme/ckeditor5-table/tablecellproperties.css index 630f506..27bc2ff 100644 --- a/theme/ckeditor5-table/tablecellproperties.css +++ b/theme/ckeditor5-table/tablecellproperties.css @@ -2,7 +2,6 @@ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css"; .ck.ck-table-cell-properties-form { width: 320px; @@ -16,24 +15,6 @@ &.ck-table-cell-properties-form__alignment-row { & .ck.ck-toolbar { background: none; - - & .ck-button { - margin: 0; - - @mixin ck-dir rtl { - &:first-child { - border-radius: var(--ck-border-radius); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &:last-child { - border-radius: var(--ck-border-radius); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - } } } } diff --git a/theme/ckeditor5-table/tableproperties.css b/theme/ckeditor5-table/tableproperties.css index 8f84ee7..1cc01b3 100644 --- a/theme/ckeditor5-table/tableproperties.css +++ b/theme/ckeditor5-table/tableproperties.css @@ -2,7 +2,6 @@ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ - @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css"; .ck.ck-table-properties-form { width: 320px; @@ -17,25 +16,6 @@ & .ck-toolbar__items > * { width: 40px; } - - & .ck-button { - margin: 0; - - @mixin ck-dir rtl { - &:first-child { - border-radius: var(--ck-border-radius); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &:last-child { - border-radius: var(--ck-border-radius); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - } - } } } diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index eb23227..b08fd87 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -67,16 +67,38 @@ /* No spacing between items. */ margin: 0; - /* No rounded corners on the right side of the first child. */ - &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + @mixin ck-dir rtl { + /* Reset margins in RTL as well if toolbar is compact. + This is needed because of the "(#11) Separate toolbar items." override later in the file. */ + margin: 0; } - /* No rounded corners on the left side of the last child. */ - &:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + @mixin ck-dir ltr { + /* No rounded corners on the right side of the first child. */ + &:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + /* No rounded corners on the left side of the last child. */ + &:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + @mixin ck-dir rtl { + /* No rounded corners on the right side of the first child. */ + &:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + /* No rounded corners on the left side of the last child. */ + &:last-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } } /* "Middle" children should have no rounded corners. */ From d8b8e876e88e6fa7f8847d40c98f2d0cca7b131e Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 9 Mar 2020 16:18:56 +0100 Subject: [PATCH 07/11] Code refactoring in compact toolbar styles. --- .../components/toolbar/toolbar.css | 109 +++++++++--------- 1 file changed, 54 insertions(+), 55 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index b08fd87..8872d40 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -39,6 +39,13 @@ } } + & > .ck-toolbar__items > *, + & > .ck.ck-toolbar__grouped-dropdown { + /* Make sure items wrapped to the next line have v-spacing */ + margin-top: var(--ck-spacing-small); + margin-bottom: var(--ck-spacing-small); + } + &.ck-toolbar_vertical { /* Items in a vertical toolbar span the entire width. */ padding: 0; @@ -63,44 +70,10 @@ /* No spacing around items. */ padding: 0; - & .ck-toolbar__items > .ck { - /* No spacing between items. */ + & > .ck-toolbar__items > * { + /* Compact toolbar items have no spacing between them. */ margin: 0; - @mixin ck-dir rtl { - /* Reset margins in RTL as well if toolbar is compact. - This is needed because of the "(#11) Separate toolbar items." override later in the file. */ - margin: 0; - } - - @mixin ck-dir ltr { - /* No rounded corners on the right side of the first child. */ - &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - /* No rounded corners on the left side of the last child. */ - &:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - - @mixin ck-dir rtl { - /* No rounded corners on the right side of the first child. */ - &:first-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - /* No rounded corners on the left side of the last child. */ - &:last-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - /* "Middle" children should have no rounded corners. */ &:not(:first-child):not(:last-child) { border-radius: 0; @@ -108,13 +81,6 @@ } } - & > .ck-toolbar__items > *, - & > .ck.ck-toolbar__grouped-dropdown { - /* Make sure items wrapped to the next line have v-spacing */ - margin-top: var(--ck-spacing-small); - margin-bottom: var(--ck-spacing-small); - } - & > .ck.ck-toolbar__grouped-dropdown { /* * Dropdown button has asymmetric padding to fit the arrow. @@ -130,26 +96,44 @@ } } +/* stylelint-disable */ + /* + * Styles for RTL toolbars. + * * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir" * because its parent is not controlled by the editor framework. */ [dir="rtl"] .ck.ck-toolbar, .ck.ck-toolbar[dir="rtl"] { - & > .ck.ck-toolbar__items { - & > * { - /* (#11) Separate toolbar items. */ - margin-left: var(--ck-spacing-small); - margin-right: 0; - } + & > .ck-toolbar__items > * { + margin-right: 0; - & > *:last-child { + &:last-child { margin-left: 0; } } + &:not(.ck-toolbar_compact) > .ck-toolbar__items > * { + /* (#11) Separate toolbar items. */ + margin-left: var(--ck-spacing-small); + } + + &.ck-toolbar_compact > .ck-toolbar__items > * { + /* No rounded corners on the right side of the first child. */ + &:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + /* No rounded corners on the left side of the last child. */ + &:last-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + /* Separate the the separator form the grouping dropdown when some items are grouped. */ - /* stylelint-disable-next-line no-descending-specificity */ & > .ck.ck-toolbar__separator { margin-left: var(--ck-spacing-small); } @@ -161,19 +145,32 @@ } /* + * Styles for LTR toolbars. + * * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir" * because its parent is not controlled by the editor framework. */ [dir="ltr"] .ck.ck-toolbar, .ck.ck-toolbar[dir="ltr"] { - & > .ck.ck-toolbar__items { - & > *:last-child { - margin-right: 0; + & > .ck-toolbar__items > *:last-child { + margin-right: 0; + } + + &.ck-toolbar_compact > .ck-toolbar__items > * { + /* No rounded corners on the right side of the first child. */ + &:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + /* No rounded corners on the left side of the last child. */ + &:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } } /* Separate the the separator form the grouping dropdown when some items are grouped. */ - /* stylelint-disable-next-line no-descending-specificity */ & > .ck.ck-toolbar__separator { margin-right: var(--ck-spacing-small); } @@ -183,3 +180,5 @@ margin-right: var(--ck-spacing-small); } } + +/* stylelint-enable */ From a201872b764b228d5a8cffee9c3aba5e3ec3189b Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 9 Mar 2020 16:27:04 +0100 Subject: [PATCH 08/11] Adjusted the remove color button styles for big border radius values within the .ck-input-color class. --- theme/ckeditor5-table/colorinput.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/theme/ckeditor5-table/colorinput.css b/theme/ckeditor5-table/colorinput.css index a7be9b9..ae8e17e 100644 --- a/theme/ckeditor5-table/colorinput.css +++ b/theme/ckeditor5-table/colorinput.css @@ -65,6 +65,17 @@ border-bottom: 1px solid var(--ck-color-input-border); padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + @mixin ck-dir ltr { + border-top-right-radius: 0; + } + + @mixin ck-dir rtl { + border-top-left-radius: 0; + } + & .ck.ck-icon { margin-right: var(--ck-spacing-standard); From 186c9cdab21668188c8038c0ceedf88a545d8e6f Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 9 Mar 2020 16:33:09 +0100 Subject: [PATCH 09/11] Improved the .ck-dropdown panel rendering in different positions with high border radius values. --- .../components/dropdown/dropdown.css | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/theme/ckeditor5-ui/components/dropdown/dropdown.css b/theme/ckeditor5-ui/components/dropdown/dropdown.css index ec0d079..6da3c61 100644 --- a/theme/ckeditor5-ui/components/dropdown/dropdown.css +++ b/theme/ckeditor5-ui/components/dropdown/dropdown.css @@ -81,16 +81,28 @@ @mixin ck-rounded-corners; @mixin ck-drop-shadow; - /* Disabled radius of top-left border to be consistent with .dropdown__button - https://github.com/ckeditor/ckeditor5/issues/816 */ - @mixin ck-rounded-corners { - border-top-left-radius: 0; - } - background: var(--ck-color-dropdown-panel-background); border: 1px solid var(--ck-color-dropdown-panel-border); bottom: 0; /* Make sure the panel is at least as wide as the drop-down's button. */ min-width: 100%; + + /* Disabled radius of top-left border to be consistent with .dropdown__button + https://github.com/ckeditor/ckeditor5/issues/816 */ + &.ck-dropdown__panel_se { + border-top-left-radius: 0; + } + + &.ck-dropdown__panel_sw { + border-top-right-radius: 0; + } + + &.ck-dropdown__panel_ne { + border-bottom-left-radius: 0; + } + + &.ck-dropdown__panel_nw { + border-bottom-right-radius: 0; + } } From a1e33bc3fe2ff710167d585e2413abce9b524093 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 9 Mar 2020 16:37:32 +0100 Subject: [PATCH 10/11] Fixed specificity issues in the toolbar component. --- .../components/toolbar/toolbar.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index 8872d40..06a99dd 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -106,20 +106,20 @@ */ [dir="rtl"] .ck.ck-toolbar, .ck.ck-toolbar[dir="rtl"] { - & > .ck-toolbar__items > * { + & > .ck-toolbar__items > .ck { margin-right: 0; - - &:last-child { - margin-left: 0; - } } - &:not(.ck-toolbar_compact) > .ck-toolbar__items > * { + &:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck { /* (#11) Separate toolbar items. */ margin-left: var(--ck-spacing-small); } - &.ck-toolbar_compact > .ck-toolbar__items > * { + & > .ck-toolbar__items > .ck:last-child { + margin-left: 0; + } + + &.ck-toolbar_compact > .ck-toolbar__items > .ck { /* No rounded corners on the right side of the first child. */ &:first-child { border-top-left-radius: 0; @@ -152,11 +152,11 @@ */ [dir="ltr"] .ck.ck-toolbar, .ck.ck-toolbar[dir="ltr"] { - & > .ck-toolbar__items > *:last-child { + & > .ck-toolbar__items > .ck:last-child { margin-right: 0; } - &.ck-toolbar_compact > .ck-toolbar__items > * { + &.ck-toolbar_compact > .ck-toolbar__items > .ck { /* No rounded corners on the right side of the first child. */ &:first-child { border-top-right-radius: 0; From 5fe5e5b202c503f09d88d063ed030f6c9c88b586 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 9 Mar 2020 16:51:23 +0100 Subject: [PATCH 11/11] Docs. --- theme/ckeditor5-ui/components/dropdown/dropdown.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/ckeditor5-ui/components/dropdown/dropdown.css b/theme/ckeditor5-ui/components/dropdown/dropdown.css index 6da3c61..de0adb7 100644 --- a/theme/ckeditor5-ui/components/dropdown/dropdown.css +++ b/theme/ckeditor5-ui/components/dropdown/dropdown.css @@ -88,7 +88,7 @@ /* Make sure the panel is at least as wide as the drop-down's button. */ min-width: 100%; - /* Disabled radius of top-left border to be consistent with .dropdown__button + /* Disabled corner border radius to be consistent with the .dropdown__button https://github.com/ckeditor/ckeditor5/issues/816 */ &.ck-dropdown__panel_se { border-top-left-radius: 0;