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

fes-design for PC

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

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

.@{select-prefix-cls} {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    .text();
    &-hidden-options {
        display: none;
    }
    &-popper {
        .text();
        background: var(--f-white);
    }
    &-dropdown {
        min-width: @select-dropdown-min-width;
        max-width: @select-dropdown-max-width;
        max-height: @select-dropdown-max-height;
        padding: @select-dropdown-padding;
        &.is-max-height {
            height: @select-dropdown-max-height;
        }
    }
    &-addon {
        .text();
        padding: @padding-xs;

        @border-line:var(--f-border-width-base) var(--f-border-style-base)
            var(--f-border-color-split);
        &.@{select-prefix-cls}-option-header {
            border-bottom: @border-line;
        }
        &.@{select-prefix-cls}-option-footer {
            border-top: @border-line;
        }
    }
    &-null {
        text-align: center;
    }
    &-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: @select-height;
        padding: 0 @padding-xs;
        color: var(--f-text-color);
        line-height: @select-height;
        background: var(--f-white);
        cursor: pointer;
        transition: background-color @animation-duration-slow @ease-base-out;
        &-label {
            flex: auto;
            &-tip {
                margin-left: @padding-xs;
                color: var(--f-text-color-secondary);
            }
        }
        &-checked-icon {
            margin-left: @padding-xs;
            font-size: @font-size-head;
            visibility: hidden;
            &.is-selected {
                visibility: visible;
            }
        }
        &.is-hover {
            background: @select-option-hover-color;
            transition: background-color @animation-duration-fast @ease-base-in;
        }
        &.is-disabled {
            color: var(--f-text-color-disabled);
            background: var(--f-white);
            cursor: not-allowed;
        }
        &.is-checked {
            color: var(--f-primary-color);
            transition: color @animation-duration-fast @ease-base-in;
        }
    }

    &-group-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: @select-height;
        padding: 0 @padding-xs;
        color: var(--f-text-color-disabled);
        line-height: @select-height;
        background: var(--f-white);
        &-label {
            flex: auto;
        }
    }
}