8
0

toolbar.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  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. @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.ck-toolbar__separator {
  13. align-self: stretch;
  14. width: 1px;
  15. min-width: 1px;
  16. background: var(--ck-color-toolbar-border);
  17. /*
  18. * These margins make the separators look better in balloon toolbars (when aligned with the "tip").
  19. * See https://github.com/ckeditor/ckeditor5/issues/7493.
  20. */
  21. margin-top: var(--ck-spacing-small);
  22. margin-bottom: var(--ck-spacing-small);
  23. }
  24. & > .ck-toolbar__items {
  25. & > * {
  26. /* Make sure items wrapped to the next line have v-spacing */
  27. margin-top: var(--ck-spacing-small);
  28. margin-bottom: var(--ck-spacing-small);
  29. /* (#11) Separate toolbar items. */
  30. margin-right: var(--ck-spacing-small);
  31. }
  32. /* Don't display a separator after an empty items container, for instance,
  33. when all items were grouped */
  34. &:empty + .ck.ck-toolbar__separator {
  35. display: none;
  36. }
  37. }
  38. & > .ck-toolbar__items > *,
  39. & > .ck.ck-toolbar__grouped-dropdown {
  40. /* Make sure items wrapped to the next line have v-spacing */
  41. margin-top: var(--ck-spacing-small);
  42. margin-bottom: var(--ck-spacing-small);
  43. }
  44. &.ck-toolbar_vertical {
  45. /* Items in a vertical toolbar span the entire width. */
  46. padding: 0;
  47. /* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */
  48. & > .ck-toolbar__items > .ck {
  49. /* Items in a vertical toolbar should span the horizontal space. */
  50. width: 100%;
  51. /* Items in a vertical toolbar should have no margin. */
  52. margin: 0;
  53. /* Items in a vertical toolbar span the entire width so rounded corners are pointless. */
  54. border-radius: 0;
  55. /* Items in a vertical toolbar span the entire width so any border is pointless. */
  56. border: 0;
  57. }
  58. }
  59. &.ck-toolbar_compact {
  60. /* No spacing around items. */
  61. padding: 0;
  62. & > .ck-toolbar__items > * {
  63. /* Compact toolbar items have no spacing between them. */
  64. margin: 0;
  65. /* "Middle" children should have no rounded corners. */
  66. &:not(:first-child):not(:last-child) {
  67. border-radius: 0;
  68. }
  69. }
  70. }
  71. & > .ck.ck-toolbar__grouped-dropdown {
  72. /*
  73. * Dropdown button has asymmetric padding to fit the arrow.
  74. * This button has no arrow so let's revert that padding back to normal.
  75. */
  76. & > .ck.ck-button.ck-dropdown__button {
  77. padding-left: var(--ck-spacing-tiny);
  78. }
  79. }
  80. @nest .ck-toolbar-container & {
  81. border: 0;
  82. }
  83. }
  84. /* stylelint-disable */
  85. /*
  86. * Styles for RTL toolbars.
  87. *
  88. * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
  89. * because its parent is not controlled by the editor framework.
  90. */
  91. [dir="rtl"] .ck.ck-toolbar,
  92. .ck.ck-toolbar[dir="rtl"] {
  93. & > .ck-toolbar__items > .ck {
  94. margin-right: 0;
  95. }
  96. &:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck {
  97. /* (#11) Separate toolbar items. */
  98. margin-left: var(--ck-spacing-small);
  99. }
  100. & > .ck-toolbar__items > .ck:last-child {
  101. margin-left: 0;
  102. }
  103. &.ck-toolbar_compact > .ck-toolbar__items > .ck {
  104. /* No rounded corners on the right side of the first child. */
  105. &:first-child {
  106. border-top-left-radius: 0;
  107. border-bottom-left-radius: 0;
  108. }
  109. /* No rounded corners on the left side of the last child. */
  110. &:last-child {
  111. border-top-right-radius: 0;
  112. border-bottom-right-radius: 0;
  113. }
  114. }
  115. /* Separate the the separator form the grouping dropdown when some items are grouped. */
  116. & > .ck.ck-toolbar__separator {
  117. margin-left: var(--ck-spacing-small);
  118. }
  119. /* Some spacing between the items and the separator before the grouped items dropdown. */
  120. &.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
  121. margin-left: var(--ck-spacing-small);
  122. }
  123. }
  124. /*
  125. * Styles for LTR toolbars.
  126. *
  127. * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
  128. * because its parent is not controlled by the editor framework.
  129. */
  130. [dir="ltr"] .ck.ck-toolbar,
  131. .ck.ck-toolbar[dir="ltr"] {
  132. & > .ck-toolbar__items > .ck:last-child {
  133. margin-right: 0;
  134. }
  135. &.ck-toolbar_compact > .ck-toolbar__items > .ck {
  136. /* No rounded corners on the right side of the first child. */
  137. &:first-child {
  138. border-top-right-radius: 0;
  139. border-bottom-right-radius: 0;
  140. }
  141. /* No rounded corners on the left side of the last child. */
  142. &:last-child {
  143. border-top-left-radius: 0;
  144. border-bottom-left-radius: 0;
  145. }
  146. }
  147. /* Separate the the separator form the grouping dropdown when some items are grouped. */
  148. & > .ck.ck-toolbar__separator {
  149. margin-right: var(--ck-spacing-small);
  150. }
  151. /* Some spacing between the items and the separator before the grouped items dropdown. */
  152. &.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
  153. margin-right: var(--ck-spacing-small);
  154. }
  155. }
  156. /* stylelint-enable */