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

i/5597: Set margin for toolbar items container only if there's a dropdown with grouped elements #261

Merged
merged 4 commits into from
Feb 26, 2020
Merged

i/5597: Set margin for toolbar items container only if there's a dropdown with grouped elements #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c09afd0
Fix: Set margin to toolbar items container separating it from grouped…
panr Jan 14, 2020
bd6751c
Add additional classes to handle arrow position for 'middle-' positions
panr Feb 24, 2020
a2d11aa
Merge branch 'master' into i/5597
oleq Feb 25, 2020
ee13902
Improved styling of the toolbar grouping dropdown and separators when…
oleq Feb 25, 2020
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
36 changes: 36 additions & 0 deletions theme/ckeditor5-ui/components/panel/balloonpanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}
}
48 changes: 29 additions & 19 deletions theme/ckeditor5-ui/components/toolbar/toolbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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. */
Expand All @@ -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 {
&.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
margin-left: var(--ck-spacing-small);
}
}
Expand All @@ -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 {
&.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
margin-right: var(--ck-spacing-small);
}
}