@import '../../style/themes/index'; @import '../../style/mixins/index'; @menu-prefix-cls: ~'@{ant-prefix}-menu'; // default theme .@{menu-prefix-cls} { .reset-component; margin-bottom: 0; padding-left: 0; // Override default ul/ol color: @menu-item-color; line-height: 0; // Fix display inline-block gap list-style: none; background: @menu-bg; outline: none; box-shadow: @box-shadow-base; transition: background 0.3s, width 0.2s; .clearfix; ul, ol { margin: 0; padding: 0; list-style: none; } &-hidden { display: none; } &-item-group-title { padding: 8px 16px; color: @menu-item-group-title-color; font-size: @font-size-base; line-height: @line-height-base; transition: all 0.3s; } &-submenu, &-submenu-inline { transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out, padding 0.15s @ease-in-out; } &-submenu-selected { color: @menu-highlight-color; } &-item:active, &-submenu-title:active { background: @menu-item-active-bg; } &-submenu &-sub { cursor: initial; transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out; } &-item > a { display: block; color: @menu-item-color; &:hover { color: @menu-highlight-color; } &::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: transparent; content: ''; } } // https://github.com/ant-design/ant-design/issues/19809 &-item > .@{ant-prefix}-badge > a { color: @menu-item-color; &:hover { color: @menu-highlight-color; } } &-item-divider { height: 1px; overflow: hidden; line-height: 0; background-color: @border-color-split; } &-item:hover, &-item-active, &:not(&-inline) &-submenu-open, &-submenu-active, &-submenu-title:hover { color: @menu-highlight-color; } &-horizontal &-item, &-horizontal &-submenu { margin-top: -1px; } &-horizontal > &-item:hover, &-horizontal > &-item-active, &-horizontal > &-submenu &-submenu-title:hover { background-color: transparent; } &-item-selected { color: @menu-highlight-color; > a, > a:hover { color: @menu-highlight-color; } } &:not(&-horizontal) &-item-selected { background-color: @menu-item-active-bg; } &-inline, &-vertical, &-vertical-left { border-right: @border-width-base @border-style-base @border-color-split; } &-vertical-right { border-left: @border-width-base @border-style-base @border-color-split; } &-vertical&-sub, &-vertical-left&-sub, &-vertical-right&-sub { min-width: 160px; padding: 0; border-right: 0; transform-origin: 0 0; .@{menu-prefix-cls}-item { left: 0; margin-left: 0; border-right: 0; &::after { border-right: 0; } } > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-submenu { transform-origin: 0 0; } } &-horizontal&-sub { min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66 } &-item, &-submenu-title { position: relative; display: block; margin: 0; padding: 0 20px; white-space: nowrap; cursor: pointer; transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out, background 0.3s @ease-in-out, padding 0.15s @ease-in-out; .@{iconfont-css-prefix} { min-width: 14px; margin-right: 10px; font-size: @menu-icon-size; transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out; + span { opacity: 1; transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out; } } } & > &-item-divider { height: 1px; margin: 1px 0; padding: 0; overflow: hidden; line-height: 0; background-color: @border-color-split; } &-submenu { &-popup { position: absolute; z-index: @zindex-dropdown; background: @menu-popup-bg; border-radius: @border-radius-base; .submenu-title-wrapper { padding-right: 20px; } &::before { position: absolute; top: -7px; right: 0; bottom: 0; left: 0; opacity: 0.0001; content: ' '; } } > .@{menu-prefix-cls} { background-color: @menu-bg; border-radius: @border-radius-base; &-submenu-title::after { transition: transform 0.3s @ease-in-out; } } &-popup > .@{menu-prefix-cls} { background-color: @menu-popup-bg; } &-vertical, &-vertical-left, &-vertical-right, &-inline { > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { position: absolute; top: 50%; right: 16px; width: 10px; transition: transform 0.3s @ease-in-out; &::before, &::after { position: absolute; width: 6px; height: 1.5px; // background + background-image to makes before & after cross have same color. // ref: https://github.com/ant-design/ant-design/issues/15910 background-image: linear-gradient(to right, @menu-item-color, @menu-item-color); border-radius: 2px; transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out, top 0.3s @ease-in-out; content: ''; } &::before { transform: rotate(45deg) translateY(-2px); } &::after { transform: rotate(-45deg) translateY(2px); } } > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow { &::after, &::before { background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color); } } } &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { &::before { transform: rotate(-45deg) translateX(2px); } &::after { transform: rotate(45deg) translateX(-2px); } } &-open { &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { transform: translateY(-2px); &::after { transform: rotate(-45deg) translateX(-2px); } &::before { transform: rotate(45deg) translateX(2px); } } } } &-vertical &-submenu-selected, &-vertical-left &-submenu-selected, &-vertical-right &-submenu-selected { color: @menu-highlight-color; > a { color: @menu-highlight-color; } } &-horizontal { line-height: 46px; white-space: nowrap; border: 0; border-bottom: @border-width-base @border-style-base @border-color-split; box-shadow: none; > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-submenu { position: relative; top: 1px; display: inline-block; vertical-align: bottom; border-bottom: 2px solid transparent; &:hover, &-active, &-open, &-selected { color: @menu-highlight-color; border-bottom: 2px solid @menu-highlight-color; } } > .@{menu-prefix-cls}-item { > a { display: block; color: @menu-item-color; &:hover { color: @menu-highlight-color; } &::before { bottom: -2px; } } &-selected > a { color: @menu-highlight-color; } } &::after { display: block; clear: both; height: 0; content: '\20'; } } &-vertical, &-vertical-left, &-vertical-right, &-inline { .@{menu-prefix-cls}-item { position: relative; &::after { position: absolute; top: 0; right: 0; bottom: 0; border-right: @menu-item-active-border-width solid @menu-highlight-color; transform: scaleY(0.0001); opacity: 0; transition: transform 0.15s @ease-out, opacity 0.15s @ease-out; content: ''; } } .@{menu-prefix-cls}-item, .@{menu-prefix-cls}-submenu-title { height: @menu-item-height; margin-top: @menu-item-vertical-margin; margin-bottom: @menu-item-vertical-margin; padding: 0 16px; overflow: hidden; font-size: @menu-item-font-size; line-height: @menu-item-height; text-overflow: ellipsis; } // disable margin collapsed .@{menu-prefix-cls}-submenu { padding-bottom: 0.02px; } .@{menu-prefix-cls}-item:not(:last-child) { margin-bottom: @menu-item-boundary-margin; } > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { height: @menu-inline-toplevel-item-height; line-height: @menu-inline-toplevel-item-height; } } &-inline { width: 100%; .@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-item-selected { &::after { transform: scaleY(1); opacity: 1; transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out; } } .@{menu-prefix-cls}-item, .@{menu-prefix-cls}-submenu-title { width: ~'calc(100% + 1px)'; } .@{menu-prefix-cls}-submenu-title { padding-right: 34px; } } &-inline-collapsed { width: @menu-collapsed-width; > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title, > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { left: 0; padding: 0 (@menu-collapsed-width - @menu-icon-size-lg) / 2 !important; text-overflow: clip; .@{menu-prefix-cls}-submenu-arrow { display: none; } .@{iconfont-css-prefix} { margin: 0; font-size: @menu-icon-size-lg; line-height: @menu-item-height; + span { display: inline-block; max-width: 0; opacity: 0; } } } &-tooltip { pointer-events: none; .@{iconfont-css-prefix} { display: none; } a { color: @text-color-dark; } } .@{menu-prefix-cls}-item-group-title { padding-right: 4px; padding-left: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } &-item-group-list { margin: 0; padding: 0; .@{menu-prefix-cls}-item, .@{menu-prefix-cls}-submenu-title { padding: 0 16px 0 28px; } } &-root&-vertical, &-root&-vertical-left, &-root&-vertical-right, &-root&-inline { box-shadow: none; } &-sub&-inline { padding: 0; border: 0; border-radius: 0; box-shadow: none; & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { height: @menu-item-height; line-height: @menu-item-height; list-style-position: inside; list-style-type: disc; } & .@{menu-prefix-cls}-item-group-title { padding-left: 32px; } } // Disabled state sets text to gray and nukes hover/tab effects &-item-disabled, &-submenu-disabled { color: @disabled-color !important; background: none; border-color: transparent !important; cursor: not-allowed; > a { color: @disabled-color !important; pointer-events: none; } > .@{menu-prefix-cls}-submenu-title { color: @disabled-color !important; cursor: not-allowed; > .@{menu-prefix-cls}-submenu-arrow { &::before, &::after { background: @disabled-color !important; } } } } } @import './dark';