acud/es/color-picker/style/index.less

acg react 组件库

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

@colorpicker-prefix-cls: ~'@{acud-prefix}-colorpicker';
@select-prefix-cls: ~'@{acud-prefix}-select';

.colorpicker-dropdowns-con {
    width: 240px !important;
    padding: 8px !important;

    &.custom {
        padding: 12px !important;
    }
    .colorpicker-dropdowns {
        display: flex;
        align-items: center;
        flex-flow: row wrap;
        &-color {
            border-radius: @R3;
            margin: 1px 2px 1px 1px;
            padding: 1px;
            cursor: pointer;
            background-color: #fff;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0);
            &:nth-child(8n + 1) {
                margin-left: 0 !important;
            }
            &:nth-child(8n) {
                margin-right: 0 !important;
            }

            &.white {
                box-sizing: border-box;

                &.colorpicker-dropdowns-color-selected {
                    border-color: @blue-base;
                }
                .colorpicker-dropdowns-color-block {
                    border: 1px solid @color-picker-block-border-color;
                }
            }

            &.none {
                box-sizing: border-box;
                .colorpicker-dropdowns-color-block {
                    width: @color-picker-drop-down-block-height;
                    height: @color-picker-drop-down-block-height;
                    background: linear-gradient(45deg,transparent 49.5%, #F33E3E 49.5%, #F33E3E 50.5%, transparent 50.5%);
                    border: 1px solid @color-picker-block-border-color;
                }
            }

            &-block {
                width: @color-picker-drop-down-block-height;
                height: @color-picker-drop-down-block-height;
                border-radius: @R3;
            }

            &:hover {
                border: 1px solid #D4D6D9;
            }

            &-selected {
                border: 1px solid @blue-base;
            }
        }

        &-custom {
            // 自定义
            .chrome-picker {
                box-shadow: none !important;
                width: 216px !important;
                > div:nth-child(2) {
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                    padding-bottom: 8px !important;
                    > .flexbox-fix:first-child {
                        flex-direction: row-reverse;

                        > div:nth-child(1) {
                            width: 28px !important;
                            margin-left: 4px !important;
                            > div:nth-child(1) {
                                width: 28px !important;
                                height: 28px !important;
                                border-radius: 14px !important;
                                margin-top: 0 !important;
                            }
                        }

                        > div:nth-child(2) {
                            width: 184px !important;
                            border-radius: @R4 !important;

                            div {
                                border-radius: 6px !important;
                            }
                        }

                        .hue-horizontal {
                            border-radius: @R4 !important;
                        }
                    }
                    // 隐藏react-color 默认的色值切换
                    > .flexbox-fix:not(:first-child) {
                        display: none !important;
                    }
                }
            }
            .colorpicker-input {
                margin: 0 0 8px 0;
                height: 24px;
                border-radius: @R2;
            }
        }
    }
}

.@{colorpicker-prefix-cls} {
    &-default, &-custom {
        .@{select-prefix-cls} {
            &-selector {
                min-width: 134px !important;
            }
        }
    }
    &-simple {
        .@{select-prefix-cls} {
            &-selector {
                min-width: 74px !important;
            }
        }
    }
    .@{select-prefix-cls} {
        &.@{select-prefix-cls}-disabled {
            .colorpicker-dropdowns-render {
                &-text {
                    color: #B8BABF;
                }
            }
        }
    
        .colorpicker-dropdowns-render {
            display: flex;
            align-items: center;
            &-block {
                width: @color-picker-block-height;
                height: @color-picker-block-height;
                box-sizing: border-box;
                border-radius: @R2;
                &.none {
                    background: linear-gradient(45deg,transparent 49.5%, #F33E3E 49.5%, #F33E3E 50.5%, transparent 50.5%);
                    border: 1px solid @color-picker-block-border-color;
                }
                &.white {
                    border: 1px solid @color-picker-block-border-color;
                }
            }
            &-text {
                margin-left: 8px;
                font-family: PingFangSC-Regular;
                font-size: @color-picker-base-font-size;
                color: @grey-2;
                line-height: 20px;
                font-weight: 400;
            }
        }
    }
}