dropdown.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /*
  2. * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. @import "../../helpers/colors.css";
  6. @import "../../helpers/rounded.css";
  7. @import "../../helpers/spacing.css";
  8. @import "../../helpers/states.css";
  9. @import "../../helpers/shadow.css";
  10. .ck-dropdown {
  11. /* Enable font size inheritance, which allows fluid UI scaling. */
  12. font-size: inherit;
  13. /* A triangle displayed to indicate this is actually a dropdown. */
  14. &::after {
  15. border-style: solid;
  16. border-width: .4em .4em 0 .4em;
  17. border-color: var(--ck-color-dropdown-symbol) transparent;
  18. right: var(--ck-spacing-standard);
  19. }
  20. & .ck-button.ck-dropdown__button {
  21. /* A space to accommodate the triangle. */
  22. padding-right: calc(2 * var(--ck-spacing-standard));
  23. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
  24. &.ck-disabled .ck-button__label {
  25. @mixin ck-disabled;
  26. }
  27. /* #23 */
  28. & .ck-button__label {
  29. width: 7em;
  30. overflow: hidden;
  31. text-overflow: ellipsis;
  32. }
  33. }
  34. }
  35. .ck-dropdown__panel {
  36. @mixin ck-rounded-corners;
  37. @mixin ck-drop-shadow;
  38. background: var(--ck-color-dropdown-panel-background);
  39. border: 1px solid var(--ck-color-dropdown-panel-border);
  40. /* Compensate double border from button and from box when positioned below the button. */
  41. bottom: 1px;
  42. }