8
0

dropdown.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /*
  2. * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. @import "../tooltip/mixins/_tooltip.css";
  6. :root {
  7. --ck-dropdown-icon-size: 10px;
  8. }
  9. .ck-dropdown {
  10. display: inline-block;
  11. position: relative;
  12. & .ck-dropdown__arrow {
  13. pointer-events: none;
  14. z-index: var(--ck-z-default);
  15. position: absolute;
  16. top: 52%;
  17. transform: translate3d( 0, -55%, 0 );
  18. width: var(--ck-dropdown-icon-size);
  19. height: var(--ck-dropdown-icon-size);
  20. min-width: var(--ck-dropdown-icon-size);
  21. min-height: var(--ck-dropdown-icon-size);
  22. }
  23. /* Dropdown button should span horizontally, e.g. in vertical toolbars */
  24. & .ck-button.ck-dropdown__button {
  25. width: 100%;
  26. /* Disable main button's tooltip when the dropdown is open. Otherwise the panel may
  27. partially cover the tooltip */
  28. &.ck-on {
  29. @mixin ck-tooltip_disabled;
  30. }
  31. }
  32. }
  33. .ck-dropdown__panel {
  34. /* This is to get rid of flickering when the tooltip is shown under the panel,
  35. which looks like the panel moves vertically a pixel down and up. */
  36. -webkit-backface-visibility: hidden;
  37. display: none;
  38. z-index: var(--ck-z-modal);
  39. position: absolute;
  40. left: 0px;
  41. transform: translate3d( 0, 100%, 0 );
  42. }
  43. .ck-dropdown__panel-visible {
  44. display: inline-block;
  45. /* This will prevent blurry icons in dropdown on Firefox. See #340. */
  46. will-change: transform;
  47. }