artistry/src/styl/input/button.styl

A powerful and configurable stylesheet

@require 'input-settings.styl';

.button {
    display: inline-block;
    padding: var(--input-padding);
    border-width: $input-border-width;
    border-style: solid;
    border-radius: $input-border-radius;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.3s, box-shadow 0.3s;
    // Added for consistency between Button and A tags.
    font-size: var(--input-font-size);
    font-weight: 500;
    line-height: 1.15;
    text-transform: $button-text-transform;
    -webkit-font-smoothing: antialiased;

    &.button-small {
        --input-padding: var(--input-padding-small);
        --input-font-size: var(--input-font-size-small);
    }

    &.button-large {
        --input-padding: var(--input-padding-large);
        --input-font-size: var(--input-font-size-large);
    }

    &:disabled {
        filter: var(--input-locked);
        cursor: default;
    }

    &.button-no-focus {
        outline: none;
    }

    &.button-no-caps {
        text-transform: none;
    }

    &:not(.button-textonly):not(.button-outline):not(.button-underline) {
        border-color: var(--button-default-border-color);
        color: var(--button-default-color);
        background-color: var(--button-default-background-color);
        box-shadow: $input-box-shadow-height-0;

        &:hover:enabled {
            box-shadow: $input-box-shadow-height-1;
        }

        &:focus:enabled:not(.button-no-focus) {
            outline: none;
            filter: var(--input-brighter);
        }

        &:active:enabled,
        &:active:enabled:not(.button-no-focus),
        &.button-down:enabled,
        &.button-down:enabled:not(.button-no-focus) {
            filter: var(--input-darker);
        }

        &[data-theme='primary'],
        &.button-primary {
            border: $input-border-width solid var(--button-primary-border-color);
            color: var(--button-primary-color);
            background-color: var(--button-primary-background-color);
        }

        &[data-theme='danger'],
        &.button-danger {
            border: $input-border-width solid var(--button-danger-border-color);
            color: var(--button-danger-color);
            background-color: var(--button-danger-background-color);
        }
    }

    &.button-textonly,
    &.button-outline,
    &.button-underline {
        color: var(--button-textonly-default-color);
        border-color: transparent;
        background-color: transparent;
        box-shadow: none;

        &:hover:enabled {
            background-color: var(--button-textonly-background-color);
            filter: var(--input-brighter);
        }

        &:focus:enabled:not(.button-no-focus) {
            outline: none;
            background-color: var(--button-textonly-background-color);
        }

        &:active:enabled,
        &:active:enabled:not(.button-no-focus),
        &.button-down:enabled,
        &.button-down:enabled:not(.button-no-focus) {
            background-color: var(--button-textonly-background-color);
            filter: var(--input-darker);
        }

        &[data-theme='primary'],
        &.button-primary {
            color: var(--button-textonly-primary-color);
        }

        &[data-theme='danger'],
        &.button-danger {
            color: var(--button-textonly-danger-color);
        }
    }

    &.button-outline {
        border-color: var(--button-outline-border-color);
        border-width: $button-outline-border-width;
    }

    &.button-underline {
        border-bottom-color: var(--button-outline-border-color);
        border-width: $button-outline-border-width;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    &.button-lockable {
        position: relative;

        &.button-locked {
            cursor: default;
            user-select: none;
            pointer-events: none;

            & > .button-text {
                opacity: 0;
            }

            & > .button-spinner {
                opacity: 1;
            }
        }

        &.button-locked:hover,
        &.button-locked:focus,
        &.button-locked:active {
            filter: var(--input-locked) !important;
        }

        & > .button-text {
            display: block;
            opacity: 1;
            transition: opacity 0.5s;
        }

        & > .button-spinner {
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            opacity: 0;
            transition: opacity 0.5s;
        }
    }

    &.button-nowrap {
        white-space: nowrap;
    }
}