/* * Copyright (c) 2003-2019, 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-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); } } &.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__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.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); } } & .ck.ck-toolbar__separator { align-self: stretch; width: 1px; min-width: 1px; margin-top: 0; margin-bottom: 0; background: var(--ck-color-toolbar-border); } @nest .ck-toolbar-container & { border: 0; } } /* * 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.ck-toolbar__grouped-dropdown { padding-right: var(--ck-spacing-small); } & > .ck.ck-toolbar__items { & > * { /* (#11) Separate toolbar items. */ margin-left: var(--ck-spacing-small); margin-right: 0; } & > *:last-child { margin-left: 0; } } /* Some spacing between the items and the separator before the grouped items dropdown. */ &.ck-toolbar_grouping > .ck-toolbar__items { margin-left: var(--ck-spacing-small); } } /* * 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.ck-toolbar__grouped-dropdown { padding-left: var(--ck-spacing-small); } & > .ck.ck-toolbar__items { & > *:last-child { margin-right: 0; } } /* Some spacing between the items and the separator before the grouped items dropdown. */ &.ck-toolbar_grouping > .ck-toolbar__items { margin-right: var(--ck-spacing-small); } }