UNPKG

2.94 kBtext/lessView Raw
1.@{menu-prefix-cls} {
2 // dark theme
3 &-dark,
4 &-dark &-sub {
5 color: @menu-dark-color;
6 background: @menu-dark-bg;
7 .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
8 opacity: 0.45;
9 transition: all 0.3s;
10 &::after,
11 &::before {
12 background: @menu-dark-arrow-color;
13 }
14 }
15 }
16
17 &-dark&-submenu-popup {
18 background: transparent;
19 }
20
21 &-dark &-inline&-sub {
22 background: @menu-dark-submenu-bg;
23 box-shadow: 0 2px 8px fade(@black, 45%) inset;
24 }
25
26 &-dark&-horizontal {
27 border-bottom: 0;
28 }
29
30 &-dark&-horizontal > &-item,
31 &-dark&-horizontal > &-submenu {
32 top: 0;
33 margin-top: 0;
34 border-color: @menu-dark-bg;
35 border-bottom: 0;
36 }
37
38 &-dark&-horizontal > &-item > a::before {
39 bottom: 0;
40 }
41
42 &-dark &-item,
43 &-dark &-item-group-title,
44 &-dark &-item > a {
45 color: @menu-dark-color;
46 }
47
48 &-dark&-inline,
49 &-dark&-vertical,
50 &-dark&-vertical-left,
51 &-dark&-vertical-right {
52 border-right: 0;
53 }
54
55 &-dark&-inline &-item,
56 &-dark&-vertical &-item,
57 &-dark&-vertical-left &-item,
58 &-dark&-vertical-right &-item {
59 left: 0;
60 margin-left: 0;
61 border-right: 0;
62 &::after {
63 border-right: 0;
64 }
65 }
66
67 &-dark&-inline &-item,
68 &-dark&-inline &-submenu-title {
69 width: 100%;
70 }
71
72 &-dark &-item:hover,
73 &-dark &-item-active,
74 &-dark &-submenu-active,
75 &-dark &-submenu-open,
76 &-dark &-submenu-selected,
77 &-dark &-submenu-title:hover {
78 color: @menu-dark-highlight-color;
79 background-color: transparent;
80 > a {
81 color: @menu-dark-highlight-color;
82 }
83 > .@{menu-prefix-cls}-submenu-title,
84 > .@{menu-prefix-cls}-submenu-title:hover {
85 > .@{menu-prefix-cls}-submenu-arrow {
86 opacity: 1;
87 &::after,
88 &::before {
89 background: @menu-dark-highlight-color;
90 }
91 }
92 }
93 }
94 &-dark &-item:hover {
95 background-color: @menu-dark-item-hover-bg;
96 }
97
98 &-dark &-item-selected {
99 color: @menu-dark-highlight-color;
100 border-right: 0;
101 &::after {
102 border-right: 0;
103 }
104 > a,
105 > a:hover {
106 color: @menu-dark-highlight-color;
107 }
108 .@{iconfont-css-prefix} {
109 color: @menu-dark-selected-item-icon-color;
110 }
111 .@{iconfont-css-prefix} + span {
112 color: @menu-dark-selected-item-text-color;
113 }
114 }
115
116 &&-dark &-item-selected,
117 &-submenu-popup&-dark &-item-selected {
118 background-color: @menu-dark-item-active-bg;
119 }
120
121 // Disabled state sets text to dark gray and nukes hover/tab effects
122 &-dark &-item-disabled,
123 &-dark &-submenu-disabled {
124 &,
125 > a {
126 color: @disabled-color-dark !important;
127 opacity: 0.8;
128 }
129 > .@{menu-prefix-cls}-submenu-title {
130 color: @disabled-color-dark !important;
131 > .@{menu-prefix-cls}-submenu-arrow {
132 &::before,
133 &::after {
134 background: @disabled-color-dark !important;
135 }
136 }
137 }
138 }
139}