Преглед на файлове

Changed: Make split button in toolbar look like other buttons.

Maciej Gołaszewski преди 8 години
родител
ревизия
f8bcbc4801
променени са 2 файла, в които са добавени 15 реда и са изтрити 3 реда
  1. 14 2
      packages/ckeditor5-ui/theme/components/button/splitbutton.css
  2. 1 1
      packages/ckeditor5-ui/theme/components/toolbar/toolbar.css

+ 14 - 2
packages/ckeditor5-ui/theme/components/button/splitbutton.css

@@ -8,8 +8,18 @@
 	}
 }
 
+.ck-rounded-corners .ck-splitbutton > .ck-button:not(.ck-splitbutton-arrow) {
+	border-top-right-radius: unset;
+	border-bottom-right-radius: unset;
+}
+
+.ck-rounded-corners .ck-splitbutton > .ck-splitbutton-arrow {
+	border-top-left-radius: unset;
+	border-bottom-left-radius: unset;
+}
+
 .ck-splitbutton-arrow {
-	padding-right: var(--ck-spacing-medium);
+	padding-right: var(--ck-spacing-standard);
 
 	& svg {
 		width: 0;
@@ -25,6 +35,8 @@
 
 		position: absolute;
 		top: 50%;
-		transform: translate3d(-50%, -50%, 0);
+		/* To make the triangle appear in the middle of split button the translation in X-axis
+		 * should be adjusted by the half of its width. */
+		transform: translate3d(calc(-50% + 0.2em), -50%, 0);
 	}
 }

+ 1 - 1
packages/ckeditor5-ui/theme/components/toolbar/toolbar.css

@@ -9,7 +9,7 @@
 	@mixin ck-unselectable;
 
 	display: flex;
-	flex-flow: row nowrap; /** TODO: wrap vs nowrap */
+	flex-flow: row wrap;
 	align-items: center;
 
 	&.ck-toolbar_vertical {