0
|
1 // main: ../style.scss
|
|
2 /********************************
|
|
3 *********************************
|
|
4 Content Area
|
|
5 *********************************
|
|
6 *********************************/
|
|
7 .widget-bg { border: 0 !important; }
|
|
8
|
|
9 .jqstooltip{
|
|
10 box-sizing: content-box;
|
|
11 }
|
|
12
|
|
13 .dropdown-toggle::after {
|
|
14 display: none;
|
|
15 }
|
|
16
|
|
17 ul.wysihtml5-toolbar {
|
|
18 display: flex;
|
|
19 flex-wrap: wrap;
|
|
20 }
|
|
21
|
|
22 .wysihtml5-toolbar {
|
|
23 .dropdown {
|
|
24 .dropdown-menu {
|
|
25 box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
|
26 li {
|
|
27 a {
|
|
28 display: block;
|
|
29 width: 100%;
|
|
30 padding: em(5) 1.42857em;
|
|
31 color: #888;
|
|
32
|
|
33 &:hover,
|
|
34 &:focus {
|
|
35 color: #514d6a;
|
|
36 background: #f7fafc;
|
|
37 }
|
|
38 }
|
|
39 }
|
|
40 }
|
|
41 }
|
|
42
|
|
43 .btn-default:active {
|
|
44 color: #555;
|
|
45 background-color: #d6dadf;
|
|
46 border-color: #d6dadf;
|
|
47 }
|
|
48
|
|
49 .btn {
|
|
50 cursor: pointer;
|
|
51 span{
|
|
52 &::before,
|
|
53 &::after {
|
|
54 font-family: "FontAwesome";
|
|
55 display: block;
|
|
56 line-height: 1;
|
|
57 font-style: normal;
|
|
58 font-size: em(18,15);
|
|
59 font-weight: 300;
|
|
60 display: inline;
|
|
61 vertical-align: middle;
|
|
62 }
|
|
63 }
|
|
64
|
|
65 .glyphicon-font::before {
|
|
66 content: "\f031";
|
|
67 vertical-align: baseline;
|
|
68 }
|
|
69
|
|
70 .glyphicon-quote::before {
|
|
71 display: none;
|
|
72 }
|
|
73
|
|
74 .glyphicon-quote::after {
|
|
75 content: "\f10d";
|
|
76 }
|
|
77
|
|
78 .glyphicon-list::before {
|
|
79 content: "\f03a";
|
|
80 }
|
|
81
|
|
82 .glyphicon-th-list::before {
|
|
83 content: "\f00b";
|
|
84 }
|
|
85
|
|
86 .glyphicon-indent-right::before {
|
|
87 content: "\f03b";
|
|
88 }
|
|
89
|
|
90 .glyphicon-indent-left::before {
|
|
91 content: "\f03c";
|
|
92 }
|
|
93
|
|
94 .glyphicon-share::before {
|
|
95 content: "\f045";
|
|
96 }
|
|
97
|
|
98 .glyphicon-picture::before {
|
|
99 content: "\f03e";
|
|
100 }
|
|
101 }
|
|
102 }
|
|
103
|
|
104 .search-results {
|
|
105 .form-control { box-shadow: none; }
|
|
106 .col-md-3 {
|
|
107 h5 {
|
|
108 letter-spacing: 0.2rem;
|
|
109 opacity: .8;
|
|
110 }
|
|
111 }
|
|
112 }
|
|
113
|
|
114
|
|
115 /* Bootstrap UI
|
|
116 ========================*/
|
|
117 .badge {
|
|
118 &.up {
|
|
119 position: absolute;
|
|
120 top: rem(10);
|
|
121 right: rem(4);
|
|
122 }
|
|
123 }
|
|
124
|
|
125 .badge-sm {
|
|
126 font-size: rem(11);
|
|
127 padding: rem(2) rem(5);
|
|
128 }
|
|
129
|
|
130 .badge-border {
|
|
131 background: transparent !important;
|
|
132 border-width: 2px;
|
|
133 border-style: solid;
|
|
134 padding: rem(3) rem(6);
|
|
135 border-radius: 200px;
|
|
136 color: $color-scheme;
|
|
137 font-weight: 700;
|
|
138
|
|
139 &.bg-color-scheme { color: $color-scheme; }
|
|
140 &.bg-primary { color: $primary; }
|
|
141 &.bg-danger { color: $danger; }
|
|
142 &.bg-warning { color: $warning; }
|
|
143 &.bg-success { color: $success; }
|
|
144 &.bg-info { color: $info; }
|
|
145 &.bg-facebook { color: map-get($colors, facebook); }
|
|
146 &.bg-twitter { color: map-get($colors, twitter); }
|
|
147 &.bg-googleplus { color: map-get($colors, googleplus); }
|
|
148 &.bg-linkedin { color: map-get($colors, linkedin); }
|
|
149 &.bg-instagram { color: map-get($colors, instagram); }
|
|
150 &.bg-pinterest { color: map-get($colors, pinterest); }
|
|
151 &.bg-dribbble { color: map-get($colors, dribbble); }
|
|
152 &.bg-youtube { color: map-get($colors, youtube); }
|
|
153 &.badge-border-inverted { color: #fff; }
|
|
154 }
|
|
155
|
|
156 /* Basic Icons Styles
|
|
157 ========================*/
|
|
158 .icons-page .main-wrapper {
|
|
159 .material-icons { font-size: em(48); }
|
|
160
|
|
161 .fa { font-size: em(36); }
|
|
162
|
|
163 [class^="feather-"],
|
|
164 [class*=" feather-"] {
|
|
165 font-size: em(36);
|
|
166 }
|
|
167
|
|
168 .linea {
|
|
169 font-size: em(36);
|
|
170 vertical-align: bottom;
|
|
171 }
|
|
172
|
|
173 .col-md-2,
|
|
174 .col-md-3 {
|
|
175 cursor: pointer;
|
|
176 opacity: .7;
|
|
177 margin: em(20) 0;
|
|
178 &:hover {
|
|
179 opacity: 1;
|
|
180 }
|
|
181 }
|
|
182
|
|
183 .social-icons {
|
|
184 font-size: em(60);
|
|
185 }
|
|
186
|
|
187 .wi {
|
|
188 font-size: em(40);
|
|
189 }
|
|
190 }
|
|
191
|
|
192 .list-icon {
|
|
193 &.pull-left {
|
|
194 margin-right: rem(7);
|
|
195 }
|
|
196 &.pull-right {
|
|
197 margin-left: rem(5);
|
|
198 }
|
|
199 }
|
|
200
|
|
201
|
|
202 /* Page Title Area
|
|
203 ========================*/
|
|
204 .page-title {
|
|
205 height: em(62);
|
|
206 line-height: em(62);
|
|
207 margin: 0 em(-30);
|
|
208 padding: 0 em(30);
|
|
209 border-bottom: 1px solid $theme-border-color;
|
|
210 position: relative;
|
|
211 background: white;
|
|
212
|
|
213 .page-title-left {
|
|
214 flex: 1;
|
|
215 }
|
|
216
|
|
217 .page-title-right {
|
|
218 .btn {
|
|
219 color: #fff;
|
|
220 }
|
|
221 }
|
|
222
|
|
223 .header-light &,
|
|
224 .sidebar-horizontal & {
|
|
225 background: transparent;
|
|
226 }
|
|
227
|
|
228 .page-title-description,
|
|
229 .page-title-heading {
|
|
230 display: inline-block;
|
|
231 letter-spacing: -0.08em;
|
|
232 font-family: $headings-font-family;
|
|
233 }
|
|
234
|
|
235 .page-title-description {
|
|
236 font-size: $font-size-base;
|
|
237 font-weight: 400;
|
|
238 }
|
|
239
|
|
240 ol {
|
|
241 line-height: em(62);
|
|
242 margin: 0;
|
|
243 padding: 0;
|
|
244 background: transparent;
|
|
245 display: inline-block;
|
|
246 }
|
|
247 }
|
|
248
|
|
249 /* Breadcrumbs */
|
|
250 .breadcrumb {
|
|
251 font-weight: 300;
|
|
252 letter-spacing: -.06em;
|
|
253
|
|
254 a {
|
|
255 color: $nav-sub-link-color;
|
|
256 &:hover { color: #000; }
|
|
257 }
|
|
258
|
|
259 > .active {
|
|
260 color: $color-scheme;
|
|
261 }
|
|
262
|
|
263 body.rtl & {
|
|
264 direction: ltr;
|
|
265 text-align: right;
|
|
266 }
|
|
267 }
|
|
268
|
|
269
|
|
270
|
|
271 /* Widget Boxes
|
|
272 ========================*/
|
|
273 .widget-list {
|
|
274 // margin-top: $widget-list-margin-top;
|
|
275 // margin-bottom: $widget-list-margin-bottom;
|
|
276
|
|
277 .page-title + & {
|
|
278 margin-top: $wrapper-top-padding;
|
|
279 }
|
|
280
|
|
281 &.widget-list-full-width {
|
|
282 @include margin(null #{-$wrapper-pd-x});
|
|
283 }
|
|
284 }
|
|
285
|
|
286 .widget-holder {
|
|
287 margin-bottom: $grid-gutter-width;
|
|
288 &.widget-full-content {
|
|
289 .widget-body {
|
|
290 padding: 0;
|
|
291 }
|
|
292 }
|
|
293 &.widget-no-padding {
|
|
294 .widget-body {
|
|
295 padding: 0;
|
|
296 }
|
|
297 }
|
|
298 &.widget-full-height {
|
|
299 display: flex;
|
|
300 .widget-bg-transparent,
|
|
301 .widget-bg {
|
|
302 flex: 1;
|
|
303 width: 100%;
|
|
304 }
|
|
305 }
|
|
306 &.widget-flex {
|
|
307 display: flex;
|
|
308 .widget-bg-transparent,
|
|
309 .widget-bg {
|
|
310 display: flex;
|
|
311 flex-flow: column;
|
|
312 }
|
|
313 .widget-body {
|
|
314 display: flex;
|
|
315 flex-flow: column;
|
|
316 flex: 1;
|
|
317 }
|
|
318 }
|
|
319 &.widget-sm {
|
|
320 .widget-heading {
|
|
321 padding: em(13) em(20) em(13) em(20);
|
|
322 border-bottom: 1px solid $theme-border-color;
|
|
323 color: $text-muted;
|
|
324 }
|
|
325 }
|
|
326 &.widget-border-radius {
|
|
327 &, .widget-heading {
|
|
328 border-top-left-radius: 3px;
|
|
329 border-top-right-radius: 3px;
|
|
330 }
|
|
331 }
|
|
332 }
|
|
333 .widget-bg {
|
|
334 background: $widget-bg;
|
|
335 width: 100%;
|
|
336 .widget-heading + & {
|
|
337 border-top: 0;
|
|
338 }
|
|
339 }
|
|
340
|
|
341 .widget-body {
|
|
342 padding: $widget-padding-y $widget-padding-x;
|
|
343 > .full-row {
|
|
344 margin-left: em(-$widget-padding-x);
|
|
345 margin-right: em(-$widget-padding-x);
|
|
346 }
|
|
347 }
|
|
348
|
|
349 .box-title,
|
|
350 .widget-heading h5,
|
|
351 .widget-heading .widget-title {
|
|
352 font-family: $headings-font-family;
|
|
353 line-height: em(30,15);
|
|
354 margin: 0;
|
|
355 letter-spacing: -.05em;
|
|
356 font-weight: 500;
|
|
357 line-height: 1.5;
|
|
358 flex: 1;
|
|
359
|
|
360 small {
|
|
361 font-weight: 400;
|
|
362 text-transform: none;
|
|
363 }
|
|
364 }
|
|
365
|
|
366 .box-title {
|
|
367 margin-bottom: rem(20);
|
|
368 }
|
|
369
|
|
370 .widget-heading {
|
|
371 display: flex;
|
|
372 align-items: center;
|
|
373 position: relative;
|
|
374
|
|
375 h5 {
|
|
376 float: left;
|
|
377 margin: 0;
|
|
378 }
|
|
379
|
|
380 .widget-bg & {
|
|
381 padding: #{$widget-padding-y} #{$widget-padding-x} 0;
|
|
382 }
|
|
383
|
|
384 .widget-bg &[class*='bg-'] {
|
|
385 .widget-title {
|
|
386 color: #fff;
|
|
387 }
|
|
388 }
|
|
389
|
|
390 &.widget-heading-border {
|
|
391 min-height: rem(75);
|
|
392 display: flex;
|
|
393 align-items: flex-end;
|
|
394 @include margin(null $widget-padding-y);
|
|
395 @include padding(0 0 em(15));
|
|
396 border-bottom: 1px solid $theme-border-color;
|
|
397 }
|
|
398
|
|
399 [class*=bg-] &.widget-heading-border {
|
|
400 border-color: rgba(255,255,255,.2);
|
|
401 }
|
|
402 }
|
|
403
|
|
404 .widget-graph-info {
|
|
405 float: right;
|
|
406
|
|
407 .arrow-icon {
|
|
408 position: relative;
|
|
409 &:after {
|
|
410 font-family: 'feather';
|
|
411 content: '\e931';
|
|
412 @include position(absolute, 50% 50% null null);
|
|
413 transform: translateY(-50%) translateX(50%);
|
|
414 font-size: 1.3em;
|
|
415 color: inherit;
|
|
416 }
|
|
417 }
|
|
418 }
|
|
419
|
|
420 .widget-heading-icon {
|
|
421 float: right;
|
|
422 font-size: rem(18);
|
|
423 color: $gray-200;
|
|
424
|
|
425 .widget-bg .widget-heading[class*='bg-'] & {
|
|
426 color: #fff;
|
|
427 background: rgba(255,255,255,0.1);
|
|
428 @include position(absolute, 0 0 0 null);
|
|
429 display: flex;
|
|
430 justify-content: center;
|
|
431 align-items: center;
|
|
432 @include padding(null rem(15));
|
|
433
|
|
434 body.rtl & {
|
|
435 right: auto;
|
|
436 left: 0;
|
|
437 }
|
|
438 }
|
|
439 }
|
|
440
|
|
441 .widget-actions {
|
|
442 margin: em(5) 0 0;
|
|
443 float: right;
|
|
444
|
|
445 > li { display: inline-block; }
|
|
446 > li > a {
|
|
447 color: #333;
|
|
448 .list-icon {
|
|
449 position: relative;
|
|
450 top: rem(-2);
|
|
451 }
|
|
452 }
|
|
453
|
|
454 .list-icon {
|
|
455 vertical-align: middle;
|
|
456 font-size: em(18,13);
|
|
457 }
|
|
458
|
|
459 .dropdown-menu {
|
|
460 left: auto;
|
|
461 right: 0;
|
|
462 padding-top: em(10);
|
|
463 }
|
|
464
|
|
465 @include tablet {
|
|
466 float: left;
|
|
467 }
|
|
468 }
|
|
469
|
|
470
|
|
471
|
|
472 /* Full Width BG Pages
|
|
473 ========================*/
|
|
474 .body-bg-full {
|
|
475 background-position: center;
|
|
476 background-repeat: no-repeat;
|
|
477 background-attachment: fixed;
|
|
478 background-size: cover;
|
|
479 height: 100%;
|
|
480 overflow: hidden;
|
|
481
|
|
482 .wrapper,
|
|
483 #app {
|
|
484 margin: 0;
|
|
485 display: table;
|
|
486 width: 100%;
|
|
487 height: 100%;
|
|
488 overflow: hidden;
|
|
489 }
|
|
490
|
|
491 .content-wrapper {
|
|
492 padding: em(24);
|
|
493 display: table-cell;
|
|
494 text-align: center;
|
|
495 vertical-align: middle;
|
|
496 min-height: auto;
|
|
497 width: 25rem;
|
|
498 }
|
|
499
|
|
500 .main-wrapper {
|
|
501 background: transparent;
|
|
502 max-width: 30rem;
|
|
503 margin: 0 auto;
|
|
504 }
|
|
505 }
|
|
506
|
|
507 .error-page,
|
|
508 .profile-page {
|
|
509 .page-title {
|
|
510 height: auto;
|
|
511 margin: 0;
|
|
512 padding: 0;
|
|
513 background: transparent;
|
|
514 border: 0;
|
|
515 }
|
|
516 }
|
|
517
|
|
518 .profile-page {
|
|
519 overflow: visible;
|
|
520
|
|
521 h2 {
|
|
522 letter-spacing: -3px;
|
|
523 }
|
|
524
|
|
525 .navbar-header {
|
|
526 float: none;
|
|
527 width: auto;
|
|
528 }
|
|
529
|
|
530 .login-links {
|
|
531 margin-top: em(40,16);
|
|
532 font-size: em(16);
|
|
533 font-weight: 300;
|
|
534 opacity: .8;
|
|
535 }
|
|
536 }
|
|
537
|
|
538 .error-page {
|
|
539
|
|
540 h1 {
|
|
541 font-size: rem(120);
|
|
542 font-weight: 600;
|
|
543 text-shadow: 4px 4px 0 $color-scheme-dark, 6px 6px 0 #fff;
|
|
544 margin: 0 0 em(24,120);
|
|
545 letter-spacing: em(-7,120);
|
|
546 }
|
|
547
|
|
548 h3 {
|
|
549 letter-spacing: em(-1,24);
|
|
550 }
|
|
551 }
|
|
552
|
|
553
|
|
554
|
|
555 /* Search Results Page
|
|
556 ========================*/
|
|
557 .search-listing {
|
|
558 > li {
|
|
559 border-bottom: 1px solid #eee;
|
|
560 padding: em(10) 0;
|
|
561 }
|
|
562
|
|
563 img {
|
|
564 width: em(150);
|
|
565 }
|
|
566
|
|
567 h5 {
|
|
568 font-weight: 300;
|
|
569 margin-bottom: em(5,18);
|
|
570 // margin-top: em(20,18);
|
|
571
|
|
572 a { color: $info; }
|
|
573 a:hover { text-decoration: underline; }
|
|
574 }
|
|
575
|
|
576 .media-body {
|
|
577 h5 { margin-top: em(5,18); }
|
|
578 }
|
|
579
|
|
580 p {
|
|
581 margin-top: em(5);
|
|
582 }
|
|
583 }
|
|
584
|
|
585
|
|
586
|
|
587
|
|
588
|
|
589
|
|
590 /* Notifications / Alerts
|
|
591 ========================*/
|
|
592 .alert {
|
|
593 position: relative;
|
|
594 .close {
|
|
595 color: inherit;
|
|
596 opacity: .7;
|
|
597
|
|
598 &:focus,
|
|
599 &:hover {
|
|
600 color: #000;
|
|
601 opacity: .9;
|
|
602 }
|
|
603 }
|
|
604 }
|
|
605
|
|
606 .alert-icon {
|
|
607 padding-left: em(50);
|
|
608
|
|
609 i {
|
|
610 position: absolute;
|
|
611 left: 5px;
|
|
612 height: em(50,24);
|
|
613 width: em(50,24);
|
|
614 text-align: center;
|
|
615 top: 5px;
|
|
616 line-height: em(50,24);
|
|
617 }
|
|
618 }
|
|
619
|
|
620 /* Sweet Alerts */
|
|
621 .swal2-modal {
|
|
622 padding: em(40) !important;
|
|
623
|
|
624 .swal2-title {
|
|
625 font-family: $tertiary-font-family;
|
|
626 font-weight: 400;
|
|
627 }
|
|
628
|
|
629 .swal2-content {
|
|
630 font-size: em(16);
|
|
631 color: #8d9ea7;
|
|
632 }
|
|
633
|
|
634 .btn {
|
|
635 min-width: em(150,18);
|
|
636 border-radius: 3px;
|
|
637 margin: em(10,18) em(5,18) 0;
|
|
638 border: none!important;
|
|
639 padding: em(5,18) em(20,18);
|
|
640 font-size: em(18);
|
|
641 display: inline;
|
|
642 }
|
|
643 }
|
|
644
|
|
645 /* Toastr */
|
|
646 body {
|
|
647 .jq-toast-single {
|
|
648 border-radius: 0;
|
|
649 background-color: #313a46;
|
|
650 font-family: $font-family-base;
|
|
651 font-size: em(13);
|
|
652 line-height: em(22,13);
|
|
653
|
|
654 h2 {
|
|
655 font-family: $headings-font-family;
|
|
656 font-size: em(14,13);
|
|
657 font-weight: 700;
|
|
658 }
|
|
659 }
|
|
660
|
|
661 .jq-toast-heading {
|
|
662 font-family: $headings-font-family;
|
|
663 }
|
|
664
|
|
665 .jq-icon-info {
|
|
666 background-color: $info;
|
|
667 color: #fff;
|
|
668 }
|
|
669 .jq-icon-success {
|
|
670 background-color: $success;
|
|
671 color: #fff;
|
|
672 }
|
|
673 .jq-icon-error {
|
|
674 background-color: $danger;
|
|
675 color: #fff;
|
|
676 }
|
|
677 .jq-icon-warning {
|
|
678 background-color: $warning;
|
|
679 color: #fff;
|
|
680 }
|
|
681
|
|
682 .close-jq-toast-single {
|
|
683 background: #313a46;
|
|
684 color: #fff;
|
|
685 border-radius: 50%;
|
|
686 height: em(32,20);
|
|
687 width: em(32,20);
|
|
688 line-height: em(32,20);
|
|
689 text-align: center;
|
|
690 top: em(-12,20);
|
|
691 right: em(-12,20);
|
|
692 font-size: em(20,13);
|
|
693
|
|
694 &:hover { background: #666; }
|
|
695 }
|
|
696 }
|
|
697
|
|
698
|
|
699
|
|
700 /* Progress Bars
|
|
701 ========================*/
|
|
702 .progress {
|
|
703 -webkit-box-shadow: none !important;
|
|
704 box-shadow: none !important;
|
|
705 background-color: rgba(120, 130, 140, 0.13);
|
|
706 height: em(4,12);
|
|
707 border-radius: 0px;
|
|
708 margin-bottom: em(18,12);
|
|
709 overflow: hidden;
|
|
710 }
|
|
711
|
|
712 .progress-bar {
|
|
713 box-shadow: none;
|
|
714 font-size: em(8,12);
|
|
715 font-weight: 600;
|
|
716 line-height: em(12,8);
|
|
717 }
|
|
718
|
|
719 .progress-vertical,
|
|
720 .progress-vertical-top {
|
|
721 min-height: em(250,12);
|
|
722 height: em(250,12);
|
|
723 width: em(4,12);
|
|
724 position: relative;
|
|
725 display: inline-block;
|
|
726 margin-bottom: 0;
|
|
727 margin-right: em(20,12);
|
|
728
|
|
729 .progress-bar {
|
|
730 width: 100%;
|
|
731 position: absolute;
|
|
732 bottom: 0;
|
|
733 }
|
|
734
|
|
735 &.progress-sm {
|
|
736 margin: 0;
|
|
737 margin-right: rem(20);
|
|
738 width: rem(8)
|
|
739 }
|
|
740
|
|
741 &.progress-md {
|
|
742 width: rem(15);
|
|
743 }
|
|
744
|
|
745 &.progress-lg {
|
|
746 width: rem(20);
|
|
747 }
|
|
748 }
|
|
749
|
|
750 .progress-vertical-top {
|
|
751 .progress-bar {
|
|
752 bottom: auto;
|
|
753 }
|
|
754 }
|
|
755
|
|
756 .progress-sm {
|
|
757 height: rem(8) !important;
|
|
758
|
|
759 .progress-bar {
|
|
760 font-size: rem(8);
|
|
761 line-height: rem(8);
|
|
762 }
|
|
763 }
|
|
764
|
|
765 .progress-md {
|
|
766 height: rem(15) !important;
|
|
767
|
|
768 .progress-bar {
|
|
769 font-size: rem(11);
|
|
770 line-height: rem(15);
|
|
771 }
|
|
772 }
|
|
773
|
|
774 .progress-lg {
|
|
775 height: rem(20) !important;
|
|
776
|
|
777 .progress-bar {
|
|
778 font-size: rem(12);
|
|
779 line-height: rem(20);
|
|
780 }
|
|
781 }
|
|
782
|
|
783
|
|
784 /* Other Plugin Overrides
|
|
785 ========================*/
|
|
786 .main-wrapper .dropify-wrapper {
|
|
787 &, .dropify-preview {
|
|
788 padding-top: 0;
|
|
789 padding-bottom: 0;
|
|
790 }
|
|
791 }
|
|
792
|
|
793 /* Profile Pages
|
|
794 ========================*/
|
|
795 .container-min-full-height {
|
|
796 min-height: 100vh;
|
|
797 }
|
|
798
|
|
799 .container-max-full-height {
|
|
800 max-height: 100vh;
|
|
801 }
|
|
802
|
|
803 .login-center {
|
|
804 background: #fff;
|
|
805 min-width: rem(500);
|
|
806 padding: em(30) em(50);
|
|
807 border-radius: 5px;
|
|
808 margin: em(40) 0;
|
|
809 @include mobile { width: 80vw }
|
|
810 }
|
|
811
|
|
812 .login-right,
|
|
813 .login-left {
|
|
814 display: flex;
|
|
815 flex-direction: column;
|
|
816 align-items: center;
|
|
817 justify-content: center;
|
|
818 }
|
|
819
|
|
820 .login-left {
|
|
821 background: #fff;
|
|
822
|
|
823 .form-group {
|
|
824 margin-bottom: 2rem;
|
|
825 }
|
|
826
|
|
827 input[type="text"],
|
|
828 input[type="email"],
|
|
829 input[type="password"] {
|
|
830 text-align: center;
|
|
831 font-size: em(18,15);
|
|
832 border: 0;
|
|
833 letter-spacing: -1px;
|
|
834 font-family: $headings-font-family;
|
|
835 font-weight: 500;
|
|
836 color: $headings-color;
|
|
837 padding: 0 0 .9em;
|
|
838
|
|
839 background-color: rgba(0, 0, 0, 0);
|
|
840 background-position: center bottom, center calc(99%);
|
|
841 background-repeat: no-repeat;
|
|
842 background-size: 0 2px, 100% 3px;
|
|
843 transition: background 0s ease-out 0s;
|
|
844 background-image: linear-gradient($color-scheme, $color-scheme), linear-gradient($theme-border-color, $theme-border-color);
|
|
845
|
|
846 &:focus {
|
|
847 background-size: 100% 2px, 100% 3px;
|
|
848 outline: 0 none;
|
|
849 transition-duration: 0.3s;
|
|
850 }
|
|
851 }
|
|
852
|
|
853 label {
|
|
854 letter-spacing: 1px;
|
|
855 }
|
|
856 }
|
|
857
|
|
858 .login-right {
|
|
859 background-position: right;
|
|
860 background-repeat: no-repeat;
|
|
861 background-attachment: fixed;
|
|
862 background-size: cover;
|
|
863 position: relative;
|
|
864
|
|
865 font-size: em(18,15);
|
|
866 line-height: em(28,15);
|
|
867
|
|
868 .list-inline-item:not(:last-child) {
|
|
869 margin-right: 10px;
|
|
870 }
|
|
871 }
|