|
|
@@ -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 */
|
|
|
@@ -15,9 +20,6 @@
|
|
|
}
|
|
|
|
|
|
& > .ck-splitbutton__arrow {
|
|
|
- /* Disable a double border between the button and the arrow button. */
|
|
|
- border-left: 0;
|
|
|
-
|
|
|
/* It's a text-less button but still, it should not be square. */
|
|
|
min-width: unset;
|
|
|
|
|
|
@@ -31,4 +33,19 @@
|
|
|
width: var(--ck-dropdown-arrow-size);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ /* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
|
|
|
+ as a whole. The background of both buttons should stand out and there should be a visual
|
|
|
+ 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: var(--ck-color-split-button-hover-background);
|
|
|
+ }
|
|
|
+
|
|
|
+ & > .ck-splitbutton__arrow {
|
|
|
+ border-left-color: var(--ck-color-split-button-hover-border);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|