|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 SIDEBAR
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7 .site-sidebar {
|
|
|
8 position: relative;
|
|
|
9 z-index: 9;
|
|
|
10 background: $sidebar-bg;
|
|
|
11 border-right: 1px solid $theme-border-color;
|
|
|
12 padding: 0;
|
|
|
13 display: flex;
|
|
|
14 flex-flow: column;
|
|
|
15 padding-bottom: 30px;
|
|
|
16
|
|
|
17 &.scrollbar-enabled {
|
|
|
18 padding-right: 0;
|
|
|
19 }
|
|
|
20
|
|
|
21 .rtl & {
|
|
|
22 border-right: 0;
|
|
|
23 border-left: 1px solid $theme-border-color;
|
|
|
24 }
|
|
|
25 }
|
|
|
26
|
|
|
27 .sidebar-nav {
|
|
|
28 flex: 1;
|
|
|
29 padding: 0 em(15);
|
|
|
30 }
|
|
|
31
|
|
|
32 @media (max-width: $theme-breakpoint) {
|
|
|
33 .scrollbar-enabled.site-sidebar {
|
|
|
34 position: absolute;
|
|
|
35 }
|
|
|
36
|
|
|
37 .site-sidebar {
|
|
|
38 display: none;
|
|
|
39 width: em(420);
|
|
|
40 max-width: 100%;
|
|
|
41 position: absolute;
|
|
|
42 }
|
|
|
43 }
|
|
|
44
|
|
|
45 .sidebar-collapse .sidebar-collapse-hidden {
|
|
|
46 display: none !important;
|
|
|
47 }
|
|
|
48
|
|
|
49 /* Sidebar User Area
|
|
|
50 ========================*/
|
|
|
51 .side-user {
|
|
|
52 padding: em(20) 0;
|
|
|
53 border-bottom: 1px solid $theme-border-color;
|
|
|
54 margin-right:-1px;
|
|
|
55 position: relative;
|
|
|
56
|
|
|
57
|
|
|
58 .sidebar-collapse & {
|
|
|
59 padding-top: em(10);
|
|
|
60 padding-bottom: em(10);
|
|
|
61 position: relative;
|
|
|
62 top: 20px;
|
|
|
63 padding-bottom: 0;
|
|
|
64
|
|
|
65 .media-left {
|
|
|
66 padding-right: 0;
|
|
|
67 position: relative;
|
|
|
68 left: em(-8);
|
|
|
69 }
|
|
|
70
|
|
|
71 .dropdown-toggle {
|
|
|
72 display: none;
|
|
|
73 }
|
|
|
74
|
|
|
75 figure::after {
|
|
|
76 @include size(0.7em);
|
|
|
77 bottom: 0px;
|
|
|
78 left: em(4);
|
|
|
79 }
|
|
|
80
|
|
|
81 img {
|
|
|
82 max-width: em(40);
|
|
|
83 height: auto;
|
|
|
84 }
|
|
|
85 }
|
|
|
86
|
|
|
87 .media {
|
|
|
88 color: $nav-link-color;
|
|
|
89 }
|
|
|
90
|
|
|
91 .side-user-heading {
|
|
|
92 color: $headings-color;
|
|
|
93 font-family: $headings-font-family;
|
|
|
94 &:hover { color: $color-scheme; }
|
|
|
95 }
|
|
|
96
|
|
|
97 .side-user-link {
|
|
|
98 display: none;
|
|
|
99 height: em(26);
|
|
|
100 width: em(26);
|
|
|
101 background: #fff;
|
|
|
102 @include position(absolute, null -5px -5px null);
|
|
|
103 box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.4);
|
|
|
104 border-radius: em(50);
|
|
|
105
|
|
|
106 & .list-icon {
|
|
|
107 font-size: em(14);
|
|
|
108 line-height: em(27);
|
|
|
109 }
|
|
|
110 }
|
|
|
111
|
|
|
112 & > a:hover .media-heading,
|
|
|
113 .active .media-heading {
|
|
|
114 color: $color-scheme;
|
|
|
115 }
|
|
|
116
|
|
|
117 .media-body {
|
|
|
118 font-size: em(13);
|
|
|
119 }
|
|
|
120
|
|
|
121 [class*="user--"]:after {
|
|
|
122 right: auto;
|
|
|
123 left: rem(8);
|
|
|
124 }
|
|
|
125
|
|
|
126 body.rtl & {
|
|
|
127 padding-right: 0;
|
|
|
128 }
|
|
|
129 }
|
|
|
130
|
|
|
131
|
|
|
132 /* Vertical Sidebar
|
|
|
133 ========================*/
|
|
|
134 .side-menu {
|
|
|
135 flex-direction: column;
|
|
|
136 position: relative;
|
|
|
137 line-height: em(30);
|
|
|
138 margin-top: em(20);
|
|
|
139 font-family: $headings-font-family;
|
|
|
140
|
|
|
141 ul {
|
|
|
142 font-size: em(12);
|
|
|
143 font-weight: 300;
|
|
|
144 margin-left: em(43,12);
|
|
|
145 position: relative;
|
|
|
146 top: -10px;
|
|
|
147
|
|
|
148 ul {
|
|
|
149 font-size: em(12);
|
|
|
150 margin-left: em(15,12);
|
|
|
151 top: 0;
|
|
|
152 }
|
|
|
153 }
|
|
|
154
|
|
|
155 .collapse.in {
|
|
|
156 display: block;
|
|
|
157 }
|
|
|
158
|
|
|
159 li {
|
|
|
160 position: relative;
|
|
|
161
|
|
|
162 a {
|
|
|
163 color: $nav-link-color;
|
|
|
164 position: relative;
|
|
|
165 display: block;
|
|
|
166 @include padding(0 null);
|
|
|
167 font-weight: 500;
|
|
|
168 &:hover { color: $color-scheme; }
|
|
|
169 }
|
|
|
170 }
|
|
|
171
|
|
|
172 > li {
|
|
|
173 > a {
|
|
|
174 padding: em(6.5) 0 em(6.5) em(15);
|
|
|
175 line-height: em(48);
|
|
|
176 color: $nav-heading-link-color;
|
|
|
177 border-top: 1px solid transparent;
|
|
|
178 font-family: $headings-font-family;
|
|
|
179 display: flex;
|
|
|
180 align-items: center;
|
|
|
181
|
|
|
182 &:hover,
|
|
|
183 &:focus {
|
|
|
184 color: $headings-color;
|
|
|
185 background: transparent;
|
|
|
186 }
|
|
|
187 .hide-text {
|
|
|
188 flex: 1;
|
|
|
189 }
|
|
|
190 i {
|
|
|
191 font-size: em(18);
|
|
|
192 vertical-align: middle;
|
|
|
193 position: relative;
|
|
|
194 top: -2px;
|
|
|
195 }
|
|
|
196
|
|
|
197 body.rtl & {
|
|
|
198 i.list-icon {
|
|
|
199 margin-left: .4em;
|
|
|
200 }
|
|
|
201 }
|
|
|
202 }
|
|
|
203
|
|
|
204 > a .badge {
|
|
|
205 position: relative;
|
|
|
206 top: em(13,11);
|
|
|
207 font-size: em(11,15);
|
|
|
208 line-height: 1.2;
|
|
|
209 }
|
|
|
210
|
|
|
211 &::after {
|
|
|
212 content: " ";
|
|
|
213 position: absolute;
|
|
|
214 width: 100%;
|
|
|
215 height: 1px;
|
|
|
216 right: 0;
|
|
|
217 background: rgba(255,255,255,.05);
|
|
|
218 }
|
|
|
219 }
|
|
|
220
|
|
|
221 .sidebar-collapse & > li > a {
|
|
|
222 padding: em(6.5) 0 em(6.5) em(20);
|
|
|
223 }
|
|
|
224
|
|
|
225 body.rtl.sidebar-collapse & {
|
|
|
226 > li > a {
|
|
|
227 padding: em(6.5) em(15) em(6.5) em(20);
|
|
|
228 }
|
|
|
229 }
|
|
|
230
|
|
|
231 > li:first-child > a {
|
|
|
232 border-top: 0;
|
|
|
233 }
|
|
|
234
|
|
|
235 .list-icon {
|
|
|
236 margin-right: em(8,20);
|
|
|
237 line-height: inherit;
|
|
|
238 }
|
|
|
239
|
|
|
240 :not([class*="color-"]) {
|
|
|
241 > .list-icon {
|
|
|
242 color: $nav-icon-color;
|
|
|
243 }
|
|
|
244 }
|
|
|
245
|
|
|
246 .menu-item-has-children {
|
|
|
247 > a {
|
|
|
248 position: relative;
|
|
|
249 &::before {
|
|
|
250 font-family: 'feather';
|
|
|
251 content: "\e928";
|
|
|
252 position: absolute;
|
|
|
253 right: em(10,18);
|
|
|
254 top: 50%;
|
|
|
255 transform: translateY(-50%);
|
|
|
256 font-size: rem(12);
|
|
|
257 color: #7b7b7b;
|
|
|
258 }
|
|
|
259
|
|
|
260 body.rtl &::before {
|
|
|
261 right: auto;
|
|
|
262 left: 0;
|
|
|
263 }
|
|
|
264 }
|
|
|
265 &.active > a::before {
|
|
|
266 content: "\e928";
|
|
|
267 }
|
|
|
268 }
|
|
|
269
|
|
|
270 body.rtl & {
|
|
|
271 padding-right: 0;
|
|
|
272 ul {
|
|
|
273 margin-left: 0;
|
|
|
274
|
|
|
275 ul {
|
|
|
276 padding-right: 0;
|
|
|
277 margin-right: 1em;
|
|
|
278 }
|
|
|
279 }
|
|
|
280 }
|
|
|
281 }
|
|
|
282
|
|
|
283
|
|
|
284 /* Expanded Vertical Sidebar
|
|
|
285 ========================*/
|
|
|
286 @media (min-width: #{$theme-breakpoint + 1px}) {
|
|
|
287 .sidebar-expand {
|
|
|
288 .site-sidebar {
|
|
|
289 position: fixed;
|
|
|
290 width: $sidebar-width;
|
|
|
291 height: calc(100vh - #{$nav-height});
|
|
|
292
|
|
|
293 .side-menu > li > a {
|
|
|
294 border-top-color: $theme-border-color;
|
|
|
295 }
|
|
|
296 }
|
|
|
297 }
|
|
|
298 }
|
|
|
299
|
|
|
300
|
|
|
301 /* Collapsed Vertical Sidebar
|
|
|
302 ========================*/
|
|
|
303 @media (min-width: #{$theme-breakpoint + 1px}) {
|
|
|
304 .sidebar-collapse {
|
|
|
305 .site-sidebar {
|
|
|
306 position: absolute;
|
|
|
307 top: $nav-height;
|
|
|
308 left: 0;
|
|
|
309 width: $collapse-sidebar-width;
|
|
|
310 bottom: 0;
|
|
|
311 overflow: visible !important;
|
|
|
312 }
|
|
|
313
|
|
|
314 .hide-menu, .hide-menu .badge {
|
|
|
315 display: none;
|
|
|
316 }
|
|
|
317
|
|
|
318 .sidebar-nav {
|
|
|
319 padding: 0;
|
|
|
320 }
|
|
|
321
|
|
|
322 .side-menu {
|
|
|
323 > li {
|
|
|
324 &:hover {
|
|
|
325 width: em(279,13);
|
|
|
326 border-top-right-radius: 5px;
|
|
|
327 > a {
|
|
|
328 background: $nav-link-hover-color;
|
|
|
329 display: block;
|
|
|
330 z-index: 9;
|
|
|
331 .hide-menu { display: inline-block }
|
|
|
332 }
|
|
|
333
|
|
|
334 .sub-menu {
|
|
|
335 margin-top: em(15);
|
|
|
336 }
|
|
|
337
|
|
|
338 > a, .sub-menu {
|
|
|
339 box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1);
|
|
|
340 }
|
|
|
341 }
|
|
|
342
|
|
|
343 > a {
|
|
|
344 transition: none;
|
|
|
345 &::before { display: none; }
|
|
|
346 }
|
|
|
347 }
|
|
|
348
|
|
|
349 li:hover {
|
|
|
350 > .sub-menu { display: block; }
|
|
|
351 }
|
|
|
352
|
|
|
353 .sub-menu {
|
|
|
354 position: absolute;
|
|
|
355 top: em(48,13);
|
|
|
356 left: calc(#{$logo-width} - 1px);
|
|
|
357 width: calc(100% - #{$logo-width} + 1px);
|
|
|
358 margin-left: 0;
|
|
|
359 padding: 0 0 em(15,13);
|
|
|
360 display: none;
|
|
|
361 background: $nav-link-hover-color;
|
|
|
362 z-index: 10;
|
|
|
363
|
|
|
364 li {
|
|
|
365 background: $nav-link-hover-color;
|
|
|
366 }
|
|
|
367
|
|
|
368 .sub-menu {
|
|
|
369 left: 100%;
|
|
|
370 top: 0;
|
|
|
371 padding-top: em(15,13);
|
|
|
372 }
|
|
|
373
|
|
|
374 a {
|
|
|
375 padding: 0 em(15,13) 0 em(25,13);
|
|
|
376 }
|
|
|
377 }
|
|
|
378 }
|
|
|
379
|
|
|
380 .sidebar-module {
|
|
|
381 display: none;
|
|
|
382 }
|
|
|
383 }
|
|
|
384
|
|
|
385 body.rtl.sidebar-collapse {
|
|
|
386 .site-sidebar {
|
|
|
387 left: auto;
|
|
|
388 right: 0;
|
|
|
389 }
|
|
|
390
|
|
|
391 .side-menu .sub-menu {
|
|
|
392 left: 0;
|
|
|
393 }
|
|
|
394 }
|
|
|
395 }
|
|
|
396
|
|
|
397
|
|
|
398 /* Horizontal Sidebar
|
|
|
399 ========================*/
|
|
|
400 @media (min-width: #{$theme-breakpoint + 1px}) {
|
|
|
401 .sidebar-horizontal {
|
|
|
402 .site-sidebar {
|
|
|
403 padding: 0 em(15);
|
|
|
404 box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
|
|
|
405 position: relative;
|
|
|
406 width: 100%;
|
|
|
407 }
|
|
|
408
|
|
|
409 .fix-top .site-sidebar {
|
|
|
410 position: fixed;
|
|
|
411 top: 0;
|
|
|
412 }
|
|
|
413
|
|
|
414 .list-icon { margin-right: 0; }
|
|
|
415 .side-user, .side-menu .badge { display:none; }
|
|
|
416
|
|
|
417 .side-menu {
|
|
|
418 margin-top: 0;
|
|
|
419 display: flex;
|
|
|
420 flex-flow: row;
|
|
|
421 ul {
|
|
|
422 position: absolute;
|
|
|
423 top: 0;
|
|
|
424 left: 100%;
|
|
|
425 background: $nav-link-hover-color;
|
|
|
426 z-index: 9;
|
|
|
427 margin-left: 0;
|
|
|
428 width: em(220,13);
|
|
|
429 padding: em(10,13) 0;
|
|
|
430 display: none;
|
|
|
431 line-height: em(36,13);
|
|
|
432 box-shadow: 0 10px 30px rgba(0,0,0,.1);
|
|
|
433 li { background: $nav-link-hover-color }
|
|
|
434 li:last-child {padding-bottom: em(5);}
|
|
|
435 }
|
|
|
436
|
|
|
437 li:hover > ul {display: block;}
|
|
|
438 a {@include padding(null em(15));}
|
|
|
439
|
|
|
440 > li {
|
|
|
441 display: inline-block;
|
|
|
442
|
|
|
443 > ul {
|
|
|
444 left: 0;
|
|
|
445 top: 100%;
|
|
|
446
|
|
|
447 a {
|
|
|
448 font-size: em(14,13);
|
|
|
449 }
|
|
|
450 }
|
|
|
451
|
|
|
452 > a {
|
|
|
453 border: 0;
|
|
|
454 padding: em(10,15) em(15,15) em(5,15);
|
|
|
455 text-align: center;
|
|
|
456
|
|
|
457 &::after {
|
|
|
458 content: "";
|
|
|
459 width: 100%;
|
|
|
460 height: em(2,15);
|
|
|
461 background: transparent;
|
|
|
462 position: absolute;
|
|
|
463 bottom: em(-1,15);
|
|
|
464 left: 0;
|
|
|
465 z-index: 10;
|
|
|
466 }
|
|
|
467
|
|
|
468 &::before {display: none;}
|
|
|
469 & .list-icon {display: block;}
|
|
|
470 }
|
|
|
471 }
|
|
|
472
|
|
|
473 .two-li {
|
|
|
474 width: em(440);
|
|
|
475 @include clearfix();
|
|
|
476
|
|
|
477 li {
|
|
|
478 float: left;
|
|
|
479 width: 50%;
|
|
|
480 }
|
|
|
481 }
|
|
|
482 }
|
|
|
483 }
|
|
|
484 }
|
|
|
485
|
|
|
486
|
|
|
487 /* Sidebar Dark
|
|
|
488 ========================*/
|
|
|
489 .sidebar-dark {
|
|
|
490 .content-wrapper {
|
|
|
491 background: $color-scheme-dark;
|
|
|
492 }
|
|
|
493
|
|
|
494 .site-sidebar {
|
|
|
495 background: $color-scheme-dark;
|
|
|
496 border-color: rgba(255,255,255, 0.2);
|
|
|
497
|
|
|
498 .ps-scrollbar-y-rail,
|
|
|
499 .ps-scrollbar-x {
|
|
|
500 background: transparent !important;
|
|
|
501 }
|
|
|
502
|
|
|
503 .ps-scrollbar-y {
|
|
|
504 background: rgb(220,220,220) !important;
|
|
|
505 right: 0 !important;
|
|
|
506 width: rem(5) !important;
|
|
|
507 }
|
|
|
508 }
|
|
|
509
|
|
|
510 .side-menu {
|
|
|
511 li {
|
|
|
512 &:hover,
|
|
|
513 &.active {
|
|
|
514 background: $color-scheme-dark-hover;
|
|
|
515 }
|
|
|
516
|
|
|
517 &.active > a { color: #fff; }
|
|
|
518
|
|
|
519 a {
|
|
|
520 color: #afb2ba;
|
|
|
521 &:hover { color: #fff; }
|
|
|
522 }
|
|
|
523 }
|
|
|
524
|
|
|
525 :not([class*="color-"]) > .list-icon,
|
|
|
526 .menu-item-has-children > a::before {
|
|
|
527 color: #737986;
|
|
|
528 }
|
|
|
529 }
|
|
|
530
|
|
|
531 &.sidebar-collapse,
|
|
|
532 &.sidebar-horizontal {
|
|
|
533 .side-menu .sub-menu {
|
|
|
534 background: $color-scheme-dark-hover;
|
|
|
535
|
|
|
536 li {
|
|
|
537 background: $color-scheme-dark-hover;
|
|
|
538 }
|
|
|
539 }
|
|
|
540 }
|
|
|
541
|
|
|
542 .side-user {
|
|
|
543 border-bottom: 0;
|
|
|
544
|
|
|
545 .media {
|
|
|
546 color: #afb2ba;
|
|
|
547 }
|
|
|
548
|
|
|
549 .media-heading {
|
|
|
550 color: #fff;
|
|
|
551 font-weight: 400;
|
|
|
552 }
|
|
|
553
|
|
|
554 & > a:hover .media-heading,
|
|
|
555 .active .media-heading {
|
|
|
556 color: #fff;
|
|
|
557 }
|
|
|
558
|
|
|
559 .side-menu {
|
|
|
560 li:hover { background: transparent; }
|
|
|
561 li a { color: #afb2ba; }
|
|
|
562 li a:hover { color: #fff; }
|
|
|
563 }
|
|
|
564
|
|
|
565 [class*="user--"]:after {
|
|
|
566 border-color: $color-scheme-dark-hover;
|
|
|
567 }
|
|
|
568 }
|
|
|
569 }
|
