/* * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ @import "../../../mixins/_focus.css"; @import "../../../mixins/_shadow.css"; @import "../../../mixins/_disabled.css"; @import "../../../mixins/_rounded.css"; @import "../../mixins/_button.css"; .ck-button, a.ck-button { @mixin ck-button-colors --ck-color-button-default; @mixin ck-rounded-corners; border-width: 1px; border-style: solid; white-space: nowrap; cursor: default; vertical-align: middle; padding: var(--ck-spacing-tiny); text-align: center; /* Normalize the height of the line. Removing this will break consistent height among text and text-less buttons (with icons). */ line-height: 1; /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; &:focus { @mixin ck-focus-ring; @mixin ck-box-shadow var(--ck-focus-outer-shadow); } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */ &.ck-disabled { & .ck-button__icon { @mixin ck-disabled; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */ & .ck-button__label { @mixin ck-disabled; } } &.ck-button_with-text { padding: var(--ck-spacing-tiny) var(--ck-spacing-standard); & .ck-button__icon { margin-left: calc(-1 * var(--ck-spacing-small)); margin-right: var(--ck-spacing-small); } } /* A style of the button which is currently on, e.g. its feature is active. */ &.ck-on { @mixin ck-button-colors --ck-color-button-on; } & .ck-button__icon { & use, & use * { color: inherit; } } &:not(.ck-button_with-text) .ck-button__icon { /* This margin is neccessary for icons in label-less buttons to stretch the button properly. When there's no text in the button, browsers render them too small. It's a really tricky topic, when browsers render svg as an inline content and line size (character width) measurement and alignment kicks in. */ margin: var(--ck-spacing-tiny); } & .ck-button__label { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; font-weight: inherit; color: inherit; cursor: inherit; /* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and without labels (but with icons) have different sizes in Chrome */ vertical-align: middle; } } /* A style of the button which handles the primary action. */ .ck-button-action, a.ck-button-action { @mixin ck-button-colors --ck-color-button-action; color: var(--ck-color-button-action-text); } .ck-button-bold, a.ck-button-bold { font-weight: bold; }