acud/lib/tag/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';

@tag-prefix-cls: ~'@{acud-prefix}-tag';

.@{tag-prefix-cls} {
    .reset-component();

    display: inline-block;
    height: auto;
    margin-right: 2*@P;
    padding: 0 2*@P;
    font-size: @T2;
    white-space: nowrap;
    background: @tag-default-bg;
    border-radius: @R2;
    transition: all 0.3s;
    .basic-tp-config(@tag-default-tp);

    >a:first-child:last-child {
        display: inline-block;
        margin: 0 -8px;
        padding: 0 8px;
    }

    &-close-icon {
        font-size: 4*@P;
        cursor: pointer;
        transition: all 0.3s;
        margin-left: 4px;

        >svg {
            vertical-align: middle;
        }
    }

    .@{iconfont-css-prefix} {
        .basic-tp-config(tp24);
        line-height: 100%;
    }

    &-has-color {
        border-color: transparent;

        &,
        a,
        a:hover,
        .@{iconfont-css-prefix}-close,
        .@{iconfont-css-prefix}-close:hover {
            color: @tp8-default-color;
        }
    }

    &-checkable {
        .basic-config(@tag-checkable-tp, @tag-checkable-p);
        cursor: pointer;

        &-checked {
            .basic-config(@tag-checkable-checked-tp, @tag-checkable-checked-p);
            cursor: pointer;
        }
    }
    &-transparent-checkable {
        .basic-config(@tag-transparent-checkable-tp, @tag-transparent-checkable-p);
        cursor: pointer;

        &-checked {
            .basic-config(@tag-checkable-checked-tp, @tag-checkable-checked-p);
            cursor: pointer;
        }
    }

    &-hidden {
        display: none;
    }

    // To ensure that a space will be placed between character and `Icon`.
    >.@{iconfont-css-prefix}+span,
    >span+.@{iconfont-css-prefix} {
        margin-left: 2*@P;
    }

    .make-enhance-classes(@status, @inactive-after) {
        @color: 'tag-@{status}@{inactive-after}-color';

        &-@{status}-enhance {
            color: @G11;
            background-color: @@color;

            .acudicon {
                color: @G11;
            }

            .acudicon:hover {
                color: @G11;
            }

            &:hover {
                color: @G11;
            }
        }

        &-@{status}-enhance[disabled] {
            .acudicon {
                color: @G6;
            }
        }
    }

    .make-enhance-classes(active, '');
    .make-enhance-classes(processing, '');
    .make-enhance-classes(success, '');
    .make-enhance-classes(error, '');
    .make-enhance-classes(warning, '');
    .make-enhance-classes(inactive, -after);

    .make-classes(@status) {
        @color: 'tag-@{status}-color';
        @bg-color: 'tag-@{status}-bg-color';

        &-@{status} {
            color: @@color;
            font-size: @T2;
            border-radius: @R2;
            background-color: @@bg-color;

            .acudicon {
                color: @@color;
            }
   
            .acudicon:hover {
                color: @@color;
            }

            &:hover {
                color: @@color;
            }
        }
        &-@{status}[disabled] {
            .acudicon {
                color: @G6;
            }
        }
    }

    .make-classes(active);
    .make-classes(processing);
    .make-classes(success);
    .make-classes(error);
    .make-classes(warning);
    .make-classes(inactive);

    .make-outline-classes(@status) {
        @color: 'tag-@{status}-color';
        @bg-color: 'tag-@{status}-bg-color';
        @border-color: 'tag-@{status}-border-color';

        &-@{status}-outline {
            color: @@color;
            font-size: @T2;
            border-radius: @R2;
            background-color: @@bg-color;
            border: 1px solid @@border-color;

            .acudicon {
                color: @@color;
            }

            .acudicon:hover {
                color: @@color;
            }

            &:hover {
                color: @@color;
            }
        }

        &-@{status}-outline[disabled] {
            border-width: 0;
            .acudicon {
                color: @G6;
            }
        }
    }

    .make-outline-classes(active);
    .make-outline-classes(processing);
    .make-outline-classes(success);
    .make-outline-classes(error);
    .make-outline-classes(warning);
    .make-outline-classes(inactive);

    .make-status-classes(@status, @processing-bg-after) {
        @status-color: 'tag-status-@{status}-color';
        @bg-color: 'tag-@{status}-bg@{processing-bg-after}-color';

        &-@{status}-status {
            color: @@status-color;
            background-color: @@bg-color;

            .acudicon {
                color: @@status-color;
            }
   
            .acudicon:hover {
                color: @@status-color;
            }

            &:hover {
                color: @@status-color;
            }
        }

        &-@{status}-status[disabled] {
            .acudicon {
                color: @G6;
            }
        }
    }

    .make-status-classes(processing, -after);
    .make-status-classes(success, '');
    .make-status-classes(error, '');
    .make-status-classes(warning, '');

    &-status {
        line-height: 5*@P;
        color: @G11;
    }

    // UE要求在组件里专门写好营销类
    &-type-marketing {
        position: relative;
        width: 50px;
        height: 16px !important;
        background: transparent;
        border-top: 0px solid transparent;
        border-bottom: 15px solid green;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        transform: rotate(-46deg);
        padding: 0;
        overflow: visible;
    }

    &-type-business {
        color: #fff;
        position: relative;
        padding-left: 10px;
        &:hover {
            color: #fff;
        }
        .business-icon {
            position: absolute;
            width: 20px;
            height: 20px;
            left: -10px;
        }
    }

    &-type-subscription {
        background: transparent;
        span {
            .basic-tp-config(@tag-subscription-tp);
        }
    }

    &-type-edit {
        user-select: none;
        padding-right: @P;
        line-height: 6*@P;
        &[disabled], &[disabled]:hover {
            color: @G5;
            background-color: @G8;
            padding-right: 2*@P;
            .acudicon {
                display: none;
            }
        }
    }

    &-render-container {
        display: flex;
        align-items: center;
        .circle {
            width: 12px;
            height: 12px;
            border-radius: 12px;
            margin-right: 6px;
            position: relative;
            &::after {
                display: block;
                content: '';
                width: 8px;
                height: 8px;
                border-radius: 8px;
                position: absolute;
                left: 2px;
                top: 2px;
            }
        }
    }
    

    .make-status-color-classes(@status) {
        @color: 'tag-status-@{status}-color';
        .circle.status-@{status} {
            &::after {
                background: @@color;
            }
        }
    }
    .make-status-color-classes(inactive);
    .make-status-color-classes(active);
    .make-status-color-classes(processing);
    .make-status-color-classes(success);
    .make-status-color-classes(error);
    .make-status-color-classes(warning);

    // processing 动效
    .circle.status-processing {
        &::after {
            animation: flash .4s ease-in infinite alternate;
        }
    }

    @keyframes flash {
        from {
            transform: scale(0.7);
            box-shadow: 0 0 0 3px #d4e5ff;
        }
    
        to {
            transform: scale(1);
            box-shadow: 0 0 0 0px #d4e5ff;
        }
    }

    .make-order-classes(@index) {
        @color: 'order-color-@{index}';
        @bg-color: 'order-bg-@{index}';
        @bg-color-enhance: 'order-bg-@{index}-enhance';
        @border-color: 'order-border-@{index}';

        &-list-order-color-@{index} {
            color: @@color;
        }
        &-list-order-bg-color-@{index} {
            background-color: @@bg-color;
        }
        &-list-order-bg-color-@{index}-enhance {
            color: #fff;
            background-color: @@bg-color-enhance;
            &:hover {
                color: #fff; 
            }
        }
        &-list-order-border-color-@{index} {
            border-width: 1px;
            border-style: solid;
            border-color: @@border-color;
        }
    }

    .make-order-classes(1);
    .make-order-classes(2);
    .make-order-classes(3);
    .make-order-classes(4);
    .make-order-classes(5);
    .make-order-classes(6);
    .make-order-classes(7);
    .make-order-classes(8);
    .make-order-classes(9);
    .make-order-classes(10);
}

@import './rtl';