1 | .@{menu-prefix-cls} {
|
2 |
|
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 |
|
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 | }
|