Parcourir la source

Visually separated toolbar items with an empty space.

Aleksander Nowodzinski il y a 9 ans
Parent
commit
7619b78178

+ 1 - 2
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -8,8 +8,7 @@
 
 		*[id^="icon"] .ck-icon + .ck-icon,
 		*[id^="button"] .ck-button + .ck-button,
-		*[id^="dropdown"] .ck-dropdown + .ck-dropdown,
-		*[id^="toolbar"] .ck-button + .ck-button {
+		*[id^="dropdown"] .ck-dropdown + .ck-dropdown {
 			margin-left: 0.3em;
 		}
 

+ 1 - 1
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -13,7 +13,6 @@
 	cursor: pointer;
 	vertical-align: middle;
 	line-height: $ck-icon-size / $ck-font-size-base;
-	padding: ck-spacing( 'small' ) ck-spacing();
 	position: relative;
 
 	@include ck-button-colors( $color );
@@ -68,6 +67,7 @@
 a.ck-button {
 	display: inline-block;
 	overflow: hidden;
+	padding: ck-spacing( 'small' ) ck-spacing();
 
 	@include ck-button( 'background' );
 	@include ck-unselectable();

+ 5 - 1
packages/ckeditor5-theme-lark/theme/components/toolbar.scss

@@ -16,7 +16,6 @@
 		vertical-align: middle;
 		display: inline-block;
 		background: ck-border-color();
-		margin: 0 ck-spacing( 'tiny' );
 	}
 
 	&-newline {
@@ -24,4 +23,9 @@
 		clear: left;
 		height: ck-spacing( 'small' );
 	}
+
+	// (#11) Separate toolbar items.
+	& > * + * {
+		margin-left: ck-spacing( 'small' );
+	}
 }