Merge pull request #243 from ckeditor/t/ckeditor5/416d

Other: Adjusted toolbar styles to allow automatic items grouping (see ckeditor/ckeditor5#416).

theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -13,22 +13,14 @@
 	padding: 0 var(--ck-spacing-small);
 	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. */
-			margin-left: var(--ck-spacing-small);
-			margin-right: 0;
+			margin-right: var(--ck-spacing-small);
 		}
 	}
 
@@ -37,7 +29,7 @@
 		padding: 0;
 
 		/* 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. */
 			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 & {
 		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);
+	}
 }