Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
/***
2
Page sidebar
3
***/
4
 
5
/* IE8 fix */
6
.ie8 .page-sidebar {
7
	width: $sidebar-width;
8
	float: left;
9
	position: relative;
10
	margin-right: -100%;
11
}
12
 
13
/* Page Sidebar */
14
 
15
.page-sidebar,
16
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
17
 
18
	&.navbar-collapse {
19
		padding: 0;
20
		box-shadow: none;
21
	}
22
 
23
	/* Default sidebar menu */
24
	.page-sidebar-menu {
25
		list-style: none;
26
		margin: 0;
27
		padding: 0;
28
 
29
		/* 1st level links */
30
		> li {
31
			display: block;
32
			margin: 0;
33
			padding: 0;
34
			border: 0px;
35
 
36
			&.start {
37
				> a {
38
					border-top-color: transparent !important;
39
				}
40
			}
41
 
42
			&.last {
43
				> a {
44
					border-bottom-color: transparent !important;
45
				}
46
			}
47
 
48
			> a {
49
				min-height: 78px;
50
				display: block;
51
				position: relative;
52
				margin: 0 ;
53
				border: 0px;
54
				padding: 17px 15px 15px 15px;
55
				text-decoration: none;
56
				font-size: $sidebar-menu-link-font-size;
57
				font-weight: 300;
58
				text-align: center;
59
 
60
				> .title {
61
					display: block;
62
					text-align: center;
63
					margin-top: 5px;
64
				}
65
 
66
				> i {
67
					font-size: $sidebar-menu-link-huge-icon-font-size;
68
					text-shadow:none;
69
					font-weight: 300;
70
					text-align: center;
71
				}
72
 
73
				> i.glyphicon {
74
					top: 3px;
75
					margin-left: 1px;
76
					margin-right: 4px;
77
				}
78
 
79
				> [class^="icon-"] {
80
					top: 2px;
81
					margin-left: 1px;
82
					margin-right: 4px;
83
				}
84
 
85
				.page-sidebar-fixed & {
86
					transition: all 0.2s ease;
87
				}
88
 
89
				.page-sidebar-reversed.page-sidebar-fixed & {
90
					transition: none;
91
				}
92
			}
93
 
94
			&.open {
95
				> a {
96
					font-size: $sidebar-menu-link-font-size;
97
				}
98
			}
99
 
100
			&.active {
101
				> a {
102
					border: none;
103
					text-shadow:none;
104
					font-size: $sidebar-menu-link-font-size;
105
 
106
					> .selected {
107
						background-image: none; /* will be set in a theme css file*/
108
						float: right;
109
						position: absolute;
110
						right:-1px;
111
						top:26px;
112
 
113
						background: none;
114
						width: 0;
115
						height: 0;
116
						border-style: solid;
117
						border-top: 12px double transparent;
118
						border-bottom: 12px double transparent;
119
						border-left:0;
120
						border-right:8px solid #ffffff;
121
 
122
						.page-sidebar-reversed & {
123
							right: auto;
124
							left:-1px;
125
							border-right: 0;
126
							border-left:8px solid #ffffff;
127
						}
128
 
129
						.page-container-bg-solid & {
130
							border-color: transparent $page-content-solid-bg-color transparent transparent;
131
						}
132
 
133
						.page-container-bg-solid.page-sidebar-reversed & {
134
							border-color: transparent transparent transparent $page-content-solid-bg-color;
135
						}
136
					}
137
				}
138
			}
139
		}
140
 
141
		/* all links */
142
		li {
143
			> a {
144
				> .arrow {
145
					&:before {
146
						width: 10px;
147
						float: right;
148
						margin-right: 5px;
149
						margin-left: 5px;
150
						margin-top: -32px;
151
						display: inline;
152
						font-size: $sidebar-menu-link-icon-font-size;
153
						font-family: FontAwesome;
154
						height: auto;
155
						content: "\f104";
156
						font-weight: 300;
157
						text-shadow:none;
158
					}
159
 
160
					&.open:before {
161
						content: "\f107";
162
					}
163
				}
164
 
165
				> .badge {
166
					float: right;
167
					margin-top: 1px;
168
					margin-right: 0px;
169
				}
170
			}
171
		}
172
 
173
		.sub-menu {
174
			list-style: none;
175
			display: none;
176
			padding: 0;
177
			margin: 8px 0px 8px 0px;
178
 
179
			li {
180
				background: none;
181
				margin: 0px;
182
				padding: 0px;
183
				margin-top: 1px !important;
184
 
185
				> a {
186
					display: block;
187
					margin: 0;
188
					padding: 9px 15px 9px 15px;
189
					text-decoration: none;
190
					font-size: $sidebar-menu-link-font-size;
191
					font-weight: 300;
192
					background: none;
193
 
194
					> i {
195
						font-size: $sidebar-menu-sub-menu-link-icon-font-size;
196
						margin-right: 1px;
197
					}
198
 
199
					.arrow {
200
						&:before {
201
							margin-top: -4px;
202
						}
203
 
204
						&.open:before {
205
							margin-top: -2px;
206
						}
207
					}
208
				}
209
 
210
				/* 2nd level sub menu */
211
				> .sub-menu {
212
					margin: 0;
213
					> li {
214
						> a {
215
							padding-left: 30px;
216
						}
217
						/* 3rd level sub menu */
218
						> .sub-menu {
219
							margin: 0;
220
							> li {
221
								> a {
222
									padding-left: 40px;
223
								}
224
							}
225
						}
226
					}
227
				}
228
			}
229
		}
230
 
231
		li.active {
232
			> .sub-menu {
233
				display: block;
234
			}
235
		}
236
	}
