From c09afd0bd9035c228124e9ba4037741737cf2b85 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 14 Jan 2020 12:27:28 +0100 Subject: [PATCH 1/3] Fix: Set margin to toolbar items container separating it from grouped dropdown only if it's an only child --- theme/ckeditor5-ui/components/toolbar/toolbar.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index 8ef124c..4e6daa0 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -98,7 +98,7 @@ } /* Some spacing between the items and the separator before the grouped items dropdown. */ - &.ck-toolbar_grouping > .ck-toolbar__items { + &.ck-toolbar_grouping > .ck-toolbar__items:not(:only-child) { margin-left: var(--ck-spacing-small); } } @@ -120,7 +120,7 @@ } /* Some spacing between the items and the separator before the grouped items dropdown. */ - &.ck-toolbar_grouping > .ck-toolbar__items { + &.ck-toolbar_grouping > .ck-toolbar__items:not(:only-child) { margin-right: var(--ck-spacing-small); } } From bd6751c02dbbeb080dc39ed6c60888e7fb0c7271 Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 24 Feb 2020 16:48:27 +0100 Subject: [PATCH 2/3] Add additional classes to handle arrow position for 'middle-' positions --- .../components/panel/balloonpanel.css | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/theme/ckeditor5-ui/components/panel/balloonpanel.css b/theme/ckeditor5-ui/components/panel/balloonpanel.css index 35ebcf7..dc9666a 100644 --- a/theme/ckeditor5-ui/components/panel/balloonpanel.css +++ b/theme/ckeditor5-ui/components/panel/balloonpanel.css @@ -111,4 +111,40 @@ bottom: calc(-1 * var(--ck-balloon-arrow-height)); } } + + &.ck-balloon-panel_arrow_sme { + &::before, + &::after { + right: 25%; + margin-right: calc(2 * var(--ck-balloon-arrow-half-width)); + bottom: calc(-1 * var(--ck-balloon-arrow-height)); + } + } + + &.ck-balloon-panel_arrow_smw { + &::before, + &::after { + left: 25%; + margin-left: calc(2 * var(--ck-balloon-arrow-half-width)); + bottom: calc(-1 * var(--ck-balloon-arrow-height)); + } + } + + &.ck-balloon-panel_arrow_nme { + &::before, + &::after { + right: 25%; + margin-right: calc(2 * var(--ck-balloon-arrow-half-width)); + top: calc(-1 * var(--ck-balloon-arrow-height)); + } + } + + &.ck-balloon-panel_arrow_nmw { + &::before, + &::after { + left: 25%; + margin-left: calc(2 * var(--ck-balloon-arrow-half-width)); + top: calc(-1 * var(--ck-balloon-arrow-height)); + } + } } From ee139028a330ccc576aa6d028807c3b6ba0dd10e Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 25 Feb 2020 13:01:51 +0100 Subject: [PATCH 3/3] Improved styling of the toolbar grouping dropdown and separators when its grouping items. --- .../components/toolbar/toolbar.css | 48 +++++++++++-------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css index 26ce195..eb23227 100644 --- a/theme/ckeditor5-ui/components/toolbar/toolbar.css +++ b/theme/ckeditor5-ui/components/toolbar/toolbar.css @@ -13,6 +13,15 @@ padding: 0 var(--ck-spacing-small); border: 1px solid var(--ck-color-toolbar-border); + & .ck.ck-toolbar__separator { + align-self: stretch; + width: 1px; + min-width: 1px; + margin-top: 0; + margin-bottom: 0; + background: var(--ck-color-toolbar-border); + } + & > .ck-toolbar__items { & > * { /* Make sure items wrapped to the next line have v-spacing */ @@ -22,6 +31,12 @@ /* (#11) Separate toolbar items. */ margin-right: var(--ck-spacing-small); } + + /* Don't display a separator after an empty items container, for instance, + when all items were grouped */ + &:empty + .ck.ck-toolbar__separator { + display: none; + } } &.ck-toolbar_vertical { @@ -88,15 +103,6 @@ } } - & .ck.ck-toolbar__separator { - align-self: stretch; - width: 1px; - min-width: 1px; - margin-top: 0; - margin-bottom: 0; - background: var(--ck-color-toolbar-border); - } - @nest .ck-toolbar-container & { border: 0; } @@ -108,10 +114,6 @@ */ [dir="rtl"] .ck.ck-toolbar, .ck.ck-toolbar[dir="rtl"] { - & > .ck.ck-toolbar__grouped-dropdown { - padding-right: var(--ck-spacing-small); - } - & > .ck.ck-toolbar__items { & > * { /* (#11) Separate toolbar items. */ @@ -124,8 +126,14 @@ } } + /* 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); + } + /* Some spacing between the items and the separator before the grouped items dropdown. */ - &.ck-toolbar_grouping > .ck-toolbar__items:not(:only-child) { + &.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) { margin-left: var(--ck-spacing-small); } } @@ -136,18 +144,20 @@ */ [dir="ltr"] .ck.ck-toolbar, .ck.ck-toolbar[dir="ltr"] { - & > .ck.ck-toolbar__grouped-dropdown { - padding-left: var(--ck-spacing-small); - } - & > .ck.ck-toolbar__items { & > *:last-child { margin-right: 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); + } + /* Some spacing between the items and the separator before the grouped items dropdown. */ - &.ck-toolbar_grouping > .ck-toolbar__items:not(:only-child) { + &.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) { margin-right: var(--ck-spacing-small); } }