splitbutton.css 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  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. /*
  12. * Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest).
  13. */
  14. & > .ck-splitbutton__action {
  15. @nest [dir="ltr"] & {
  16. /* Don't round the action button on the right side */
  17. border-top-right-radius: unset;
  18. border-bottom-right-radius: unset;
  19. }
  20. @nest [dir="rtl"] & {
  21. /* Don't round the action button on the left side */
  22. border-top-left-radius: unset;
  23. border-bottom-left-radius: unset;
  24. }
  25. }
  26. & > .ck-splitbutton__arrow {
  27. /* It's a text-less button and since the icon is positioned absolutely in such situation,
  28. it must get some arbitrary min-width. */
  29. min-width: unset;
  30. @nest [dir="ltr"] & {
  31. /* Don't round the arrow button on the left side */
  32. @mixin ck-rounded-corners {
  33. border-top-left-radius: unset;
  34. border-bottom-left-radius: unset;
  35. }
  36. }
  37. @nest [dir="rtl"] & {
  38. /* Don't round the arrow button on the right side */
  39. border-top-right-radius: unset;
  40. border-bottom-right-radius: unset;
  41. }
  42. & svg {
  43. width: var(--ck-dropdown-arrow-size);
  44. }
  45. }
  46. /* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
  47. as a whole. The background of both buttons should stand out and there should be a visual
  48. separation between both buttons. */
  49. &.ck-splitbutton_open,
  50. &:hover {
  51. /* When the split button hovered as a whole, not as individual buttons. */
  52. & > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
  53. background: var(--ck-color-split-button-hover-background);
  54. }
  55. @nest [dir="ltr"] & {
  56. & > .ck-splitbutton__arrow:not(.ck-disabled) {
  57. border-left-color: var(--ck-color-split-button-hover-border);
  58. }
  59. }
  60. @nest [dir="rtl"] & {
  61. & > .ck-splitbutton__arrow:not(.ck-disabled) {
  62. border-right-color: var(--ck-color-split-button-hover-border);
  63. }
  64. }
  65. }
  66. /* Don't round the bottom left and right corners of the buttons when "open"
  67. https://github.com/ckeditor/ckeditor5/issues/816 */
  68. &.ck-splitbutton_open {
  69. @mixin ck-rounded-corners {
  70. & > .ck-splitbutton__action {
  71. border-bottom-left-radius: 0;
  72. }
  73. & > .ck-splitbutton__arrow {
  74. border-bottom-right-radius: 0;
  75. }
  76. }
  77. }
  78. }