GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: cssinjs for menu (#34958) 

* feat: cssinjs for menu

* feat: merge next

* feat: update for lint

* feat: update for test

* feat: update for style

* feat: update snap
pull/35127/head
黑雨 3 years ago
committed by GitHub
parent
c4dab10188
commit
87a5ddf0be
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 2176 additions and 1110 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/_util/theme/interface.ts
  2. 8
      components/menu/index.tsx
  3. 354
      components/menu/style/dark.less
  4. 1400
      components/menu/style/index.less
  5. 1070
      components/menu/style/index.tsx
  6. 24
      components/menu/style/light.less
  7. 330
      components/menu/style/rtl.less
  8. 98
      components/menu/style/status.less

2
components/_util/theme/interface.ts
View File

@ -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 */

8
components/menu/index.tsx
View File

@ -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<MenuRef, InternalMenuProps>((props, ref) => {
siderCollapsed,
items,
children,
rootClassName,
...restProps
} = props;
@ -99,6 +101,7 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((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<MenuRef, InternalMenuProps>((props, ref) => {
);
// ========================= Render ==========================
return (
return wrapSSR(
<MenuContext.Provider value={contextValue}>
<RcMenu
getPopupContainer={getPopupContainer}
@ -135,10 +138,11 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
})
}
ref={ref}
rootClassName={classNames(rootClassName, hashId)}
>
{mergedChildren}
</RcMenu>
</MenuContext.Provider>
</MenuContext.Provider>,
);
});

354
components/menu/style/dark.less
View File

@ -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;
// }
// }
// }
// }
//}

1400
components/menu/style/index.less
View File

File diff suppressed because it is too large

1070
components/menu/style/index.tsx
View File

File diff suppressed because it is too large

24
components/menu/style/light.less
View File

@ -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;
// }
// }
//}

330
components/menu/style/rtl.less
View File

@ -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;
// }
// }
// }
//}

98
components/menu/style/status.less
View File

@ -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;
// }
//}

Write Preview
Loading…
Cancel
Save