| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- /*
- * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- @import "../../../mixins/_rounded.css";
- @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
- .ck.ck-toolbar {
- @mixin ck-rounded-corners;
- background: var(--ck-color-toolbar-background);
- padding: 0 var(--ck-spacing-small);
- border: 1px solid var(--ck-color-toolbar-border);
- & .ck.ck-toolbar__separator {
- align-self: stretch;
- width: 1px;
- min-width: 1px;
- background: var(--ck-color-toolbar-border);
- /*
- * These margins make the separators look better in balloon toolbars (when aligned with the "tip").
- * See https://github.com/ckeditor/ckeditor5/issues/7493.
- */
- margin-top: var(--ck-spacing-small);
- margin-bottom: var(--ck-spacing-small);
- }
- & > .ck-toolbar__items {
- & > * {
- /* Make sure items wrapped to the next line have v-spacing */
- margin-top: var(--ck-spacing-small);
- margin-bottom: var(--ck-spacing-small);
- /* (#11) Separate toolbar items. */
- margin-right: var(--ck-spacing-small);
- }
- /* Don't display a separator after an empty items container, for instance,
- when all items were grouped */
- &:empty + .ck.ck-toolbar__separator {
- display: none;
- }
- }
- & > .ck-toolbar__items > *,
- & > .ck.ck-toolbar__grouped-dropdown {
- /* Make sure items wrapped to the next line have v-spacing */
- margin-top: var(--ck-spacing-small);
- margin-bottom: var(--ck-spacing-small);
- }
- &.ck-toolbar_vertical {
- /* Items in a vertical toolbar span the entire width. */
- padding: 0;
- /* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */
- & > .ck-toolbar__items > .ck {
- /* Items in a vertical toolbar should span the horizontal space. */
- width: 100%;
- /* Items in a vertical toolbar should have no margin. */
- margin: 0;
- /* Items in a vertical toolbar span the entire width so rounded corners are pointless. */
- border-radius: 0;
- /* Items in a vertical toolbar span the entire width so any border is pointless. */
- border: 0;
- }
- }
- &.ck-toolbar_compact {
- /* No spacing around items. */
- padding: 0;
- & > .ck-toolbar__items > * {
- /* Compact toolbar items have no spacing between them. */
- margin: 0;
- /* "Middle" children should have no rounded corners. */
- &:not(:first-child):not(:last-child) {
- border-radius: 0;
- }
- }
- }
- & > .ck.ck-toolbar__grouped-dropdown {
- /*
- * Dropdown button has asymmetric padding to fit the arrow.
- * This button has no arrow so let's revert that padding back to normal.
- */
- & > .ck.ck-button.ck-dropdown__button {
- padding-left: var(--ck-spacing-tiny);
- }
- }
- @nest .ck-toolbar-container & {
- border: 0;
- }
- }
- /* stylelint-disable */
- /*
- * Styles for RTL toolbars.
- *
- * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
- * because its parent is not controlled by the editor framework.
- */
- [dir="rtl"] .ck.ck-toolbar,
- .ck.ck-toolbar[dir="rtl"] {
- & > .ck-toolbar__items > .ck {
- margin-right: 0;
- }
- &:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck {
- /* (#11) Separate toolbar items. */
- margin-left: var(--ck-spacing-small);
- }
- & > .ck-toolbar__items > .ck:last-child {
- margin-left: 0;
- }
- &.ck-toolbar_compact > .ck-toolbar__items > .ck {
- /* No rounded corners on the right side of the first child. */
- &:first-child {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- /* No rounded corners on the left side of the last child. */
- &:last-child {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- }
- /* Separate the the separator form the grouping dropdown when some items are grouped. */
- & > .ck.ck-toolbar__separator {
- margin-left: var(--ck-spacing-small);
- }
- /* Some spacing between the items and the separator before the grouped items dropdown. */
- &.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
- margin-left: var(--ck-spacing-small);
- }
- }
- /*
- * Styles for LTR toolbars.
- *
- * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
- * because its parent is not controlled by the editor framework.
- */
- [dir="ltr"] .ck.ck-toolbar,
- .ck.ck-toolbar[dir="ltr"] {
- & > .ck-toolbar__items > .ck:last-child {
- margin-right: 0;
- }
- &.ck-toolbar_compact > .ck-toolbar__items > .ck {
- /* No rounded corners on the right side of the first child. */
- &:first-child {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- /* No rounded corners on the left side of the last child. */
- &:last-child {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- }
- /* Separate the the separator form the grouping dropdown when some items are grouped. */
- & > .ck.ck-toolbar__separator {
- margin-right: var(--ck-spacing-small);
- }
- /* Some spacing between the items and the separator before the grouped items dropdown. */
- &.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
- margin-right: var(--ck-spacing-small);
- }
- }
- /* stylelint-enable */
|