237
 
238
	/* Compact sidebar menu */
239
	.page-sidebar-menu.page-sidebar-menu-compact {
240
		/* first level links */
241
		> li {
242
			text-align: left;
243
 
244
			> a {
245
				text-align: left;
246
				min-height: 50px;
247
				padding: 15px 15px 15px 15px;
248
 
249
				> .title {
250
					display: inline-block;
251
					text-align: left;
252
					margin-top: 0px;
253
				}
254
 
255
				> i {
256
					font-size: 16px; /* $sidebar-menu-link-icon-font-size */
257
					text-align: left;
258
				}
259
			}
260
 
261
			&.active {
262
				> a > .selected {
263
					top: 14px;
264
				}
265
			}
266
 
267
			> .sub-menu > li > a {
268
				padding-left: 22px;
269
			}
270
		}
271
 
272
		/* all links */
273
		li {
274
			> a {
275
				> .arrow {
276
					&:before {
277
						margin-top: -1px;
278
					}
279
 
280
					&.open:before {
281
						margin-top: -1px;
282
					}
283
				}
284
			}
285
		}
286
	}
287
 
288
	/* Compact hoverable sidebar menu */
289
	.page-sidebar-menu.page-sidebar-menu-compact.page-sidebar-menu-hover-submenu {
290
		/* first level links */
291
		> li > .sub-menu > li > a {
292
			padding-left: 15px;
293
		}
294
	}
295
}
296
 
