Mercurial > nebulaweb3

comparison default/assets/scss/components/_widgets.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 Widgets
5 *********************************
6 *********************************/
7
8 /* Widgets
9 ========================*/
10 .widget-holder,
11 .widget-latest-comments,
12 .widget-todo,
13 .widget-latest-transactions,
14 .widget-user-activities {
15 figure {
16 margin-bottom: 0;
17 }
18 .single {
19 padding: em(15) 0;
20 border-bottom: 1px solid $theme-border-color;
21 &:first-of-type { padding-top: 0 }
22 &:last-of-type {
23 border-bottom: 0;
24 padding-bottom: 0;
25 }
26 }
27 .single-header {
28 margin-bottom: 10px;
29 }
30 .single-amount,
31 .single-user-details {
32 margin-left: 1.5em;
33 }
34 .single-event-icon,
35 .single-user-avatar {
36 margin-right: 1.5em;
37 }
38 .single-user-details {
39 font-size: em(14);
40 small { line-height: 1 }
41 }
42 .single-user-name {
43 line-height: 1.3;
44 font-weight: 600;
45 color: $headings-color;
46 display: block;
47 }
48 .single-user-name {
49 font-family: $headings-font-family;
50 }
51
52 body.rtl & {
53 .single-user-avatar {
54 margin-left: 1.5em;
55 margin-right: 0;
56 }
57 }
58 }
59
60 /* Latest Transactions
61 ========================*/
62 .widget-latest-transactions {
63 width: 100%;
64 tr {
65 border-bottom: 1px solid $theme-border-color;
66 }
67 td {
68 padding: em(15) 0;
69 }
70 tr:first-child td { padding-top: 0 }
71 tr:last-child td { padding-bottom: 0; }
72 tr:last-child { border-bottom: 0; }
73 figure {
74 margin-bottom: 0;
75 }
76 .single-amount,
77 .single-user-details {
78 flex: 1;
79 margin-left: 1.5em;
80 }
81 .single-user-details {
82 font-size: em(14);
83 small { line-height: 1 }
84 }
85 .single-status,
86 .single-amount {
87 font-size: em(13);
88 }
89 .single-amount {
90 color: $headings-color;
91 margin-bottom: 0;
92 font-weight: 500;
93 }
94 .single-status {
95 vertical-align: middle;
96 letter-spacing: -0.05em;
97 i { margin-right: 0.4em; }
98 }
99 .single-status, .single-user-name, .single-amount {
100 font-family: $headings-font-family;
101 }
102 }
103
104 /* User Activities
105 ========================*/
106 .widget-user-activities {
107 width: 100%;
108 .single {
109 flex-wrap: wrap;
110 padding: em(25) 0;
111 }
112 .single-body {
113 flex-basis: 100%;
114 padding-left: calc(50px + 1.5em);
115 p { font-size: em(13) }
116 }
117 .single-likes {
118 i {
119 margin-right: 0.5em;
120 color: $text-muted;
121 }
122 }
123 .single-attachment {
124 display: block;
125 background: rgba($info, 0.05);
126 border: 1px solid rgba($info, 0.1);
127 border-radius: 3px;
128 padding: em(10);
129 margin-top: em(10);
130 }
131 .single-attachment-icon {
132 background: $info;
133 display: inline-flex;
134 justify-content: center;
135 align-items: center;
136 @include size(em(40,20));
137 color: #fff;
138 font-size: em(20);
139 border-radius: 3px;
140 float: left;
141 margin-right: em(15,20);
142 }
143 .single-attachment-filesize,
144 .single-attachment-filename {
145 display: block;
146 font-size: em(12);
147 }
148 .single-attachment-filename {
149 font-family: $headings-font-family;
150 font-weight: 600;
151 color: $headings-color;
152 }
153 .single-attachment-filesize {
154 color: $text-muted;
155 }
156 .single-event-icon {
157 background: $color-scheme;
158 color: #fff;
159 border-radius: 100px;
160 font-size: rem(20);
161 @include size(rem(50));
162 display: inline-flex;
163 justify-content: center;
164 align-items: center;
165 }
166
167 .single-users-list {
168 display: flex;
169 flex-flow: row-reverse;
170 align-items: center;
171 justify-content: flex-end;
172 a {
173 @include size(rem(35));
174 margin-left: rem(-10);
175 &:nth-last-child(2) { margin-left: 0 }
176 img {
177 border-radius: 100px;
178 border: 2px solid $widget-bg;
179 }
180
181 &.more {
182 @include size(auto);
183 order: -1;
184 margin-left: 1em;
185 color: $content-color;
186 }
187 }
188 }
189 body.rtl & {
190 .single-event-icon {
191 margin-right: 0;
192 margin-left: 1.5em;
193 }
194 .single-users-list a.more {
195 margin-left: 0;
196 margin-right: 1em;
197 }
198 }
199 }
200
201 /* Chat Activities
202 ========================*/
203 .widget-chat-activity {
204 .message {
205 margin: em(10) 0;
206 &:first-child { margin-top: 0; }
207 &:last-child { margin-bottom: 0; }
208 p {
209 background: $color-scheme;
210 border: 1px solid $color-scheme;
211 border-top-left-radius: 3px;
212 border-bottom-left-radius: 3px;
213 padding: .5em 1em;
214 color: #fff;
215 margin-bottom: .5em;
216 position: relative;
217 &:first-child {
218 &:before,
219 &:after {
220 content: "";
221 @include size(0);
222 display: block;
223 @include position(absolute, rem(20) -7px null auto);
224 border-style: solid;
225 border-width: 6px 0 7px 6px;
226 border-color: transparent transparent transparent $color-scheme;
227 transform: translateY(-50%);
228 }
229 &:before {
230 right: -7px;
231 border-left-color: $color-scheme;
232 }
233 }
234 }
235 .message-body {
236 margin-top: .5em;
237 display: inline-flex;
238 flex-direction: column;
239 align-items: flex-end;
240 margin: auto 1.5em;
241 order: 1;
242 }
243 figure {
244 order: 2;
245 }
246 &.reply {
247 p {
248 background: #fff;
249 border: 1px solid $theme-border-color;
250 border-radius: 0;
251 border-top-right-radius: 3px;
252 border-bottom-right-radius: 3px;
253 color: #666;
254 &:first-child {
255 &:before,
256 &:after {
257 content: "";
258 @include size(0);
259 display: block;
260 @include position(absolute, null auto null -7px);
261 border-style: solid;
262 border-width: 6px 7px 6px 0;
263 border-color: transparent #fff transparent transparent;
264 transform: translateY(-50%);
265 }
266 &:before {
267 left: -9px;
268 border-right-color: $theme-border-color;
269 }
270 }
271 }
272 figure {
273 order: 1;
274 }
275 .message-body {
276 align-items: flex-start;
277 order: 2;
278 }
279 }
280 }
281
282 body.rtl & {
283 .message {
284 p:first-child::before,
285 p:first-child::after {
286 border-width: 6px 7px 6px 0;
287 border-color: transparent $color-scheme transparent transparent;
288 }
289
290 p:first-child:after,
291 p:first-child:before {
292 right: auto;
293 left: -7px;
294 }
295
296 &.reply p:first-child::after,
297 &.reply p:first-child::before {
298 border-width: 6px 0 6px 7px;
299 border-color: transparent transparent transparent $color-scheme;
300 }
301
302 &.reply p:first-child:after,
303 &.reply p:first-child:before {
304 left: auto;
305 right: -7px;
306 }
307
308 &.reply p:first-child:before {
309 border-left-color: $theme-border-color;
310 right: -8px;
311 }
312
313 &.reply p:first-child:after {
314 border-left-color: #fff;
315 }
316 }
317 }
318 }
319
320 /* Latest Comments
321 ========================*/
322 .widget-latest-comments {
323 .single {
324 align-items: flex-start;
325 }
326 .single-body {
327 margin-left: 1.5em;
328 }
329 .single-user-name {
330 display: inline;
331 }
332 .single-timestamp {
333 font-size: em(13);
334 margin-left: 0.4em;
335 }
336 .single:hover .single-footer ul {
337 display: block;
338 }
339 .single-footer {
340 .badge {
341 @include padding(null $spacer(1));
342 font-family: $headings-font-family;
343 }
344 ul {
345 list-style: none;
346 padding-left: 0;
347 margin-bottom: 0;
348 display: none;
349 @include tablet {
350 display: block;
351 }
352 @include mobile {
353 display: block;
354 }
355 li {
356 display: inline-block;
357 font-size: em(18);
358 line-height: 1em;
359 padding-left: em(5,18);
360 padding-right: em(5,18);
361 a {
362 color: $text-muted;
363 &:hover {
364 color: $color-scheme;
365 }
366 }
367 }
368 }
369 }
370 }
371
372
373 /* Latest Posts
374 ========================*/
375 .widget-latest-posts {
376 position: relative;
377 .widget-bg {
378 border-radius: 5px;
379 overflow: hidden;
380 }
381 .widget-body {
382 padding: 0;
383 }
384 .box-title {
385 text-transform: uppercase;
386 font-size: rem(12);
387 font-weight: 600;
388 color: $text-muted;
389 letter-spacing: .1em;
390 }
391 article {
392 margin-left: 0;
393 margin-right: 0;
394 display: flex;
395 flex-flow: column;
396 .row { margin: 0; }
397 }
398 figure { margin-bottom: 0; }
399 .post-img { padding: 0 }
400 .post-details {
401 display: flex;
402 flex-direction: column;
403 padding: em(30) em(20);
404 figure { @include size(rem(30)) }
405 .post-links {
406 display: flex;
407 align-items: center;
408 ul {
409 margin-left: 1em;
410 padding-left: 0;
411 margin-bottom: 0;
412 list-style: none;
413 }
414 li {
415 display: inline-block;
416 padding: 0 0.5em;
417 font-family: $headings-font-family;
418 font-size: em(11);
419 font-weight: 700;
420 a {
421 i { color: $text-muted }
422 color: $headings-color;
423 &:hover { color: $color-scheme }
424 }
425 }
426 }
427 }
428 .post-title {
429 margin-top: 0;
430 margin-bottom: rem(20);
431 font-weight: 300;
432 a {
433 color: $headings-color;
434 &:hover { color: $color-scheme }
435 }
436 }
437 .carousel.slick-slider.slick-dotted {
438 margin-bottom: 0;
439 }
440 .carousel.slick-slider .slick-dots {
441 @include position(absolute, null null 20px 0);
442 width: 42%;
443 text-align: center;
444
445 li {
446 @include margin(null 3px);
447 }
448 li button::before {
449 background: none;
450 border: 2px solid #fff;
451 opacity: 1;
452 @include size(12px);
453 }
454 .slick-active button::before {
455 transform: none;
456 background: #fff;
457 }
458 }
459 body.rtl & {
460 .post-details {
461 direction: rtl;
462 }
463 }
464 }
465
466 /* User Profile
467 ========================*/
468 .widget-user-profile {
469 .profile-wall-img img {
470 width: 100%;
471 height: auto;
472 }
473 .profile-body {
474 padding: 0 $widget-padding-y;
475 text-align: center;
476 display: flex;
477 flex-direction: column;
478 justify-content: center;
479 align-items: center;
480 }
481 .profile-user-avatar {
482 margin-top: em(-80);
483 a {
484 display: block;
485 }
486 img {
487 border-radius: 100px;
488 border: 2px solid #fff;
489 box-shadow: 0 0 5px 0 rgba(0,0,0,.4);
490 }
491 &:after {
492 content: '';
493 width: 30px;
494 height: 1px;
495 background: $theme-border-color;
496 margin-top: em(20);
497 }
498 }
499 .profile-user-name {
500 font-weight: 300;
501 margin-top: rem(24);
502 margin-bottom: rem(5);
503 }
504 .profile-seperator {
505 width: 30px;
506 border-top-color: $theme-border-color;
507 margin-top: rem(20);
508 }
509 .profile-user-address {
510 font-size: em(12);
511 font-family: $headings-font-family;
512 font-weight: 600;
513 }
514 }
515
516 /* Counter Widget
517 ========================*/
518 .widget-todo {
519 .single {
520 padding: em(20) 0;
521 }
522 .single-icon {
523 margin-right: em(15);
524 margin-top: em(3);
525 font-size: em(20);
526 }
527 .single-title {
528 margin: em(6) 0;
529 font-size: rem(14);
530 letter-spacing: 0;
531 font-weight: 600;
532 }
533 .dropdown-item {
534 display: flex;
535 align-items: center;
536 .list-icon {
537 margin-right: em(6);
538 font-size: 1em;
539 }
540 }
541 .single-tags {
542 font-family: $headings-font-family;
543 li {
544 display: inline-block;
545 margin-right: em(5);
546 font-weight: 600;
547 font-size: 0.9em;
548 a:before {
549 content: '\0023';
550 }
551 }
552 }
553 .single.done {
554 .media-body {
555 opacity: 0.4;
556 }
557 }
558 .dropdown > .dropdown-toggle {
559 color: $content-color;
560 }
561 .add-btn {
562 @include position(absolute, null 50% 0 null);
563 transform: translateY(50%) translateX(50%);
564 }
565
566 body.rtl & {
567 .dropdown-item .list-icon {
568 margin-right: 0;
569 margin-left: em(6);
570 }
571 }
572 }
573
574
575 /* Counter Widget
576 ========================*/
577 .widget-counter {
578 padding-left: em(10);
579
580 h6 {
581 text-transform: uppercase;
582 font-weight: bold;
583 margin-top: em(10);
584 padding-right: em(30);
585 }
586
587 small {
588 font-weight: 700;
589 letter-spacing: .05em;
590 display: block;
591 opacity: .5;
592 margin-top: em(5, 10.5);
593 text-transform: none;
594 }
595
596 i {
597 position: absolute;
598 top: em(30,19);
599 right: em(40,19);
600 font-size: em(19,14);
601
602 &::before,
603 &::after {
604 content: "";
605 background: #e5e5e5;
606 position: absolute;
607 left: em(-7,19);
608 }
609
610 .text-inverse &::before,
611 .text-inverse &::after {
612 background: #fff;
613 background: rgba(255,255,255,.3);
614 }
615
616 &::before {
617 top: em(6,19);
618 height: em(20,19);
619 width: em(1,19);
620 }
621
622 &::after{
623 bottom: em(-8,19);
624 width: em(20,19);
625 height: em(1,19);
626 }
627 }
628
629 h3 {
630 font-family: $tertiary-font-family;
631 font-weight: 300;
632 font-size: em(40);
633 }
634 }
635
636
637 /* User List
638 =======================*/
639 ul.widget-user-list {
640 padding-top: em(10);
641
642 .d-flex a {
643 display: inline-block;
644 }
645
646 li {
647 padding-bottom: em(10);
648 padding-top: em(15);
649 border-bottom: rem(1) solid lighten($theme-border-color, 7%);
650 &:last-child {
651 border: none;
652 }
653 }
654
655 h5 {
656 font-size: em(15);
657 margin-top: 0;
658 }
659
660 small {
661 display: block;
662 font-size: em(11);
663 }
664
665 .media-body {
666 position: relative;
667
668 .btn {
669 padding: 0 em(28,13);
670 text-transform: uppercase;
671 margin-top: em(3,13);
672 line-height: em(32,13);
673 border-radius: em(4,13);
674 font-size: em(13,14);
675 float: right;
676 }
677
678 .btn-outline-secondary {
679 color: #ccc;
680 &:hover {
681 color: #555;
682 background-color: #e4e7ea;
683 }
684 }
685 }
686
687 body.rtl & {
688 @include padding(em(10) $card-spacer-x null);
689 }
690
691 @media (max-width: 480px) {
692 .media-body .btn {
693 display: none;
694 }
695 }
696
697 .media-heading a {
698 display: inline-block;
699 color: rgba(0,0,0,.7);
700 margin: em(4) 0 em(5);
701 &:hover{
702 color: $color-scheme;
703 }
704 }
705 }
706
707
708 /* Profile Add Content Widget
709 ============================*/
710 .widget-profile-add-tabs {
711 margin-bottom: em(30);
712 .nav-pills .nav-link {
713 padding: .3em 2em;
714 font-weight: 500;
715 font-size: em(12);
716 &.active {
717 background: rgba($color-scheme, .1);
718 color: $color-scheme;
719 }
720 &.attach-file-link {
721 @include padding(null 0);
722 font-size: em(13);
723 }
724 }
725 .tab-content {
726 border: 1px solid $theme-border-color;
727 margin-top: em(20);
728 }
729 textarea {
730 border: 0;
731 box-shadow: 0;
732 width: 100%;
733 min-height: 50px;
734 font-family: $headings-font-family;
735 resize: none;
736 }
737 }
738
739 /* Status Table Widget
740 ============================*/
741 .widget-status-table {
742
743 thead {
744 color: lighten($body-color, 20%);
745 }
746
747 span {
748 text-transform: uppercase;
749 letter-spacing: em(2,10.5);
750 border-radius: em(15,10.5);
751 padding: em(5,10.5) em(15,10.5);
752 }
753
754 i {
755 letter-spacing: em(10,18);
756 &:hover{ color: $body-color !important; }
757 }
758
759 tbody{
760 a { color: rgba(0,0,0,.7); }
761 a:hover { color: $color-scheme; }
762 }
763 }
764
765
766 /* User Activity Feed
767 ====================================*/
768 .widget-activity-header {
769 .nav-pills {
770 .nav-link {
771 border-radius: em(20,12);
772 font-family: $tertiary-font-family;
773 font-size: em(12);
774 font-weight: 600;
775 color: $body-color;
776 }
777 .nav-link.active {
778 color: #fff;
779 background-color: map-get($theme-colors, info);
780 }
781 }
782 form {
783 position: relative;
784 .form-control {
785 border: 2px solid #f2f3f5;
786 border-radius: em(15);
787 padding: em(15) em(130) em(15) em(20);
788 box-shadow: none;
789 &:focus {
790 border-color: #f2f3f5;
791 box-shadow: none;
792 }
793 @include placeholder {
794 color: #b9bec3;
795 font-family: $tertiary-font-family;
796 }
797 }
798 div {
799 position: absolute;
800 bottom: em(20);
801 right: em(20);
802 i { color: #c9d2da; }
803 button {
804 border-radius: em(12);
805 font-family: $tertiary-font-family;
806 letter-spacing: em(1);
807 background-color: #c9d2da;
808 }
809 }
810 }
811 }
812
813 .widget-activitys {
814 padding-top: em(10);
815
816 li {
817 position: relative;
818 margin-top: 0;
819 padding: em(10) 0;
820
821 &::before {
822 content: "";
823 background: #e5e5e5;
824 position: absolute;
825 top: 0;
826 left: em(21);
827 width: rem(1);
828 height: 100%;
829 }
830
831 &:first-child { padding-top: 0; }
832 &:last-child {
833 &, .media-body { padding-bottom: 0; }
834 }
835 }
836
837 .media-body {
838 padding: em(12) 0;
839 font-family: $tertiary-font-family;
840 }
841
842 .media-heading {
843 line-height: em(21);
844 margin-top: 0;
845 strong a {
846 color: $headings-color;
847 &:hover { text-decoration: underline; }
848 }
849 }
850
851 .media-body-content {
852 padding-top: em(15);
853 }
854
855 .widget-body-image-list {
856 figcaption{
857 text-align: center;
858 padding-top: em(8);
859 font-family: $headings-font-family;
860 small{
861 display: block;
862 font-size: 70%;
863 }
864 }
865 }
866 }
867
868
869 /* Widget Social Twitter
870 ====================================*/
871 .facebook-widget,
872 .twitter-widget {
873 overflow: hidden;
874 position: relative;
875 padding: em(30) em(20);
876 display: flex;
877 min-height: rem(220);
878 .status {
879 font-size: em(15);
880 margin-top: 2em;
881 }
882 .status-container {
883 width: 100%;
884 display: flex;
885 flex-direction: column;
886 }
887 h5, h6 {
888 color: #fff;
889 }
890 .after {
891 font-family: 'feather';
892 font-size: em(300);
893 line-height: rem(100);
894 opacity: 0.3;
895 color: #fff;
896 @include position( absolute, null 0 0 null);
897 pointer-events: none;
898 }
899 .user-info {
900 width: 100%;
901 display: flex;
902 align-items: center;
903 }
904 .widget-icon {
905 font-size: em(24);
906 }
907 figure {
908 margin-bottom: 0;
909 }
910 .user-name-group { flex: 1 }
911 .user-profile-picture {
912 @include size( em(30) );
913 border-radius: em(100);
914 float: left;
915 margin-right: em(10);
916 }
917 .user-name {
918 margin-top: em(5);
919 margin-bottom: em(5);
920 text-transform: uppercase;
921 font-weight: 600;
922 font-size: em(12);
923 letter-spacing: .05em;
924 }
925 .user-screen-name {
926 margin: 0;
927 opacity: 0.7;
928 font-weight: normal;
929 font-size: em(11);
930 letter-spacing: 0;
931 }
932 p {
933 margin-bottom: 0;
934 font-family: $headings-font-family;
935 }
936 body.rtl & {
937 .user-profile-picture {
938 margin-right: 0;
939 margin-left: em(10);
940 }
941 }
942 }
943
944
945 /* Chart Specific Styles
946 ====================================*/
947 .progress-stats-round {
948 position: relative;
949
950 .list-icon {
951 font-size: em(30);
952 font-weight: 600;
953 position: absolute;
954 top: em(30,30);
955 left: 50%;
956 transform: translateX(-50%);
957 }
958 }
959
960 .widget-social {
961 a{
962 margin-top: em(-20);
963 margin-bottom: em(-20);
964 padding-top: em(30);
965 padding-bottom: em(15);
966 &:hover {
967 text-decoration: none;
968 }
969 i {
970 font-size: em(40);
971 }
972 }
973 }
974
975 .widget-social-ft {
976 margin-top: em(-20);
977 margin-bottom: em(-20);
978 header {
979 padding: em(20) 0;
980 i {
981 font-size: em(40);
982 }
983 }
984 div {
985 div {
986 &:last-child {
987 border-left: rem(1) solid $theme-border-color;
988 }
989 }
990 }
991 }
992
993 .doughnut-widget {
994 position: relative;
995 section {
996 position: absolute;
997 top: 50%;
998 left: 50%;
999 transform: translate(-50%, -50%);
1000 small {
1001 display: inline-block;
1002 }
1003 }
1004 }
1005
1006 .doughnut-widget-details {
1007 ul {
1008 width: em(100);
1009 line-height: em(30);
1010 margin-left: 50%;
1011 transform: translateX(-50%);
1012 }
1013 }
1014
1015 .statistic-squares {
1016 [class*="col-"] {
1017 border-top: rem(1) solid #eee;
1018 border-left: rem(1) solid #eee;
1019 padding-top: em(30);
1020 padding-bottom: em(30);
1021
1022 &:first-child {
1023 border-left: 0;
1024 }
1025 }
1026
1027 > .row:first-child [class*="col-"] {
1028 border-top: 0;
1029 }
1030 }
1031
1032 .knob-widget {
1033 section {
1034 position: relative;
1035 i {
1036 font-size: em(60);
1037 color: rgba(0,0,0,.1);
1038 position: absolute;
1039 left: 50%;
1040 top: 50%;
1041 transform: translate(-50%, -50%);
1042 }
1043 }
1044
1045 ul {
1046 li{
1047 padding-left: em(20);
1048 padding-right: em(20);
1049 &:last-child{
1050 border-left: rem(1) solid $theme-border-color;
1051 }
1052 }
1053 }
1054 }
1055
1056 .card-user-info-widget {
1057 .caption-btn {
1058 > a {
1059 margin-bottom: em(10,15);
1060 letter-spacing: em(2,15);
1061 }
1062 }
1063 .followers-details-list {
1064 li {
1065 border: rem(1) solid $theme-border-color;
1066 padding: 0 em(40);
1067 &:first-child {
1068 border-left: 0;
1069 }
1070 &:last-child {
1071 border-left: 0;
1072 border-right: 0;
1073 }
1074 }
1075 }
1076
1077 .email-details-list {
1078 li {
1079 padding: 0px em(30);
1080 line-height: em(30);
1081 }
1082 }
1083 }
1084
1085
1086 /********************************
1087 *********************************
1088 Light Box Gallery
1089 *********************************
1090 *********************************/
1091 .lightbox-gallery {
1092 .lightbox {
1093 img {
1094 width: 100%;
1095 height: auto;
1096 }
1097 a {
1098 overflow: hidden;
1099 display: block;
1100 position: relative;
1101
1102 img {
1103 transition: all 250ms;
1104 }
1105
1106 &:hover {
1107 img { transform: scale(1.1); }
1108 }
1109 }
1110 }
1111 }
1112
1113 .promo-code-widget {
1114 header {
1115 h5 {
1116 background-color: #adc1c8;
1117 width: em(40);
1118 height: em(40);
1119 line-height: em(40);
1120 color: #ffffff;
1121 }
1122 }
1123
1124 section {
1125 > a {
1126 display: inline-block;
1127 border: 1px dashed $theme-border-color;
1128 }
1129 > input {
1130 max-width: 100%;
1131 }
1132 }
1133 }
1134
1135
1136 .social-icon-widget {
1137 div:first-child {
1138 position: relative;
1139 &::after {
1140 content: "";
1141 position: absolute;
1142 width: em(1);
1143 height: em(50);
1144 background-color: #dfe3e9;
1145 right: 0;
1146 top: 50%;
1147 transform: translateY(-50%);
1148 }
1149 }
1150 }
1151
1152
1153 .latest-widget {
1154 header {
1155 border-bottom: 1px solid #efefef;
1156 }
1157 section {
1158 .col-md-3 {
1159 border-right: 1px solid #efefef;
1160 &:last-child {
1161 border-right: 0;
1162 }
1163 h5 {
1164 line-height: em(22);
1165 }
1166 }
1167 }
1168 footer {
1169 .btn {
1170 background-color: #333333;
1171 color: #fff;
1172 outline: none;
1173 }
1174 .btn-default:active {
1175 background-color: #333333;
1176 color: #fff;
1177 }
1178 }
1179 }
1180
1181 .card-bench-widget {
1182 figure {
1183 position: relative;
1184 header {
1185 position: absolute;
1186 top: em(20);
1187 right: em(20);
1188 .btn {
1189 font-weight: 700;
1190 letter-spacing: em(1);
1191 color: #fff;
1192 border-color: #fff;
1193 &:hover {
1194 background-color: #fff;
1195 color: #000;
1196 }
1197 }
1198 }
1199
1200 section {
1201 position: absolute;
1202 bottom: em(40);
1203 right: em(20);
1204 }
1205
1206 ul {
1207 position: absolute;
1208 bottom: em(0);
1209 right: em(20);
1210 }
1211 }
1212 }
1213
1214 .city-card-widget {
1215 figure {
1216 position: relative;
1217 .city-card-status,
1218 .city-card-details {
1219 position: absolute;
1220 left: em(20);
1221 }
1222
1223 .city-card-status {
1224 top: em(20);
1225 }
1226
1227 .city-card-details {
1228 bottom: 0;
1229 }
1230
1231 .city-card-button {
1232 position: absolute;
1233 right: em(20);
1234 bottom: em(20);
1235 .btn {
1236 color: #fff;
1237 border-color: #fff;
1238 &:hover {
1239 color: #000;
1240 background-color: #fff;
1241 }
1242 }
1243 }
1244 }
1245 }
1246
1247
1248 .ecommerce-products-card {
1249 figure {
1250 position: relative;
1251 figcaption {
1252 position: absolute;
1253 top: em(20);
1254 right: em(20);
1255 }
1256 }
1257
1258 .ecommerce-products-card-details {
1259 padding: em(30) em(40) em(25);
1260 .product-title {
1261 h6 {
1262 color: #bbc7d3;
1263 }
1264 }
1265
1266 .buy-button {
1267 .btn {
1268 border-radius: 0;
1269 color: #ffffff;
1270 background-color: #88bf57;
1271 outline: none;
1272 }
1273 }
1274
1275 .buyer-button {
1276 .btn {
1277 color: #bbc7d3;
1278 border-color: #bbc7d3;
1279 &:hover,
1280 &:focus {
1281 color: #000;
1282 }
1283 }
1284 }
1285
1286 .product-ratings {
1287 li {
1288 a {
1289 i {
1290 color: #f3a855;
1291 }
1292 }
1293 }
1294 }
1295 }
1296 }
1297
1298
1299 /* Simple Thumnail Gallery
1300 ========================*/
1301 .gallery-small {
1302 a {
1303 display: inline-block;
1304 overflow: hidden;
1305 background: #000;
1306 position: relative;
1307 text-align: center;
1308 }
1309
1310 img {
1311 transition: 250ms transform, 250ms opacity;
1312 width: 100%;
1313 height: auto;
1314 }
1315
1316 a:hover > img,
1317 a.active > img {
1318 transform: scale(1.1);
1319 }
1320
1321 a:hover,
1322 .active {
1323 img {
1324 opacity: .7;
1325 }
1326
1327 span {
1328 display: block;
1329 width: 100%;
1330 position: absolute;
1331 color: #fff;
1332 top: 50%;
1333 left: 0;
1334 transform: translateY(-50%);
1335 font-size: em(24,15);
1336 line-height: 1;
1337 font-weight: 700;
1338 letter-spacing: -2px;
1339 font-family: $headings-font-family;
1340 }
1341
1342 small {
1343 display: block;
1344 color: #fff;
1345 font-size: .8rem;
1346 margin-top: 5px;
1347 letter-spacing: 0;
1348 }
1349 }
1350 }
1351
1352
1353 /* Chart Widgets
1354 ============================*/
1355 .chart-widget {
1356
1357 .card {
1358 .card-header {
1359 padding-left: em(30);
1360 background-color: #f9faff;
1361 span {
1362 color: #9ca0a8;
1363 }
1364 }
1365 .card-body { background-color: #f9faff; }
1366 .card-footer {
1367 background: none;
1368 border-color: #edf3f8;
1369 }
1370 }
1371
1372 .pie-chart {
1373 position: relative;
1374 section {
1375 color: #9ca0a8;
1376 position: absolute;
1377 top: 50%;
1378 left: 50%;
1379 transform: translate(-50%, -50%);
1380 }
1381 }
1382 }
1383
1384 .online-course-widget {
1385 .card-header {
1386 background: none;
1387 position: relative;
1388 &::after {
1389 content: "";
1390 position: absolute;
1391 height: em(3);
1392 width: em(40);
1393 bottom: 0;
1394 left: em(20);
1395 background: #e9ecf0;
1396 }
1397 a {
1398 i {
1399 font-size: em(22);
1400 background: #e9ecf0;
1401 padding: em(15,22);
1402 }
1403 &:hover i { background-color: $color-scheme; }
1404 }
1405 span {
1406 color: #6a768c;
1407 font-size: em(13);
1408 font-weight: 600;
1409 padding: em(15,13) em(20,13);
1410 }
1411 }
1412 .card-body {
1413 margin-bottom: em(10);
1414 h5 {
1415 a {
1416 font-weight: 300;
1417 line-height: em(25);
1418 color: #6a768c;
1419 }
1420 }
1421 }
1422 .card-footer {
1423 padding: em(15) em(20);
1424 background-color: #fff;
1425 border-color: $theme-border-color;
1426 }
1427 }
1428
1429 .select-widget {
1430 font-family: $tertiary-font-family;
1431 margin-bottom: em(30);
1432 section {
1433 margin-top: em(30);
1434 a {
1435 div {
1436 margin-left: em(-10);
1437 margin-right: em(-10);
1438 border: 1px solid $theme-border-color;
1439 border-radius: em(5);
1440 padding: 0 em(10) em(40) em(10);
1441 }
1442 }
1443 i {
1444 font-size: em(76);
1445 vertical-align: bottom;
1446 }
1447 }
1448 }
1449
1450 .subscribe-widget {
1451 border: em(2) dashed $theme-border-color;
1452 padding: em(20) em(20) em(40) em(20);
1453 .col-md-2 {
1454 position: relative;
1455 i {
1456 font-size: em(76);
1457 &::before {
1458 position: absolute;
1459 transform: rotate(15deg);
1460 left: 40%;
1461 top: 20%;
1462 }
1463 }
1464 }
1465 .form-control { box-shadow: none; }
1466 }
1467
1468 .tickets-table {
1469 table {
1470 thead {
1471 background: #fbfbfc;
1472 th {
1473 padding: em(20);
1474 border-top: 1px solid $theme-border-color;
1475 border-bottom: 1px solid $theme-border-color;
1476 }
1477 }
1478
1479 tbody {
1480 tr {
1481 margin: em(10) 0;
1482 &:last-child {
1483 td { border: none; }
1484 }
1485 td {
1486 padding: em(10) em(20);
1487 border-bottom: 1px solid $theme-border-color;
1488 i {
1489 font-size: em(18);
1490 &::before {
1491 vertical-align: -webkit-baseline-middle;
1492 }
1493 }
1494 }
1495 }
1496 }
1497 }
1498 }
1499
1500 .schedule-widget {
1501 .col-md-3 {
1502 position: relative;
1503 &::after {
1504 content: "";
1505 position: absolute;
1506 height: em(40);
1507 width: em(1);
1508 right: 0;
1509 top: 50%;
1510 transform: translateY(-50%);
1511 background-color: $theme-border-color;
1512 }
1513 &:last-child {
1514 &::after {
1515 display: none;
1516 }
1517 }
1518 }
1519 a {
1520 i {
1521 position: relative;
1522 background: $theme-border-color;
1523 font-size: em(18);
1524 @include size(em(50), em(50));
1525 &::before {
1526 position: absolute;
1527 left: 50%;
1528 top: 50%;
1529 transform: translate(-50%, -50%);
1530 }
1531 }
1532 }
1533 }
1534
1535 .purpose-widget {
1536 .card {
1537 .card-body {
1538 .col-md-6 {
1539 padding: em(30);
1540 border-right: 1px solid $theme-border-color;
1541 &:last-child { border: none; }
1542 }
1543 border-bottom: 1px solid $theme-border-color;
1544 &:last-child { border: none; }
1545 }
1546
1547 }
1548 }
1549
1550 .status-view-widget {
1551 .col-md-6 {
1552 a {
1553 padding: em(35) em(25);
1554 border: 1px solid #fff;
1555 border-radius: em(5);
1556 background: #f9f9f9;
1557 i {
1558 font-size: em(20);
1559 &::before { vertical-align: -webkit-baseline-middle; }
1560 }
1561 h3 { color: #444; }
1562
1563 &:hover {
1564 background: none;
1565 border-color: map-get($theme-colors, success);
1566 }
1567 }
1568 }
1569 }
1570
1571 .sports-card {
1572 .card {
1573 .card-header {
1574 .list-icon {
1575 width: auto;
1576 height: auto;
1577 line-height: normal;
1578 }
1579 }
1580 .card-body {
1581 > div {
1582 > a {
1583 small {
1584 border-bottom: 1px solid $theme-border-color;
1585 }
1586 }
1587 }
1588 }
1589 }
1590 }
1591
1592 /* Map Widgets
1593 ============================*/
1594 .widget-map {
1595 .gmap {
1596 position: relative;
1597 &:after {
1598 content: '';
1599 display: block;
1600 @include position(absolute,0);
1601 box-shadow: inset 0 0 10px 0 rgba(0,0,0,.2);
1602 pointer-events: none;
1603 }
1604 }
1605 .card {
1606 box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
1607 }
1608 }
1609
1610 /* Project Index
1611 ============================*/
1612 .widget-project-index {
1613 .card {
1614 border: 0;
1615 .card-header {
1616 background: $widget-bg;
1617 border: 0;
1618 a {
1619 padding-right: rem(20);
1620 padding-left: rem(20);
1621 }
1622 a::after {
1623 display: none;
1624 }
1625 }
1626 .card-title {
1627 padding: 0;
1628 }
1629
1630 .count {
1631 @include size(rem(20));
1632 line-height: rem(18);
1633 text-align: center;
1634 border-radius: 100%;
1635 border: 2px solid $theme-border-color;
1636 display: inline-block;
1637 }
1638 }
1639 .list-group {
1640 border: 0;
1641 background: $body-bg;
1642 .list-group-item {
1643 @include padding(0.75em rem(20));
1644 display: flex;
1645 align-items: top;
1646 background: $body-bg;
1647 border: 0;
1648 color: $text-muted;
1649 font-size: em(13);
1650 font-weight: 500;
1651 &.active {
1652 color: $headings-color;
1653 box-shadow: inset 4px 0 0 0 $primary;
1654 }
1655 }
1656 small {
1657 margin-left: 1em;
1658 }
1659
1660 .list-icon {
1661 line-height: em(30);
1662 margin-right: 1em;
1663 color: $text-muted;
1664 }
1665
1666 .done-icon {
1667 display: block;
1668 font-size: rem(12);
1669 @include size(em(20,12));
1670 line-height: em(20,12);
1671 text-align: center;
1672 border-radius: 100%;
1673 margin-top: .2em;
1674 }
1675 }
1676
1677 body.rtl & {
1678 .list-group {
1679 .list-group-item.active {
1680 box-shadow: inset -4px 0 0 0 $primary;
1681 }
1682 .list-icon {
1683 margin-right: 0;
1684 margin-left: 1em;
1685 }
1686 }
1687 }
1688 }