File: modules/system/assets/ui/less/button.mixins.less

// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color; @background; @border; @background-hover: @background; @border-hover: @border) {
    color: @color;
    border: none;
    background: @background;

    &:hover,
    &:focus,
    &:active,
    &.active,
    .open .dropdown-toggle& {
        color: @color;
        background: darken(@background-hover, 5%);
        border-color: @border-hover;
    }

    &:active,
    &.active,
    .open .dropdown-toggle& {
        background: darken(@background-hover, 8%);
        border-color: darken(@border-hover, 12%);
        background-image: none;
    }

    &.on {
        background: darken(@background, 12%);
        border-color: darken(@border, 16%);
        background-image: none;
    }

    &.disabled,
    &[disabled] {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            background: @background;
            border-color: @border;
        }
    }

    .badge {
        color: @background;
        background: @color;
    }
}

.button-outline-variant(@color) {
    color: darken(@color, 10%);
    background-image: none;
    background-color: transparent;
    border-color: @color;

    &:hover,
    &:focus,
    &.focus {
        color: #fff;
        background-color: @color;
        border-color: @color;
    }

    &:active,
    &.active,
    .open > .dropdown-toggle& {
        color: #fff;
        background-color: @color;
        border-color: @color;

        &:hover,
        &:focus,
        &.focus {
            color: #fff;
            background-color: darken(@color, 17%);
            border-color: darken(@color, 25%);
        }
    }

    &.disabled,
    &:disabled {
        &:hover,
        &:focus,
        &.focus {
            border-color: lighten(@color, 20%);
        }
    }
}


// Button sizes
// -------------------------
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
    padding: @padding-vertical (@padding-horizontal * 1.5);
    font-size: @font-size;
    line-height: @line-height;
    .border-radius(@border-radius);
}