rsuite-theme/dist/less/mixins/buttons.less

The suite theme for pagurian

// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

.button-variant(@color; @background; @border) {
    color: @color;
    background-color: @background;
    border-color: @border;
    .button-ripple;

    &:focus,
    &.focus {
        color: @color;
        background-color: color(~`palette("@{background}", 700)`);
        border-color: color(~`palette("@{border}", 700)`);
    }

    &:hover {
        color: @color;
    }

    &:not(.disabled):hover {
        background-color: color(~`palette("@{background}", 600)`);
        border-color: color(~`palette("@{border}", 600)`);
    }

    &:active,
    &.active,
    .open > .dropdown-toggle& {
        color: @color;
        background-color: color(~`palette("@{background}", 700)`);
        border-color: color(~`palette("@{border}", 700)`);

        &:hover,
        &:focus,
        &.focus {
            color: @color;
            background-color: color(~`palette("@{background}", 800)`);
            border-color: color(~`palette("@{border}", 800)`);
        }
    }
    &:active,
    &.active,
    .open > .dropdown-toggle& {
        background-image: none;
    }

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

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

// Button ripple
.button-ripple(@transition:background-color .3s linear, border-bottom-color .3s linear;) when (@button-ripple = true) {
    overflow: hidden;
    position: relative;
    transition: @transition;

    &:not(.disabled) {
        &:after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, 0) 10.01%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10);
            opacity: 0;
            transition: transform .5s, opacity 1s;
        }

        &:active:after {
            transform: scale(0);
            opacity: .2;
            transition: 0s;
        }
    }
}