diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index 6d46cf7d6a..5b5a142fd4 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -10,6 +10,7 @@ import type { ComponentToken as SliderComponentToken } from '../../slider/style' import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style'; import type { ComponentToken as TimelineComponentToken } from '../../timeline/style'; +import type { ComponentToken as MenuComponentToken } from '../../menu/style'; export const PresetColors = [ 'blue', @@ -79,6 +80,7 @@ export interface OverrideToken { Tabs?: {}; Card?: {}; Steps?: {}; + Menu?: MenuComponentToken; } /** Final token which contains the components level override */ diff --git a/components/menu/index.tsx b/components/menu/index.tsx index aeea2de8b7..7a7a982b92 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -15,6 +15,7 @@ import MenuContext, { MenuTheme } from './MenuContext'; import MenuDivider from './MenuDivider'; import type { ItemType } from './hooks/useItems'; import useItems from './hooks/useItems'; +import useStyle from './style'; export { MenuDividerProps } from './MenuDivider'; @@ -56,6 +57,7 @@ const InternalMenu = forwardRef((props, ref) => { siderCollapsed, items, children, + rootClassName, ...restProps } = props; @@ -99,6 +101,7 @@ const InternalMenu = forwardRef((props, ref) => { }; const prefixCls = getPrefixCls('menu', customizePrefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); const menuClassName = classNames(`${prefixCls}-${theme}`, className); // ======================== Context ========================== @@ -115,7 +118,7 @@ const InternalMenu = forwardRef((props, ref) => { ); // ========================= Render ========================== - return ( + return wrapSSR( ((props, ref) => { }) } ref={ref} + rootClassName={classNames(rootClassName, hashId)} > {mergedChildren} - + , ); }); diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less index fe110330b7..f645b70ada 100644 --- a/components/menu/style/dark.less +++ b/components/menu/style/dark.less @@ -1,177 +1,177 @@ -.accessibility-focus-dark() { - box-shadow: 0 0 0 2px @primary-7; -} - -.@{menu-prefix-cls} { - &&-root:focus-visible { - .accessibility-focus-dark(); - } - - &-dark &-item, - &-dark &-submenu-title { - &:focus-visible { - .accessibility-focus-dark(); - } - } - - // 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-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; - } - } - } - } -} +//.accessibility-focus-dark() { +// box-shadow: 0 0 0 2px @primary-7; +//} +// +//.@{menu-prefix-cls} { +// &&-root:focus-visible { +// .accessibility-focus-dark(); +// } +// +// &-dark &-item, +// &-dark &-submenu-title { +// &:focus-visible { +// .accessibility-focus-dark(); +// } +// } +// +// // 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-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/menu/style/index.less b/components/menu/style/index.less index 7d42a66660..9c78bf3581 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -1,700 +1,700 @@ -@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 @primary-2; -} - -// 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; - } - - // Overflow ellipsis - &-overflow { - display: flex; - - &-item { - flex: 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; - } - - &-title-content { - transition: color @animation-duration-slow; - } - - &-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 { - overflow: hidden; - line-height: 0; - border-color: @border-color-split; - border-style: solid; - border-width: 1px 0 0; - } - - &-item-divider-dashed { - border-style: dashed; - } - - &-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, margin @animation-duration-slow, - color @animation-duration-slow; - } - } - - .@{menu-prefix-cls}-item-icon.svg { - vertical-align: -0.125em; - } - - &.@{menu-prefix-cls}-item-only-child { - > .@{iconfont-css-prefix}, - > .@{menu-prefix-cls}-item-icon { - margin-right: 0; - } - } - - &:focus-visible { - .accessibility-focus(); - } - } - - & > &-item-divider { - margin: 1px 0; - padding: 0; - } - - &-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-top: -1px; - margin-bottom: 0; - padding: @menu-item-padding; - - &:hover, - &-active, - &-open, - &-selected { - color: @menu-highlight-color; - - &::after { - 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; - - &::after { - position: absolute; - right: @menu-item-padding-horizontal; - bottom: 0; - left: @menu-item-padding-horizontal; - border-bottom: 2px solid transparent; - transition: border-color @animation-duration-slow @ease-in-out; - content: ''; - } - } - - > .@{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; - cursor: not-allowed; - - &::after { - border-color: transparent !important; - } - - 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; - } -} - -// https://github.com/ant-design/ant-design/issues/32950 -.@{ant-prefix}-menu-inline-collapsed-tooltip { - a, - a:hover { - color: @white; - } -} - -@import './light'; -@import './dark'; -@import './rtl'; +//@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 @primary-2; +//} +// +//// 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; +// } +// +// // Overflow ellipsis +// &-overflow { +// display: flex; +// +// &-item { +// flex: 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; +// } +// +// &-title-content { +// transition: color @animation-duration-slow; +// } +// +// &-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 { +// overflow: hidden; +// line-height: 0; +// border-color: @border-color-split; +// border-style: solid; +// border-width: 1px 0 0; +// } +// +// &-item-divider-dashed { +// border-style: dashed; +// } +// +// &-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, margin @animation-duration-slow, +// color @animation-duration-slow; +// } +// } +// +// .@{menu-prefix-cls}-item-icon.svg { +// vertical-align: -0.125em; +// } +// +// &.@{menu-prefix-cls}-item-only-child { +// > .@{iconfont-css-prefix}, +// > .@{menu-prefix-cls}-item-icon { +// margin-right: 0; +// } +// } +// +// &:focus-visible { +// .accessibility-focus(); +// } +// } +// +// & > &-item-divider { +// margin: 1px 0; +// padding: 0; +// } +// +// &-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-top: -1px; +// margin-bottom: 0; +// padding: @menu-item-padding; +// +// &:hover, +// &-active, +// &-open, +// &-selected { +// color: @menu-highlight-color; +// +// &::after { +// 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; +// +// &::after { +// position: absolute; +// right: @menu-item-padding-horizontal; +// bottom: 0; +// left: @menu-item-padding-horizontal; +// border-bottom: 2px solid transparent; +// transition: border-color @animation-duration-slow @ease-in-out; +// content: ''; +// } +// } +// +// > .@{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; +// cursor: not-allowed; +// +// &::after { +// border-color: transparent !important; +// } +// +// 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; +// } +//} +// +//// https://github.com/ant-design/ant-design/issues/32950 +//.@{ant-prefix}-menu-inline-collapsed-tooltip { +// a, +// a:hover { +// color: @white; +// } +//} +// +//@import './light'; +//@import './dark'; +//@import './rtl'; diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx index be49986340..04e7b34f3f 100644 --- a/components/menu/style/index.tsx +++ b/components/menu/style/index.tsx @@ -1,6 +1,1066 @@ -import '../../style/index.less'; -import './index.less'; +// deps-lint-skip-all +import { CSSObject } from '@ant-design/cssinjs'; +import { TinyColor } from '@ctrl/tinycolor'; +import { genComponentStyleHook, resetComponent, clearFix, mergeToken } from '../../_util/theme'; +import type { GenerateStyle, FullToken } from '../../_util/theme'; -// style dependencies -// deps-lint-skip: layout -import '../../tooltip/style'; +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken {} + +export interface MenuToken extends FullToken<'Menu'> { + black: string; + componentBackground: string; + colorTextSecondary: string; + motionDurationMD: string; + primaryColor: string; + borderColorSplit: string; + itemActiveBackground: string; + easeOut: string; + zIndexDrop: number; + menuOpacity: number; + sizeLg: number; + textColorDark: string; + menuInlineSubmenuBg: string; + disabledColor: string; + darkColor: string; + darkBg: string; + colorDark: string; + darkHighlightColor: string; + disabledColorDark: string; + darkInlineSubmenuBg: string; + itemActiveBg: string; + boxShadowColor: string; + highlightDangerColor: string; + itemActiveDangerBg: string; + width20: number; +} + +// =============================== Base =============================== +const accessibilityFocus: GenerateStyle = (token): CSSObject => ({ + boxShadow: `0 0 0 2px ${token.colorPrimarySecondary}`, // FIXME: hard code in v4 +}); + +const accessibilityFocusDark: GenerateStyle = token => ({ + boxShadow: `0 0 0 2px ${token.boxShadowColor}`, // FIXME: hard code in v4 +}); + +const genStatusStyle: GenerateStyle = (token: MenuToken): CSSObject => { + const { componentCls, highlightDangerColor, itemActiveDangerBg, darkHighlightColor, iconCls } = + token; + return { + [`${componentCls}`]: { + // Danger + [`${componentCls}-item-danger${componentCls}-item`]: { + color: highlightDangerColor, + + [`&:hover,${componentCls}-active`]: { + color: highlightDangerColor, + }, + + '&:active': { + background: itemActiveDangerBg, + }, + + [`${componentCls}-selected`]: { + color: highlightDangerColor, + + '> a, > a:hover': { + color: highlightDangerColor, + }, + }, + + [`${iconCls}:not(${iconCls}-horizontal) ${componentCls}-item-selected`]: { + backgroundColor: itemActiveDangerBg, + }, + + [`${iconCls}-inline &::after`]: { + borderInlineEndColor: highlightDangerColor, + }, + }, + + // ==================== Dark ==================== + [`${componentCls}-dark ${componentCls}-item-danger${componentCls}-item`]: { + [`&, &:hover, & > a`]: { + color: highlightDangerColor, + }, + }, + + [`${componentCls}-dark${componentCls}-dark:not(${componentCls}-horizontal) ${componentCls}-item-danger${componentCls}-item-selected`]: + { + color: darkHighlightColor, + backgroundColor: highlightDangerColor, + }, + }, + }; +}; +const genLightStyle = (token: MenuToken): CSSObject => { + const { componentCls, primaryColor, black } = token; + return { + [`${componentCls}-light`]: { + // light theme + [` + ${componentCls}-item:hover, + ${componentCls}-item-active, + ${componentCls}:not(${componentCls}-inline) ${componentCls}-submenu-open, + ${componentCls}-submenu-active, + ${componentCls}-submenu-title:hover + `]: { + color: primaryColor, + [`${componentCls}`]: { + color: black, + }, + }, + }, + }; +}; +const genDarkStyle = (token: MenuToken): CSSObject => { + const { componentCls, darkColor, darkBg, darkHighlightColor, motionDurationSlow } = token; + return { + [`&${componentCls}-root:focus-visible`]: { + ...accessibilityFocusDark(token), + }, + + [`${componentCls}-dark ${componentCls}-item, ${componentCls}-dark ${componentCls}-submenu-title`]: + { + '&:focus-visible': { + ...accessibilityFocusDark(token), + }, + }, + + // dark theme + [`&${componentCls}-dark,${componentCls}-dark ${componentCls}-sub,&${componentCls}-dark ${componentCls}-sub`]: + { + color: darkColor, + background: darkBg, + [`${componentCls}-submenu-title ${componentCls}-submenu-arrow`]: { + opacity: 0.45, + transition: `all ${motionDurationSlow}`, + + '&::after, &::before': { + background: darkHighlightColor, + }, + }, + }, + }; +}; + +const genBaseStyle: GenerateStyle = (token): CSSObject => { + const { + radiusBase, + zIndexDrop, + componentCls, + antCls, + borderColorSplit, + primaryColor, + motionDurationSlow, + controlLineType, + motionEaseInOut, + motionDurationMD, + easeOut, + iconCls, + boxShadow, + componentBackground, + colorText, + lineWidth, + padding, + marginXXS, + marginXS, + sizeLg, + paddingXXS, + menuInlineSubmenuBg, + disabledColor, + controlHeight, + colorTextSecondary, + fontSize, + lineHeight, + paddingXS, + darkBg, + colorDark, + darkInlineSubmenuBg, + darkColor, + darkHighlightColor, + disabledColorDark, + itemActiveBg, + controlHeightLG, + width20, + black, + } = token; + + return { + // default theme + [componentCls]: { + ...resetComponent(token), + + marginBlockEnd: 0, + paddingInlineStart: 0, // Override default ul/ol + color: colorText, + fontSize, + lineHeight: 0, // Fix display inline-block gap + textAlign: 'start', + listStyle: 'none', + background: componentBackground, + outline: 'none', + boxShadow, + transition: `background ${motionDurationSlow},width ${motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`, // FIXME: hard code in v4 + ...clearFix(), + + // sub-menu + [`${componentCls}`]: { + color: black, + ...clearFix(), + }, + + [`&${componentCls}-root:focus-visible`]: accessibilityFocus(token), + + 'ul, ol': { + margin: 0, + padding: 0, + listStyle: 'none', + }, + + [`${componentCls}-item-group-title`]: { + paddingInline: `${padding}px`, + paddingBlock: `${paddingXS}px`, + color: colorTextSecondary, + fontSize, + lineHeight, + transition: `all ${motionDurationSlow}`, + }, + + [`${componentCls}-submenu-selected`]: { + color: primaryColor, + [`${componentCls}`]: { + color: black, + ...clearFix(), + }, + }, + + [`${componentCls}-item:active,${componentCls}-submenu-title:active`]: { + background: itemActiveBg, + }, + + [`${componentCls}-title-content`]: { + transition: `color ${motionDurationSlow}`, + }, + + [`${componentCls}-item a`]: { + color: colorText, + + '&:hover': { + color: primaryColor, + }, + + '&::before': { + position: 'absolute', + insetBlockStart: 0, + insetInlineEnd: 0, + insetBlockEnd: 0, + insetInlineStart: 0, + backgroundColor: 'transparent', + content: '""', + }, + }, + + // https://github.com/ant-design/ant-design/issues/19809 + [`${componentCls}-item > ${antCls}-badge a`]: { + color: colorText, + + '&:hover': { + color: primaryColor, + }, + }, + + [`${componentCls}-item-divider`]: { + overflow: 'hidden', + lineHeight: 0, + borderColor: borderColorSplit, + borderStyle: controlLineType, + borderBlockStartWidth: `${lineWidth}px`, + borderBlockEndWidth: 0, + borderInlineWidth: 0, + }, + + [`${componentCls}-item-divider-dashed`]: { + borderStyle: 'dashed', + }, + + [`${componentCls}-item-selected`]: { + color: primaryColor, + + 'a,a:hover': { + color: primaryColor, + }, + }, + + [`&:not(${componentCls}-horizontal) ${componentCls}-item-selected`]: { + backgroundColor: itemActiveBg, + }, + + [`${componentCls}-vertical-right`]: { + borderInlineStart: `${lineWidth}px ${controlLineType} ${borderColorSplit}`, + }, + + [`${componentCls}-vertical${componentCls}-sub,${componentCls}-vertical-left${componentCls}-sub,${componentCls}-vertical-right${componentCls}-sub`]: + { + minWidth: 160, // FIXME: hard code in v4 + maxHeight: 'calc(100vh - 100px)', // FIXME: hard code in v4 + padding: 0, + overflow: 'hidden', + borderInlineEnd: 0, + + // https://github.com/ant-design/ant-design/issues/22244 + // https://github.com/ant-design/ant-design/issues/26812 + [`&:not([class*='-active'])`]: { + overflowX: 'hidden', + overflowY: 'auto', + }, + + [`${componentCls}-item`]: { + insetInlineStart: 0, + marginInlineStart: 0, + borderInlineEnd: 0, + + '&::after': { + borderInlineEnd: 0, + }, + }, + [`> ${componentCls}-item, > ${componentCls}-submenu`]: { + transformOrigin: '0 0', + }, + }, + + [`${componentCls}-horizontal${componentCls}-sub`]: { + // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66 + minWidth: '114px', // FIXME: hard code in v4, + }, + + [`${componentCls}-item,${componentCls}-submenu-title`]: { + position: 'relative', + display: 'block', + margin: 0, + paddingInline: width20, + paddingBlock: 0, + whiteSpace: 'nowrap', + cursor: 'pointer', + transition: `border-color ${motionDurationSlow}, background ${motionDurationSlow},padding ${motionDurationSlow} ${motionEaseInOut}`, + + [`${componentCls}-item-icon,${iconCls}`]: { + minWidth: '14px', // FIXME: hard code in v4 + fontSize, + transition: `font-size ${motionDurationMD} ${easeOut},margin ${motionDurationSlow} ${motionEaseInOut}, color ${motionDurationSlow}`, + + '+ span': { + marginInlineStart: 10, + opacity: 1, + transition: `opacity ${motionDurationSlow} ${motionEaseInOut}, margin ${motionDurationSlow},color ${motionDurationSlow}`, + }, + }, + + [`${componentCls}-item-icon.svg`]: { + verticalAlign: '-0.125em', // FIXME: hard code in v4 + }, + + [`&${componentCls}-item-only-child`]: { + [`> ${iconCls},> ${componentCls}-item-icon`]: { + marginInlineEnd: 0, + }, + }, + + '&:focus-visible': { + ...accessibilityFocus(token), + }, + }, + + [`& > ${componentCls}-item-divider`]: { + margin: `${lineWidth}px 0`, + padding: 0, + }, + + [`&${componentCls}-inline-collapsed`]: { + width: '80px', + + [` + > ${componentCls}-item, + > ${componentCls}-item-group + > ${componentCls}-item-group-list + > ${componentCls}-item, + > ${componentCls}-item-group + > ${componentCls}-item-group-list + > ${componentCls}-submenu + > ${componentCls}-submenu-title, + > ${componentCls}-submenu > ${componentCls}-submenu-title + `]: { + insetInlineStart: 0, + paddingInline: `calc(50% - 8px)`, // FIXME: hard code in v4 + paddingBlock: 0, + textOverflow: 'clip', + + [`${componentCls}-submenu-arrow`]: { + opacity: 0, + }, + + [`${componentCls}-item-icon,${iconCls}`]: { + margin: 0, + fontSize: sizeLg, + lineHeight: `${controlHeightLG}px`, + + '+ span': { + display: 'inline-block', + opacity: 0, + }, + }, + }, + + [`${componentCls}-item-icon,${iconCls}`]: { + display: 'inline-block', + }, + + [`${componentCls}-tooltip`]: { + pointerEvents: 'none', + + [`${componentCls}-item-icon,${iconCls}`]: { + display: 'none', + }, + + a: { + color: colorDark, + }, + }, + + [`${componentCls}-item-group-title`]: { + borderInline: `${paddingXXS}px`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, + }, + + [`${componentCls}-item-group-list`]: { + margin: 0, + padding: 0, + [`${componentCls}-item,${componentCls}-submenu-title`]: { + paddingBlock: 0, + paddingInlineStart: '28px', // FIXME: hard code in v4 + paddingInlineEnd: '16px', // FIXME: hard code in v4 + }, + }, + [`${componentCls}-sub${componentCls}-inline`]: { + padding: 0, + background: menuInlineSubmenuBg, + border: 0, + borderRadius: 0, + boxShadow: 'none', + [`& > ${componentCls}-item,& > ${componentCls}-submenu > ${componentCls}-submenu-title`]: { + height: controlHeightLG, + lineHeight: `${controlHeightLG}px`, + listStylePosition: 'inside', + listStyleType: 'disc', + }, + + [`${componentCls}-item-group-title`]: { + paddingInlineStart: `${controlHeight}px`, + }, + }, + // Disabled state sets text to gray and nukes hover/tab effects + [`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: { + color: `${disabledColor} !important`, + background: 'none', + cursor: 'not-allowed', + + '&::after': { + borderColor: 'transparent !important', + }, + + a: { + color: `${disabledColor} !important`, + pointerEvents: 'none', + }, + [`> ${componentCls}-submenu-title`]: { + color: `${disabledColor} !important`, + cursor: 'not-allowed', + [`> ${componentCls}-submenu-arrow`]: { + [`&::before, &::after`]: { + background: `${disabledColor} !important`, + }, + }, + }, + }, + + [`${componentCls}-submenu-arrow`]: { + '&::before,&::after': { + position: 'absolute', + width: '6px', // FIXME: hard code in v4 + height: '1.5px', // FIXME: hard code in v4 + backgroundColor: 'currentcolor', + borderRadius: radiusBase, + transition: `background ${motionDurationSlow} ${motionEaseInOut},transform ${motionDurationSlow} ${motionEaseInOut}, top ${motionDurationSlow} ${motionEaseInOut},color ${motionDurationSlow} ${motionEaseInOut}`, + content: '""', + }, + + '&::before': { + transform: `rotate(45deg) translateY(-2.5px)`, // FIXME: hard code in v4 + }, + + '&::after': { + transform: `rotate(-45deg) translateY(2.5px)`, // FIXME: hard code in v4 + }, + }, + + [`${componentCls}-submenu-horizontal ${componentCls}-submenu-arrow`]: { + display: 'none', + }, + + [`${componentCls}-inline-collapsed ${componentCls}-submenu-arrow, ${componentCls}-submenu-inline ${componentCls}-submenu-arrow`]: + { + // ↓ + '&::before': { + transform: `rotate(-45deg) translateX(2.5px)`, // FIXME: hard code in v4 + }, + + '&::after': { + transform: `rotate(45deg) translateX(-2.5px)`, // FIXME: hard code in v4 + }, + }, + [`${componentCls}-submenu-open${componentCls}-submenu-inline > ${componentCls}-submenu-title > ${componentCls}-submenu-arrow`]: + { + // ↑ + transform: `translateY(-2px)`, // FIXME: hard code in v4 + '&::after': { + transform: 'rotate(-45deg) translateX(-2.5px)', // FIXME: hard code in v4 + }, + '&::before': { + transform: `rotate(45deg) translateX(2.5px)`, // FIXME: hard code in v4 + }, + }, + [`${componentCls}-submenu-expand-icon,${componentCls}-submenu-arrow`]: { + position: 'absolute', + insetBlockStart: '50%', + insetInlineEnd: '16px', // FIXME: hard code in v4 + width: '10px', // FIXME: hard code in v4 + color: colorText, + transform: 'translateY(-50%)', + transition: `transform ${motionDurationSlow} ${motionEaseInOut}`, + }, + [` + ${componentCls}-submenu:hover > ${componentCls}-submenu-title > ${componentCls}-submenu-expand-icon, + ${componentCls}-submenu:hover > ${componentCls}-submenu-title > ${componentCls}-submenu-arrow + `]: { + color: primaryColor, + }, + ...genDarkStyle(token), + + [`${componentCls}-vertical ${componentCls}-item`]: { + height: controlHeightLG, + marginBlock: marginXXS, + paddingBlock: 0, + paddingInline: `${padding}px`, + overflow: 'hidden', + lineHeight: `${controlHeightLG}px`, + textOverflow: 'ellipsis', + }, + [`${componentCls}-hidden`]: { + display: 'none', + }, + }, + + [`${componentCls}-submenu-hidden`]: { + display: 'none', + }, + // ========================= root ============================ + [`${componentCls}-root${componentCls}-vertical, + ${componentCls}-root${componentCls}-vertical-left, + ${componentCls}-root${componentCls}-vertical-right, + ${componentCls}-root${componentCls}-inline`]: { + boxShadow: 'none', + }, + [`${componentCls}-root${componentCls}-inline-collapsed`]: { + [`${componentCls}-item,${componentCls}-submenu ${componentCls}-submenu-title`]: { + [`> ${componentCls}-inline-collapsed-noicon`]: { + fontSize: sizeLg, + textAlign: 'center', + }, + }, + }, + + // ========================= dark ============================ + [`${componentCls}-dark ${componentCls}-inline${componentCls}-sub`]: { + background: darkInlineSubmenuBg, + }, + + [` + ${componentCls}-dark ${componentCls}-item,${componentCls}-dark ${componentCls}-item-group-title, + ${componentCls}-dark ${componentCls}-item > a,${componentCls}-dark ${componentCls}-item > span > a + `]: { + color: darkColor, + }, + + [` + ${componentCls}-dark${componentCls}-inline,${componentCls}-dark${componentCls}-vertical, + ${componentCls}-dark${componentCls}-vertical-left,${componentCls}-dark${componentCls}-vertical-right + `]: { + borderInlineEnd: 0, + }, + + [` + ${componentCls}-dark${componentCls}-inline ${componentCls}-item, + ${componentCls}-dark${componentCls}-vertical ${componentCls}-item, + ${componentCls}-dark${componentCls}-vertical-left ${componentCls}-item, + ${componentCls}-dark${componentCls}-vertical-right ${componentCls}-item + `]: { + insetInlineStart: 0, + marginInlineStart: 0, + borderInlineEnd: 0, + + '&::after': { + borderInlineEnd: 0, + }, + }, + + [` + ${componentCls}-dark${componentCls}-inline ${componentCls}-item, + ${componentCls}-dark${componentCls}-inline ${componentCls}-submenu-title + `]: { + width: '100%', + }, + + [` + ${componentCls}-dark ${componentCls}-item:hover, + ${componentCls}-dark ${componentCls}-item-active, + ${componentCls}-dark ${componentCls}-submenu-active, + ${componentCls}-dark ${componentCls}-submenu-open, + ${componentCls}-dark ${componentCls}-submenu-selected, + ${componentCls}-dark ${componentCls}-submenu-title:hover + `]: { + color: darkHighlightColor, + backgroundColor: 'transparent', + '> a, > span > a': { + color: darkHighlightColor, + }, + [`> ${componentCls}-submenu-title`]: { + [`> ${componentCls}-submenu-arrow`]: { + opacity: 1, + + '&::after, &::before': { + background: darkHighlightColor, + }, + }, + }, + }, + + [`${componentCls}-dark ${componentCls}-item:hover`]: { + backgroundColor: 'transparent', + }, + + [`${componentCls}-dark${componentCls}-dark:not(${componentCls}-horizontal) ${componentCls}-item-selected`]: + { + backgroundColor: primaryColor, + }, + + [`${componentCls}-dark ${componentCls}-item-selected`]: { + color: darkHighlightColor, + borderInlineEnd: 0, + + '&::after': { + borderInlineEnd: 0, + }, + + '> a, > span > a, > a:hover,> span > a:hover': { + color: darkHighlightColor, + }, + + [`${componentCls}-item-icon, ${iconCls}`]: { + color: darkHighlightColor, + + '+ span': { + color: darkHighlightColor, + }, + }, + }, + + [`${componentCls}${componentCls}-dark ${componentCls}-item-selected,${componentCls}-submenu-popup${componentCls}-dark ${componentCls}-item-selected`]: + { + backgroundColor: primaryColor, + }, + + // Disabled state sets text to dark gray and nukes hover/tab effects + [`${componentCls}-dark ${componentCls}-item-disabled,${componentCls}-dark ${componentCls}-submenu-disabled`]: + { + '&, > a, > span > a': { + color: `${disabledColorDark} !important`, + opacity: 0.8, + }, + [`> ${componentCls}-submenu-title`]: { + color: `${disabledColorDark} !important`, + [`> ${componentCls}-submenu-arrow`]: { + [`&::before, &::after`]: { + background: `${disabledColorDark} !important`, + }, + }, + }, + }, + + // ========================= inline ============================ + [`${componentCls}${componentCls}-inline`]: { + width: '100%', + [`${componentCls}-selected,${componentCls}-item-selected`]: { + '&::after': { + transform: 'scaleY(1)', + opacity: 1, + transition: `transform ${motionDurationMD} ${motionEaseInOut},opacity ${motionDurationMD} ${motionEaseInOut}`, + }, + }, + + [`${componentCls}-item,${componentCls}-submenu-title`]: { + width: 'calc(100% + 1px)', // FIXME: hard code in v4 + }, + + [`${componentCls}-item-group-list ${componentCls}-submenu-title,${componentCls}-submenu-title`]: + { + paddingInlineEnd: '34px', // FIXME: hard code in v4 + }, + }, + // Motion enhance for first level + [`${componentCls}-inline${componentCls}-root`]: { + [`${componentCls}-item,${componentCls}-submenu-title`]: { + display: 'flex', + alignItems: 'center', + transition: `border-color ${motionDurationSlow}, background ${motionDurationSlow},padding 0.1s ${easeOut}`, + + [`> ${componentCls}-title-content`]: { + flex: 'auto', + minWidth: 0, + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + + [`> *`]: { + flex: 'none', + }, + }, + }, + [`${componentCls}-submenu,${componentCls}-submenu-inline`]: { + transition: `border-color ${motionDurationSlow} ${motionEaseInOut},background ${motionDurationSlow} ${motionEaseInOut},padding ${motionDurationMD} ${motionEaseInOut}`, + }, + [`${componentCls}-inline,${componentCls}-vertical,${componentCls}-vertical-left`]: { + borderInlineEnd: `${lineWidth}px ${controlLineType} ${borderColorSplit}`, + }, + + // ========================= horizontal ============================ + [`${componentCls}-horizontal`]: { + lineHeight: '46px', // FIXME: hard code in v4 + border: 0, + borderBlockEnd: `${lineWidth}px ${controlLineType} ${borderColorSplit}`, + boxShadow: 'none', + + [`&:not(${componentCls}-dark)`]: { + [`> ${componentCls}-item, > ${componentCls}-submenu`]: { + marginBlockStart: '-1px', // FIXME: hard code in v4 + marginBlockEnd: 0, + paddingBlock: 0, + paddingInline: width20, + }, + [`&:hover,${componentCls}-item-active,${componentCls}-item-open,${componentCls}-item-selected, ${componentCls}-submenu-active,${componentCls}-submenu-open,${componentCls}-submenu-selected`]: + { + color: primaryColor, + + '&::after': { + borderBlockEnd: `2px ${controlLineType} ${primaryColor}`, // FIXME: hard code in v4 + }, + }, + }, + + [`> ${componentCls}-item, > ${componentCls}-submenu`]: { + position: 'relative', + insetBlockStart: '1px', + display: 'inline-block', + verticalAlign: 'bottom', + + '&::after': { + position: 'absolute', + insetInline: width20, + insetBlockEnd: 0, + borderBlockEnd: `2px ${controlLineType} transparent`, // FIXME: hard code in v4 + transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`, + content: '""', + }, + }, + + [`> ${componentCls}-submenu > ${componentCls}-submenu-title`]: { + padding: 0, + }, + + [`> ${componentCls}-item`]: { + a: { + color: colorText, + + '&:hover': { + color: primaryColor, + }, + + '&::before': { + insetBlockEnd: '-2px', // FIXME: hard code in v4 + }, + }, + + [`${componentCls}-item-selected a`]: { + color: primaryColor, + }, + }, + + '&::after': { + display: 'block', + clear: 'both', + height: 0, + content: '"\\20"', + }, + }, + + [`${componentCls}-horizontal ${componentCls}-submenu`]: { + transition: `border-color ${motionDurationSlow} ${motionEaseInOut},background ${motionDurationSlow} ${motionEaseInOut}`, + }, + + [`${componentCls}-horizontal ${componentCls}-item,${componentCls}-horizontal ${componentCls}-submenu`]: + { + marginBlockStart: '-1px', // FIXME: hard code in v4 + }, + + [`${componentCls}-horizontal > ${componentCls}-item:hover,${componentCls}-horizontal > ${componentCls}-item-active,${componentCls}-horizontal > ${componentCls}-submenu ${componentCls}-submenu-title:hover`]: + { + backgroundColor: 'transparent', + }, + + [`${componentCls}-dark${componentCls}-horizontal`]: { + borderBlockEnd: 0, + }, + + [`${componentCls}-dark${componentCls}-horizontal > ${componentCls}-item,${componentCls}-dark${componentCls}-horizontal > ${componentCls}-submenu`]: + { + insetBlockStart: 0, + marginBlockStart: 0, + paddingBlock: 0, + paddingInline: width20, + borderColor: darkBg, + borderBlockEnd: 0, + }, + + [`${componentCls}-dark${componentCls}-horizontal > ${componentCls}-item:hover`]: { + backgroundColor: primaryColor, + }, + + [`${componentCls}-dark${componentCls}-horizontal > ${componentCls}-item > a::before`]: { + insetBlockEnd: 0, + }, + + [`${componentCls}-horizontal ${componentCls}-item,${componentCls}-horizontal ${componentCls}-submenu-title`]: + { + transition: `border-color ${motionDurationSlow}, background ${motionDurationSlow}`, + }, + // ========================= vertical ============================ + [`${componentCls}-vertical ${componentCls}-submenu-selected,${componentCls}-vertical-left ${componentCls}-submenu-selected,${componentCls}-vertical-right ${componentCls}-submenu-selected`]: + { + color: primaryColor, + }, + + [`${componentCls}-vertical`]: { + [`${componentCls}-item-group-list ${componentCls}-submenu-title,${componentCls}-submenu-title`]: + { + borderInlineEnd: '34px', // FIXME: hard code in v4 + }, + [`${componentCls}-item`]: { + height: controlHeightLG, + marginBlock: marginXXS, + paddingBlock: 0, + paddingInline: `${padding}px`, + overflow: 'hidden', + lineHeight: `${controlHeightLG}px`, + textOverflow: 'ellipsis', + }, + }, + + [`${componentCls}-vertical,${componentCls}-vertical-left,${componentCls}-vertical-right,${componentCls}-inline`]: + { + [`${componentCls}-item`]: { + position: 'relative', + + '&::after': { + position: 'absolute', + insetBlockStart: 0, + insetInlineEnd: 0, + insetBlockEnd: 0, + borderInlineEnd: `3px ${controlLineType} ${primaryColor}`, // FIXME: hard code in v4 + transform: 'scaleY(0.0001)', // FIXME: hard code in v4 + opacity: 0, + transition: `transform ${motionDurationMD} ${easeOut},opacity ${motionDurationMD} ${easeOut}`, + content: '""', + }, + }, + + [`${componentCls}-item,${componentCls}-submenu-title`]: { + height: controlHeightLG, + marginBlock: marginXXS, + paddingBlock: 0, + paddingInline: `${padding}px`, + overflow: 'hidden', + lineHeight: `${controlHeightLG}px`, + textOverflow: 'ellipsis', + }, + + // disable margin collapsed + [`${componentCls}-submenu`]: { + paddingBottom: '0.02px', // FIXME: hard code in v4 + }, + + [`${componentCls}-item:not(:last-child)`]: { + marginBlockEnd: marginXS, + }, + + [`> ${componentCls}-item, > ${componentCls}-submenu > ${componentCls}-submenu-title`]: { + height: controlHeightLG, + lineHeight: `${controlHeightLG}px`, + }, + }, + // ========================= submenu ============================ + [`${componentCls}-submenu`]: { + // https://github.com/ant-design/ant-design/issues/13955 + [`${componentCls}-submenu-placement-rightTop::before`]: { + insetBlockStart: 0, + insetInlineStart: '-7px', // FIXME: hard code in v4 + }, + + [`> ${componentCls}`]: { + backgroundColor: componentBackground, + borderRadius: radiusBase, + + [`${componentCls}-submenu-title::after`]: { + transition: `transform ${motionDurationSlow} ${motionEaseInOut}`, + }, + }, + + [`${componentCls}-item a`]: { + color: colorText, + + '&:hover': { + color: primaryColor, + }, + + '&::before': { + position: 'absolute', + insetBlockStart: 0, + insetInlineEnd: 0, + insetBlockEnd: 0, + insetInlineStart: 0, + backgroundColor: 'transparent', + content: '""', + }, + }, + }, + + [`${componentCls}-submenu-popup > ${componentCls}`]: { + backgroundColor: componentBackground, + }, + + [`${componentCls}-submenu ${componentCls}-sub`]: { + cursor: 'initial', + transition: `background ${motionDurationSlow} ${motionEaseInOut},padding ${motionDurationSlow} ${motionEaseInOut}`, + }, + // ========================= submenu-popup ============================ + [`${componentCls}-submenu-popup`]: { + position: 'absolute', + zIndex: zIndexDrop, + background: 'transparent', + borderRadius: radiusBase, + // boxShadow: 'none', + boxShadow, + transformOrigin: '0 0', + + // https://github.com/ant-design/ant-design/issues/13955 + '&::before': { + position: 'absolute', + insetBlockStart: '-7px', // FIXME: hard code in v4 + insetInlineEnd: 0, + insetBlockEnd: 0, + insetInlineStart: 0, + zIndex: -1, + width: '100%', + height: '100%', + opacity: 0.0001, // FIXME: hard code in v4 + content: '" "', + }, + [`${componentCls}-item,${componentCls}-submenu-title`]: { + height: controlHeightLG, + marginBlock: marginXXS, + paddingBlock: 0, + paddingInline: `${padding}px`, + overflow: 'hidden', + lineHeight: `${controlHeightLG}px`, + textOverflow: 'ellipsis', + }, + }, + + [`${componentCls}-dark${componentCls}-submenu-popup`]: { + background: 'transparent', + }, + + // ========================= other ============================ + // Integration with header element so menu items have the same height + [`${antCls}-layout-header`]: { + [`${componentCls}`]: { + lineHeight: 'inherit', + }, + }, + + // https://github.com/ant-design/ant-design/issues/32950 + [`${antCls}-menu-inline-collapsed-tooltip`]: { + 'a,a:hover': { + color: componentBackground, + }, + }, + + // Overflow ellipsis + [`${componentCls}-overflow`]: { + display: 'flex', + + [`${componentCls}-item`]: { + flex: 'none', + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook('Menu', token => { + const MenuToken = mergeToken(token, { + black: '#000', // FIXME: hard code in v4 + componentBackground: '#fff', // FIXME: hard code in v4 + darkBg: '#001529', // FIXME: hard code in v4 + darkInlineSubmenuBg: '#000c17', // FIXME: hard code in v4 + colorTextSecondary: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: hard code in v4 + highlightDangerColor: new TinyColor('#f5222d').setAlpha(0.2).toRgbString(), // FIXME: hard code in v4 // color(~`colorPalette('@{red-6}', 5) `) + itemActiveDangerBg: new TinyColor('#f5222d').setAlpha(0.9).toRgbString(), // FIXME: hard code in v4 // color(~`colorPalette('@{red-6}', 1) `) + itemActiveBackground: new TinyColor('#000').setAlpha(0.9).toRgbString(), // FIXME: hard code in v4 + itemActiveBg: '#e6f7ff', // FIXME: hard code in v4, + textColorDark: new TinyColor('#000').setAlpha(0.85).toRgbString(), // FIXME: hard code in v4 + disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // FIXME: hard code in v4 + darkColor: new TinyColor('#fff').setAlpha(0.65).toRgbString(), // FIXME: hard code in v4 + colorDark: new TinyColor('#fff').setAlpha(0.85).toRgbString(), // FIXME: hard code in v4 + disabledColorDark: new TinyColor('#fff').setAlpha(0.45).toRgbString(), // FIXME: hard code in v4 + darkHighlightColor: '#fff', // FIXME: hard code in v4 + motionDurationMD: '0.15s', // FIXME: hard code in v4, + primaryColor: '#1890ff', // FIXME: hard code in v4 + boxShadowColor: new TinyColor('#1890ff').setAlpha(0.05).toRgbString(), // FIXME: hard code in v4, shade(@primary-color, 5%) + borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), // FIXME: hard code in v4 + menuInlineSubmenuBg: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), // FIXME: hard code in v4 + easeOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code in v4 + width20: 20, // FIXME: hard code in v4 + zIndexDrop: 1050, // FIXME: hard code in v4 + menuOpacity: 0.0001, // FIXME: hard code in v4 + sizeLg: 16, // FIXME: hard code in v4 + }); + + return [ + genBaseStyle(MenuToken), + genDarkStyle(MenuToken), + genLightStyle(MenuToken), + genStatusStyle(MenuToken), + ]; +}); diff --git a/components/menu/style/light.less b/components/menu/style/light.less index 06cd6d0c07..1c74c1fce0 100644 --- a/components/menu/style/light.less +++ b/components/menu/style/light.less @@ -1,12 +1,12 @@ -.@{menu-prefix-cls} { - // light theme - &-light { - .@{menu-prefix-cls}-item:hover, - .@{menu-prefix-cls}-item-active, - .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-inline) .@{menu-prefix-cls}-submenu-open, - .@{menu-prefix-cls}-submenu-active, - .@{menu-prefix-cls}-submenu-title:hover { - color: @menu-highlight-color; - } - } -} +//.@{menu-prefix-cls} { +// // light theme +// &-light { +// .@{menu-prefix-cls}-item:hover, +// .@{menu-prefix-cls}-item-active, +// .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-inline) .@{menu-prefix-cls}-submenu-open, +// .@{menu-prefix-cls}-submenu-active, +// .@{menu-prefix-cls}-submenu-title:hover { +// color: @menu-highlight-color; +// } +// } +//} diff --git a/components/menu/style/rtl.less b/components/menu/style/rtl.less index cc7a152af7..3c48d987ce 100644 --- a/components/menu/style/rtl.less +++ b/components/menu/style/rtl.less @@ -1,165 +1,165 @@ -@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; - } - } - } -} +//@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/menu/style/status.less b/components/menu/style/status.less index 5e8a13438c..a650977142 100644 --- a/components/menu/style/status.less +++ b/components/menu/style/status.less @@ -1,49 +1,49 @@ -@import (reference) '../../style/themes/index'; -@menu-prefix-cls: ~'@{ant-prefix}-menu'; - -.@{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; - } -} +//@import (reference) '../../style/themes/index'; +//@menu-prefix-cls: ~'@{ant-prefix}-menu'; +// +//.@{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; +// } +//}