dropdown.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. .ck-dropdown {
  4. display: inline-block;
  5. position: relative;
  6. // A triangle displayed to indicate this is actually a dropdown.
  7. &::after {
  8. content: '';
  9. width: 0;
  10. height: 0;
  11. border-style: solid;
  12. border-width: .4em .4em 0 .4em;
  13. border-color: ck-color( 'text', 30 ) transparent;
  14. pointer-events: none;
  15. position: absolute;
  16. top: 50%;
  17. right: ck-spacing();
  18. z-index: ck-z();
  19. transform: translate( 0, -50% );
  20. }
  21. .ck-button.ck-dropdown__button {
  22. // A space to accommodate the triangle.
  23. padding-right: 2 * ck-spacing();
  24. // #23
  25. .ck-button__label {
  26. width: 7em;
  27. overflow: hidden;
  28. text-overflow: ellipsis;
  29. }
  30. }
  31. }
  32. .ck-dropdown__panel {
  33. // This is to get rid of flickering when the tooltip is shown under the panel,
  34. // which looks like the panel moves vertically a pixel down and up.
  35. -webkit-backface-visibility: hidden;
  36. border: 1px solid ck-border-color( 'foreground' );
  37. display: none;
  38. position: absolute;
  39. left: 0px;
  40. // Compensate double border from button and from box when positioned below the button.
  41. bottom: 2px;
  42. transform: translateY( 100% );
  43. background: ck-color( 'background' );
  44. z-index: ck-z( 'modal' );
  45. @include ck-rounded-corners();
  46. @include ck-dropshadow();
  47. &-visible {
  48. display: inline-block;
  49. }
  50. }