liststyles.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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. :root {
  6. --ck-list-style-button-size: 44px;
  7. }
  8. .ck.ck-list-styles-dropdown > .ck-dropdown__panel > .ck-toolbar {
  9. background: none;
  10. padding: 0;
  11. & > .ck-toolbar__items {
  12. grid-template-columns: repeat( 3, auto );
  13. row-gap: var(--ck-spacing-medium);
  14. column-gap: var(--ck-spacing-medium);
  15. padding: var(--ck-spacing-medium);
  16. & .ck-button {
  17. /* Make the button look like a thumbnail (the icon "takes it all"). */
  18. width: var(--ck-list-style-button-size);
  19. height: var(--ck-list-style-button-size);
  20. padding: 0;
  21. /*
  22. * Buttons are aligned by the grid so disable default button margins to not collide with the
  23. * gaps in the grid.
  24. */
  25. margin: 0;
  26. /*
  27. * Make sure the button border (which is displayed on focus, BTW) does not steal pixels
  28. * from the button dimensions and, as a result, decrease the size of the icon
  29. * (which becomes blurry as it scales down).
  30. */
  31. box-sizing: content-box;
  32. & .ck-icon {
  33. width: var(--ck-list-style-button-size);
  34. height: var(--ck-list-style-button-size);
  35. }
  36. }
  37. }
  38. }