@import url("../../css/variable.less"); #admin-app { .ant-layout-sider { height: 100vh; > .ant-layout-sider-children { display: flex; flex-direction: column; height: 100%; > .ant-menu { flex: 1 1 0; overflow: hidden auto; .ant-menu-submenu-title .ant-badge { font-size: 16px; } .ant-menu-item .ant-badge { font-size: 14px; } .ant-badge { color: inherit; .anticon { // Override Antd default font-size: 16px; margin-right: 2px; } .ant-badge-count { position: absolute; right: -24px; top: 8px; } } } > .toggle-menu-icon { color: #fff; font-size: 20px; padding: 3px 24px; &:hover { opacity: 0.7; cursor: pointer; } } } &.ant-layout-sider-collapsed { > .ant-layout-sider-children { > .ant-menu { .ant-menu-submenu-title { overflow: visible; padding-left: 24px; text-align: center; .ant-badge { .ant-badge-count { right: -2px; top: 0; z-index: 1; } } } } } } } .ant-layout-header { height: 39px; background: #fff; display: flex; padding: 0 12px 0 0; align-items: center; justify-content: space-between; border-bottom: 1px solid @lib-border-gray; > .navigator-bar.ant-tabs-card { min-width: 0; > .ant-tabs-nav { margin: 0; .ant-tabs-tab { border: none; margin-right: 0; border-radius: 0; width: auto; > .ant-tabs-tab-btn { transition: none; } &:hover { background: @lib-background-gray; } .ant-spin { // Hide loading status for inactive tab display: none; } &.ant-tabs-tab-active { background: @lib-main-blue; .ant-tabs-tab-btn { color: #fff; .ant-spin { display: inline-flex; align-items: center; margin-left: 8px; color: #fff; } } .anticon-close { color: #fff; } } } } } } .ant-layout-content { height: ~"calc(100vh - 45px)"; // Minus header height overflow-y: auto; } .ant-menu-item { .g-admin-menu-badge-list { display: flex; > .ant-badge { width: 24px; } } } } // Submenu popup is put directly under in collapse mode .ant-menu-submenu-popup { .ant-menu-item { .ant-badge { color: inherit; .ant-badge-count { position: absolute; right: -22px; top: 6px; } } } }