ckeditor/ckeditor5-theme-lark

/*
 * 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/_focus.css";
@import "../../../mixins/_shadow.css";
@import "../../../mixins/_disabled.css";
@import "../../../mixins/_rounded.css";
@import "../../mixins/_button.css";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck.ck-button,
a.ck.ck-button {
    @mixin ck-button-colors --ck-color-button-default;
    @mixin ck-rounded-corners;

    white-space: nowrap;
    cursor: default;
    vertical-align: middle;
    padding: var(--ck-spacing-tiny);
    text-align: center;

    /* A very important piece of styling. Go to variable declaration to learn more. */
    min-width: var(--ck-ui-component-min-height);
    min-height: var(--ck-ui-component-min-height);

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

    /* Avoid flickering when the foucs border shows up. */
    border: 1px solid transparent;

    /* Apply some smooth transition to the box-shadow and border. */
    transition: box-shadow .2s ease-in-out, border .2s ease-in-out;

    /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */
    -webkit-appearance: none;

    &:active,
    &:focus {
        @mixin ck-focus-ring;
        @mixin ck-box-shadow var(--ck-focus-outer-shadow);
    }

    /* Allow icon coloring using the text "color" property. */
    & .ck-button__icon {
        & use,
        & use * {
            color: inherit;
        }
    }

    & .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;

        @mixin ck-dir ltr {
            text-align: left;
        }

        @mixin ck-dir rtl {
            text-align: right;
        }
    }

    & .ck-button__keystroke {
        color: inherit;

        @mixin ck-dir ltr {
            margin-left: var(--ck-spacing-large);
        }

        @mixin ck-dir rtl {
            margin-right: var(--ck-spacing-large);
        }

        font-weight: bold;
        opacity: .7;
    }

    /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
    &.ck-disabled {
        &:active,
        &:focus {
            /* The disabled button should have a slightly less visible shadow when focused. */
            @mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow);
        }

        & .ck-button__icon {
            @mixin ck-disabled;
        }

        /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
        & .ck-button__label {
            @mixin ck-disabled;
        }

        & .ck-button__keystroke {
            opacity: .3;
        }
    }

    &.ck-button_with-text {
        padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);

        /* stylelint-disable-next-line no-descending-specificity */
        & .ck-button__icon {
            @mixin ck-dir ltr {
                margin-left: calc(-1 * var(--ck-spacing-small));
                margin-right: var(--ck-spacing-small);
            }

            @mixin ck-dir rtl {
                margin-right: calc(-1 * var(--ck-spacing-small));
                margin-left: var(--ck-spacing-small);
            }
        }
    }

    &.ck-button_with-keystroke {
        /* stylelint-disable-next-line no-descending-specificity */
        & .ck-button__label {
            flex-grow: 1;
        }
    }

    /* 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-save {
        color: var(--ck-color-button-save);
    }

    &.ck-button-cancel {
        color: var(--ck-color-button-cancel);
    }
}

/* A style of the button which handles the primary action. */
.ck.ck-button-action,
a.ck.ck-button-action {
    @mixin ck-button-colors --ck-color-button-action;

    color: var(--ck-color-button-action-text);
}

.ck.ck-button-bold,
a.ck.ck-button-bold {
    font-weight: bold;
}