297
@media (min-width: $screen-md-min) { /* 992px */
298
 
299
	.page-sidebar {
300
		width: $sidebar-width;
301
		float: left;
302
		position: relative;
303
		margin-right: -100%;
304
 
305
		.page-full-width & {
306
			display: none !important;
307
		}
308
 
309
		&.navbar-collapse {
310
			max-height: none !important;
311
		}
312
 
313
		.page-sidebar-menu {
314
			margin-bottom: 10px;
315
		}
316
	}
317
 
318
	.page-sidebar-reversed {
319
		.page-sidebar {
320
			float: right;
321
			margin-right: 0;
322
			margin-left: -100%;
323
		}
324
 
325
		&.page-sidebar-fixed .page-sidebar {
326
			margin-left: -$sidebar-width;
327
		}
328
 
329
		&.page-sidebar-fixed .page-sidebar-wrapper {
330
			position: relative;
331
			float: right;
332
		}
333
	}
334
 
335
	.page-sidebar-fixed {
336
 
337
		.page-sidebar {
338
			position: fixed !important;
339
			margin-left: 0;
340
			top: $header-height;
341
		}
342
 
343
		.page-sidebar-menu {
344
			> li {
345
				&.last {
346
					margin-bottom: 15px !important;
347
				}
348
			}
349
 
350
			.sub-menu {
351
				height: auto !important;
352
			}
353
		}
354
	}
355
 
356
	/* Sidebar Closed */
357
 
358
	.page-sidebar-closed {
359
		.page-sidebar {
360
			width: $sidebar-collapsed-width !important;
361
 
362
			.page-sidebar-menu.page-sidebar-menu-closed {
363
 
364
				/* sidebar */
365
				width: $sidebar-collapsed-width !important;
366
 
367
				> li {
368
 
369
					/* hide opened sub menu */
370
					&.open > .sub-menu,
371
					> .sub-menu {
372
						display: none !important;
373
					}
374
 
375
					&:hover {
376
						width: ($sidebar-collapsed-submenu-width-on-hover + $sidebar-collapsed-width + 1) !important;
377
						position: relative !important;
378
						z-index: $zindex-sidebar-fixed;
379
						display: block !important;
380
 
381
						> a {
382
							@include border-radius(0 $general-border-radius 0 0);
383
							text-align: left;
384
 
385
							> i {
386
								display: inline-block;
387
								margin-right: 10px;
388
							}
389
 
390
							> .title {
391
								display: inline !important;
392
								padding-left: 20px;
393
							}
394
 
395
							> .badge {
396
								display: block !important;
397
							}
398
 
399
							> .selected {
400
								display: none;
401
							}
402
						}
403
 
404
						> .sub-menu {
405
							width: $sidebar-collapsed-submenu-width-on-hover;
406
							position: absolute;
407
							z-index: $zindex-sidebar-submenu;
408
							left: ($sidebar-collapsed-width + 1px);
409
							margin-top: 0;
410
							top: 100%;
411
							display: block !important;
412
 
413
							@include border-radius(0 0 $general-border-radius $general-border-radius);
414
 
415
							> li {
416
								> a {
417
									padding-left: 15px !important;
418
								}
419
 
420
								> .sub-menu {
421
									> li {
422
										> a {
423
											padding-left: 30px !important;
424
										}
425
 
426
										> .sub-menu {
427
											> li {
428
												> a {
429
													padding-left: 45px !important;
430
												}
431
											}
432
										}
433
									}
434
								}
435
							}
436
						}
437
					}
438
 
439
					> a {
440
						min-height: 54px;
441
						padding-left: 11px;
442
 
443
						.selected {
444
							top: 16px;
445
							right: -2px !important;
446
						}
447
 
448
						> .badge,
449
						> .title,
450
						> .arrow {
451
							display: none !important;
452
						}
453
					}
454
				}
455
			}
456
 
457
			.page-sidebar-menu.page-sidebar-menu-compact.page-sidebar-menu-closed {
458
				> li {
459
					> a {
460
						min-height: 50px;
461
						padding-right: 11px;
462
						padding-left: 18px;
463
					}
464
				}
465
			}
466
		}
467
 
468
		&.page-sidebar-reversed {
469
 
470
			.page-sidebar {
471
				margin-left: -$sidebar-collapsed-width;
472
				width: $sidebar-collapsed-width;
473
 
474
				.page-sidebar-menu.page-sidebar-menu-closed {
475
 
476
					/* sidebar */
477
					> li {
478
						> .sub-menu {
479
							left:auto;
480
							right: ($sidebar-collapsed-width + 1px);
481
						}
482
 
483
						&:hover {
484
							margin-left: -($sidebar-collapsed-submenu-width-on-hover + 1px);
485
 
486
							> a {
487
								@include border-radius($general-border-radius 0 0 0);
488
 
489
								> .title {
490
									padding-left: 0;
491
									padding-right: 15px;
492
								}
493
 
494
								> i {
495
									margin-right: 0;
496
									margin-left: 2px;
497
								}
498
							}
499
						}
500
					}
501
				}
502
 
503
				.page-sidebar-menu.page-sidebar-menu-light.page-sidebar-menu-closed {
504
					> li {
505
						> a {
506
							padding-right: 7px;
507
							padding-left: 11px;
508
						}
509
					}
510
				}
511
			}
512
		}
513
 
514
		&.page-sidebar-fixed {
515
			.page-sidebar {
516
				&:hover {
517
					width: $sidebar-width !important;
518
					display: block;
519
					z-index: $zindex-sidebar-fixed;
520
 
521
					.page-sidebar-menu {
522
						width: $sidebar-width !important;
523
 
524
						.selected {
525
							display: none !important;
526
						}
527
					}
528
				}
529
			}
530
		}
531
 
532
		&.page-sidebar-fixed.page-sidebar-reversed {
533
			.page-sidebar {
534
				&:hover {
535
					width: $sidebar-width !important;
536
					display: block;
537
					z-index: $zindex-sidebar-fixed;
538
					margin-left: -$sidebar-width !important;
539
 
540
					.page-sidebar-menu {
541
						width: $sidebar-width !important;
542
					}
543
				}
544
			}
545
		}
546
 
547
		&.page-sidebar-hide {
548
			.page-sidebar {
549
				display: none !important;
550
			}
551
		}
552
	}
553
 
554
	/* Default Sidebar Menu With Hoverable Submenu */
555
	.page-sidebar-menu.page-sidebar-menu-hover-submenu {
556
		li {
557
			.sub-menu {
558
				display: none;
559
				width: $sidebar-collapsed-submenu-width-on-hover;
560
				z-index: $zindex-sidebar-submenu;
561
				position: absolute;
562
 
563
				@include border-radius($general-border-radius);
564
 
565
				> li {
566
					> a {
567
						margin: 3px;
568
					}
569
				}
570
			}
571
 
572
			&.active,
573
			&.open {
574
				.sub-menu {
575
					display: none !important;
576
				}
577
			}
578
 
579
			a > .arrow {
580
				display: none;
581
			}
582
 
583
			&:hover {
584
				> a {
585
					> .arrow {
586
						display: block;
587
						float: right;
588
						position: absolute;
589
						right: 0;
590
						margin-top: -20px;
591
						background: none;
592
						width: 0;
593
						height: 0;
594
						border-style: solid;
595
						border-top: 12px double transparent;
596
						border-bottom: 12px double transparent;
597
						border-left:0;
598
 
599
						&:after,
600
						&:before {
601
							display: none;
602
						}
603
 
604
						.page-sidebar-reversed & {
605
							right: auto;
606
							left: 0;
607
							border-right: 0;
608
						}
609
					}
610
				}
611
 
612
				> .sub-menu {
613
					display: inline-block !important;
614
				}
615
			}
616
		}
617
 
618
		> li:hover {
619
			> a {
620
				> .arrow {
621
					z-index: 1;
622
					right: 0px;
623
					margin-top: -36px;
624
 
625
					.page-fontawesome & {
626
						margin-top: -34px;
627
					}
628
 
629
					.page-glyphicons & {
630
						margin-top: -38px;
631
					}
632
				}
633
			}
634
 
635
			> .sub-menu {
636
				margin-left: $sidebar-width;
637
				margin-top: -78px;
638
 
639
				.page-sidebar-reversed & {
640
					margin-left: -($sidebar-collapsed-submenu-width-on-hover) !important;
641
				}
642
 
643
				.page-sidebar-closed & {
644
					margin-left: 0;
645
				}
646
 
647
				> li {
648
					.sub-menu {
649
						margin-left: $sidebar-collapsed-submenu-width-on-hover;
650
						margin-top: -42px !important;
651
 
652
						.page-sidebar-reversed & {
653
							margin-left: -$sidebar-collapsed-submenu-width-on-hover !important;
654
						}
655
 
656
						> li > a {
657
							padding-left: 10px;
658
							padding-right: 10px;
659
						}
660
					}
661
				}
662
			}
663
		}
664
	}
665
 
666
	/* Compact Sidebar Menu With Hoverable Submenu */
667
	.page-sidebar-menu.page-sidebar-menu-compact.page-sidebar-menu-hover-submenu {
668
		li {
669
			&:hover {
670
				> a {
671
					> .arrow {
672
						margin-top: -20px;
673
					}
674
				}
675
			}
676
		}
677
 
678
		> li:hover {
679
			> a {
680
				> .arrow {
681
					margin-top: -20px;
682
				}
683
			}
684
 
685
			> .sub-menu {
686
				margin-top: -49px;
687
			}
688
		}
689
	}
690
}
691
 
