/* * 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 */