toolbar.css 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /*
  2. * Copyright (c) 2003-2019, 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. @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
  7. .ck.ck-toolbar {
  8. @mixin ck-rounded-corners;
  9. background: var(--ck-color-toolbar-background);
  10. padding: 0 var(--ck-spacing-small);
  11. border: 1px solid var(--ck-color-toolbar-border);
  12. & > * {
  13. /* Make sure items wrapped to the next line have v-spacing */
  14. margin-top: var(--ck-spacing-small);
  15. margin-bottom: var(--ck-spacing-small);
  16. }
  17. @mixin ck-dir ltr {
  18. & > * {
  19. /* (#11) Separate toolbar items. */
  20. margin-right: var(--ck-spacing-small);
  21. }
  22. }
  23. @mixin ck-dir rtl {
  24. & > * {
  25. /* (#11) Separate toolbar items. */
  26. margin-left: var(--ck-spacing-small);
  27. }
  28. }
  29. &.ck-toolbar_vertical {
  30. /* Items in a vertical toolbar span the entire width. */
  31. padding: 0;
  32. /* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */
  33. & > .ck {
  34. /* Items in a vertical toolbar should span the horizontal space. */
  35. width: 100%;
  36. /* Items in a vertical toolbar should have no margin. */
  37. margin: 0;
  38. /* Items in a vertical toolbar span the entire width so rounded corners are pointless. */
  39. border-radius: 0;
  40. /* Items in a vertical toolbar span the entire width so any border is pointless. */
  41. border: 0;
  42. }
  43. }
  44. @mixin ck-dir ltr {
  45. & > *:last-child {
  46. margin-right: 0;
  47. }
  48. }
  49. @mixin ck-dir rtl {
  50. & > *:last-child {
  51. margin-left: 0;
  52. }
  53. }
  54. @nest .ck-toolbar-container & {
  55. border: 0;
  56. }
  57. }
  58. .ck.ck-toolbar__separator {
  59. align-self: stretch;
  60. width: 1px;
  61. margin-top: 0;
  62. margin-bottom: 0;
  63. background: var(--ck-color-toolbar-border);
  64. }
  65. .ck.ck-toolbar__newline {
  66. margin: 0;
  67. }