charactergrid.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  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 "../mixins/_rounded.css";
  6. :root {
  7. --ck-character-grid-tile-size: 24px;
  8. }
  9. .ck.ck-character-grid {
  10. overflow-y: auto;
  11. overflow-x: hidden;
  12. width: 350px;
  13. max-height: 200px;
  14. & .ck-character-grid__tiles {
  15. margin: var(--ck-spacing-standard) var(--ck-spacing-large);
  16. grid-gap: var(--ck-spacing-standard);
  17. }
  18. & .ck-character-grid__tile {
  19. width: var(--ck-character-grid-tile-size);
  20. height: var(--ck-character-grid-tile-size);
  21. min-width: var(--ck-character-grid-tile-size);
  22. min-height: var(--ck-character-grid-tile-size);
  23. font-size: 1.2em;
  24. padding: 0;
  25. transition: .2s ease box-shadow;
  26. border: 0;
  27. &:focus:not( .ck-disabled ),
  28. &:hover:not( .ck-disabled ) {
  29. /* Disable the default .ck-button's border ring. */
  30. border: 0;
  31. box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
  32. }
  33. /* Make sure the glyph is rendered in the center of the button */
  34. & .ck-button__label {
  35. line-height: var(--ck-character-grid-tile-size);
  36. width: 100%;
  37. text-align: center;
  38. }
  39. }
  40. }