@import '~antd/lib/style/themes/default.less'; @ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); .logo { height: 64px; position: relative; line-height: 64px; padding-left: (@menu-collapsed-width - 32px) / 2; transition: all 0.3s; background: #002140; overflow: hidden; img { display: inline-block; vertical-align: middle; height: 32px; } h1 { color: white; display: inline-block; vertical-align: middle; font-size: 20px; margin: 0 0 0 12px; font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 600; } } .sider { min-height: 100%; box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); position: relative; z-index: 10; &.fixSiderbar { position: fixed; top: 0; left: 0; } &.light { box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); background-color: white; .logo { background: white; border-bottom: 1px solid @border-color-split; border-right: 1px solid @border-color-split; h1 { color: @primary-color; } } } } .icon { width: 14px; margin-right: 10px; } :global { .drawer .drawer-content { background: #001529; } .ant-menu-inline-collapsed { & > .ant-menu-item .sider-menu-item-img + span, & > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .sider-menu-item-img + span, & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span { max-width: 0; display: inline-block; opacity: 0; } } .ant-menu-item .sider-menu-item-img + span, .ant-menu-submenu-title .sider-menu-item-img + span { transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out; opacity: 1; } }