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

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

@ -308,9 +308,21 @@
// Menu // Menu
// --- // ---
@menu-dark-bg: @layout-header-background; @menu-inline-toplevel-item-height: 40px;
@menu-dark-submenu-bg: #000c17; @menu-item-height: 40px;
@menu-collapsed-width: 80px; @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 // Spin
// --- // ---