test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

feat: menu component customization: create new variables for easy customization (#17273)

Browse Source 
* new variable for customize margins and font-size on menu

* vars for icons size for menu items

* var for color of icon selected-item on dark menu

* menu selected item: vars for color text and icon

* var for background on hover item in dark menu

* rename variable

* deleted vars for icon size in menu

* change @menu-item-last-margin to @menu-item-boundary-margin
This commit is contained in:
alxkosov 2019-08-02 17:51:34 +03:00 committed by 偏右
parent 36db887bec
commit 678f8a5c65
3 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,6 +91,9 @@
} }
} }
} }
&-dark &-item:hover {
background-color: @menu-dark-item-hover-bg;
}
&-dark &-item-selected { &-dark &-item-selected {
color: @menu-dark-highlight-color; color: @menu-dark-highlight-color;
@ -102,6 +105,12 @@
> a:hover { > a:hover {
color: @menu-dark-highlight-color; color: @menu-dark-highlight-color;
} }
.@{iconfont-css-prefix} {
color: @menu-dark-selected-item-icon-color;
}
span {
color: @menu-dark-selected-item-text-color;
}
} }
&&-dark &-item-selected, &&-dark &-item-selected,

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

@ -160,7 +160,7 @@
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
min-width: 14px; min-width: 14px;
margin-right: 10px; margin-right: 10px;
font-size: @menu-icon-size; font-size: @font-size-base;
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out; transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
+ span { + span {
opacity: 1; opacity: 1;
@ -353,11 +353,11 @@
.@{menu-prefix-cls}-item, .@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title { .@{menu-prefix-cls}-submenu-title {
height: @menu-item-height; height: @menu-item-height;
margin-top: 4px; margin-top: @menu-item-vertical-margin;
margin-bottom: 4px; margin-bottom: @menu-item-vertical-margin;
padding: 0 16px; padding: 0 16px;
overflow: hidden; overflow: hidden;
font-size: @font-size-base; font-size: @menu-item-font-size;
line-height: @menu-item-height; line-height: @menu-item-height;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -368,7 +368,7 @@
} }
.@{menu-prefix-cls}-item:not(:last-child) { .@{menu-prefix-cls}-item:not(:last-child) {
margin-bottom: 8px; margin-bottom: @menu-item-boundary-margin;
} }
> .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-item,
@ -418,7 +418,7 @@
} }
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
margin: 0; margin: 0;
font-size: @menu-icon-size-lg; font-size: 16px;
line-height: @menu-item-height; line-height: @menu-item-height;
+ span { + span {
display: inline-block; display: inline-block;

13
components/style/themes/default.less
View File

@ -387,6 +387,15 @@
@menu-icon-size: @font-size-base; @menu-icon-size: @font-size-base;
@menu-icon-size-lg: @font-size-lg; @menu-icon-size-lg: @font-size-lg;
@menu-item-vertical-margin: 4px;
@menu-item-font-size: @font-size-base;
@menu-item-boundary-margin: 8px;
@menu-icon-size: @font-size-base;
@menu-icon-size-lg: @font-size-lg;
@menu-dark-selected-item-icon-color: @white;
@menu-dark-selected-item-text-color: @white;
@dark-menu-item-hover-bg: transparent;
// dark theme // dark theme
@menu-dark-color: @text-color-secondary-dark; @menu-dark-color: @text-color-secondary-dark;
@menu-dark-bg: @layout-header-background; @menu-dark-bg: @layout-header-background;
@ -394,7 +403,9 @@
@menu-dark-submenu-bg: #000c17; @menu-dark-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff; @menu-dark-highlight-color: #fff;
@menu-dark-item-active-bg: @primary-color; @menu-dark-item-active-bg: @primary-color;
@menu-dark-selected-item-icon-color: @white;
@menu-dark-selected-item-text-color: @white;
@menu-dark-item-hover-bg: transparent;
// Spin // Spin
// --- // ---
@spin-dot-size-sm: 14px; @spin-dot-size-sm: 14px;