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;
|
22 | padding-right: 0;
|
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 |
|
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 |
|
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 |
|
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 | }
|