UNPKG

7.92 kBtext/lessView Raw
1@menuPrefixCls: rc-menu;
2
3@font-face {
4 font-family: 'FontAwesome';
5 src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot');
6 src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix')
7 format('embedded-opentype'),
8 url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.woff')
9 format('woff'),
10 url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf')
11 format('truetype'),
12 url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?#fontawesomeregular')
13 format('svg');
14 font-weight: normal;
15 font-style: normal;
16}
17
18.@{menuPrefixCls} {
19 outline: none;
20 margin-bottom: 0;
21 padding-left: 0; // Override default ul/ol
22 padding-right: 0; // Override default ul/ol in RTL direction
23 list-style: none;
24 border: 1px solid #d9d9d9;
25 box-shadow: 0 0 4px #d9d9d9;
26 border-radius: 3px;
27 color: #666;
28
29 &-rtl {
30 direction: rtl;
31 }
32
33 &-hidden {
34 display: none;
35 }
36
37 &-collapse {
38 overflow: hidden;
39 // &-active {
40 transition: height 0.3s ease-out;
41 // }
42 }
43
44 &-item-group-list {
45 margin: 0;
46 padding: 0;
47 }
48
49 &-item-group-title {
50 color: #999;
51 line-height: 1.5;
52 padding: 8px 10px;
53 border-bottom: 1px solid #dedede;
54 }
55
56 &-item-active,
57 &-submenu-active > &-submenu-title {
58 background-color: #eaf8fe;
59 }
60
61 &-item-selected {
62 background-color: #eaf8fe;
63 // fix chrome render bug
64 transform: translateZ(0);
65 }
66
67 &-submenu-selected {
68 background-color: #eaf8fe;
69 }
70
71 & > li&-submenu {
72 padding: 0;
73 }
74
75 &-horizontal&-sub,
76 &-vertical&-sub,
77 &-vertical-left&-sub,
78 &-vertical-right&-sub {
79 min-width: 160px;
80 margin-top: 0;
81 }
82
83 &-item,
84 &-submenu-title {
85 margin: 0;
86 position: relative;
87 display: block;
88 padding: 7px 7px 7px 16px;
89 white-space: nowrap;
90
91 .@{menuPrefixCls}-rtl & {
92 padding: 7px 16px 7px 7px;
93 }
94
95 // Disabled state sets text to gray and nukes hover/tab effects
96 &.@{menuPrefixCls}-item-disabled,
97 &.@{menuPrefixCls}-submenu-disabled {
98 color: #777 !important;
99 }
100 }
101 & > &-item-divider {
102 height: 1px;
103 margin: 1px 0;
104 overflow: hidden;
105 padding: 0;
106 line-height: 0;
107 background-color: #e5e5e5;
108 }
109
110 &-submenu {
111 &-popup {
112 position: absolute;
113
114 .submenu-title-wrapper {
115 padding-right: 20px;
116
117 .@{menuPrefixCls}-submenu-rtl&,
118 .@{menuPrefixCls}-submenu-rtl & {
119 padding-right: 0;
120 padding-left: 20px;
121 }
122 }
123 }
124 > .@{menuPrefixCls} {
125 background-color: #fff;
126 }
127 }
128
129 .@{menuPrefixCls}-submenu-title,
130 .@{menuPrefixCls}-item {
131 .anticon {
132 width: 14px;
133 height: 14px;
134 margin-right: 8px;
135 top: -1px;
136
137 .@{menuPrefixCls}-rtl & {
138 margin-right: 0;
139 margin-left: 8px;
140 }
141 }
142 }
143
144 &-horizontal {
145 background-color: #f3f5f7;
146 border: none;
147 border-bottom: 1px solid #d9d9d9;
148 box-shadow: none;
149 white-space: nowrap;
150 overflow: hidden;
151
152 & > .@{menuPrefixCls}-item,
153 & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
154 padding: 15px 20px;
155 }
156
157 & > .@{menuPrefixCls}-submenu,
158 & > .@{menuPrefixCls}-item {
159 border-bottom: 2px solid transparent;
160 display: inline-block;
161 vertical-align: bottom;
162
163 &-active {
164 border-bottom: 2px solid #2db7f5;
165 background-color: #f3f5f7;
166 color: #2baee9;
167 }
168 }
169
170 &:after {
171 content: '\20';
172 display: block;
173 height: 0;
174 clear: both;
175 }
176 }
177
178 &-vertical,
179 &-vertical-left,
180 &-vertical-right,
181 &-inline {
182 padding: 12px 0;
183 & > .@{menuPrefixCls}-item,
184 & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
185 padding: 12px 8px 12px 24px;
186
187 .@{menuPrefixCls}-rtl& {
188 padding: 12px 24px 12px 8px;
189 }
190 }
191 .@{menuPrefixCls}-submenu-arrow {
192 display: inline-block;
193 font: normal normal normal 14px/1 FontAwesome;
194 font-size: inherit;
195 vertical-align: baseline;
196 text-align: center;
197 text-transform: none;
198 text-rendering: auto;
199 position: absolute;
200 right: 16px;
201 line-height: 1.5em;
202 &:before {
203 content: '\f0da';
204
205 .@{menuPrefixCls}-rtl&,
206 .@{menuPrefixCls}-submenu-rtl & {
207 content: '\f0d9';
208 }
209 }
210
211 .@{menuPrefixCls}-rtl&,
212 .@{menuPrefixCls}-submenu-rtl & {
213 right: auto;
214 left: 16px;
215 }
216 }
217 }
218 &-inline {
219 .@{menuPrefixCls}-submenu-arrow {
220 transform: rotate(90deg);
221 transition: transform 0.3s;
222 }
223 & .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title {
224 .@{menuPrefixCls}-submenu-arrow {
225 transform: rotate(-90deg);
226 }
227 }
228 }
229
230 &-vertical&-sub,
231 &-vertical-left&-sub,
232 &-vertical-right&-sub {
233 padding: 0;
234
235 .@{menuPrefixCls}-submenu-rtl & {
236 direction: rtl;
237 }
238 }
239
240 &-sub&-inline {
241 padding: 0;
242 border: none;
243 border-radius: 0;
244 box-shadow: none;
245
246 & > .@{menuPrefixCls}-item,
247 & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
248 padding-top: 8px;
249 padding-bottom: 8px;
250 padding-right: 0;
251
252 .@{menuPrefixCls}-rtl & {
253 padding-left: 0;
254 }
255 }
256 }
257
258 .effect() {
259 animation-duration: 0.3s;
260 animation-fill-mode: both;
261 transform-origin: 0 0;
262 }
263
264 &-open {
265 &-slide-up-enter,
266 &-slide-up-appear {
267 .effect();
268 opacity: 0;
269 animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
270 animation-play-state: paused;
271 }
272
273 &-slide-up-leave {
274 .effect();
275 opacity: 1;
276 animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
277 animation-play-state: paused;
278 }
279
280 &-slide-up-enter&-slide-up-enter-active,
281 &-slide-up-appear&-slide-up-appear-active {
282 animation-name: rcMenuOpenSlideUpIn;
283 animation-play-state: running;
284 }
285
286 &-slide-up-leave&-slide-up-leave-active {
287 animation-name: rcMenuOpenSlideUpOut;
288 animation-play-state: running;
289 }
290
291 @keyframes rcMenuOpenSlideUpIn {
292 0% {
293 opacity: 0;
294 transform-origin: 0% 0%;
295 transform: scaleY(0);
296 }
297 100% {
298 opacity: 1;
299 transform-origin: 0% 0%;
300 transform: scaleY(1);
301 }
302 }
303 @keyframes rcMenuOpenSlideUpOut {
304 0% {
305 opacity: 1;
306 transform-origin: 0% 0%;
307 transform: scaleY(1);
308 }
309 100% {
310 opacity: 0;
311 transform-origin: 0% 0%;
312 transform: scaleY(0);
313 }
314 }
315
316 &-zoom-enter,
317 &-zoom-appear {
318 opacity: 0;
319 .effect();
320 animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
321 animation-play-state: paused;
322 }
323
324 &-zoom-leave {
325 .effect();
326 animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
327 animation-play-state: paused;
328 }
329
330 &-zoom-enter&-zoom-enter-active,
331 &-zoom-appear&-zoom-appear-active {
332 animation-name: rcMenuOpenZoomIn;
333 animation-play-state: running;
334 }
335
336 &-zoom-leave&-zoom-leave-active {
337 animation-name: rcMenuOpenZoomOut;
338 animation-play-state: running;
339 }
340
341 &-zoom-enter,
342 &-zoom-appear,
343 &-zoom-leave {
344 .@{menuPrefixCls}-submenu-rtl&,
345 .@{menuPrefixCls}-submenu-rtl & {
346 transform-origin: top right !important;
347 }
348 }
349
350 @keyframes rcMenuOpenZoomIn {
351 0% {
352 opacity: 0;
353 transform: scale(0, 0);
354 }
355 100% {
356 opacity: 1;
357 transform: scale(1, 1);
358 }
359 }
360 @keyframes rcMenuOpenZoomOut {
361 0% {
362 transform: scale(1, 1);
363 }
364 100% {
365 opacity: 0;
366 transform: scale(0, 0);
367 }
368 }
369 }
370}