rabbit-design/src/styles/components/dropdown.less

A lightweight UI plugin library written in TypeScript and based on JavaScript

@import '../custom.less';
@import '../color/colorPalette.less';
@import '../animation/slide.less';
@import '../mixins/select.less';

@dropdown-tag-name: r-dropdown;
@dropdown-menu-tag-name: r-dropdown-menu;
@dropdown-item-tag-name: r-dropdown-item;
@dropdown-prefix-cls: ~'@{css-prefix}dropdown';
@select-dropdown-prefix-cls: ~'@{css-prefix}select-dropdown';
@dropdown-item-prefix-cls: ~'@{dropdown-prefix-cls}-item';

@{dropdown-tag-name} {
    display: inline-block;

    .@{select-dropdown-prefix-cls} {
        overflow: visible;
        max-height: none;
    }
}

.@{select-dropdown-prefix-cls} {
    width: inherit;
    max-height: 200px;
    overflow: auto;
    // margin: 5px 0;
    padding: 5px 0;
    background-color: @white;
    box-sizing: border-box;
    border-radius: @border-radius-base;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
    position: absolute;
    z-index: @zindex-select;
}

@{dropdown-menu-tag-name} {
    min-width: 100px;
    display: none;
}

@{dropdown-item-tag-name} {
    &[selected],
    &[selected]:hover {
        background: ~`colorPalette('@{primary-color}', 1) `;
    }
}

.@{dropdown-prefix-cls} {
    &-rel {
        position: relative;
    }
}

.select-item(@dropdown-prefix-cls, @dropdown-item-tag-name, @dropdown-item-prefix-cls);

.transition-drop-enter {
    animation: rabTransitionDropIn @animation-time ease-in-out;
}
.transition-drop-leave {
    animation: rabTransitionDropOut @animation-time ease-in-out;
}