toolbar.css 4.8 KB

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