diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less index cc2dd17916..aeacbfba01 100644 --- a/components/menu/style/dark.less +++ b/components/menu/style/dark.less @@ -91,6 +91,9 @@ } } } + &-dark &-item:hover { + background-color: @menu-dark-item-hover-bg; + } &-dark &-item-selected { color: @menu-dark-highlight-color; @@ -102,6 +105,12 @@ > a:hover { color: @menu-dark-highlight-color; } + .@{iconfont-css-prefix} { + color: @menu-dark-selected-item-icon-color; + } + span { + color: @menu-dark-selected-item-text-color; + } } &&-dark &-item-selected, diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 795a35dc7b..b54490842e 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -160,7 +160,7 @@ .@{iconfont-css-prefix} { min-width: 14px; margin-right: 10px; - font-size: @menu-icon-size; + font-size: @font-size-base; transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out; + span { opacity: 1; @@ -353,11 +353,11 @@ .@{menu-prefix-cls}-item, .@{menu-prefix-cls}-submenu-title { height: @menu-item-height; - margin-top: 4px; - margin-bottom: 4px; + margin-top: @menu-item-vertical-margin; + margin-bottom: @menu-item-vertical-margin; padding: 0 16px; overflow: hidden; - font-size: @font-size-base; + font-size: @menu-item-font-size; line-height: @menu-item-height; text-overflow: ellipsis; } @@ -368,7 +368,7 @@ } .@{menu-prefix-cls}-item:not(:last-child) { - margin-bottom: 8px; + margin-bottom: @menu-item-boundary-margin; } > .@{menu-prefix-cls}-item, @@ -418,7 +418,7 @@ } .@{iconfont-css-prefix} { margin: 0; - font-size: @menu-icon-size-lg; + font-size: 16px; line-height: @menu-item-height; + span { display: inline-block; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index d1457accb1..517a779df9 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -387,6 +387,15 @@ @menu-icon-size: @font-size-base; @menu-icon-size-lg: @font-size-lg; +@menu-item-vertical-margin: 4px; +@menu-item-font-size: @font-size-base; +@menu-item-boundary-margin: 8px; +@menu-icon-size: @font-size-base; +@menu-icon-size-lg: @font-size-lg; +@menu-dark-selected-item-icon-color: @white; +@menu-dark-selected-item-text-color: @white; +@dark-menu-item-hover-bg: transparent; + // dark theme @menu-dark-color: @text-color-secondary-dark; @menu-dark-bg: @layout-header-background; @@ -394,7 +403,9 @@ @menu-dark-submenu-bg: #000c17; @menu-dark-highlight-color: #fff; @menu-dark-item-active-bg: @primary-color; - +@menu-dark-selected-item-icon-color: @white; +@menu-dark-selected-item-text-color: @white; +@menu-dark-item-hover-bg: transparent; // Spin // --- @spin-dot-size-sm: 14px;