dropdown.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. /* A triangle displayed to indicate this is actually a dropdown. */
  13. & .ck-dropdown__arrow {
  14. pointer-events: none;
  15. z-index: var(--ck-z-default);
  16. position: absolute;
  17. top: 52%;
  18. transform: translate3d( 0, -55%, 0 );
  19. width: var(--ck-dropdown-icon-size);
  20. height: var(--ck-dropdown-icon-size);
  21. min-width: var(--ck-dropdown-icon-size);
  22. min-height: var(--ck-dropdown-icon-size);
  23. }
  24. /* Dropdown button should span horizontally, e.g. in vertical toolbars */
  25. & .ck-button.ck-dropdown__button {
  26. width: 100%;
  27. /* Disable main button's tooltip when the dropdown is open. Otherwise the panel may
  28. partially cover the tooltip */
  29. &.ck-on {
  30. @mixin ck-tooltip_disabled;
  31. }
  32. }
  33. }
  34. .ck-dropdown__panel {
  35. /* This is to get rid of flickering when the tooltip is shown under the panel,
  36. which looks like the panel moves vertically a pixel down and up. */
  37. -webkit-backface-visibility: hidden;
  38. display: none;
  39. z-index: var(--ck-z-modal);
  40. position: absolute;
  41. left: 0px;
  42. transform: translate3d( 0, 100%, 0 );
  43. }
  44. .ck-dropdown__panel-visible {
  45. display: inline-block;
  46. /* This will prevent blurry icons in dropdown on Firefox. See #340. */
  47. will-change: transform;
  48. }