rabbit-simple-ui/src/styles/components/dropdown.less

A simple UI component library 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;
    position: relative;

    @{dropdown-menu-tag-name} {
        overflow: visible;
        max-height: none;
    }
}

@{dropdown-menu-tag-name} {
    width: inherit;
    max-height: 200px;
    overflow: auto;
    display: block;
    visibility: hidden;
    min-width: 100px;
    padding: 5px 0;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
    position: absolute;
    background-color: @white;
    box-sizing: border-box;
    border-radius: @border-radius-base;
    z-index: @zindex-select;
}

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

    &[danger] {
        color: @error-color;
        &:hover {
            color: @white;
            background-color: @error-color;
        }
    }
}

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

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