@chief-editor/ui/css/components/Util/ListItem.less

UI Component for chief editor

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

@len: length(@sizeList);

@listItemMap: {
    @list-item-xs-size: {
        @fontSize: 12px;
        @padding-v: 5px;
    }

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

    @list-item-md-size: {
        @fontSize: 12px;
        @padding-v: 0px;
    }

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

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

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

        &.@{prefixCls}-list-item-container-size-@{size} {
            padding-top: @padding-v;
            padding-bottom: @padding-v;

            .@{prefixCls}-list-item-inner-wrapper {
                .font-height(@fontSize);
            }
        }

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

    .for-list-item-offset(@i: 1) when (@i <= 5) {
        &.@{prefixCls}-list-item-container-level-@{i} {
            padding-left: 12px * @i;
        }

        .for-list-item-offset(@i + 1);
    }
}

.@{prefixCls}-list-item-container {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 12px;
    cursor: pointer;

    @listItemMap();
    .for-list-item-size-style(@sizeList);
    .for-list-item-offset();

    .@{prefixCls}-list-item-checkbox {
        width: 24px;
        padding: 0 8px 0 0;
    }

    .@{prefixCls}-list-item-inner-wrapper {
        .ellipsis();
        .clearfix();
        .font-height(12px);
        width: 100%;
    }

    .@{prefixCls}-list-item-chosen-icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        color: @color-primary6;
    }

    &:hover:not(&-disabled):not(&-readonly) {
        background-color: @color-background-grey2;
    }

    &-disabled,
    &-readonly {
        cursor: not-allowed;

        .@{prefixCls}-list-item-inner-wrapper {
            color: @color-text-grey4;
        }

        &.@{prefixCls}-list-item-container-checked {
            .@{prefixCls}-list-item-inner-wrapper,
            .@{prefixCls}-list-item-chosen-icon {
                color: @color-text-grey4;
            }
        }
    }
}