splitbutton.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. :root {
  7. --ck-color-split-button-hover-background: hsl(0, 0%, 92%);
  8. --ck-color-split-button-hover-border: hsl(0, 0%, 70%);
  9. }
  10. .ck.ck-splitbutton {
  11. & > .ck-splitbutton__action {
  12. /* Don't round the first button on the right side */
  13. @mixin ck-rounded-corners {
  14. border-top-right-radius: unset;
  15. border-bottom-right-radius: unset;
  16. }
  17. }
  18. & > .ck-splitbutton__arrow {
  19. /* It's a text-less button and since the icon is positioned absolutely in such situation,
  20. it must get some arbitrary min-width. */
  21. min-width: unset;
  22. /* Don't round the arrow button on the right side */
  23. @mixin ck-rounded-corners {
  24. border-top-left-radius: unset;
  25. border-bottom-left-radius: unset;
  26. }
  27. & svg {
  28. width: var(--ck-dropdown-arrow-size);
  29. }
  30. }
  31. /* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
  32. as a whole. The background of both buttons should stand out and there should be a visual
  33. separation between both buttons. */
  34. &.ck-splitbutton_open,
  35. &:hover {
  36. /* When the split button hovered as a whole, not as individual buttons. */
  37. & > .ck-button:not(.ck-on):not(:hover) {
  38. background: var(--ck-color-split-button-hover-background);
  39. }
  40. & > .ck-splitbutton__arrow {
  41. border-left-color: var(--ck-color-split-button-hover-border);
  42. }
  43. }
  44. /* Don't round the bottom left and right corners of the buttons when "open"
  45. https://github.com/ckeditor/ckeditor5/issues/816 */
  46. &.ck-splitbutton_open {
  47. @mixin ck-rounded-corners {
  48. & > .ck-splitbutton__action {
  49. border-bottom-left-radius: 0;
  50. }
  51. & > .ck-splitbutton__arrow {
  52. border-bottom-right-radius: 0;
  53. }
  54. }
  55. }
  56. }