8
0

splitbutton.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. /*
  2. * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. @import "../../../mixins/_rounded.css";
  6. .ck-splitbutton {
  7. & > .ck-splitbutton__action {
  8. /* Don't round the first button on the right side */
  9. @mixin ck-rounded-corners {
  10. border-top-right-radius: unset;
  11. border-bottom-right-radius: unset;
  12. }
  13. }
  14. & > .ck-splitbutton__arrow {
  15. /* It's a text-less button but still, it should not be square. */
  16. min-width: unset;
  17. /* Don't round the arrow button on the right side */
  18. @mixin ck-rounded-corners {
  19. border-top-left-radius: unset;
  20. border-bottom-left-radius: unset;
  21. }
  22. & svg {
  23. width: var(--ck-dropdown-arrow-size);
  24. }
  25. }
  26. /* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
  27. as a whole. The background of both buttons should stand out and there should be a visual
  28. separation between both buttons. */
  29. &.ck-splitbutton_open,
  30. &:hover {
  31. & > .ck-button:not(.ck-on):not(:hover) {
  32. background: hsl(0, 0%, 92%);
  33. }
  34. & > .ck-splitbutton__arrow {
  35. border-left-color: hsl(0, 0%, 70%);
  36. }
  37. }
  38. }