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

fes-design for PC

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

@dropdown-prefix-cls: ~'@{cls-prefix}-dropdown';
@dropdown-option-height: @data-input-height-base;
@dropdown-option-hover-color: var(--f-hover-color-light);
@dropdown-min-width: 100px;
@dropdown-max-height: 274px;

.@{dropdown-prefix-cls} {
    &-popper {
        padding: @padding-sm 0;
        background: var(--f-white);
    }
    &-option-wrapper {
        min-width: @dropdown-min-width;
        max-height: @dropdown-max-height;
        .text();
        &:not(.has-icon) {
            .@{dropdown-prefix-cls}-option {
                &-icon {
                    display: none;
                }
            }
        }
    }
    &-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: @dropdown-option-height;
        padding: 0 @padding-sm;
        color: var(--f-text-color);
        font-size: var(--f-font-size-base);
        line-height: @dropdown-option-height;
        background: var(--f-white);
        cursor: pointer;
        transition: background-color @animation-duration-slow @ease-base-out;
        &-label {
            flex: auto;
        }
        &-icon {
            display: flex;
            align-items: center;
            width: var(--f-font-size-base);
            margin-right: @padding-xs;
        }
        &-selected-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: @font-size-head;
            height: @font-size-head;
            margin-left: @padding-xs;
            .@{dropdown-prefix-cls}-option-selected-icon {
                display: none;
                font-size: @font-size-head;
            }
        }
        &:hover {
            background: @dropdown-option-hover-color;
            transition: background-color @animation-duration-fast @ease-base-in;
        }
        &.is-selected {
            color: var(--f-primary-color);
            transition: color @animation-duration-fast @ease-base-in;

            .@{dropdown-prefix-cls}-option-selected-icon {
                display: inline-block;
            }
        }
        /* is-disabled 优先级比 is-selected 高 */
        &.is-disabled {
            color: var(--f-text-color-disabled);
            background: var(--f-white);
            cursor: not-allowed;
        }
    }
}