acud/lib/tree-select/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../tree/style/mixin';
@import '../../checkbox/style/mixin';

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

.acudCheckboxFn(@checkbox-prefix-cls: ~'@{select-tree-prefix-cls}-checkbox');

.@{tree-select-prefix-cls} {
    // 定义下拉icon的翻转效果
    &.@{acud-prefix}-select-open {
        .@{acud-prefix}-select-arrow {
            transform: rotate(180deg);
            transition: transform 0.3s;
        }

         // 取消过滤时过渡动画
        .@{acud-prefix}-select-selection-item,
        .@{acud-prefix}-select-selection-placeholder{
            transition: none;
            color: @G6;
        }
    }

    /* 反向过渡，回到初始状态不那么突兀 */
    .@{acud-prefix}-select-arrow {
        transition-delay: 0.01s;
        transition-duration: 0.3s;
    }

    // ======================= Dropdown =======================
    &-dropdown {
        padding: @padding-xs;

        &-rtl {
            direction: rtl;
        }
        // ======================== Tree ========================
        .@{select-tree-prefix-cls} {
            border-radius: 0;

            &-list-holder-inner {
                align-items: stretch;

                .@{select-tree-prefix-cls}-treenode {
                    .@{select-tree-prefix-cls}-node-content-wrapper {
                        flex: auto;

                        &.@{select-tree-prefix-cls}-node-selected {
                            .basic-tp-config(tp2);
                        }
                    }
                }
            }

            &-select-all {
                line-height: 22px;
                padding: 0 0 4px 0;
            }
        }
    }
}

.acudTreeFn(@select-tree-prefix-cls);

.@{select-tree-prefix-cls} {
    // change switcher icon rotation in rtl direction
    & &-switcher {
        &_close {
            .@{select-tree-prefix-cls}-switcher-icon {
                svg {
                    .@{tree-select-prefix-cls}-dropdown-rtl & {
                        transform: rotate(90deg);
                    }
                }
            }
        }

        &-loading-icon {
            .@{tree-select-prefix-cls}-dropdown-rtl & {
                transform: scaleY(-1);
            }
        }
    }
}
.@{select-tree-prefix-cls}-checkbox-inner::after {
    opacity: 0;
}
.@{select-tree-prefix-cls}-checkbox-checked .@{select-tree-prefix-cls}-checkbox-inner::after {
    opacity: 1;
}

// 自定义树型选择控件样式
.@{select-tree-prefix-cls} {
    &-list {
        //容器无法显示时，左右滚动展示
        .@{select-tree-prefix-cls}-node-content-wrapper {
            white-space: nowrap;
        }
    }
}