Mercurial > nebulaweb3

comparison default/assets/scss/layout/_header.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 HEADER
5 *********************************
6 *********************************/
7
8 /* Base Header styles
9 ========================*/
10 .navbar-nav {
11 margin: 0;
12 }
13
14 .navbar {
15 border-radius: 0;
16 border: 0;
17 background: $navbar-bg;
18 border-bottom: $navbar-border;
19 width: 100%;
20 margin-bottom: 0;
21 position: relative;
22 z-index: 99;
23 height: $nav-height;
24 flex-direction: row;
25 align-items: stretch;
26 padding: 0;
27
28 .btn-list {
29 display: flex;
30 justify-content: center;
31 align-items: center;
32
33 .btn {
34 margin: 0;
35 background: $color-scheme-hover;
36 border: transparent;
37 font-family: $headings-font-family;
38 //font-size: em(13);
39 font-weight: 500;
40 padding: em(12) em(20);
41 border-radius: em(3);
42 }
43
44 .dropdown-menu {
45 top: $nav-height;
46 margin-top: 0;
47 }
48 }
49
50 .spacer {
51 flex: 1;
52 }
53 }
54
55 @media (min-width: #{$theme-breakpoint + 1px}) {
56 .navbar {
57 position: fixed;
58 }
59
60 .sidebar-horizontal {
61 .navbar { position: relative; }
62 }
63 }
64
65
66 /* Logo Area
67 ========================*/
68 .navbar-header {
69 width: $sidebar-width;
70 }
71
72 .navbar-brand {
73 padding: 0;
74 height: $nav-height;
75 text-align: center;
76 width: 100%;
77 font-size: rem(24);
78 font-family: $headings-font-family;
79 font-weight: 600;
80 background: #fff;
81 color: #fff;
82 display: flex;
83 justify-content: center;
84 align-items: center;
85 border-bottom: 1px solid $theme-border-color;
86 .logo-bon { color: $color-scheme; }
87 .logo-vue { color: $text-muted; }
88 &:hover { color: #fff; }
89 .logo-light & { background: #fff }
90 .logo-dark & { background: $color-scheme-dark }
91 p {
92 margin-bottom: 0;
93 }
94 img {
95 display: inline-block;
96 margin: 0 auto;
97 }
98 .rtl & {
99 margin-right: 0;
100 margin-left: $spacer;
101 }
102 }
103
104 .navbar .logo-collapse { display: none }
105
106 @media (min-width: #{$theme-breakpoint + 1px}) {
107 .sidebar-collapse {
108 .logo-expand { display: none }
109 .logo-collapse { display: inline-block }
110 .navbar-header { width: $logo-width; }
111
112 .navbar-brand {
113 p {
114 visibility: hidden;
115 max-width: 1em;
116 }
117
118 p::first-letter {
119 display: inline;
120 visibility: visible;
121 }
122 }
123 }
124 }
125
126 @media (max-width: $theme-breakpoint) {
127 .site-sidebar {
128 border-bottom: 1px solid #ddd;
129 }
130 .navbar .logo-expand { display: none }
131 .navbar .logo-collapse { display: inline-block }
132
133 .navbar-header {
134 float: left;
135 width: $logo-width;
136 }
137
138 .navbar-brand {
139 p {
140 visibility: hidden;
141 max-width: 1em;
142 }
143
144 p::first-letter {
145 display: inline;
146 visibility: visible;
147 }
148 }
149 }
150
151
152 /* Base Navbar Styles
153 ========================*/
154 .navbar-nav {
155 flex-direction: row;
156 > li {
157 &, > a {
158 display: inline-flex;
159 justify-content: center;
160 align-items: stretch;
161 }
162 > a {
163 align-items: center;
164 padding: 0 em(30,15);
165 line-height: $nav-height;
166 color: rgba(#fff,0.6);
167 font-family: $headings-font-family;
168 font-size: em(15);
169
170 &.dropdown-toggle {
171 padding: 0 1em;
172 }
173
174 i + .badge {
175 position: absolute;
176 top: 50%;
177 right: 5px;
178 margin-top: rem(-7);
179 transform: translateY(-50%);
180 }
181
182 i + .badge-border {
183 background: #fff !important;
184 box-shadow: 0 0 0 2px transparent;
185 }
186 }
187 }
188
189 .sidebar-toggle {
190 font-size: em(18,15);
191 position: relative;
192
193 a { padding: 0 em(30,18) }
194
195 &::after {
196 content: "";
197 @include position(absolute, 50% 0 null null);
198 transform: translateY(-50%);
199 height: 40%;
200 width: 1px;
201 background: rgba(255,255,255,0.3);
202 }
203
204 .header-dark &::after {
205 opacity: .3;
206 }
207 }
208
209 &.pull-right {
210 .dropdown-menu {
211 left: auto;
212 right: 0;
213 }
214 }
215
216 .avatar {
217 display: inline-block;
218 position: relative;
219 height: auto;
220
221 &::before {
222 content: "";
223 @include position(absolute, 50% rem(-9) auto auto);
224 transform: translateY(-50%);
225 background: #fff;
226 @include size( rem(22) );
227 border-radius: 100px;
228 }
229
230 img { max-width: rem(60) }
231
232 .list-icon {
233 margin-left: rem(-13);
234 @include position(absolute, 50% -0.4em auto auto);
235 transform: translateY(-50%);
236 color: $color-scheme;
237 }
238
239 .header-light &,
240 .header-dark & {
241 &::before { background: $color-scheme-hover; }
242 .list-icon { color: #fff; }
243 }
244 }
245
246 body.rtl & {
247 padding-right: 0;
248 .sidebar-toggle {
249 &::after {
250 left: 0;
251 right: auto;
252 }
253 }
254 }
255 }
256
257 .header-dark .navbar-nav > li > a i + .badge-border {
258 background: $color-scheme-dark !important;
259 box-shadow: 0 0 0 2px $color-scheme-dark;
260 }
261
262 .header-light .navbar-nav > li > a i + .badge-border {
263 background: #fff !important;
264 box-shadow: 0 0 0 2px #fff;
265 }
266
267 @media (max-width: 720px) {
268 .navbar-nav {
269 margin-top: 0;
270 margin-bottom: 0;
271 }
272 }
273
274
275 /* Menu Dropdowns
276 ========================*/
277 // for simple dropdowns
278 .navbar-nav .dropdown-menu {
279 position: absolute;
280 }
281
282 .dropdown-menu {
283 border: 1px solid $theme-border-color;
284 box-shadow: none;
285 width: em(180);
286
287 .dropdown-item strong,
288 .dropdown-header {
289 font-size: $font-size-base;
290 font-weight: 700;
291 color: $color-scheme-dark;
292 }
293
294 .dropdown-item {
295 .badge {
296 position: relative;
297 top: rem(-2);
298 font-size: 0.9em;
299 }
300
301 .list-icon {
302 font-size: rem(18);
303 }
304 }
305 }
306
307 // card for wider dropdowns
308 .dropdown-card {
309 border-bottom-left-radius: 10px;
310 border-bottom-right-radius: 10px;
311 border: none;
312 width: rem(340);
313 box-shadow: 0 0px 10px 0px rgba(0,0,0,.1);
314 background: #fff;
315 position: relative;
316
317 &.dropdown-card-profile {
318 width: rem(250);
319 border-radius: 5px;
320 padding-top: 0;
321 padding-bottom: 0;
322 .card-header{
323 padding: 0;
324 > a {
325 padding: em(25,16) em(20,16);
326 border-right: 1px solid $theme-border-color;
327 &:last-child { border-right: none;}
328 i { color: $text-muted; font-size: em(20,16) }
329 &:hover i { color: $color-scheme; }
330 }
331 }
332 .card-body {
333 li {
334 padding: 0;
335 a {
336 padding: em(10,15);
337 display: block;
338 color: $gray-700;
339 font-size: em(15);
340 font-family: $headings-font-family;
341 &:hover { color: $color-scheme }
342 }
343 }
344 }
345
346 &.dropdown-card-profile-dark {
347 background: #292b2e;
348 .card-header {
349 border-color: rgba(255,255,255,.3);
350 > a {
351 border-color: rgba(255,255,255,.3);
352 }
353 }
354 .card-body {
355 li {
356 a { color: $text-muted; }
357 &:hover a { color: $color-scheme; }
358 }
359 }
360 &::after {
361 border-color: transparent transparent #292b2e transparent;
362 }
363 }
364
365 body.rtl & {
366 }
367 }
368
369 .card {
370 border: 0;
371 box-shadow: none;
372 background: none;
373 }
374
375 .card-header {
376 padding-bottom: em(15,16);
377 font-size: em(16);
378 background: none;
379 border-bottom: 1px solid #f1f1f1;
380 font-family: $headings-font-family;
381 color: $headings-color;
382 margin-bottom: em(5,16);
383 font-weight: 700;
384
385 .dropdown-menu-options {
386 color: #afb2ba;
387 }
388
389 }
390
391 .card-body {
392 li {
393 padding: em(10) em(25) em(10) em(15);
394 .media-body {
395 padding: 0 em(10);
396 letter-spacing: em(0.5);
397 .user--online {
398 top: em(-5);
399 }
400 }
401 }
402 }
403
404 .card-footer {
405 border: none;
406 background: none;
407 padding-top: em(15);
408 }
409 }
410
411 .dropdown-card-dark {
412 background: $color-scheme-dark;
413 border-color: transparent;
414
415 &::after {
416 border-color: transparent transparent $color-scheme-dark transparent;
417 }
418
419 .card {
420 background: $color-scheme-dark;
421 }
422
423 .card-heading-extra {
424 border-color: #777;
425 border-color: rgba(255,255,255,.1);
426 }
427
428 [class*="user--"]::after {
429 border-color: transparent !important;
430 }
431
432 .card-header{
433 color: #fff;
434 border-color: rgba(255,255,255,.1);
435 .dropdown-menu-options {
436 color: $color-scheme !important;
437 }
438 }
439
440 .dropdown-list-group li {
441 border-color: rgba(255,255,255,.1);
442 &:hover {
443 background: none;
444 .media-content {
445 color: #fff;
446 }
447 }
448
449 a .media-heading {
450 color: $color-scheme;
451 }
452
453 .media-content {
454 transition: color 250ms;
455 color: #afb2ba;
456 font-weight: 300;
457 }
458 }
459 }
460
461 @media (max-width: 767px) {
462 .navbar-nav .open .dropdown-menu {
463 position: absolute;
464 width: rem(320);
465 border: 1px solid $theme-border-color;
466 background: #fff;
467 }
468
469 .navbar-nav .open .dropdown-menu.dropdown-card-dark {
470 background: $color-scheme-dark;
471 }
472 }
473
474 // for wider card, richer dropdowns
475 .dropdown-list-group {
476 position: relative;
477 margin: 0 0 0 0;
478 padding: 0;
479 .card-body {
480 padding: 0;
481 }
482
483 li {
484 border-bottom: 1px solid $theme-border-color;
485 &:nth-child(odd) { background: $dropdown-link-hover-bg }
486 a {
487 color: $body-color;
488 padding: em(15) 0;
489 .media-heading { color: $headings-color; font-weight: 600; letter-spacing: 0; }
490 .media-content { color: #868e96; }
491
492 &:hover {
493 background: transparent;
494 text-decoration: none;
495 color: $body-color;
496 }
497 }
498 }
499
500 a {
501 font-size: 13px;
502
503 img {
504 max-width: 100%;
505 position: relative;
506 }
507
508 .d-flex {
509 align-items: flex-start;
510 margin-right: .75em;
511 }
512
513 .list-icon {
514 color: #fff;
515 width: 100%;
516 text-align: center;
517 font-size: em(18, 13);
518 line-height: em(40,18);
519 top: 0;
520 @include size( em(40,18) );
521 background: $color-scheme;
522 border-radius: 100px;
523 }
524
525 [class*="user--"]:after {
526 @include position(absolute, auto auto 0 0);
527 border: 1px solid #fff;
528 }
529 }
530
531 body.rtl & {
532 padding: 0;
533 a .d-flex {
534 margin-right: 0;
535 margin-left: 0.75em;
536 }
537 }
538 }
539
540 .card-heading-extra {
541 border-bottom: 1px solid $theme-border-color;
542 padding-bottom: em(30,11);
543 margin-bottom: em(30,11);
544 text-transform: uppercase;
545 font-size: em(11);
546
547 h3 {
548 margin: 0;
549 text-transform: none;
550 }
551
552 a {
553 color: $body-color;
554 &:hover,
555 .list-icon {
556 text-decoration: none;
557 color: $color-scheme !important;
558 }
559 }
560
561 .list-icon {
562 font-size: rem(18);
563 top: rem(-1);
564 position: relative;
565 margin: 0 rem(5);
566 }
567
568 [class*="user--"] {
569 padding-left: rem(20);
570 &::after {
571 @include position(absolute, rem(2) null null 0);
572 }
573 }
574 }
575
576
577 /* Search Form
578 ========================*/
579 .navbar-search {
580 position: relative;
581 width: em(240);
582 margin-top: 0;
583
584 input[type="search"],
585 .toggle-navbar-search,
586 .list-icon {
587 display: inline-block;
588 float: left;
589 line-height: $nav-height;
590 z-index: 1;
591 height: $nav-height;
592 }
593
594 .list-icon {
595 position: relative;
596 left: rem(20);
597 top: rem(-1);
598 color: rgba(#fff, 0.6);
599 }
600
601 input[type="search"] {
602 cursor: pointer;
603 font-family: $headings-font-family;
604 font-size: em(13);
605 font-weight: 500;
606 background: transparent;
607 border: 0;
608 padding: 0 1em 0 em(50);
609 width: 100%;
610 color: #fff;
611 @include position(absolute, 0 null null 0);
612
613 @include placeholder {
614 opacity : 1;
615 color: rgba(255,255,255,0.7);
616 }
617 }
618
619 .remove-focus {
620 z-index: 10;
621 opacity: 0;
622 transition: none;
623 visibility: hidden;
624 color: $nav-link-color;
625 @include position(absolute, null rem(40) 50% null);
626 transform: translateY(50%);
627 font-size: rem(20);
628
629 &:hover {
630 color: #000;
631 }
632 }
633
634 &.input-focused {
635 @include position (fixed, 0 0 null 0);
636 z-index: 2;
637 background: #fff;
638 width: auto;
639 transition: all 0.3s ease;
640
641 &::before {
642 content: "";
643 display: block;
644 background: #000;
645 background: rgba(0,0,0,0.5);
646 height: 100vh;
647 @include position(fixed, $nav-height 0 0 0);
648 z-index: 99;
649 }
650
651 .list-icon {
652 left: 1.75rem;
653 }
654
655 input[type='search'] {
656 cursor: auto;
657 padding-right: em(80,20);
658 font-size: em(20);
659 color: $content-color;
660 @include placeholder {
661 color: rgba($content-color,0.3);
662 }
663 }
664
665 .list-icon {
666 color: $nav-link-color;
667 }
668
669 .remove-focus {
670 opacity: 1;
671 visibility: visible;
672 transition: all #{$transition-duration} #{$transition-function};
673 }
674 }
675
676 body.rtl & {
677 input[type="search"] {
678 padding: 0 em(50) 0 1em;
679 }
680
681 .list-icon {
682 left: 0;
683 right: rem(20);
684 float: right;
685 }
686
687 &.input-focused {
688 .remove-focus {
689 right: auto;
690 left: rem(40);
691 }
692 }
693 }
694 }
695
696
697 /* Header Dark
698 ========================*/
699 .header-dark {
700 .navbar-nav {
701 > li > a {
702 &.active,
703 &:hover,
704 &:focus {
705 background: $color-scheme-hover;
706 color: #fff;
707 }
708 }
709
710 .open > a {
711 background-color: $color-scheme-hover;
712 }
713 }
714 }
715
716
717 /* Header Light
718 ========================*/
719 .header-light {
720 .navbar {
721 background: #fff;
722 }
723
724 .navbar-nav {
725 > li > a {
726 color: $nav-link-color;
727 &:hover,
728 &:focus {
729 background: $nav-link-hover-color;
730 }
731 }
732
733 .open > a {
734 background-color: $nav-link-hover-color;
735 }
736 }
737
738 .navbar-search:not(.input-focused) {
739 &, .list-icon {
740 color: $nav-link-color;
741 }
742
743 input[type="text"] {
744 @include placeholder {
745 color: $nav-link-color;
746 }
747 }
748 }
749 }
750
751
752 /* Header for Horizontal Sidebar Pages
753 ========================*/
754 @media (min-width: #{$theme-breakpoint + 1px}) {
755 .sidebar-horizontal {
756 .sidebar-toggle {
757 display: none;
758 }
759
760 .navbar {
761 box-shadow: none;
762 border: 0;
763 }
764
765 .side-menu > li > a .list-icon {
766 top: rem(6);
767 position: relative;
768 }
769 }
770 }
771
772
773 /* Header with Centered Logo
774 ========================*/
775 @media (min-width: #{$theme-breakpoint + 1px}) {
776 .header-centered {
777 .navbar {
778 padding-left: em(15);
779 }
780
781 .navbar-header {
782 position: absolute;
783 left: 50%;
784 transform: translateX(-50%);
785 }
786 }
787
788 .sidebar-horizontal.header-centered {
789 .side-menu {
790 justify-content: center;
791 ul { text-align: left; }
792 }
793 }
794 }
795
796 /* Widget Contact Info
797 ========================*/
798 .nav-contact-info {
799 .contact-info-body {
800 position: relative;
801 z-index: 2;
802 @include padding( rem(60) $spacer $spacer $spacer );
803 &:before {
804 content: '';
805 display: block;
806 @include position(absolute, 0 50% null null);
807 @include size( rem(70), rem(30) );
808 transform: translateX(50%);
809 border-bottom-left-radius: rem(90);
810 border-bottom-right-radius: rem(90);
811 background: $sidebar-bg;
812 z-index: -1;
813 }
814 }
815 }