@fesjs/fes-design/es/cascader/style/index.less

fes-design for PC

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

@cascader-prefix-cls: ~'@{cls-prefix}-cascader';
@cascader-selected-background-color: var(--f-hover-color-light);
@select-dropdown-min-width: 160px;
@select-dropdown-max-width: 250px;
@select-dropdown-max-height: 274px;

.@{cascader-prefix-cls} {
    .default();
    .text();
    position: relative;
    display: flex;

    &-menu {
        position: relative;
        box-sizing: border-box;
        min-width: @select-dropdown-min-width;
        max-width: @select-dropdown-max-width;
        min-height: 100%;
        border-right: var(--f-border-width-base) var(--f-border-style-base)
            var(--f-border-color-split);
    }
    &-menu-scrollbar{
        width: auto;
    }
    &-menu-dropdown {
        max-height: @select-dropdown-max-height;
        padding: @padding-xs 0;
    }
    &-menu-null,
    &-menu-loading {
        text-align: center;
    }

    &-node {
        position: relative;
        display: flex;
        align-items: center;
        height: @data-input-height-base;
        padding-left: @padding-sm;
        color: var(--f-cascader-node-content-wrapper-color);
        background-color: var(--f-cascader-node-content-wrapper-bg-color);
        cursor: pointer;
        &:hover {
            --f-cascader-node-content-wrapper-color: var(--f-primary-color);
        }
        &.is-expanded {
            --f-cascader-node-content-wrapper-bg-color: @cascader-selected-background-color;
        }
        &.is-selected,
        &.is-checked,
        &.is-active {
            --f-cascader-node-content-wrapper-color: var(--f-primary-color);
        }
        &.is-disabled {
            --f-cascader-node-content-wrapper-color: var(
                --f-text-color-disabled
            );
            --f-cascader-node-content-wrapper-bg-color: var(--f-white);
            cursor: not-allowed;
            &.is-selected,
            &.is-checked {
                --f-cascader-node-content-wrapper-color: var(
                    --f-text-color-disabled
                );
            }
        }
    }
    &-node-switcher,
    &-node-checkbox,
    &-node-radio {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    &-node-checkbox,
    &-node-radio {
        margin-right: @padding-xs;
    }
    &-node-switcher {
        width: @data-input-height-base;
        height: @data-input-height-base;
        color: var(--f-text-color);
        font-size: @font-size-caption;
        &.is-disabled {
            cursor: not-allowed;
        }
        .is-checked {
            color: var(--f-primary-color);
        }
    }
    &-node-content {
        display: flex;
        flex-grow: 1;
        align-items: center;
        width: calc(100% - @data-input-height-base);
        &-prefix {
            display: inline-flex;
            margin-right: @padding-xs;
        }
        &-label {
            flex-grow: 1;
            overflow: hidden;
        }
        &-suffix {
            display: inline-flex;
        }
    }
}