8
0

dropdown.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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 "../tooltip/mixins/_tooltip.css";
  6. .ck.ck-dropdown {
  7. display: inline-block;
  8. position: relative;
  9. & .ck-dropdown__arrow {
  10. pointer-events: none;
  11. z-index: var(--ck-z-default);
  12. }
  13. /* Dropdown button should span horizontally, e.g. in vertical toolbars */
  14. & .ck-button.ck-dropdown__button {
  15. width: 100%;
  16. /* Disable main button's tooltip when the dropdown is open. Otherwise the panel may
  17. partially cover the tooltip */
  18. &.ck-on {
  19. @mixin ck-tooltip_disabled;
  20. }
  21. }
  22. & .ck-dropdown__panel {
  23. /* This is to get rid of flickering when the tooltip is shown under the panel,
  24. which looks like the panel moves vertically a pixel down and up. */
  25. -webkit-backface-visibility: hidden;
  26. display: none;
  27. z-index: var(--ck-z-modal);
  28. position: absolute;
  29. &.ck-dropdown__panel-visible {
  30. display: inline-block;
  31. }
  32. &.ck-dropdown__panel_ne,
  33. &.ck-dropdown__panel_nw {
  34. bottom: 100%;
  35. }
  36. &.ck-dropdown__panel_se,
  37. &.ck-dropdown__panel_sw {
  38. /*
  39. * Using transform: translate3d( 0, 100%, 0 ) causes blurry dropdown on Chrome 67-78+ on non-retina displays.
  40. * See https://github.com/ckeditor/ckeditor5/issues/1053.
  41. */
  42. top: 100%;
  43. bottom: auto;
  44. }
  45. &.ck-dropdown__panel_ne,
  46. &.ck-dropdown__panel_se {
  47. left: 0px;
  48. }
  49. &.ck-dropdown__panel_nw,
  50. &.ck-dropdown__panel_sw {
  51. right: 0px;
  52. }
  53. }
  54. }