瀏覽代碼

Used variables for split button's state styles.

Aleksander Nowodzinski 7 年之前
父節點
當前提交
a143cb7ac6
共有 1 個文件被更改,包括 8 次插入2 次删除
  1. 8 2
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css

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

@@ -5,6 +5,11 @@
 
 @import "../../../mixins/_rounded.css";
 
+:root {
+	--ck-color-split-button-hover-background: hsl(0, 0%, 92%);
+	--ck-color-split-button-hover-border: hsl(0, 0%, 70%);
+}
+
 .ck-splitbutton {
 	& > .ck-splitbutton__action {
 		/* Don't round the first button on the right side */
@@ -34,12 +39,13 @@
 	separation between both buttons. */
 	&.ck-splitbutton_open,
 	&:hover {
+		/* When the split button hovered as a whole, not as individual buttons. */
 		& > .ck-button:not(.ck-on):not(:hover) {
-			background: hsl(0, 0%, 92%);
+			background: var(--ck-color-split-button-hover-background);
 		}
 
 		& > .ck-splitbutton__arrow {
-			border-left-color: hsl(0, 0%, 70%);
+			border-left-color: var(--ck-color-split-button-hover-border);
 		}
 	}
 }