acud/es/menu/style/header.less

acg react 组件库

@import './config.less';

.@{headermenu-prefix-cls}-container {
    .@{headermenu-prefix-cls} {
        width: auto;
        height: @headermenu-height;
        background: @headermenu-background;
        z-index: @zindex-range-3;
        box-shadow: @menu-shadow;

        display: flex;
        justify-content: space-between;
        align-items: center;

        padding-left: @P * 4;
        padding-right: @P * 4;

        &-head {
            display: flex;
            align-items: center;
            height: 100%;
            cursor: pointer;
        }

        &-logo {
            display: inline-flex;
            height: @headermenu-logo-height;
            width: auto;
        }

        &-nav{
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-grow: 1;
            min-width: 0;

            &-menu {
                flex-grow: 1;
                min-width: 0;
            }

            &-menu-vice {
                justify-content: flex-end;
            }
        }
    }
}

// header上的Menu
@horizontal-menu-prefix-cls: ~'@{headermenu-prefix-cls}-horizontal-menu';
.@{headermenu-prefix-cls} > .@{horizontal-menu-prefix-cls} {
    box-shadow: none;
    height: @headermenu-height;
    font-size: @T3;
}

.@{headermenu-prefix-cls} .@{horizontal-menu-prefix-cls} > .@{menu-prefix-cls}-item {
    // margin: @headermenu-item-margin;
    // margin: 0 5 * @P;
}

.@{headermenu-prefix-cls} .@{horizontal-menu-prefix-cls} > .@{menu-prefix-cls}-submenu {
    & > .@{menu-prefix-cls}-submenu-title {
        & > .@{menu-prefix-cls}-title-content {
            margin: 0 @P 0 0;
        }
    }
}

// Title
.@{headermenu-prefix-cls}-title {
    margin-left: @headermenu-title-margin-left;
    overflow: hidden;
}

.@{headermenu-prefix-cls}-title a {
    font-size: @menu-font-size;
    color: @headermenu-title-color;
    line-height: @headermenu-title-line-height;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}