8
0

dropdown.css 1.1 KB

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