@chief-editor/ui/css/components/Select/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

@len: length(@sizeList);
@optionHeight: 24px;

@listTitleMap: {
    @list-title-xs-size: {
        @fontSize: 12px;
        @padding-v: 5px;
    }

    @list-title-sm-size: {
        @fontSize: 12px;
        @padding-v: 5px;
    }

    @list-title-md-size: {
        @fontSize: 14px;
        @padding-v: 6px;
    }

    @list-title-lg-size: {
        @fontSize: 14px;
        @padding-v: 6px;
    }

    @list-title-xl-size: {
        @fontSize: 16px;
        @padding-v: 6px;
    }

    .for-list-title-size-style(@sizeList, @i: 1) when (@i <= @len) {
        @size: extract(@sizeList, @i);
        @realSize: "list-title-@{size}-size";
        @padding-v: @@realSize[@padding-v];
        @fontSize: @@realSize[@fontSize];

        .@{prefixCls}-select-option-group-title-size-@{size} {
            padding-top: @padding-v;
            padding-bottom: @padding-v;
        }

        .for-list-title-size-style(@sizeList, (@i + 1));
    }
}

.@{prefixCls}-select {
    display: flex;
    vertical-align: top;

    &-input {
        display: flex;
        flex: auto;

        .@{prefixCls}-input-suffix {
            font-size: 12px;
        }

        input {
            pointer-events: none;
            background: none;
        }
    }

    &-input-trigger {
        display: inline-flex;
        width: 100%;
    }

    .@{prefixCls}-select-input-rimless {
        display: inline-flex;
        width: 100%;
        font-size: 12px;

        .@{prefixCls}-rimless-input-inner {
            padding-right: 16px;
            color: @color-text-grey1;

            &-num {
                padding-right: 34px;
            }

            &:hover {
                color: @color-text-grey1;
            }

            .@{prefixCls}-rimless-input-icon {
                font-size: 12px;
                color: @color-text-grey3;
            }

            .@{prefixCls}-rimless-input-num {
                color: @color-text-grey3;
                padding: 2px 4px;
            }
        }

    }

    .@{prefixCls}-rimless-input-disabled {
        .@{prefixCls}-rimless-input-inner:hover {
            color: @color-text-grey4;
        }
    }

    // 样式定制
    .@{prefixCls}-input {
        line-height: 20px;

        &-inner__wrapper {
            padding-left: 8px;
            border-radius: @border-radius-base;
            background-color: unset;
            border-color: @color-neutral5;
            box-shadow: unset;

            &-disabled {
                background-color: @color-background-grey1;
            }

            &:hover {
                border-color: @color-neutral2
            }

            &-focus,
            &:focus {
                box-shadow: unset;
            }
        }
    }

    &-popover-wrapper {
        .@{prefixCls}-popover {
            border-radius: @border-radius-base;
            font-size: 12px;

            &-inner {
                border-radius: @border-radius-base;
            }

            .@{prefixCls}-select-popover {
                &-panel {
                    border-radius: unset;
                }
            }
        }

        .@{prefixCls}-input-inner__wrapper {
            background-color: @color-neutral1;
        }
    }
}

.@{prefixCls}-select-input-popover {
    font-size: 0;
    line-height: 0;
}

.@{prefixCls}-select-popover-panel {
    .clearfix();
    font-size: 0;
    overflow-x: auto;
    background-color: @color-neutral4;
    max-height: 192px;
    box-shadow: @box-shadow-md;
    border-radius: @border-radius-base;
    padding: 4px 0;

    &-search {
        max-height: 238px;
    }

    &-empty {
        height: 192px;

        &.@{prefixCls}-select-popover-panel-search {
            height: 238px;
        }
    }

    .@{prefixCls}-select-option {
        color: @color-text-grey1;

        &-inner-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: @optionHeight;

            .item-text {
                flex: auto;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .option-check-icon {
            visibility: hidden;
            flex: none;
        }

        &-selected {
            .option-check-icon {
                visibility: visible;
            }
        }

        &.@{prefixCls}-select-option-fill-back {
            background-color: @color-neutral4;
        }
    }

    .@{prefixCls}-select-option-group {
        color: @color-text-grey3;

        &-title {
            padding-left: 12px;
        }

        @listTitleMap();
        .for-list-title-size-style(@sizeList);
    }

    .for-input-font-size-style(select-option-group, @sizeList);

    .@{prefixCls}-select-item-container:hover {
        background-color: @color-background-grey2;
    }

    .@{prefixCls}-select-search-input {
        padding: 12px 12px 6px 12px;
    }
}

.for-input-font-size-style(select-popover-panel, @sizeList);