Mercurial > nebulaweb3

comparison default/assets/scss/layout/_sidebar.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }