citrus-cms/assets/admin/_scss/codebase/mixins/_buttons.scss

//
// Buttons
// --------------------------------------------------

@mixin button-variant($background, $border, $active-background: darken($background, 12%), $active-border: darken($border, 22%)) {
    $border-default: darken($border, 12%);

    color: color-yiq($background);
    background-color: $background;
    border-color: $border-default;
    @include box-shadow($btn-box-shadow);

    &:hover,
    &:focus,
    &.focus {
        color: color-yiq($background);
        background-color: $active-background;
        border-color: $active-border;
    }

    &.disabled,
    &:disabled {
        background-color: $background;
        border-color: $border-default;
    }

    &:not([disabled]):not(.disabled):active {
        background-color: $background;
        border-color: $border-default;
    }

    &:not([disabled]):not(.disabled).active,
    .show > &.dropdown-toggle {
        background-color: $active-background;
        background-image: none; // Remove the gradient for the pressed/active state
        border-color: $active-border;
    }

    &.btn-noborder {
        border-color: $background;

        &:hover,
        &:focus,
        &.focus {
            border-color: $active-background;
        }

        &.disabled,
        &:disabled,
        &:not([disabled]):not(.disabled):active,
        &:not([disabled]):not(.disabled).active {
            border-color: $background;
        }

        .show > &.dropdown-toggle {
            border-color: $active-background;
        }
    }
}

@mixin button-outline-variant($color, $color-hover: #fff) {
    color: $color;
    background-color: transparent;
    background-image: none;
    border-color: $color;

    &:hover,
    &:focus,
    &.focus {
        color: $color-hover;
        background-color: $color;
        border-color: $color;
    }

    &.disabled,
    &:disabled {
        color: $color;
        background-color: transparent;
    }

    &:not([disabled]):not(.disabled):active {
        color: $color;
        background-color: transparent;
        border-color: $color;
    }

    &:not([disabled]):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: $color-hover;
        background-color: $color;
        border-color: $color;
    }

    &.btn-noborder {
        border-color: transparent;

        &:not([disabled]):not(.disabled):active,
        &:not([disabled]):not(.disabled).active {
            border-color: transparent;
        }
    }
}

@mixin button-alt-variant($color, $background) {
    $active-color: darken($color, 25%);
    $active-background: darken($background, 10%);

    color: $active-color;
    background-color: $background;
    border-color: $background;

    &:hover,
    &:focus,
    &.focus {
        color: $active-color;
        background-color: $active-background;
        border-color: $active-background;
        box-shadow: none;
    }

    &.disabled,
    &:disabled {
        background-color: $background;
        border-color: $background;
    }

    &:not([disabled]):not(.disabled):active {
        color: $active-color;
        background-color: $background;
        border-color: $background;
    }

    &:not([disabled]):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: $active-color;
        background-color: $active-background;
        border-color: $active-background;
    }
}

// Used for buttons that adapt to light/dark header and sidebar variations
@mixin button-dual-variant($color, $background) {
    color: $color;
    background-color: transparent;
    border-color: transparent;

    &:hover,
    &:focus,
    &.focus {
        color: $color;
        background-color: $background;
        border-color: $background;
        box-shadow: none;
    }

    &.disabled,
    &:disabled {
        background-color: transparent;
        border-color: transparent;
    }

    &:not([disabled]):not(.disabled):active {
        color: $color;
        background-color: transparent;
        border-color: transparent;
    }

    &:not([disabled]):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: $color;
        background-color: $background;
        border-color: $background;
    }
}