mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

vars to theme Menu (#9115)

Browse Source
This commit is contained in:
George Gray 2018-01-25 02:59:49 +00:00 committed by niko
parent bbe95e10e1
commit 7d9a93e7ed
3 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,14 @@
// dark theme
&-dark,
&-dark &-sub {
color: @text-color-secondary-dark;
color: @menu-dark-color;
background: @menu-dark-bg;
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
opacity: .45;
transition: all .3s;
&:after,
&:before {
background: #fff;
background: @menu-dark-arrow-color;
}
}
}
@ -36,7 +36,7 @@
&-dark &-item,
&-dark &-item-group-title,
&-dark &-item > a {
color: @text-color-secondary-dark;
color: @menu-dark-color;
}
&-dark&-inline,
@ -70,9 +70,9 @@
&-dark &-submenu-selected,
&-dark &-submenu-title:hover {
background-color: transparent;
color: #fff;
color: @menu-dark-highlight-color;
> a {
color: #fff;
color: @menu-dark-highlight-color;
}
> .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-submenu-title:hover {
@ -80,7 +80,7 @@
opacity: 1;
&:after,
&:before {
background: #fff;
background: @menu-dark-highlight-color;
}
}
}
@ -88,19 +88,19 @@
&-dark &-item-selected {
border-right: 0;
color: #fff;
color: @menu-dark-highlight-color;
&:after {
border-right: 0;
}
> a,
> a:hover {
color: #fff;
color: @menu-dark-highlight-color;
}
}
&&-dark &-item-selected,
&-submenu-popup&-dark &-item-selected {
background-color: @primary-color;
background-color: @menu-dark-item-selected-bg;
}
// Disabled state sets text to dark gray and nukes hover/tab effects

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

@ -2,8 +2,6 @@
@import "../../style/mixins/index";
@menu-prefix-cls: ~"@{ant-prefix}-menu";
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
// default theme
.@{menu-prefix-cls} {
@ -13,7 +11,8 @@
padding-left: 0; // Override default ul/ol
list-style: none;
box-shadow: @box-shadow-base;
background: @component-background;
color: @menu-item-color;
background: @menu-bg;
line-height: 0; // Fix display inline-block gap
transition: background .3s, width .2s;
.clearfix;
@ -30,7 +29,7 @@
}
&-item-group-title {
color: @text-color-secondary;
color: @menu-item-group-title-color;
font-size: @font-size-base;
line-height: @line-height-base;
padding: 8px 16px;
@ -44,7 +43,7 @@
&-item:active,
&-submenu-title:active {
background: @item-active-bg;
background: @menu-item-active-bg;
}
&-submenu &-sub {
@ -54,9 +53,9 @@
&-item > a {
display: block;
color: @text-color;
color: @menu-item-color;
&:hover {
color: @primary-color;
color: @menu-highlight-color;
}
&:focus {
text-decoration: none;
@ -86,7 +85,7 @@
&:not(&-inline) &-submenu-open,
&-submenu-active,
&-submenu-title:hover {
color: @primary-color;
color: @menu-highlight-color;
}
&-horizontal &-item,
@ -101,15 +100,15 @@
}
&-item-selected {
color: @primary-color;
color: @menu-highlight-color;
> a,
> a:hover {
color: @primary-color;
color: @menu-highlight-color;
}
}
&:not(&-horizontal) &-item-selected {
background-color: @item-active-bg;
background-color: @menu-item-active-bg;
}
&-inline,
@ -185,7 +184,7 @@
}
> .@{menu-prefix-cls} {
background-color: @component-background;
background-color: @menu-bg;
border-radius: @border-radius-base;
&-submenu-title:after {
transition: transform .3s @ease-in-out;
@ -208,7 +207,7 @@
position: absolute;
vertical-align: baseline;
background: #fff;
background-image: linear-gradient(to right, @text-color, @text-color);
background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
width: 6px;
height: 1.5px;
border-radius: 2px;
@ -254,9 +253,9 @@
&-vertical &-submenu-selected,
&-vertical-left &-submenu-selected,
&-vertical-right &-submenu-selected {
color: @primary-color;
color: @menu-highlight-color;
> a {
color: @primary-color;
color: @menu-highlight-color;
}
}
@ -277,15 +276,15 @@
&-active,
&-open,
&-selected {
border-bottom: 2px solid @primary-color;
color: @primary-color;
border-bottom: 2px solid @menu-highlight-color;
color: @menu-highlight-color;
}
> a {
display: block;
color: @text-color;
color: @menu-item-color;
&:hover {
color: @primary-color;
color: @menu-highlight-color;
}
}
}
@ -310,7 +309,7 @@
right: 0;
top: 0;
bottom: 0;
border-right: 3px solid @primary-color;
border-right: 3px solid @menu-highlight-color;
transform: scaleY(.0001);
opacity: 0;
transition: transform .15s @ease-out, opacity .15s @ease-out;

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

@ -308,9 +308,21 @@
// Menu
// ---
@menu-dark-bg: @layout-header-background;
@menu-dark-submenu-bg: #000c17;
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg;
@menu-item-group-title-color: @text-color-secondary;
// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-bg: @layout-header-background;
@menu-dark-arrow-color: #fff;
@menu-dark-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff;
@menu-dark-item-selected-bg: @primary-color;
// Spin
// ---