humhub/static/less/button.less

//
// Buttons
// --------------------------------------------------
.btn {
    float: none;
    border: none;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
    border-radius: 3px;
    outline: none !important;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    &:not(.btn-icon-only) {
        i.fa {
            margin-right: 4px;
        }
    }
}

.input.btn {
    outline: none;
}

.btn.btn-lg {
    padding: 16px 28px;
    &:active, &.active {
        padding: 15px 27px;
    }
}

.btn-sm {
    padding: 4px 8px;
    font-size: 12px;

    i {
        font-size: 14px;
    }
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
}

.btn-default {
    background: @default;
    color: @text-color-default !important;

    &:hover,
    &:focus {
        background: darken(@default, 2%);
        color: @text-color-default;
        text-decoration: none;
    }

    &:active,
    &.active {
        outline: 0;
        background: darken(@default, 5%);
    }
}

.btn-default[disabled],
.btn-default.disabled {
    background: lighten(@default, 2%);

    &:hover,
    &:focus {
        background: lighten(@default, 2%);
    }

    &:active,
    &.active {
        background: lighten(@default, 2%);
    }
}

.btn-primary {
    background: @primary;
    color: @text-color-contrast !important;

    &:hover,
    &:focus {
        background: darken(@primary, 5%);
        text-decoration: none;
    }

    &:active,
    &.active {
        outline: 0;
        border: 1px solid @primary;
        padding: 7px 15px;
        color: @primary !important;
        background: @text-color-contrast !important;
        box-shadow: none;
        &.btn-sm {
            padding: 3px 7px;
        }
        &.btn-xs {
            padding: 0 4px;
        }
    }

    &.active:hover,
    &.active:focus {
        border: 1px solid darken(@primary, 5%);
        color: darken(@primary, 5%) !important;
    }
}

.btn-primary[disabled],
.btn-primary.disabled {
    background: lighten(@primary, 5%);

    &:hover,
    &:focus {
        background: lighten(@primary, 5%);
    }

    &:active,
    &.active {
        background: lighten(@primary, 5%) !important;
    }
}

.btn-info {
    background: @info;
    color: @text-color-contrast !important;

    &:hover,
    &:focus {
        background: darken(@info, 5%) !important;
        text-decoration: none;
    }

    &:active,
    &.active {
        outline: 0;
        border: 1px solid @info;
        padding: 7px 15px;
        color: @info !important;
        background: @text-color-contrast !important;
        box-shadow: none;
        &.btn-sm {
            padding: 3px 7px;
        }
        &.btn-xs {
            padding: 0 4px;
        }
    }

    &.active:hover,
    &.active:focus {
        border: 1px solid darken(@info, 5%);
        color: darken(@info, 5%) !important;
    }
}

.btn-info[disabled],
.btn-info.disabled {
    background: lighten(@info, 5%);

    &:hover,
    &:focus {
        background: lighten(@info, 5%);
    }

    &:active,
    &.active {
        background: lighten(@info, 5%) !important;
    }
}

.btn-danger {
    background: @danger;
    color: @text-color-contrast !important;

    &:hover,
    &:focus {
        background: darken(@danger, 5%);
        text-decoration: none;
    }

    &:active,
    &.active {
        outline: 0;
        background: darken(@danger, 5%) !important;
    }
}

.btn-danger[disabled],
.btn-danger.disabled {
    background: lighten(@danger, 5%);

    &:hover,
    &:focus {
        background: lighten(@danger, 5%);
    }

    &:active,
    &.active {
        background: lighten(@danger, 5%) !important;
    }
}

.btn-success {
    background: @success;
    color: @text-color-contrast !important;

    &:hover,
    &:focus {
        background: darken(@success, 5%);
        text-decoration: none;
    }

    &:active,
    &.active {
        outline: 0;
        background: darken(@success, 5%) !important;
    }
}

.btn-success[disabled],
.btn-success.disabled {
    background: lighten(@success, 5%);

    &:hover,
    &:focus {
        background: lighten(@success, 5%);
    }

    &:active,
    &.active {
        background: lighten(@success, 5%) !important;
    }
}

.btn-warning {
    background: @warning;
    color: @text-color-contrast !important;

    &:hover,
    &:focus {
        background: darken(@warning, 2%);
        text-decoration: none;
    }

    &:active,
    &.active {
        outline: 0;
        background: darken(@warning, 2%) !important;
    }
}

.btn-warning[disabled],
.btn-warning.disabled {
    background: lighten(@warning, 5%);

    &:hover,
    &:focus {
        background: lighten(@warning, 5%);
    }

    &:active,
    &.active {
        background: lighten(@warning, 5%) !important;
    }
}

.btn-link {
    color: @link !important;

    &:hover,
    &:focus {
        color: darken(@link, 2%);
        text-decoration: none;
    }

    &:active,
    &.active {
        outline: 0;
        color: darken(@link, 2%) !important;
    }
}

.btn-link[disabled],
.btn-link.disabled {
    color: lighten(@link, 5%);

    &:hover,
    &:focus {
        color: lighten(@link, 5%);
    }

    &:active,
    &.active {
        color: lighten(@link, 5%) !important;
    }
}