toolbar.css 2.1 KB

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