692
@media (max-width: $screen-sm-max) { /* 991px */
693
 
694
	.page-sidebar {
695
		border-top: 0 !important;
696
		margin: 20px;
697
 
698
		.selected {
699
			display: none !important;
700
		}
701
 
702
		&.navbar-collapse {
703
			max-height: none; /* set some max height to have a scrollable menu on mobile devices */
704
 
705
			&.collapse {
706
				display: none !important;
707
			}
708
 
709
			&.in {
710
				border-top: 0 !important;
711
				margin: 20px;
712
				position: relative;
713
				overflow: hidden !important;
714
				overflow-y: auto !important;
715
				display: block !important;
716
			}
717
 
718
			&.navbar-no-scroll {
719
				max-height: none !important;
720
			}
721
		}
722
 
723
		.mega-menu-responsive-content {
724
			padding: 10px 18px 10px 45px;
725
		}
726
	}
727
 
728
	.page-full-width {
729
		.page-sidebar-menu {
730
			display: block;
731
		}
732
	}
733
}
734
 
735
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { /* 768px & 991px */
736
	.page-sidebar {
737
		.btn-navbar {
738
 
739
			&.collapsed .arrow {
740
				display: none;
741
			}
742
 
743
			.arrow {
744
				position: absolute;
745
				right: 25px;
746
				width: 0;
747
				height: 0;
748
				top:50px;
749
				border-bottom: 15px solid #5f646b;
750
				border-left: 15px solid transparent;
751
				border-right: 15px solid transparent;
752
			}
753
		}
754
	}
755
}
756
 
757
@media (max-width: $screen-xs-min) { /* 480px */
758
 
759
	/* Page sidebar */
760
 
761
	.page-sidebar,
762
	.page-sidebar.in {
763
		margin: 10px 10px 10px 10px !important;
764
 
765
		.page-header-fixed.page-header-fixed-mobile & {
766
			margin-top: 10px !important;
767
		}
768
	}
769
}