|
0
|
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 }
|
