From ab4478c9f4aab3e20fe3b5e31e6dcd08f12df5f6 Mon Sep 17 00:00:00 2001
From: tanjinzhou <415800467@qq.com>
Date: Thu, 13 May 2021 18:30:55 +0800
Subject: [PATCH] feat: new-menu
---
components/new-menu/index.tsx | 0
components/new-menu/src/Divider.tsx | 13 +
components/new-menu/src/ItemGroup.tsx | 16 +
components/new-menu/src/Menu.tsx | 10 +
components/new-menu/src/MenuItem.tsx | 10 +
components/new-menu/src/SubMenu.tsx | 10 +
components/new-menu/style/dark.less | 156 ++++++
components/new-menu/style/index.less | 651 ++++++++++++++++++++++++++
components/new-menu/style/index.tsx | 6 +
components/new-menu/style/rtl.less | 164 +++++++
components/new-menu/style/status.less | 47 ++
v2-doc | 2 +-
12 files changed, 1084 insertions(+), 1 deletion(-)
create mode 100644 components/new-menu/index.tsx
create mode 100644 components/new-menu/src/Divider.tsx
create mode 100644 components/new-menu/src/ItemGroup.tsx
create mode 100644 components/new-menu/src/Menu.tsx
create mode 100644 components/new-menu/src/MenuItem.tsx
create mode 100644 components/new-menu/src/SubMenu.tsx
create mode 100644 components/new-menu/style/dark.less
create mode 100644 components/new-menu/style/index.less
create mode 100644 components/new-menu/style/index.tsx
create mode 100644 components/new-menu/style/rtl.less
create mode 100644 components/new-menu/style/status.less
diff --git a/components/new-menu/index.tsx b/components/new-menu/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/new-menu/src/Divider.tsx b/components/new-menu/src/Divider.tsx
new file mode 100644
index 000000000..8e9d99ad5
--- /dev/null
+++ b/components/new-menu/src/Divider.tsx
@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ name: 'Divider',
+ props: {
+ prefixCls: String,
+ },
+ setup(props) {
+ return () => {
+ return ;
+ };
+ },
+});
diff --git a/components/new-menu/src/ItemGroup.tsx b/components/new-menu/src/ItemGroup.tsx
new file mode 100644
index 000000000..191c16447
--- /dev/null
+++ b/components/new-menu/src/ItemGroup.tsx
@@ -0,0 +1,16 @@
+import { getPropsSlot } from '../../_util/props-util';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ name: 'AMenuItemGroup',
+ setup(props, { slots }) {
+ return () => {
+ return (
+
+ {getPropsSlot(slots, props, 'title')}
+
+
+ );
+ };
+ },
+});
diff --git a/components/new-menu/src/Menu.tsx b/components/new-menu/src/Menu.tsx
new file mode 100644
index 000000000..0bf679ac7
--- /dev/null
+++ b/components/new-menu/src/Menu.tsx
@@ -0,0 +1,10 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ name: 'AMenu',
+ setup(props, { slots }) {
+ return () => {
+ return {slots.default?.()}
;
+ };
+ },
+});
diff --git a/components/new-menu/src/MenuItem.tsx b/components/new-menu/src/MenuItem.tsx
new file mode 100644
index 000000000..20268d09a
--- /dev/null
+++ b/components/new-menu/src/MenuItem.tsx
@@ -0,0 +1,10 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ name: 'AMenuItem',
+ setup(props, { slots }) {
+ return () => {
+ return {slots.default?.()};
+ };
+ },
+});
diff --git a/components/new-menu/src/SubMenu.tsx b/components/new-menu/src/SubMenu.tsx
new file mode 100644
index 000000000..b88004338
--- /dev/null
+++ b/components/new-menu/src/SubMenu.tsx
@@ -0,0 +1,10 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ name: 'ASubMenu',
+ setup(props, { slots }) {
+ return () => {
+ return ;
+ };
+ },
+});
diff --git a/components/new-menu/style/dark.less b/components/new-menu/style/dark.less
new file mode 100644
index 000000000..1ad2abf99
--- /dev/null
+++ b/components/new-menu/style/dark.less
@@ -0,0 +1,156 @@
+.@{menu-prefix-cls} {
+ // dark theme
+ &&-dark,
+ &-dark &-sub,
+ &&-dark &-sub {
+ color: @menu-dark-color;
+ background: @menu-dark-bg;
+ .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+ opacity: 0.45;
+ transition: all 0.3s;
+ &::after,
+ &::before {
+ background: @menu-dark-arrow-color;
+ }
+ }
+ }
+
+ &-dark&-submenu-popup {
+ background: transparent;
+ }
+
+ &-dark &-inline&-sub {
+ background: @menu-dark-inline-submenu-bg;
+ }
+
+ &-dark&-horizontal {
+ border-bottom: 0;
+ }
+
+ &-dark&-horizontal > &-item,
+ &-dark&-horizontal > &-submenu {
+ top: 0;
+ margin-top: 0;
+ padding: @menu-item-padding;
+ border-color: @menu-dark-bg;
+ border-bottom: 0;
+ }
+
+ &-dark&-horizontal > &-item:hover {
+ background-color: @menu-dark-item-active-bg;
+ }
+
+ &-dark&-horizontal > &-item > a::before {
+ bottom: 0;
+ }
+
+ &-dark &-item,
+ &-dark &-item-group-title,
+ &-dark &-item > a,
+ &-dark &-item > span > a {
+ color: @menu-dark-color;
+ }
+
+ &-dark&-inline,
+ &-dark&-vertical,
+ &-dark&-vertical-left,
+ &-dark&-vertical-right {
+ border-right: 0;
+ }
+
+ &-dark&-inline &-item,
+ &-dark&-vertical &-item,
+ &-dark&-vertical-left &-item,
+ &-dark&-vertical-right &-item {
+ left: 0;
+ margin-left: 0;
+ border-right: 0;
+ &::after {
+ border-right: 0;
+ }
+ }
+
+ &-dark&-inline &-item,
+ &-dark&-inline &-submenu-title {
+ width: 100%;
+ }
+
+ &-dark &-item:hover,
+ &-dark &-item-active,
+ &-dark &-submenu-active,
+ &-dark &-submenu-open,
+ &-dark &-submenu-selected,
+ &-dark &-submenu-title:hover {
+ color: @menu-dark-highlight-color;
+ background-color: transparent;
+ > a,
+ > span > a {
+ color: @menu-dark-highlight-color;
+ }
+ > .@{menu-prefix-cls}-submenu-title,
+ > .@{menu-prefix-cls}-submenu-title:hover {
+ > .@{menu-prefix-cls}-submenu-arrow {
+ opacity: 1;
+ &::after,
+ &::before {
+ background: @menu-dark-highlight-color;
+ }
+ }
+ }
+ }
+ &-dark &-item:hover {
+ background-color: @menu-dark-item-hover-bg;
+ }
+
+ &-dark&-dark:not(&-horizontal) &-item-selected {
+ background-color: @menu-dark-item-active-bg;
+ }
+
+ &-dark &-item-selected {
+ color: @menu-dark-highlight-color;
+ border-right: 0;
+ &::after {
+ border-right: 0;
+ }
+ > a,
+ > span > a,
+ > a:hover,
+ > span > a:hover {
+ color: @menu-dark-highlight-color;
+ }
+
+ .@{menu-prefix-cls}-item-icon,
+ .@{iconfont-css-prefix} {
+ color: @menu-dark-selected-item-icon-color;
+
+ + span {
+ color: @menu-dark-selected-item-text-color;
+ }
+ }
+ }
+
+ &&-dark &-item-selected,
+ &-submenu-popup&-dark &-item-selected {
+ background-color: @menu-dark-item-active-bg;
+ }
+
+ // Disabled state sets text to dark gray and nukes hover/tab effects
+ &-dark &-item-disabled,
+ &-dark &-submenu-disabled {
+ &,
+ > a,
+ > span > a {
+ color: @disabled-color-dark !important;
+ opacity: 0.8;
+ }
+ > .@{menu-prefix-cls}-submenu-title {
+ color: @disabled-color-dark !important;
+ > .@{menu-prefix-cls}-submenu-arrow {
+ &::before,
+ &::after {
+ background: @disabled-color-dark !important;
+ }
+ }
+ }
+ }
+}
diff --git a/components/new-menu/style/index.less b/components/new-menu/style/index.less
new file mode 100644
index 000000000..b8956d2fc
--- /dev/null
+++ b/components/new-menu/style/index.less
@@ -0,0 +1,651 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './status';
+
+@menu-prefix-cls: ~'@{ant-prefix}-menu';
+@menu-animation-duration-normal: 0.15s;
+
+.accessibility-focus() {
+ box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+}
+
+// TODO: Should remove icon style compatible in v5
+
+// default theme
+.@{menu-prefix-cls} {
+ .reset-component();
+
+ margin-bottom: 0;
+ padding-left: 0; // Override default ul/ol
+ color: @menu-item-color;
+ font-size: @menu-item-font-size;
+ line-height: 0; // Fix display inline-block gap
+ text-align: left;
+ list-style: none;
+ background: @menu-bg;
+ outline: none;
+ box-shadow: @box-shadow-base;
+ transition: background @animation-duration-slow,
+ width @animation-duration-slow cubic-bezier(0.2, 0, 0, 1) 0s;
+ .clearfix();
+
+ &&-root:focus-visible {
+ .accessibility-focus();
+ }
+
+ ul,
+ ol {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ &-hidden,
+ &-submenu-hidden {
+ display: none;
+ }
+
+ &-item-group-title {
+ height: @menu-item-group-height;
+ padding: 8px 16px;
+ color: @menu-item-group-title-color;
+ font-size: @menu-item-group-title-font-size;
+ line-height: @menu-item-group-height;
+ transition: all @animation-duration-slow;
+ }
+
+ &-horizontal &-submenu {
+ transition: border-color @animation-duration-slow @ease-in-out,
+ background @animation-duration-slow @ease-in-out;
+ }
+ &-submenu,
+ &-submenu-inline {
+ transition: border-color @animation-duration-slow @ease-in-out,
+ background @animation-duration-slow @ease-in-out,
+ padding @menu-animation-duration-normal @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 @animation-duration-slow @ease-in-out,
+ padding @animation-duration-slow @ease-in-out;
+ }
+
+ &-item a {
+ 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;
+ max-height: calc(100vh - 100px);
+ padding: 0;
+ overflow: hidden;
+ border-right: 0;
+
+ // https://github.com/ant-design/ant-design/issues/22244
+ // https://github.com/ant-design/ant-design/issues/26812
+ &:not([class*='-active']) {
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+
+ .@{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
+ }
+
+ &-horizontal &-item,
+ &-horizontal &-submenu-title {
+ transition: border-color @animation-duration-slow, background @animation-duration-slow;
+ }
+
+ &-item,
+ &-submenu-title {
+ position: relative;
+ display: block;
+ margin: 0;
+ padding: @menu-item-padding;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: border-color @animation-duration-slow, background @animation-duration-slow,
+ padding @animation-duration-slow @ease-in-out;
+
+ .@{menu-prefix-cls}-item-icon,
+ .@{iconfont-css-prefix} {
+ min-width: 14px;
+ font-size: @menu-icon-size;
+ transition: font-size @menu-animation-duration-normal @ease-out,
+ margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
+ + span {
+ margin-left: @menu-icon-margin-right;
+ opacity: 1;
+ // transition: opacity @animation-duration-slow @ease-in-out,
+ // width @animation-duration-slow @ease-in-out, color @animation-duration-slow;
+ transition: opacity @animation-duration-slow @ease-in-out, margin @animation-duration-slow,
+ color @animation-duration-slow;
+ }
+ }
+
+ &.@{menu-prefix-cls}-item-only-child {
+ > .@{iconfont-css-prefix},
+ > .@{menu-prefix-cls}-item-icon {
+ margin-right: 0;
+ }
+ }
+
+ &:focus-visible {
+ .accessibility-focus();
+ }
+ }
+
+ & > &-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: transparent;
+ border-radius: @border-radius-base;
+ box-shadow: none;
+ transform-origin: 0 0;
+
+ // https://github.com/ant-design/ant-design/issues/13955
+ &::before {
+ position: absolute;
+ top: -7px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ opacity: 0.0001;
+ content: ' ';
+ }
+ }
+
+ // https://github.com/ant-design/ant-design/issues/13955
+ &-placement-rightTop::before {
+ top: 0;
+ left: -7px;
+ }
+
+ > .@{menu-prefix-cls} {
+ background-color: @menu-bg;
+ border-radius: @border-radius-base;
+ &-submenu-title::after {
+ transition: transform @animation-duration-slow @ease-in-out;
+ }
+ }
+
+ &-popup > .@{menu-prefix-cls} {
+ background-color: @menu-popup-bg;
+ }
+
+ &-expand-icon,
+ &-arrow {
+ position: absolute;
+ top: 50%;
+ right: 16px;
+ width: 10px;
+ color: @menu-item-color;
+ transform: translateY(-50%);
+ transition: transform @animation-duration-slow @ease-in-out;
+ }
+
+ &-arrow {
+ // →
+ &::before,
+ &::after {
+ position: absolute;
+ width: 6px;
+ height: 1.5px;
+ background-color: currentColor;
+ border-radius: 2px;
+ transition: background @animation-duration-slow @ease-in-out,
+ transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
+ color @animation-duration-slow @ease-in-out;
+ content: '';
+ }
+ &::before {
+ transform: rotate(45deg) translateY(-2.5px);
+ }
+ &::after {
+ transform: rotate(-45deg) translateY(2.5px);
+ }
+ }
+
+ &:hover > &-title > &-expand-icon,
+ &:hover > &-title > &-arrow {
+ color: @menu-highlight-color;
+ }
+
+ .@{menu-prefix-cls}-inline-collapsed &-arrow,
+ &-inline &-arrow {
+ // ↓
+ &::before {
+ transform: rotate(-45deg) translateX(2.5px);
+ }
+ &::after {
+ transform: rotate(45deg) translateX(-2.5px);
+ }
+ }
+
+ &-horizontal &-arrow {
+ display: none;
+ }
+
+ &-open&-inline > &-title > &-arrow {
+ // ↑
+ transform: translateY(-2px);
+ &::after {
+ transform: rotate(-45deg) translateX(-2.5px);
+ }
+ &::before {
+ transform: rotate(45deg) translateX(2.5px);
+ }
+ }
+ }
+
+ &-vertical &-submenu-selected,
+ &-vertical-left &-submenu-selected,
+ &-vertical-right &-submenu-selected {
+ color: @menu-highlight-color;
+ }
+
+ &-horizontal {
+ line-height: @menu-horizontal-line-height;
+ border: 0;
+ border-bottom: @border-width-base @border-style-base @border-color-split;
+ box-shadow: none;
+
+ &:not(.@{menu-prefix-cls}-dark) {
+ > .@{menu-prefix-cls}-item,
+ > .@{menu-prefix-cls}-submenu {
+ margin: @menu-item-padding;
+ margin-top: -1px;
+ margin-bottom: 0;
+ padding: @menu-item-padding;
+ padding-right: 0;
+ padding-left: 0;
+
+ &:hover,
+ &-active,
+ &-open,
+ &-selected {
+ color: @menu-highlight-color;
+ border-bottom: 2px solid @menu-highlight-color;
+ }
+ }
+ }
+
+ > .@{menu-prefix-cls}-item,
+ > .@{menu-prefix-cls}-submenu {
+ position: relative;
+ top: 1px;
+ display: inline-block;
+ vertical-align: bottom;
+ border-bottom: 2px solid transparent;
+ }
+
+ > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+ padding: 0;
+ }
+
+ > .@{menu-prefix-cls}-item {
+ a {
+ 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 @menu-animation-duration-normal @ease-out,
+ opacity @menu-animation-duration-normal @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;
+ 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;
+ }
+ }
+
+ &-vertical {
+ .@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
+ .@{menu-prefix-cls}-submenu-title {
+ padding-right: 34px;
+ }
+ }
+
+ &-inline {
+ width: 100%;
+ .@{menu-prefix-cls}-selected,
+ .@{menu-prefix-cls}-item-selected {
+ &::after {
+ transform: scaleY(1);
+ opacity: 1;
+ transition: transform @menu-animation-duration-normal @ease-in-out,
+ opacity @menu-animation-duration-normal @ease-in-out;
+ }
+ }
+
+ .@{menu-prefix-cls}-item,
+ .@{menu-prefix-cls}-submenu-title {
+ width: ~'calc(100% + 1px)';
+ }
+
+ .@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
+ .@{menu-prefix-cls}-submenu-title {
+ padding-right: 34px;
+ }
+
+ // Motion enhance for first level
+ &.@{menu-prefix-cls}-root {
+ .@{menu-prefix-cls}-item,
+ .@{menu-prefix-cls}-submenu-title {
+ display: flex;
+ align-items: center;
+ transition: border-color @animation-duration-slow, background @animation-duration-slow,
+ padding 0.1s @ease-out;
+
+ > .@{menu-prefix-cls}-title-content {
+ flex: auto;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ > * {
+ flex: none;
+ }
+ }
+ }
+ }
+
+ &&-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 ~'calc(50% - @{menu-icon-size-lg} / 2)';
+ text-overflow: clip;
+
+ .@{menu-prefix-cls}-submenu-arrow {
+ opacity: 0;
+ }
+
+ .@{menu-prefix-cls}-item-icon,
+ .@{iconfont-css-prefix} {
+ margin: 0;
+ font-size: @menu-icon-size-lg;
+ line-height: @menu-item-height;
+ + span {
+ display: inline-block;
+ opacity: 0;
+ }
+ }
+ }
+
+ .@{menu-prefix-cls}-item-icon,
+ .@{iconfont-css-prefix} {
+ display: inline-block;
+ }
+
+ &-tooltip {
+ pointer-events: none;
+
+ .@{menu-prefix-cls}-item-icon,
+ .@{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;
+ }
+
+ &-root&-inline-collapsed {
+ .@{menu-prefix-cls}-item,
+ .@{menu-prefix-cls}-submenu .@{menu-prefix-cls}-submenu-title {
+ > .@{menu-prefix-cls}-inline-collapsed-noicon {
+ font-size: @menu-icon-size-lg;
+ text-align: center;
+ }
+ }
+ }
+
+ &-sub&-inline {
+ padding: 0;
+ background: @menu-inline-submenu-bg;
+ 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;
+ }
+ }
+ }
+ }
+}
+
+// Integration with header element so menu items have the same height
+.@{ant-prefix}-layout-header {
+ .@{menu-prefix-cls} {
+ line-height: inherit;
+ }
+}
+
+@import './dark';
+@import './rtl';
diff --git a/components/new-menu/style/index.tsx b/components/new-menu/style/index.tsx
new file mode 100644
index 000000000..be4998634
--- /dev/null
+++ b/components/new-menu/style/index.tsx
@@ -0,0 +1,6 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+// deps-lint-skip: layout
+import '../../tooltip/style';
diff --git a/components/new-menu/style/rtl.less b/components/new-menu/style/rtl.less
new file mode 100644
index 000000000..a7edba5bb
--- /dev/null
+++ b/components/new-menu/style/rtl.less
@@ -0,0 +1,164 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@menu-prefix-cls: ~'@{ant-prefix}-menu';
+
+.@{menu-prefix-cls} {
+ &&-rtl {
+ direction: rtl;
+ text-align: right;
+ }
+
+ &-item-group-title {
+ .@{menu-prefix-cls}-rtl & {
+ text-align: right;
+ }
+ }
+
+ &-inline,
+ &-vertical {
+ .@{menu-prefix-cls}-rtl& {
+ border-right: none;
+ border-left: @border-width-base @border-style-base @border-color-split;
+ }
+ }
+
+ &-dark&-inline,
+ &-dark&-vertical {
+ .@{menu-prefix-cls}-rtl& {
+ border-left: none;
+ }
+ }
+
+ &-vertical&-sub,
+ &-vertical-left&-sub,
+ &-vertical-right&-sub {
+ > .@{menu-prefix-cls}-item,
+ > .@{menu-prefix-cls}-submenu {
+ .@{menu-prefix-cls}-rtl& {
+ transform-origin: top right;
+ }
+ }
+ }
+
+ &-item,
+ &-submenu-title {
+ .@{menu-prefix-cls}-item-icon,
+ .@{iconfont-css-prefix} {
+ .@{menu-prefix-cls}-rtl & {
+ margin-right: auto;
+ margin-left: @menu-icon-margin-right;
+ }
+ }
+
+ &.@{menu-prefix-cls}-item-only-child {
+ > .@{menu-prefix-cls}-item-icon,
+ > .@{iconfont-css-prefix} {
+ .@{menu-prefix-cls}-rtl & {
+ margin-left: 0;
+ }
+ }
+ }
+ }
+
+ &-submenu {
+ &-rtl.@{menu-prefix-cls}-submenu-popup {
+ transform-origin: 100% 0;
+ }
+
+ &-vertical,
+ &-vertical-left,
+ &-vertical-right,
+ &-inline {
+ > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+ .@{menu-prefix-cls}-rtl & {
+ right: auto;
+ left: 16px;
+ }
+ }
+ }
+
+ &-vertical,
+ &-vertical-left,
+ &-vertical-right {
+ > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+ &::before {
+ .@{menu-prefix-cls}-rtl & {
+ transform: rotate(-45deg) translateY(-2px);
+ }
+ }
+ &::after {
+ .@{menu-prefix-cls}-rtl & {
+ transform: rotate(45deg) translateY(2px);
+ }
+ }
+ }
+ }
+ }
+
+ &-vertical,
+ &-vertical-left,
+ &-vertical-right,
+ &-inline {
+ .@{menu-prefix-cls}-item {
+ &::after {
+ .@{menu-prefix-cls}-rtl& {
+ right: auto;
+ left: 0;
+ }
+ }
+ }
+
+ .@{menu-prefix-cls}-item,
+ .@{menu-prefix-cls}-submenu-title {
+ .@{menu-prefix-cls}-rtl& {
+ text-align: right;
+ }
+ }
+ }
+
+ &-inline {
+ .@{menu-prefix-cls}-submenu-title {
+ .@{menu-prefix-cls}-rtl& {
+ padding-right: 0;
+ padding-left: 34px;
+ }
+ }
+ }
+
+ &-vertical {
+ .@{menu-prefix-cls}-submenu-title {
+ .@{menu-prefix-cls}-rtl& {
+ padding-right: 16px;
+ padding-left: 34px;
+ }
+ }
+ }
+
+ &-inline-collapsed&-vertical {
+ .@{menu-prefix-cls}-submenu-title {
+ .@{menu-prefix-cls}-rtl& {
+ padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
+ }
+ }
+ }
+
+ &-item-group-list {
+ .@{menu-prefix-cls}-item,
+ .@{menu-prefix-cls}-submenu-title {
+ .@{menu-prefix-cls}-rtl & {
+ padding: 0 28px 0 16px;
+ }
+ }
+ }
+
+ &-sub&-inline {
+ border: 0;
+ & .@{menu-prefix-cls}-item-group-title {
+ .@{menu-prefix-cls}-rtl& {
+ padding-right: 32px;
+ padding-left: 0;
+ }
+ }
+ }
+}
diff --git a/components/new-menu/style/status.less b/components/new-menu/style/status.less
new file mode 100644
index 000000000..5e5d66c05
--- /dev/null
+++ b/components/new-menu/style/status.less
@@ -0,0 +1,47 @@
+@import './index';
+
+.@{menu-prefix-cls} {
+ // Danger
+ &-item-danger&-item {
+ color: @menu-highlight-danger-color;
+
+ &:hover,
+ &-active {
+ color: @menu-highlight-danger-color;
+ }
+
+ &:active {
+ background: @menu-item-active-danger-bg;
+ }
+
+ &-selected {
+ color: @menu-highlight-danger-color;
+ > a,
+ > a:hover {
+ color: @menu-highlight-danger-color;
+ }
+ }
+
+ .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-horizontal) &-selected {
+ background-color: @menu-item-active-danger-bg;
+ }
+
+ .@{menu-prefix-cls}-inline &::after {
+ border-right-color: @menu-highlight-danger-color;
+ }
+ }
+
+ // ==================== Dark ====================
+ &-dark &-item-danger&-item {
+ &,
+ &:hover,
+ & > a {
+ color: @menu-dark-danger-color;
+ }
+ }
+
+ &-dark&-dark:not(&-horizontal) &-item-danger&-item-selected {
+ color: @menu-dark-highlight-color;
+ background-color: @menu-dark-item-active-danger-bg;
+ }
+}
diff --git a/v2-doc b/v2-doc
index eacad021c..a7013ae87 160000
--- a/v2-doc
+++ b/v2-doc
@@ -1 +1 @@
-Subproject commit eacad021cf9e4d7d18fe4c4b9a38cbd7e3378d49
+Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557