/* * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ @import "../../helpers/colors.css"; @import "../../helpers/fonts.css"; @import "../../helpers/rounded.css"; @import "../../helpers/spacing.css"; @import "../../helpers/states.css"; @import "../../helpers/shadow.css"; @import "../helpers/button.css"; .ck-button, a.ck-button { @mixin ck-button-colors var(--ck-color-button-default-background), var(--ck-color-button-default-border); @mixin ck-rounded-corners; border-width: 1px; border-style: solid; white-space: nowrap; cursor: default; vertical-align: middle; padding: var(--ck-spacing-small); /* 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); } @mixin ck-button-icon { float: left; } /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */ &.ck-disabled { @mixin 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-small) var(--ck-spacing-standard); @mixin ck-button-icon { margin-left: calc(-1 * var(--ck-spacing-small)); margin-right: var(--ck-spacing-small); } & .ck-button__label { display: block; } } /* A style of the button which is currently on, e.g. its feature is active. */ &.ck-on { @mixin ck-button-colors var(--ck-color-button-on-background), var(--ck-color-button-on-border); } & .ck-icon { use, use * { color: inherit; } } & .ck-button__label { /* Enable font size inheritance, which allows fluid UI scaling. */ font-size: inherit; float: left; height: var(--ck-line-height-base)em; line-height: inherit; font-weight: inherit; color: inherit; cursor: inherit; } } /* A style of the button which handles the primary action. */ .ck-button-action, a.ck-button-action { @mixin ck-button-colors var(--ck-color-button-action-background), var(--ck-color-button-action-border); text-shadow: 0 -1px color(var(--ck-color-button-action-background) shade(20%)); color: var(--ck-color-button-action-text); &:hover, &:focus, &:active { text-shadow: 0 -1px color(var(--ck-color-button-action-background) shade(20%)) } } .ck-button-bold, a.ck-button-bold { font-weight: bold; }