acud/lib/rate/style/index.less

acg react 组件库

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

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

.@{rate-prefix-cls} {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    /* 🌟 */
    &-star {
        color: @rate-base-color;
        cursor: pointer;
        display: inline-block;
        position: relative;

        &-inner {
            width: @rate-star-size;
            height: @rate-star-size;
            overflow: hidden;
            position: relative;

            &-left {
                transform-origin: center center;
                transition: all .3s;
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 50%;
                // overflow: hidden;
                line-height: 100%;

                &-svg {
                    width: 200%;
                    height: 100%;
                    position: relative;

                    svg {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            &-right {
                transform-origin: center center;
                transition: all .3s;
                position: absolute;
                top: 0;
                right: 0%;
                height: 100%;
                width: 50%;
                overflow: hidden;
                line-height: 100%;

                &-svg {
                    width: 200%;
                    height: 100%;
                    position: relative;
                    right: 100%;

                    svg {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        /* 半⭐样式 */
        &-half {
            .acud-rate-star-inner-right {
                color: @rate-base-color;
            }
        }

        &:not(:last-child) {
            margin-right: @rate-star-spacing;
        }
        /* 鼠标划过 两个半星星transtion时会有缝隙 单个设置变形同时设置transform-origin */
        &:hover {
            // transform: scale(1.1);
            .acud-rate {
                &-star {
                    &-inner {
                        &-left {
                            transform: scale(1.1);
                        }

                        &-right {
                            transform: scale(1.1);
                        }
                    }
                }
            }
        }
        /* 普通样式 */
        &-normal {
            color: @rate-base-color;
        }
        /* 高分选中样式 */
        &-full {
            color: @rate-star-full;
        }
        /* 低分选中样式 */
        &-low {
            color: @rate-star-full;
            // .basic-tp-config(@rate-deep-bg);
        }
        /* 鼠标焦点选中样式 */
        &-focues {
            // transform: scale(1.1);
            .acud-rate {
                &-star {
                    &-inner {
                        &-left {
                            transform: scale(1.1);
                        }

                        &-right {
                            transform: scale(1.1);
                        }
                    }
                }
            }
        }
        /* 禁用样式 */
        &-disabled {
            cursor: not-allowed;
        }
    }

    &-label {
        color: @G2;
        // margin-left: @P;
    }
    /* 标签 */
    &-tags {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: @P * 3;

        &-item {
            min-width: @rate-tags-width;
            height: @rate-tags-height;
            .basic-tp-config(@rate-default-color);
            border: 1px solid @rate-tags-border;
            border-radius: @rate-tags-radius;
            font-size: @rate-tags-fontsize;
            line-height: @rate-tags-lineheight;
            text-align: center;
            box-sizing: border-box;
            padding: 0 @rate-tags-padding;
            margin-bottom: @rate-tags-margin;
            user-select: none;
            transition: all .3s;
            cursor: pointer;

            &:not(:last-child) {
                margin-right: @rate-tags-margin;
            }

            &:hover {
                color: @rate-tags-hover-color;
                border-color: @rate-tags-hover-color;
            }
        }

        &-select {
            color: @rate-tags-primary-color;
            border-color: @rate-tags-primary-color;
        }

        &-disabled {
            cursor: not-allowed;

            &:hover {
                .basic-tp-config(@rate-default-color);
                border-color: @G5;
            }
        }
    }
}