acud/es/menu/style/en.less

acg react 组件库

@import './config.less';

body.locale-en {
    // 国际化只支持纵向导航。横向导航console很少有，暂时不做
    // 目前只考虑一、二级菜单。三级菜单console控制台没有，暂时不做。
    .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-horizontal) {
        .@{menu-prefix-cls}-global-siderbar-head {
            line-height: 12px;
        }

        .@{menu-prefix-cls}-inline-header-item {
            line-height: 20px;
        }


        .@{menu-prefix-cls}-item-group {
            .@{menu-prefix-cls}-item-group-list {
                > .@{menu-prefix-cls}-submenu {
                    margin-bottom: 8px;
                    font-weight: 500;
                }
                > .@{menu-prefix-cls}-item {
                    margin-bottom: 8px;
                    color: #151b26;
                    font-weight: 500;
                }
            }
        }

        .@{menu-prefix-cls}-submenu:not(.@{menu-prefix-cls}-submenu-open) {
            .@{menu-prefix-cls}-submenu-title {
                margin-bottom: 0;
            }
        }

        .@{menu-prefix-cls}-submenu-selected {
            > .@{menu-prefix-cls}-submenu-title {
                color: #151b26;
                font-weight: 500;
            }
        }

        .@{menu-prefix-cls}-submenu-selected:not(
                .@{menu-prefix-cls}-submenu-open
            ) {
            position: relative;
            background-color: #eef3fe;
            &:before {
                position: absolute;
                top: 0;
                left: 0;
                height: 32px;
                border-left: 3px solid #2468f2;
                content: '';
            }

            .acudicon,
            .@{menu-prefix-cls}-title-content {
                color: #2468f2;
            }
        }

        // 文字和箭头之间8px的安全距离
        .@{menu-prefix-cls}-submenu {
            .acudicon-outlined-up,
            .acudicon-outlined-down {
                margin-left: 8px;
            }
        }

        .@{menu-prefix-cls}-sub {
            > .@{menu-prefix-cls}-item {
                color: #5c5f66;
            }
        }

        .@{menu-prefix-cls}-title-content {
            font-size: 12px;
        }

        .@{menu-prefix-cls}-submenu-title {
            height: auto;
            min-height: 32px;
            line-height: 16px;
            > .@{menu-prefix-cls}-item-icon {
                height: auto;
            }
        }

        .@{menu-prefix-cls}-item,
        .@{menu-prefix-cls}-submenu {
            height: auto;
            min-height: 32px;
            font-size: 12px;
            line-height: 16px;

            .@{menu-prefix-cls}-title-content,
            .@{menu-prefix-cls}-item-selected {
                max-height: 42px;
                line-height: 16px;
            }
        }

        .@{menu-prefix-cls}-title-content-inner {
            display: -webkit-box;
            display: -webkit-box;
            width: 100%;
            max-height: 42px;
            padding: 8px 0;
            overflow: hidden;
            white-space: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 显示 2 行 */
        }
    }

    // 侧边栏收起
    .@{menu-prefix-cls}-global-collapsed {
        .@{menu-prefix-cls} {
            .@{menu-prefix-cls}-title-content-inner {
                display: inline-block;
                white-space: nowrap;
            }
        }
    }

}