浏览代码

Code refactoring in the split button and dropdown. Moved visual styles of the splitbutton from ckeditor5-ui.

Aleksander Nowodzinski 7 年之前
父节点
当前提交
f6d3ba78a4

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

@@ -6,7 +6,7 @@
 		}
 
 		*[id*="icon"] .ck-icon + .ck-icon,
-		*[id*="button"] .ck-button + .ck-button:not(.ck-splitbutton-arrow),
+		*[id*="button"] .ck-button + .ck-button:not(.ck-splitbutton__arrow),
 		*[id*="dropdown"] .ck-dropdown + .ck-dropdown {
 			margin-left: 0.3em;
 		}

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -8,7 +8,7 @@
 @import "../../../mixins/_shadow.css";
 
 :root {
-	--ck-dropdown-icon-size: calc(0.5 * var(--ck-icon-size));
+	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
 }
 
 .ck-dropdown {
@@ -17,7 +17,7 @@
 
 	& .ck-dropdown__arrow {
 		right: var(--ck-spacing-standard);
-		width: var(--ck-dropdown-icon-size);
+		width: var(--ck-dropdown-arrow-size);
 	}
 
 	&.ck-disabled .ck-dropdown__arrow {

+ 31 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+.ck-splitbutton {
+	& > .ck-splitbutton__action {
+		/* Don't round the first button on the right side */
+		@mixin ck-rounded-corners {
+			border-top-right-radius: unset;
+			border-bottom-right-radius: unset;
+		}
+	}
+
+	& > .ck-splitbutton__arrow {
+		/* Disable a double border between the button and the arrow button. */
+		border-left: 0;
+
+		/* Don't round the arrow button on the right side */
+		@mixin ck-rounded-corners {
+			border-top-left-radius: unset;
+			border-bottom-left-radius: unset;
+		}
+
+		& svg {
+			width: var(--ck-dropdown-arrow-size);
+		}
+	}
+}