Parcourir la source

Style improvements in the toolbar component.

Aleksander Nowodzinski il y a 6 ans
Parent
commit
f1527fe031

+ 38 - 20
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -18,30 +18,10 @@
 			/* Make sure items wrapped to the next line have v-spacing */
 			/* Make sure items wrapped to the next line have v-spacing */
 			margin-top: var(--ck-spacing-small);
 			margin-top: var(--ck-spacing-small);
 			margin-bottom: var(--ck-spacing-small);
 			margin-bottom: var(--ck-spacing-small);
-		}
 
 
-		& > * {
 			/* (#11) Separate toolbar items. */
 			/* (#11) Separate toolbar items. */
 			margin-right: var(--ck-spacing-small);
 			margin-right: var(--ck-spacing-small);
 		}
 		}
-
-		@mixin ck-dir rtl {
-			& > * {
-				/* (#11) Separate toolbar items. */
-				margin-left: var(--ck-spacing-small);
-				margin-right: 0;
-			}
-
-			& > *:last-child {
-				margin-left: 0;
-			}
-		}
-
-		@mixin ck-dir ltr {
-			& > *:last-child {
-				margin-right: 0;
-			}
-		}
 	}
 	}
 
 
 	&.ck-toolbar_vertical {
 	&.ck-toolbar_vertical {
@@ -71,6 +51,16 @@
 		margin-bottom: var(--ck-spacing-small);
 		margin-bottom: var(--ck-spacing-small);
 	}
 	}
 
 
+	& > .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 {
 	& .ck.ck-toolbar__separator {
 		align-self: stretch;
 		align-self: stretch;
 		width: 1px;
 		width: 1px;
@@ -94,6 +84,17 @@
 	& > .ck.ck-toolbar__grouped-dropdown {
 	& > .ck.ck-toolbar__grouped-dropdown {
 		padding-left: var(--ck-spacing-small);
 		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);
+	}
 }
 }
 
 
 /*
 /*
@@ -105,4 +106,21 @@
 	& > .ck.ck-toolbar__grouped-dropdown {
 	& > .ck.ck-toolbar__grouped-dropdown {
 		padding-right: var(--ck-spacing-small);
 		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);
+	}
 }
 }