yyzone/src/assets/styles/components/button.less

yyzone vue components and utils

.yy-button-size(@padding; @font-size; @border-radius) {
    padding: @padding;
    border-radius: @border-radius;

    &>span {
        font-size: @font-size;
    }
}

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

    >a:only-child {
        color: currentColor;

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: transparent;
        }
    }
}

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

    &:hover {
        .yy-button-color(@color;
        shade(@background, 10%);
        shade(@border, 10%));
    }

    &:active,
    &.active {
        .yy-button-color(@color;
        shade(@background, 20%);
        shade(@border, 20%));
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        .cursor(not-allowed);

        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            .yy-button-color(@yy-btn-disable-color;
            @yy-btn-disable-bg;
            @yy-btn-disable-border);
        }
    }
}

@prefixButtonCls: ~'@{yy-css-prefix}btn';

.@{prefixButtonCls} {
    display: inline-block;
    min-width: @yy-btn-min-width;
    line-height: @yy-btn-line-height;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    .cursor();
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
    transition: color @yy-transition-time linear, background-color @yy-transition-time linear, border @yy-transition-time linear, box-shadow @yy-transition-time linear;
    .yy-button-size(@yy-btn-padding;
    @yy-btn-font-size;
    @yy-btn-border-radius);

    &,
    &:active,
    &:focus {
        outline: 0;
    }

    &-small {
        min-width: auto;
        .yy-button-size(@yy-btn-small-padding;
        @yy-btn-font-size;
        @yy-btn-border-radius - 1);
    }

    &-large {
        min-width: auto;
        .yy-button-size(@yy-btn-large-padding;
        @yy-btn-font-size + 2;
        @yy-btn-border-radius);
    }

    &-long {
        width: 100%;
    }

    &-primary {
        .yy-button-variant(@yy-btn-primary-color;
        @yy-btn-primary-bg;
        @yy-btn-primary-border)
    }

    &-text {
        .yy-button-variant(@yy-text-info-color; transparent; transparent);
        
        .transparent() {
            background-color: transparent;
            border-color: transparent;
        }
        &.disabled,
        &[disabled],
        fieldset[disabled] & {
            .transparent();
            &:hover {
                .transparent();
            }
        }
        &:hover,
        &:focus,
        &:active,
        &.active  {
            .transparent();
        }
    }
    &-text-bule {
        .yy-button-variant(@yy-skybule-color; transparent; transparent);
        
        .transparent() {
            background-color: transparent;
            border-color: transparent;
        }
        &.disabled,
        &[disabled],
        fieldset[disabled] & {
            .transparent();
            &:hover {
                .transparent();
            }
        }
        &:hover,
        &:focus,
        &:active,
        &.active  {
            .transparent();
        }
    }

    &-default {
        .yy-button-variant(@yy-btn-default-color;
        @yy-btn-default-bg;
        @yy-btn-default-border)
    }

    &-success {
        .yy-button-variant(@yy-btn-success-color;
        @yy-btn-success-bg;
        @yy-btn-success-border)
    }

    &-warning {
        .yy-button-variant(@yy-btn-warning-color;
        @yy-btn-warning-bg;
        @yy-btn-warning-border)
    }

    &-danger {
        .yy-button-variant(@yy-btn-danger-color;
        @yy-btn-danger-bg;
        @yy-btn-danger-border)
    }

    &-ghost {
        .yy-button-variant(@yy-btn-ghost-color;
        @yy-btn-ghost-bg;
        @yy-btn-ghost-border)
    }

    &-ghost {
        .yy-button-variant(@yy-btn-ghost-color;
        @yy-btn-ghost-bg;
        @yy-btn-ghost-border)
    }

    &-ghost-light {
        .yy-button-variant(@yy-btn-ghost-light-color;
        @yy-btn-ghost-light-bg;
        @yy-btn-ghost-light-border)
    }

    font-size: 0;

    &>span {
        display: inline-block;
        vertical-align: middle;

        &.@{prefixButtonCls}-icon {
            font-size: 0;
            &-prefix {
                margin-right: 4px;
            }
            &-suffix {
                margin-left: 4px;
            }
        }
    }

    [class$="loading"] {
        margin-right: 6px;
        vertical-align: middle;
    }
}

.btn-group(@btnClassName: yy-btn) {
    position: relative;
    display: inline-block;
    vertical-align: middle;

    >.@{btnClassName} {
        position: relative;
        float: left;

        &:hover,
        //&:focus,
        &:active,
        &.active {
            z-index: 2;
        }
    }

    .@{btnClassName}+.@{btnClassName},
    .@{btnClassName}+&,
    &+.@{btnClassName},
    &+& {
        margin-left: -1px;
    }

    .@{btnClassName}:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    &:not(&-vertical)>.@{btnClassName}:first-child {
        margin-left: 0;

        &:not(:last-child) {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
    }

    &:not(&-vertical)>.@{btnClassName}:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    &>& {
        float: left;
    }

    &>&:not(:first-child):not(:last-child)>.@{btnClassName} {
        border-radius: 0;
    }

    &:not(&-vertical)>&:first-child:not(:last-child) {
        >.@{btnClassName}:last-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            padding-right: 8px;
        }
    }

    &:not(&-vertical)>&:last-child:not(:first-child)>.@{btnClassName}:first-child {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        padding-left: 8px;
    }
}

.@{prefixButtonCls}-group {
    .btn-group()
}