@import "../../style/themes/default"; @import "../../style/mixins/index"; @menu-prefix-cls: ~"@{ant-prefix}-menu"; // default theme .@{menu-prefix-cls} { outline: none; margin-bottom: 0; padding-left: 0; // Override default ul/ol list-style: none; z-index: @zindex-dropdown; box-shadow: @box-shadow-base; color: @text-color; background: @component-background; line-height: 46px; &-hidden { display: none; } &-item-group-list { margin: 0; padding: 0; } &-item-group-title { color: @text-color-secondary; font-size: @font-size-base; line-height: 1.5; padding: 8px 16px; } &-item, &-submenu, &-submenu-title { cursor: pointer; transition: all .3s; } &-item:active, &-submenu-title:active { background: @primary-1; } &-submenu &-sub { cursor: initial; } &-item > a { display: block; color: @text-color; &:hover { color: @primary-color; } &:before { position: absolute; background-color: transparent; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; content: ''; } } &-item-divider { height: 1px; overflow: hidden; background-color: @border-color-split; line-height: 0; } &-item:hover, &-item-active, &:not(&-inline) &-submenu-open, &-submenu-active, &-submenu-title:hover { color: @primary-color; } &:not(&-inline) &-submenu-open { z-index: @zindex-dropdown; } &-horizontal &-item, &-horizontal &-submenu { margin-top: -1px; } &-horizontal > &-item:hover, &-horizontal > &-item-active, &-horizontal > &-submenu &-submenu-title:hover { background-color: transparent; } &-item-selected { color: @primary-color; > a, > a:hover { color: @primary-color; } } &:not(&-horizontal) &-item-selected { background-color: @primary-1; } &-horizontal, &-inline, &-vertical { z-index: auto; } &-inline, &-vertical { border-right: @border-width-base @border-style-base @border-color-split; .@{menu-prefix-cls}-item { margin-left: -1px; left: 1px; position: relative; z-index: 1; &:after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; border-right: 3px solid @primary-color; transform: scaleY(.0001); transition: all .2s; } } } &-vertical&-sub { border-right: 0; .@{menu-prefix-cls}-item { border-right: 0; margin-left: 0; left: 0; &:after { border-right: 0; } } > .@{menu-prefix-cls}-item:first-child { border-radius: @border-radius-base @border-radius-base 0 0; } > .@{menu-prefix-cls}-item:last-child, > .@{menu-prefix-cls}-item-group:last-child > .@{menu-prefix-cls}-item-group-list:last-child > .@{menu-prefix-cls}-item:last-child { border-radius: 0 0 @border-radius-base @border-radius-base; } } &-inline { .@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-item-selected { &:after { transform: scaleY(1); } } } &-submenu-horizontal > & { top: 100%; left: 0; position: absolute; min-width: 100%; margin-top: 7px; z-index: @zindex-dropdown; } &-submenu-vertical { z-index: 1; } &-submenu-vertical > & { top: 0; left: 100%; position: absolute; min-width: 160px; margin-left: 4px; z-index: @zindex-dropdown; } &-item, &-submenu-title { margin: 0; padding: 0 20px; position: relative; display: block; white-space: nowrap; .@{iconfont-css-prefix} { min-width: 14px; margin-right: 8px; } } & > &-item-divider { height: 1px; margin: 1px 0; overflow: hidden; padding: 0; line-height: 0; background-color: @border-color-split; } &-submenu { position: relative; > .@{menu-prefix-cls} { background-color: @component-background; border-radius: @border-radius-base; } &-vertical > .@{menu-prefix-cls}-submenu-title:after { font-family: "anticon" !important; font-style: normal; vertical-align: baseline; text-align: center; text-transform: none; text-rendering: auto; position: absolute; transition: transform .3s; content: "\e61d"; right: 16px; .ie-rotate(3); transform: rotate(270deg) scale(0.75); } &-inline > .@{menu-prefix-cls}-submenu-title:after { font-family: "anticon" !important; font-style: normal; vertical-align: baseline; text-align: center; text-transform: none; text-rendering: auto; position: absolute; transition: transform .3s; content: "\e61d"; right: 16px; top: 0; .iconfont-size-under-12px(8px); } &-open { &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after { .ie-rotate(1); transform: rotate(180deg) scale(0.75); } } } &-vertical &-submenu-selected { color: @primary-color; > a { color: @primary-color; } } &-horizontal { border: 0; border-bottom: @border-width-base @border-style-base @border-color-split; box-shadow: none; z-index: 0; > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-submenu { position: relative; top: 1px; float: left; border-bottom: 2px solid transparent; &:hover, &-active, &-open, &-selected { border-bottom: 2px solid @primary-color; color: @primary-color; } > a { display: block; color: @text-color; &:hover { color: @primary-color; } } } &:after { content: "\20"; display: block; height: 0; clear: both; } } &-vertical, &-inline { .@{menu-prefix-cls}-item, .@{menu-prefix-cls}-submenu-title { padding: 0 16px; font-size: @font-size-base; line-height: 42px; height: 42px; overflow: hidden; text-overflow: ellipsis; } } &-item-group-list { .@{menu-prefix-cls}-item, .@{menu-prefix-cls}-submenu-title { padding: 0 16px 0 28px; } } &-vertical&-sub { padding: 0; transform-origin: 0 0; & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu { transform-origin: 0 0; } } &-root&-vertical, &-root&-inline { box-shadow: none; } &-sub&-inline { padding: 0; border: 0; box-shadow: none; border-radius: 0; & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { line-height: 42px; height: 42px; list-style-type: disc; list-style-position: inside; } & .@{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; cursor: not-allowed; background: none; border-color: transparent !important; > a { color: @disabled-color !important; pointer-events: none; } } } // dark theme .@{menu-prefix-cls} { &-dark, &-dark &-sub { color: @text-color-secondary-dark; background: @menu-dark-bg; } &-dark &-inline&-sub { background: @menu-dark-submenu-bg; } &-dark&-horizontal { border-bottom-color: @menu-dark-bg; } &-dark&-horizontal > &-item, &-dark&-horizontal > &-submenu { border-color: @menu-dark-bg; border-bottom: 0; top: 0; } &-dark &-item, &-dark &-item-group-title, &-dark &-item > a { color: @text-color-secondary-dark; } &-dark&-inline, &-dark&-vertical { border-right: 0; } &-dark&-inline &-item, &-dark&-vertical &-item { border-right: 0; margin-left: 0; left: 0; &:after { border-right: 0; } } &-dark &-item:hover, &-dark &-item-active, &-dark &-submenu-active, &-dark:not(&-inline) &-submenu-open, &-dark &-submenu-selected, &-dark &-submenu:hover, &-dark &-submenu-title:hover { background-color: transparent; color: #fff; > a { color: #fff; } } &-dark &-item-selected { border-right: 0; color: #fff; &:after { border-right: 0; } > a, > a:hover { color: #fff; } } &&-dark &-item-selected { background-color: transparent; } &-dark&-inline &-item-selected { background-color: @primary-color; } // Disabled state sets text to dark gray and nukes hover/tab effects &-dark &-item-disabled, &-dark &-submenu-disabled { &, > a { opacity: 0.8; color: @disabled-color-dark !important; } } }