diff --git a/theme/ckeditor5-table/colorinput.css b/theme/ckeditor5-table/colorinput.css index 629f10f..ae8e17e 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); } @@ -48,8 +65,24 @@ 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); + + @mixin ck-dir rtl { + margin-right: 0; + margin-left: var(--ck-spacing-standard); + } } } } 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); + } } } 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); } } } diff --git a/theme/ckeditor5-ui/components/dropdown/dropdown.css b/theme/ckeditor5-ui/components/dropdown/dropdown.css index ec0d079..de0adb7 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 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; + } + + &.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; + } } diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index eb23227..06a99dd 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,22 +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; - /* 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; - } - /* "Middle" children should have no rounded corners. */ &:not(:first-child):not(:last-child) { border-radius: 0; @@ -86,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. @@ -108,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 > .ck { + margin-right: 0; + } + + &:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck { + /* (#11) Separate toolbar items. */ + margin-left: var(--ck-spacing-small); + } + + & > .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; + border-bottom-left-radius: 0; } - & > *:last-child { - margin-left: 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); } @@ -139,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 > .ck:last-child { + margin-right: 0; + } + + &.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; + 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); } @@ -161,3 +180,5 @@ margin-right: var(--ck-spacing-small); } } + +/* stylelint-enable */