|
1 /* |
|
2 * Menus styles |
|
3 */ |
|
4 |
|
5 nav { |
|
6 padding-top: 40px; |
|
7 |
|
8 ul { |
|
9 width: 100%; |
|
10 padding: 40px 28px 25px 0; |
|
11 padding: 0; |
|
12 margin: 0; |
|
13 font-size: 13px; |
|
14 line-height: .5em; |
|
15 list-style: none; |
|
16 position: relative; |
|
17 background-color: #627685; |
|
18 |
|
19 li { |
|
20 overflow: hidden; |
|
21 |
|
22 &.divider { |
|
23 height: 20px; |
|
24 border: 0; |
|
25 } |
|
26 &.header { |
|
27 font-family: "Ubuntu-Light", Arial, Helvetica, sans-serif; |
|
28 font-size: 14px; |
|
29 font-weight: bold; |
|
30 color: #eee; |
|
31 background-color: #b13510; |
|
32 border-top-color: #d44918; |
|
33 border-bottom-color: #a13812; |
|
34 padding: 4px 10px 4px 20px; |
|
35 line-height: 18px; |
|
36 |
|
37 &:not(:first-child) { |
|
38 margin-top: 10px; |
|
39 } |
|
40 .minified #left-panel & { |
|
41 padding: 5px; |
|
42 color: #b94015; |
|
43 line-height: 0; |
|
44 max-height: 10px; |
|
45 overflow: hidden; |
|
46 } |
|
47 } |
|
48 a { |
|
49 line-height: normal; |
|
50 font-size: 14px; |
|
51 padding: 10px 10px 10px 11px; |
|
52 color: #f4e8cf; |
|
53 display: block; |
|
54 font-weight: 400; |
|
55 text-decoration: none!important; |
|
56 position: relative; |
|
57 } |
|
58 a:active { |
|
59 background: #616161!important; |
|
60 } |
|
61 a:focus { |
|
62 color: #c9c9c9; |
|
63 } |
|
64 a:hover { |
|
65 color: #fff; |
|
66 text-decoration: none; |
|
67 } |
|
68 &.active { |
|
69 >a { |
|
70 background-color: #627685; |
|
71 color: #fff!important; |
|
72 position: relative; |
|
73 |
|
74 &:before { |
|
75 content: "\f0d9"; |
|
76 font-family: FontAwesome; |
|
77 display: block; |
|
78 height: 27px; |
|
79 line-height: 14px; |
|
80 width: 27px; |
|
81 position: absolute; |
|
82 right: -21px; |
|
83 font-size: 20px; |
|
84 color: #eee; |
|
85 } |
|
86 } |
|
87 &.open >a { |
|
88 &:before { |
|
89 content: ""; |
|
90 } |
|
91 &.active:before { |
|
92 content: "\f0d9"; |
|
93 } |
|
94 } |
|
95 } |
|
96 li { |
|
97 border-bottom: 0; |
|
98 position: relative; |
|
99 } |
|
100 } |
|
101 .active >a { |
|
102 color: #fefefe!important; |
|
103 position: relative; |
|
104 } |
|
105 b { |
|
106 float: right; |
|
107 font-size: 14px; |
|
108 margin-top: -1px; |
|
109 } |
|
110 span.menu-item-parent { |
|
111 display: inline-block; |
|
112 margin: 0; |
|
113 padding: 0; |
|
114 } |
|
115 ul { |
|
116 margin: 0; |
|
117 display: none; |
|
118 background: rgba(91,103,113,0.8); |
|
119 padding: 7px 0; |
|
120 |
|
121 >li:hover b { |
|
122 color: #D5D9E2; |
|
123 } |
|
124 li { |
|
125 margin: 0; |
|
126 padding: 0; |
|
127 |
|
128 >a { |
|
129 padding-left: 42px; |
|
130 font-size: 12px; |
|
131 font-weight: 400; |
|
132 outline: 0; |
|
133 |
|
134 &:hover { |
|
135 background-color: #46545e; |
|
136 color: #fff; |
|
137 } |
|
138 &.active { |
|
139 margin-left: 30px; |
|
140 padding-left: 12px; |
|
141 background-color: #296191; |
|
142 } |
|
143 } |
|
144 } |
|
145 ul { |
|
146 background: 0 0; |
|
147 padding: 0; |
|
148 |
|
149 li a { |
|
150 color: #bfbfbf; |
|
151 padding: 8px 10px 8px 60px; |
|
152 font-size: 11px; |
|
153 |
|
154 &:hover { |
|
155 background-color: #46545e; |
|
156 color: #fff; |
|
157 } |
|
158 &.active { |
|
159 margin-left: 50px; |
|
160 padding-left: 10px; |
|
161 } |
|
162 } |
|
163 ul { |
|
164 li a { |
|
165 padding-left: 90px; |
|
166 |
|
167 &.active { |
|
168 margin-left: 80px; |
|
169 padding-left: 10px; |
|
170 } |
|
171 } |
|
172 ul { |
|
173 li a { |
|
174 padding-left: 110px; |
|
175 |
|
176 &.active { |
|
177 margin-left: 100px; |
|
178 padding-left: 10px; |
|
179 } |
|
180 } |
|
181 ul li a { |
|
182 padding-left: 130px; |
|
183 |
|
184 &.active { |
|
185 margin-left: 120px; |
|
186 padding-left: 10px; |
|
187 } |
|
188 } |
|
189 } |
|
190 } |
|
191 } |
|
192 b { |
|
193 color: #B3B3B3; |
|
194 } |
|
195 } |
|
196 } |
|
197 |
|
198 >ul { |
|
199 >li { |
|
200 border-top: 1px solid #718999; |
|
201 border-bottom: 1px solid #576975; |
|
202 |
|
203 &:hover >ul::before, |
|
204 &:hover >ul >li::before { |
|
205 border-color: #ACACAC!important; |
|
206 } |
|
207 >a { |
|
208 >.badge.pull-right { |
|
209 margin-right: 15px; |
|
210 } |
|
211 b { |
|
212 position: absolute!important; |
|
213 right: 10px; |
|
214 top: 10px; |
|
215 } |
|
216 >i { |
|
217 margin-right: 5px; |
|
218 width: 15px; |
|
219 display: inline-block; |
|
220 text-align: center; |
|
221 position: relative; |
|
222 |
|
223 >em { |
|
224 font-size: 9px; |
|
225 display: block; |
|
226 padding: 2px; |
|
227 position: absolute; |
|
228 top: -8px; |
|
229 right: -6px; |
|
230 text-decoration: none; |
|
231 font-style: normal; |
|
232 background: #ED1C24; |
|
233 color: #fff; |
|
234 min-width: 13px; |
|
235 border-radius: 50%; |
|
236 max-height: 13px; |
|
237 line-height: 8px; |
|
238 font-weight: 700; |
|
239 vertical-align: baseline; |
|
240 white-space: nowrap; |
|
241 text-align: center; |
|
242 border: 1px solid rgba(255, 255, 255, .1); |
|
243 } |
|
244 } |
|
245 } |
|
246 >ul::before { |
|
247 content: ""; |
|
248 display: block; |
|
249 position: absolute; |
|
250 z-index: 1; |
|
251 left: 23px; |
|
252 top: 0; |
|
253 bottom: 0; |
|
254 border-left: 1px solid #7A7A7A; |
|
255 } |
|
256 >ul >li >a, |
|
257 >ul >li >ul >li >a { |
|
258 padding-top: 5px; |
|
259 padding-bottom: 5px; |
|
260 } |
|
261 } |
|
262 ul { |
|
263 li { |
|
264 a i { |
|
265 font-size: 14px!important; |
|
266 width: 18px!important; |
|
267 text-align: center!important; |
|
268 } |
|
269 &::before { |
|
270 content: ""; |
|
271 display: block; |
|
272 position: absolute; |
|
273 width: 8px; |
|
274 left: 23px; |
|
275 top: 13px; |
|
276 border-top: 1px solid #7A7A7A; |
|
277 z-index: 1; |
|
278 } |
|
279 } |
|
280 ul li::before { |
|
281 content: ""; |
|
282 display: block; |
|
283 position: absolute; |
|
284 width: 18px; |
|
285 left: 10px; |
|
286 top: 17px; |
|
287 border-top: 1px solid transparent; |
|
288 } |
|
289 } |
|
290 } |
|
291 } |
|
292 |
|
293 .navbar-nav >li >a { |
|
294 @media (min-width: 768px) { |
|
295 padding-top: 17px; |
|
296 padding-bottom: 15px; |
|
297 } |
|
298 } |
|
299 |
|
300 .ui-menu { |
|
301 display: block; |
|
302 width: 155px; |
|
303 padding: 2px; |
|
304 -webkit-box-shadow: 0 2px 4px rgba(30, 30, 100, .25); |
|
305 box-shadow: 0 2px 4px rgba(30, 30, 100, .25); |
|
306 background: #fff; |
|
307 border: 1px solid rgba(0, 0, 0, .2); |
|
308 z-index: 1; |
|
309 list-style: none; |
|
310 margin: 0; |
|
311 margin-bottom: 2em; |
|
312 outline: 0; |
|
313 |
|
314 .ui-menu { |
|
315 margin-top: -3px; |
|
316 position: absolute; |
|
317 list-style: none; |
|
318 } |
|
319 .ui-menu-item { |
|
320 margin: 0; |
|
321 padding: 0; |
|
322 width: 100%; |
|
323 list-style: none; |
|
324 list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); |
|
325 |
|
326 a { |
|
327 text-decoration: none; |
|
328 display: block; |
|
329 padding: 2px .4em; |
|
330 line-height: 1.5; |
|
331 min-height: 0; |
|
332 font-weight: 400; |
|
333 |
|
334 &.ui-corner-all { |
|
335 border-radius: 0; |
|
336 } |
|
337 &.ui-state-active, |
|
338 &.ui-state-focus, |
|
339 &.ui-widget-content { |
|
340 font-weight: 700; |
|
341 margin: 0; |
|
342 background-color: #428BCA; |
|
343 border-color: #357EBD; |
|
344 color: #FFF; |
|
345 display: block; |
|
346 white-space: nowrap; |
|
347 } |
|
348 &.ui-state-active { |
|
349 padding: 1px .4em; |
|
350 } |
|
351 .ui-menu-icon { |
|
352 width: auto; |
|
353 height: auto; |
|
354 top: 0; |
|
355 left: auto; |
|
356 right: auto; |
|
357 bottom: auto; |
|
358 text-indent: 0; |
|
359 } |
|
360 } |
|
361 } |
|
362 .ui-menu-divider { |
|
363 margin: 5px -2px 5px -2px; |
|
364 height: 0; |
|
365 font-size: 0; |
|
366 line-height: 0; |
|
367 border-width: 1px 0 0; |
|
368 } |
|
369 .ui-state-disabled { |
|
370 margin: .4em 0 .2em!important; |
|
371 background: none!important; |
|
372 color: #999!important; |
|
373 font-weight: 400!important; |
|
374 cursor: default; |
|
375 line-height: 1.5; |
|
376 |
|
377 a { |
|
378 cursor: default; |
|
379 } |
|
380 } |
|
381 .ui-menu-icons { |
|
382 position: relative; |
|
383 |
|
384 .ui-menu-item a { |
|
385 position: relative; |
|
386 padding-left: 2em; |
|
387 } |
|
388 } |
|
389 .ui-icon { |
|
390 position: absolute; |
|
391 top: .2em; |
|
392 left: .2em; |
|
393 } |
|
394 .ui-menu-icon { |
|
395 position: static; |
|
396 float: right; |
|
397 } |
|
398 } |
|
399 |
|
400 .dropdown { |
|
401 &-menu { |
|
402 >li { |
|
403 >a:hover { |
|
404 background-color: #e0e0e0; |
|
405 } |
|
406 } |
|
407 .open >& { |
|
408 -webkit-animation-name: flipInX; |
|
409 animation-name: flipInX; |
|
410 -webkit-animation-duration: .4s; |
|
411 animation-duration: .4s; |
|
412 -webkit-animation-fill-mode: both; |
|
413 animation-fill-mode: both; |
|
414 } |
|
415 .small { |
|
416 &.divider { |
|
417 margin: 3px 0; |
|
418 } |
|
419 } |
|
420 } |
|
421 &-menu-xs { |
|
422 min-width: 37px; |
|
423 |
|
424 >li >a { |
|
425 padding: 3px 10px; |
|
426 |
|
427 &:hover i { |
|
428 color: #fff!important; |
|
429 } |
|
430 } |
|
431 } |
|
432 &-submenu { |
|
433 position: relative; |
|
434 |
|
435 >.dropdown-menu { |
|
436 top: 0; |
|
437 left: 100%; |
|
438 margin-top: -6px; |
|
439 margin-left: -1px; |
|
440 } |
|
441 &:hover >.dropdown-menu { |
|
442 display: block; |
|
443 } |
|
444 >a:after { |
|
445 display: block; |
|
446 content: " "; |
|
447 float: right; |
|
448 width: 0; |
|
449 height: 0; |
|
450 border-color: transparent; |
|
451 border-style: solid; |
|
452 border-width: 5px 0 5px 5px; |
|
453 border-left-color: #bfbfbf; |
|
454 margin-top: 5px; |
|
455 margin-right: -10px; |
|
456 } |
|
457 &:hover >a:after { |
|
458 border-left-color: #fff; |
|
459 } |
|
460 &.pull-left { |
|
461 float: none; |
|
462 |
|
463 >.dropdown-menu { |
|
464 left: -100%; |
|
465 margin-left: 10px; |
|
466 } |
|
467 } |
|
468 } |
|
469 } |
|
470 |
|
471 .ajax-dropdown { |
|
472 position: absolute; |
|
473 display: none; |
|
474 z-index: 1003; |
|
475 top: 48px; |
|
476 left: 16px; |
|
477 width: 344px; |
|
478 height: 435px; |
|
479 border-radius: 0; |
|
480 -webkit-box-shadow: 0 2px 4px rgba(30, 30, 100, .25); |
|
481 box-shadow: 0 2px 4px rgba(30, 30, 100, .25); |
|
482 padding: 10px; |
|
483 background: #fff; |
|
484 border: 1px solid #b3b3b3; |
|
485 |
|
486 @media only screen and (min-width:320px) and (max-width:479px) { |
|
487 width: 299px; |
|
488 height: 320px; |
|
489 left: 0; |
|
490 top: 49px; |
|
491 } |
|
492 &:after, |
|
493 &:before { |
|
494 bottom: 100%; |
|
495 border: solid transparent; |
|
496 content: " "; |
|
497 height: 0; |
|
498 width: 0; |
|
499 position: absolute; |
|
500 pointer-events: none; |
|
501 } |
|
502 &:before { |
|
503 border-color: rgba(131, 131, 131, 0); |
|
504 border-bottom-color: #838383; |
|
505 border-width: 8px; |
|
506 left: 50%; |
|
507 margin-left: -8px; |
|
508 |
|
509 @media only screen and (min-width:320px) and (max-width:479px) { |
|
510 margin-left: -14px; |
|
511 } |
|
512 } |
|
513 &:after { |
|
514 border-color: rgba(255, 255, 255, 0); |
|
515 border-bottom-color: #fff; |
|
516 border-width: 7px; |
|
517 left: 50%; |
|
518 margin-left: -7px; |
|
519 |
|
520 @media only screen and (min-width:320px) and (max-width:479px) { |
|
521 margin-left: -13px; |
|
522 } |
|
523 } |
|
524 >:last-child { |
|
525 font-size: 13px; |
|
526 display: block; |
|
527 padding: 5px 0; |
|
528 line-height: 22px; |
|
529 font-weight: 400; |
|
530 } |
|
531 >:first-child { |
|
532 margin: 0 0 3px; |
|
533 padding: 0 0 9px; |
|
534 } |
|
535 .fa-4x.fa-border { |
|
536 border-width: 3px; |
|
537 border-radius: 50%; |
|
538 display: block; |
|
539 margin: 0 auto; |
|
540 width: 46px; |
|
541 text-align: center; |
|
542 color: #D1D1D1; |
|
543 border-color: #D1D1D1; |
|
544 } |
|
545 .btn-group .btn { |
|
546 font-weight: 700; |
|
547 text-transform: capitalize; |
|
548 } |
|
549 .btn-group >:nth-child(2) { |
|
550 border-right-width: 0; |
|
551 border-left-width: 0; |
|
552 } |
|
553 .btn-group .btn:active { |
|
554 top: 0; |
|
555 left: 0; |
|
556 } |
|
557 .active + & { |
|
558 -webkit-animation-name: flipInY; |
|
559 animation-name: flipInY; |
|
560 -webkit-animation-duration: .7s; |
|
561 animation-duration: .7s; |
|
562 -webkit-animation-fill-mode: both; |
|
563 animation-fill-mode: both; |
|
564 } |
|
565 } |
|
566 |
|
567 .dropdown-large { |
|
568 position: static!important; |
|
569 } |
|
570 .dropdown-menu-large { |
|
571 margin-left: 16px; |
|
572 margin-right: 16px; |
|
573 padding: 20px 0; |
|
574 |
|
575 >li >ul { |
|
576 padding: 0; |
|
577 margin: 0; |
|
578 |
|
579 >li { |
|
580 list-style: none; |
|
581 |
|
582 >a { |
|
583 display: block; |
|
584 padding: 3px 20px; |
|
585 clear: both; |
|
586 font-weight: 400; |
|
587 line-height: 1.428571429; |
|
588 color: #333; |
|
589 white-space: normal; |
|
590 } |
|
591 } |
|
592 } |
|
593 >li ul >li >a:focus, |
|
594 >li ul >li >a:hover { |
|
595 text-decoration: none; |
|
596 color: #262626; |
|
597 background-color: #f5f5f5; |
|
598 } |
|
599 .disabled >a, |
|
600 .disabled >a:focus, |
|
601 .disabled >a:hover { |
|
602 color: #999; |
|
603 } |
|
604 .disabled >a:focus, |
|
605 .disabled >a:hover { |
|
606 text-decoration: none; |
|
607 background-color: transparent; |
|
608 background-image: none; |
|
609 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); |
|
610 cursor: not-allowed; |
|
611 } |
|
612 .dropdown-header { |
|
613 color: #428bca; |
|
614 font-size: 18px; |
|
615 } |
|
616 |
|
617 @media (max-width:768px) { |
|
618 margin-left: 0; |
|
619 margin-right: 0; |
|
620 |
|
621 >li { |
|
622 margin-bottom: 30px; |
|
623 |
|
624 &:last-child { |
|
625 margin-bottom: 0; |
|
626 } |
|
627 } |
|
628 .dropdown-header { |
|
629 padding: 3px 15px!important; |
|
630 } |
|
631 } |
|
632 } |
|
633 |
|
634 |
|
635 .wijmo-wijmenu { |
|
636 padding: 0 20px; |
|
637 background-color: #222; |
|
638 background-repeat: repeat-x; |
|
639 background-image: -webkit-linear-gradient(top, #333, #222); |
|
640 background-image: -webkit-gradient(linear, top left, bottom left, from(#333), to(#222)); |
|
641 background-image: -webkit-linear-gradient(top, #333, #222); |
|
642 background-image: linear-gradient(top, #333, #222); |
|
643 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); |
|
644 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1); |
|
645 box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1); |
|
646 |
|
647 .ui-state-default .wijmo-wijmenu-text { |
|
648 color: #bfbfbf; |
|
649 } |
|
650 .ui-state-hover { |
|
651 background: #444; |
|
652 background: rgba(255, 255, 255, .05); |
|
653 |
|
654 .wijmo-wijmenu-text { |
|
655 color: #fff; |
|
656 } |
|
657 } |
|
658 .ui-widget-header h3 { |
|
659 position: relative; |
|
660 margin-top: 1px; |
|
661 padding: 0; |
|
662 } |
|
663 h3 a { |
|
664 color: #fff; |
|
665 display: block; |
|
666 float: left; |
|
667 font-size: 20px; |
|
668 font-weight: 200; |
|
669 line-height: 1; |
|
670 margin-left: -20px; |
|
671 margin-top: 1px; |
|
672 padding: 8px 20px 12px; |
|
673 |
|
674 &:hover { |
|
675 background-color: rgba(255, 255, 255, .05); |
|
676 color: #fff; |
|
677 text-decoration: none; |
|
678 } |
|
679 } |
|
680 .ui-widget-header { |
|
681 border: 0; |
|
682 } |
|
683 .wijmo-wijmenu-parent .wijmo-wijmenu-child { |
|
684 padding: .3em 0; |
|
685 } |
|
686 .wijmo-wijmenu-item { |
|
687 margin: 0; |
|
688 border: 0; |
|
689 |
|
690 .wijmo-wijmenu-child { |
|
691 background: #333; |
|
692 border: 0; |
|
693 margin: 0; |
|
694 padding: 6px 0; |
|
695 width: 160px; |
|
696 border-radius: 0 0 6px 6px; |
|
697 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2); |
|
698 box-shadow: 0 2px 4px rgba(0, 0, 0, .2); |
|
699 } |
|
700 } |
|
701 a.wijmo-wijmenu-link { |
|
702 margin: 0; |
|
703 line-height: 19px; |
|
704 padding: 10px 10px 11px; |
|
705 border: 0; |
|
706 border-radius: 0; |
|
707 } |
|
708 .wijmo-wijmenu-child .wijmo-wijmenu-link { |
|
709 display: block; |
|
710 float: none; |
|
711 padding: 4px 15px; |
|
712 width: auto; |
|
713 } |
|
714 .wijmo-wijmenu-child .wijmo-wijmenu-text { |
|
715 float: none; |
|
716 } |
|
717 .wijmo-wijmenu-item { |
|
718 .wijmo-wijmenu-child .ui-state-hover { |
|
719 background: #191919; |
|
720 } |
|
721 .wijmo-wijmenu-separator { |
|
722 padding: 5px 0; |
|
723 background-image: none; |
|
724 background-color: #222; |
|
725 border-top: 1px solid #444; |
|
726 border-bottom: 0; |
|
727 border-left: 0; |
|
728 border-right: 0; |
|
729 } |
|
730 input { |
|
731 -moz-transition: none 0s ease 0s; |
|
732 background-color: rgba(255, 255, 255, .3); |
|
733 border: 1px solid #111; |
|
734 border-radius: 4px; |
|
735 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .25); |
|
736 box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .25); |
|
737 color: rgba(255, 255, 255, .75); |
|
738 font-family: Ubuntu, Helvetica, Arial, sans-serif; |
|
739 line-height: 1; |
|
740 margin: 5px 10px 0; |
|
741 padding: 4px 9px; |
|
742 width: 100px; |
|
743 |
|
744 &:hover { |
|
745 background-color: rgba(255, 255, 255, .5); |
|
746 color: #fff; |
|
747 } |
|
748 &:focus { |
|
749 background-color: #fff; |
|
750 border: 0 none; |
|
751 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15); |
|
752 box-shadow: 0 0 3px rgba(0, 0, 0, .15); |
|
753 color: #404040; |
|
754 outline: 0 none; |
|
755 padding: 5px 10px; |
|
756 text-shadow: 0 1px 0 #fff; |
|
757 } |
|
758 } |
|
759 } |
|
760 .ui-state-default { |
|
761 text-shadow: none; |
|
762 -webkit-box-shadow: none; |
|
763 box-shadow: none; |
|
764 color: #bfbfbf; |
|
765 -webkit-filter: none; |
|
766 filter: none; |
|
767 } |
|
768 } |