|
@@ -13,22 +13,14 @@
|
|
|
padding: 0 var(--ck-spacing-small);
|
|
padding: 0 var(--ck-spacing-small);
|
|
|
border: 1px solid var(--ck-color-toolbar-border);
|
|
border: 1px solid var(--ck-color-toolbar-border);
|
|
|
|
|
|
|
|
- & > * {
|
|
|
|
|
- /* Make sure items wrapped to the next line have v-spacing */
|
|
|
|
|
- margin-top: var(--ck-spacing-small);
|
|
|
|
|
- margin-bottom: var(--ck-spacing-small);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- & > * {
|
|
|
|
|
- /* (#11) Separate toolbar items. */
|
|
|
|
|
- margin-right: var(--ck-spacing-small);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- @mixin ck-dir rtl {
|
|
|
|
|
|
|
+ & > .ck-toolbar__items {
|
|
|
& > * {
|
|
& > * {
|
|
|
|
|
+ /* Make sure items wrapped to the next line have v-spacing */
|
|
|
|
|
+ margin-top: var(--ck-spacing-small);
|
|
|
|
|
+ margin-bottom: var(--ck-spacing-small);
|
|
|
|
|
+
|
|
|
/* (#11) Separate toolbar items. */
|
|
/* (#11) Separate toolbar items. */
|
|
|
- margin-left: var(--ck-spacing-small);
|
|
|
|
|
- margin-right: 0;
|
|
|
|
|
|
|
+ margin-right: var(--ck-spacing-small);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -37,7 +29,7 @@
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
|
|
|
|
|
/* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */
|
|
/* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */
|
|
|
- & > .ck {
|
|
|
|
|
|
|
+ & > .ck-toolbar__items > .ck {
|
|
|
/* Items in a vertical toolbar should span the horizontal space. */
|
|
/* Items in a vertical toolbar should span the horizontal space. */
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
|
|
|
@@ -52,31 +44,83 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- @mixin ck-dir ltr {
|
|
|
|
|
- & > *:last-child {
|
|
|
|
|
- margin-right: 0;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ & > .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);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- @mixin ck-dir rtl {
|
|
|
|
|
- & > *:last-child {
|
|
|
|
|
- margin-left: 0;
|
|
|
|
|
|
|
+ & > .ck.ck-toolbar__grouped-dropdown {
|
|
|
|
|
+ /*
|
|
|
|
|
+ * Dropdown button has asymmetric padding to fit the arrow.
|
|
|
|
|
+ * This button has no arrow so let's revert that padding back to normal.
|
|
|
|
|
+ */
|
|
|
|
|
+ & > .ck.ck-button.ck-dropdown__button {
|
|
|
|
|
+ padding-left: var(--ck-spacing-tiny);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ & .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 & {
|
|
@nest .ck-toolbar-container & {
|
|
|
border: 0;
|
|
border: 0;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.ck.ck-toolbar__separator {
|
|
|
|
|
- align-self: stretch;
|
|
|
|
|
- width: 1px;
|
|
|
|
|
- margin-top: 0;
|
|
|
|
|
- margin-bottom: 0;
|
|
|
|
|
- background: var(--ck-color-toolbar-border);
|
|
|
|
|
|
|
+/*
|
|
|
|
|
+ * 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__grouped-dropdown {
|
|
|
|
|
+ padding-left: var(--ck-spacing-small);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ & > .ck.ck-toolbar__items {
|
|
|
|
|
+ & > *:last-child {
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* Some spacing between the items and the separator before the grouped items dropdown. */
|
|
|
|
|
+ &.ck-toolbar_grouping > .ck-toolbar__items {
|
|
|
|
|
+ margin-right: var(--ck-spacing-small);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.ck.ck-toolbar__newline {
|
|
|
|
|
- margin: 0;
|
|
|
|
|
|
|
+/*
|
|
|
|
|
+ * 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__grouped-dropdown {
|
|
|
|
|
+ padding-right: var(--ck-spacing-small);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ & > .ck.ck-toolbar__items {
|
|
|
|
|
+ & > * {
|
|
|
|
|
+ /* (#11) Separate toolbar items. */
|
|
|
|
|
+ margin-left: var(--ck-spacing-small);
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ & > *:last-child {
|
|
|
|
|
+ margin-left: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* Some spacing between the items and the separator before the grouped items dropdown. */
|
|
|
|
|
+ &.ck-toolbar_grouping > .ck-toolbar__items {
|
|
|
|
|
+ margin-left: var(--ck-spacing-small);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|