acud/lib/dropdown/style/index.less

acg react 组件库

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

@dropdown-prefix-cls: ~'@{acud-prefix}-dropdown';

.@{dropdown-prefix-cls}::-webkit-scrollbar {
    width: @P;
}

.@{dropdown-prefix-cls}::-webkit-scrollbar-thumb {
    background: @G7;
}
.@{dropdown-prefix-cls} {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: @dropdown-zindex;
    border-radius: @R3;
    box-shadow: @shadow-1;
    background-color: @G11;
    padding: @P 0;
    // overflow-y: auto;

    &::before {
        position: absolute;
        inset: -4px 0 -4px -7px;
        z-index: -9999;
        opacity: .0001;
        content: " ";
    }

    // 隐藏Menu
    &-hidden,
    &-menu-submenu-hidden,
    &-menu-hidden {
      display: none;
    }

    &-demo-image > img {
        width: @dropdown-img-width;
        margin-right: @dropdown-trigger-space;
    }

    // 触点
    &-trigger {
        cursor: pointer;
        position: relative;
        line-height: @-trigger-line-height;

        & .trigger-title {
            font-size: @dropdown-trigger-font-size;
            font-weight: @dropdown-font-weight;

            .basic-tp-config(@dropdown-trigger-text-tp);
            &-withicon {
                .basic-tp-config(@dropdown-trigger-withicon-text-tp);
            }
        }

        & a {
            color: @blue-base;
        }

        // arrow
        &-arrow {
            position: relative;
            top: 2px;
            margin-left: 2 * @P;
            z-index: 1;
            width: 4 * @P;
            height: 4 * @P;
            margin-top: -2 * @P;
            font-size: @T2;
            line-height: 4 * @P;
            transition: transform .48s;

            &-expand {
                transform: rotate(180deg);
            }

            & > svg {
                width: 4 * @P;
                height: 4 * @P;
            }
        }

        &-disabled {
            // .basic-disabled-point();
            pointer-events: none;
            cursor: not-allowed;
            .basic-tp-disabled-config(@dropdown-trigger-text-tp);
        }
    }

    &-menu {
        li&-submenu,
        &-item {
            cursor: pointer;
            .basic-config(@dropdown-menu-tp, @dropdown-menu-p);

            font-size: @T2;
            font-weight: @font-weight-400;
            line-height: @dropdown-item-height;
            white-space: nowrap;

            &-disabled {
                cursor: not-allowed;
                .basic-disabled-config(@dropdown-menu-tp, @dropdown-menu-p);
            }

            &-active:hover {
                background-color: @B1;
            }

            &-selected {
                color: @B6;
            }
            &-selected:hover {
                color: @B6;
            }
        }

        &-submenu-title,
        &-item {
            padding-left: @P * 3;
            padding-right: @P * 3;
            height:  @P * 8;
            display: flex;
            justify-content: space-between;
            .@{dropdown-prefix-cls}-menu-submenu-expand-icon {
                display: flex;
            }
            &-selected {
                color: @B6;
            }
            &-selected:hover {
                color: @B6;
            }
        }

        &-item,
        & > &-submenu > &-submenu-title {
            line-height:  @dropdown-item-height;
        }
    }
    &-menu-submenu-popup {
        position: absolute;
        z-index: @dropdown-zindex;
        padding: @P 0;
        border-radius: @R3;
        box-shadow: @shadow-1;
        overflow: hidden;
        background-color: @G11;
    }

    &-submenu-vertical {
        position: relative;
    }

    &-submenu-vertical > & {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 100%;
        margin-left: @P;
        transform-origin: 0 0;
    }
}

.@{dropdown-prefix-cls}-menu-mul-colnum {

    .@{dropdown-prefix-cls}-menu {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: @P * 5;

        &-item-group {
            margin: @P * 5 @P 0 @P * 5;
            width: @P * 25;

            &-title {
                color: @G5;
            }
        }

        &-item {
            display: block;
            padding: 0;
            color: @G2;
            font-size: @T3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            &:hover {
                color: @blue-base;
                background-color: #FFF;
            }
        }
    }
}