17 |
4 |
5 |
6 |
8 |
9 |
3 |
6 |
7 |
8 |
11 |
12 |
41 |
--------------------------------------------------------------------------------
/src/assets/css/themify-icons.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'themify';
3 | src:url('../fonts/themify.eot');
4 | src:url('../fonts/themify.eot') format('embedded-opentype'),
5 | url('../fonts/themify.woff') format('woff'),
6 | url('../fonts/themify.ttf') format('truetype'),
7 | url('../fonts/themify.svg') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | [class^="ti-"], [class*=" ti-"] {
13 | font-family: 'themify';
14 | speak: none;
15 | font-style: normal;
16 | font-weight: bold;
17 | font-variant: normal;
18 | text-transform: none;
19 | line-height: 1;
20 |
21 | /* Better Font Rendering =========== */
22 | -webkit-font-smoothing: antialiased;
23 | -moz-osx-font-smoothing: grayscale;
24 | }
25 |
26 | .ti-wand:before {
27 | content: "\e600";
28 | }
29 | .ti-volume:before {
30 | content: "\e601";
31 | }
32 | .ti-user:before {
33 | content: "\e602";
34 | }
35 | .ti-unlock:before {
36 | content: "\e603";
37 | }
38 | .ti-unlink:before {
39 | content: "\e604";
40 | }
41 | .ti-trash:before {
42 | content: "\e605";
43 | }
44 | .ti-thought:before {
45 | content: "\e606";
46 | }
47 | .ti-target:before {
48 | content: "\e607";
49 | }
50 | .ti-tag:before {
51 | content: "\e608";
52 | }
53 | .ti-tablet:before {
54 | content: "\e609";
55 | }
56 | .ti-star:before {
57 | content: "\e60a";
58 | }
59 | .ti-spray:before {
60 | content: "\e60b";
61 | }
62 | .ti-signal:before {
63 | content: "\e60c";
64 | }
65 | .ti-shopping-cart:before {
66 | content: "\e60d";
67 | }
68 | .ti-shopping-cart-full:before {
69 | content: "\e60e";
70 | }
71 | .ti-settings:before {
72 | content: "\e60f";
73 | }
74 | .ti-search:before {
75 | content: "\e610";
76 | }
77 | .ti-zoom-in:before {
78 | content: "\e611";
79 | }
80 | .ti-zoom-out:before {
81 | content: "\e612";
82 | }
83 | .ti-cut:before {
84 | content: "\e613";
85 | }
86 | .ti-ruler:before {
87 | content: "\e614";
88 | }
89 | .ti-ruler-pencil:before {
90 | content: "\e615";
91 | }
92 | .ti-ruler-alt:before {
93 | content: "\e616";
94 | }
95 | .ti-bookmark:before {
96 | content: "\e617";
97 | }
98 | .ti-bookmark-alt:before {
99 | content: "\e618";
100 | }
101 | .ti-reload:before {
102 | content: "\e619";
103 | }
104 | .ti-plus:before {
105 | content: "\e61a";
106 | }
107 | .ti-pin:before {
108 | content: "\e61b";
109 | }
110 | .ti-pencil:before {
111 | content: "\e61c";
112 | }
113 | .ti-pencil-alt:before {
114 | content: "\e61d";
115 | }
116 | .ti-paint-roller:before {
117 | content: "\e61e";
118 | }
119 | .ti-paint-bucket:before {
120 | content: "\e61f";
121 | }
122 | .ti-na:before {
123 | content: "\e620";
124 | }
125 | .ti-mobile:before {
126 | content: "\e621";
127 | }
128 | .ti-minus:before {
129 | content: "\e622";
130 | }
131 | .ti-medall:before {
132 | content: "\e623";
133 | }
134 | .ti-medall-alt:before {
135 | content: "\e624";
136 | }
137 | .ti-marker:before {
138 | content: "\e625";
139 | }
140 | .ti-marker-alt:before {
141 | content: "\e626";
142 | }
143 | .ti-arrow-up:before {
144 | content: "\e627";
145 | }
146 | .ti-arrow-right:before {
147 | content: "\e628";
148 | }
149 | .ti-arrow-left:before {
150 | content: "\e629";
151 | }
152 | .ti-arrow-down:before {
153 | content: "\e62a";
154 | }
155 | .ti-lock:before {
156 | content: "\e62b";
157 | }
158 | .ti-location-arrow:before {
159 | content: "\e62c";
160 | }
161 | .ti-link:before {
162 | content: "\e62d";
163 | }
164 | .ti-layout:before {
165 | content: "\e62e";
166 | }
167 | .ti-layers:before {
168 | content: "\e62f";
169 | }
170 | .ti-layers-alt:before {
171 | content: "\e630";
172 | }
173 | .ti-key:before {
174 | content: "\e631";
175 | }
176 | .ti-import:before {
177 | content: "\e632";
178 | }
179 | .ti-image:before {
180 | content: "\e633";
181 | }
182 | .ti-heart:before {
183 | content: "\e634";
184 | }
185 | .ti-heart-broken:before {
186 | content: "\e635";
187 | }
188 | .ti-hand-stop:before {
189 | content: "\e636";
190 | }
191 | .ti-hand-open:before {
192 | content: "\e637";
193 | }
194 | .ti-hand-drag:before {
195 | content: "\e638";
196 | }
197 | .ti-folder:before {
198 | content: "\e639";
199 | }
200 | .ti-flag:before {
201 | content: "\e63a";
202 | }
203 | .ti-flag-alt:before {
204 | content: "\e63b";
205 | }
206 | .ti-flag-alt-2:before {
207 | content: "\e63c";
208 | }
209 | .ti-eye:before {
210 | content: "\e63d";
211 | }
212 | .ti-export:before {
213 | content: "\e63e";
214 | }
215 | .ti-exchange-vertical:before {
216 | content: "\e63f";
217 | }
218 | .ti-desktop:before {
219 | content: "\e640";
220 | }
221 | .ti-cup:before {
222 | content: "\e641";
223 | }
224 | .ti-crown:before {
225 | content: "\e642";
226 | }
227 | .ti-comments:before {
228 | content: "\e643";
229 | }
230 | .ti-comment:before {
231 | content: "\e644";
232 | }
233 | .ti-comment-alt:before {
234 | content: "\e645";
235 | }
236 | .ti-close:before {
237 | content: "\e646";
238 | }
239 | .ti-clip:before {
240 | content: "\e647";
241 | }
242 | .ti-angle-up:before {
243 | content: "\e648";
244 | }
245 | .ti-angle-right:before {
246 | content: "\e649";
247 | }
248 | .ti-angle-left:before {
249 | content: "\e64a";
250 | }
251 | .ti-angle-down:before {
252 | content: "\e64b";
253 | }
254 | .ti-check:before {
255 | content: "\e64c";
256 | }
257 | .ti-check-box:before {
258 | content: "\e64d";
259 | }
260 | .ti-camera:before {
261 | content: "\e64e";
262 | }
263 | .ti-announcement:before {
264 | content: "\e64f";
265 | }
266 | .ti-brush:before {
267 | content: "\e650";
268 | }
269 | .ti-briefcase:before {
270 | content: "\e651";
271 | }
272 | .ti-bolt:before {
273 | content: "\e652";
274 | }
275 | .ti-bolt-alt:before {
276 | content: "\e653";
277 | }
278 | .ti-blackboard:before {
279 | content: "\e654";
280 | }
281 | .ti-bag:before {
282 | content: "\e655";
283 | }
284 | .ti-move:before {
285 | content: "\e656";
286 | }
287 | .ti-arrows-vertical:before {
288 | content: "\e657";
289 | }
290 | .ti-arrows-horizontal:before {
291 | content: "\e658";
292 | }
293 | .ti-fullscreen:before {
294 | content: "\e659";
295 | }
296 | .ti-arrow-top-right:before {
297 | content: "\e65a";
298 | }
299 | .ti-arrow-top-left:before {
300 | content: "\e65b";
301 | }
302 | .ti-arrow-circle-up:before {
303 | content: "\e65c";
304 | }
305 | .ti-arrow-circle-right:before {
306 | content: "\e65d";
307 | }
308 | .ti-arrow-circle-left:before {
309 | content: "\e65e";
310 | }
311 | .ti-arrow-circle-down:before {
312 | content: "\e65f";
313 | }
314 | .ti-angle-double-up:before {
315 | content: "\e660";
316 | }
317 | .ti-angle-double-right:before {
318 | content: "\e661";
319 | }
320 | .ti-angle-double-left:before {
321 | content: "\e662";
322 | }
323 | .ti-angle-double-down:before {
324 | content: "\e663";
325 | }
326 | .ti-zip:before {
327 | content: "\e664";
328 | }
329 | .ti-world:before {
330 | content: "\e665";
331 | }
332 | .ti-wheelchair:before {
333 | content: "\e666";
334 | }
335 | .ti-view-list:before {
336 | content: "\e667";
337 | }
338 | .ti-view-list-alt:before {
339 | content: "\e668";
340 | }
341 | .ti-view-grid:before {
342 | content: "\e669";
343 | }
344 | .ti-uppercase:before {
345 | content: "\e66a";
346 | }
347 | .ti-upload:before {
348 | content: "\e66b";
349 | }
350 | .ti-underline:before {
351 | content: "\e66c";
352 | }
353 | .ti-truck:before {
354 | content: "\e66d";
355 | }
356 | .ti-timer:before {
357 | content: "\e66e";
358 | }
359 | .ti-ticket:before {
360 | content: "\e66f";
361 | }
362 | .ti-thumb-up:before {
363 | content: "\e670";
364 | }
365 | .ti-thumb-down:before {
366 | content: "\e671";
367 | }
368 | .ti-text:before {
369 | content: "\e672";
370 | }
371 | .ti-stats-up:before {
372 | content: "\e673";
373 | }
374 | .ti-stats-down:before {
375 | content: "\e674";
376 | }
377 | .ti-split-v:before {
378 | content: "\e675";
379 | }
380 | .ti-split-h:before {
381 | content: "\e676";
382 | }
383 | .ti-smallcap:before {
384 | content: "\e677";
385 | }
386 | .ti-shine:before {
387 | content: "\e678";
388 | }
389 | .ti-shift-right:before {
390 | content: "\e679";
391 | }
392 | .ti-shift-left:before {
393 | content: "\e67a";
394 | }
395 | .ti-shield:before {
396 | content: "\e67b";
397 | }
398 | .ti-notepad:before {
399 | content: "\e67c";
400 | }
401 | .ti-server:before {
402 | content: "\e67d";
403 | }
404 | .ti-quote-right:before {
405 | content: "\e67e";
406 | }
407 | .ti-quote-left:before {
408 | content: "\e67f";
409 | }
410 | .ti-pulse:before {
411 | content: "\e680";
412 | }
413 | .ti-printer:before {
414 | content: "\e681";
415 | }
416 | .ti-power-off:before {
417 | content: "\e682";
418 | }
419 | .ti-plug:before {
420 | content: "\e683";
421 | }
422 | .ti-pie-chart:before {
423 | content: "\e684";
424 | }
425 | .ti-paragraph:before {
426 | content: "\e685";
427 | }
428 | .ti-panel:before {
429 | content: "\e686";
430 | }
431 | .ti-package:before {
432 | content: "\e687";
433 | }
434 | .ti-music:before {
435 | content: "\e688";
436 | }
437 | .ti-music-alt:before {
438 | content: "\e689";
439 | }
440 | .ti-mouse:before {
441 | content: "\e68a";
442 | }
443 | .ti-mouse-alt:before {
444 | content: "\e68b";
445 | }
446 | .ti-money:before {
447 | content: "\e68c";
448 | }
449 | .ti-microphone:before {
450 | content: "\e68d";
451 | }
452 | .ti-menu:before {
453 | content: "\e68e";
454 | }
455 | .ti-menu-alt:before {
456 | content: "\e68f";
457 | }
458 | .ti-map:before {
459 | content: "\e690";
460 | }
461 | .ti-map-alt:before {
462 | content: "\e691";
463 | }
464 | .ti-loop:before {
465 | content: "\e692";
466 | }
467 | .ti-location-pin:before {
468 | content: "\e693";
469 | }
470 | .ti-list:before {
471 | content: "\e694";
472 | }
473 | .ti-light-bulb:before {
474 | content: "\e695";
475 | }
476 | .ti-Italic:before {
477 | content: "\e696";
478 | }
479 | .ti-info:before {
480 | content: "\e697";
481 | }
482 | .ti-infinite:before {
483 | content: "\e698";
484 | }
485 | .ti-id-badge:before {
486 | content: "\e699";
487 | }
488 | .ti-hummer:before {
489 | content: "\e69a";
490 | }
491 | .ti-home:before {
492 | content: "\e69b";
493 | }
494 | .ti-help:before {
495 | content: "\e69c";
496 | }
497 | .ti-headphone:before {
498 | content: "\e69d";
499 | }
500 | .ti-harddrives:before {
501 | content: "\e69e";
502 | }
503 | .ti-harddrive:before {
504 | content: "\e69f";
505 | }
506 | .ti-gift:before {
507 | content: "\e6a0";
508 | }
509 | .ti-game:before {
510 | content: "\e6a1";
511 | }
512 | .ti-filter:before {
513 | content: "\e6a2";
514 | }
515 | .ti-files:before {
516 | content: "\e6a3";
517 | }
518 | .ti-file:before {
519 | content: "\e6a4";
520 | }
521 | .ti-eraser:before {
522 | content: "\e6a5";
523 | }
524 | .ti-envelope:before {
525 | content: "\e6a6";
526 | }
527 | .ti-download:before {
528 | content: "\e6a7";
529 | }
530 | .ti-direction:before {
531 | content: "\e6a8";
532 | }
533 | .ti-direction-alt:before {
534 | content: "\e6a9";
535 | }
536 | .ti-dashboard:before {
537 | content: "\e6aa";
538 | }
539 | .ti-control-stop:before {
540 | content: "\e6ab";
541 | }
542 | .ti-control-shuffle:before {
543 | content: "\e6ac";
544 | }
545 | .ti-control-play:before {
546 | content: "\e6ad";
547 | }
548 | .ti-control-pause:before {
549 | content: "\e6ae";
550 | }
551 | .ti-control-forward:before {
552 | content: "\e6af";
553 | }
554 | .ti-control-backward:before {
555 | content: "\e6b0";
556 | }
557 | .ti-cloud:before {
558 | content: "\e6b1";
559 | }
560 | .ti-cloud-up:before {
561 | content: "\e6b2";
562 | }
563 | .ti-cloud-down:before {
564 | content: "\e6b3";
565 | }
566 | .ti-clipboard:before {
567 | content: "\e6b4";
568 | }
569 | .ti-car:before {
570 | content: "\e6b5";
571 | }
572 | .ti-calendar:before {
573 | content: "\e6b6";
574 | }
575 | .ti-book:before {
576 | content: "\e6b7";
577 | }
578 | .ti-bell:before {
579 | content: "\e6b8";
580 | }
581 | .ti-basketball:before {
582 | content: "\e6b9";
583 | }
584 | .ti-bar-chart:before {
585 | content: "\e6ba";
586 | }
587 | .ti-bar-chart-alt:before {
588 | content: "\e6bb";
589 | }
590 | .ti-back-right:before {
591 | content: "\e6bc";
592 | }
593 | .ti-back-left:before {
594 | content: "\e6bd";
595 | }
596 | .ti-arrows-corner:before {
597 | content: "\e6be";
598 | }
599 | .ti-archive:before {
600 | content: "\e6bf";
601 | }
602 | .ti-anchor:before {
603 | content: "\e6c0";
604 | }
605 | .ti-align-right:before {
606 | content: "\e6c1";
607 | }
608 | .ti-align-left:before {
609 | content: "\e6c2";
610 | }
611 | .ti-align-justify:before {
612 | content: "\e6c3";
613 | }
614 | .ti-align-center:before {
615 | content: "\e6c4";
616 | }
617 | .ti-alert:before {
618 | content: "\e6c5";
619 | }
620 | .ti-alarm-clock:before {
621 | content: "\e6c6";
622 | }
623 | .ti-agenda:before {
624 | content: "\e6c7";
625 | }
626 | .ti-write:before {
627 | content: "\e6c8";
628 | }
629 | .ti-window:before {
630 | content: "\e6c9";
631 | }
632 | .ti-widgetized:before {
633 | content: "\e6ca";
634 | }
635 | .ti-widget:before {
636 | content: "\e6cb";
637 | }
638 | .ti-widget-alt:before {
639 | content: "\e6cc";
640 | }
641 | .ti-wallet:before {
642 | content: "\e6cd";
643 | }
644 | .ti-video-clapper:before {
645 | content: "\e6ce";
646 | }
647 | .ti-video-camera:before {
648 | content: "\e6cf";
649 | }
650 | .ti-vector:before {
651 | content: "\e6d0";
652 | }
653 | .ti-themify-logo:before {
654 | content: "\e6d1";
655 | }
656 | .ti-themify-favicon:before {
657 | content: "\e6d2";
658 | }
659 | .ti-themify-favicon-alt:before {
660 | content: "\e6d3";
661 | }
662 | .ti-support:before {
663 | content: "\e6d4";
664 | }
665 | .ti-stamp:before {
666 | content: "\e6d5";
667 | }
668 | .ti-split-v-alt:before {
669 | content: "\e6d6";
670 | }
671 | .ti-slice:before {
672 | content: "\e6d7";
673 | }
674 | .ti-shortcode:before {
675 | content: "\e6d8";
676 | }
677 | .ti-shift-right-alt:before {
678 | content: "\e6d9";
679 | }
680 | .ti-shift-left-alt:before {
681 | content: "\e6da";
682 | }
683 | .ti-ruler-alt-2:before {
684 | content: "\e6db";
685 | }
686 | .ti-receipt:before {
687 | content: "\e6dc";
688 | }
689 | .ti-pin2:before {
690 | content: "\e6dd";
691 | }
692 | .ti-pin-alt:before {
693 | content: "\e6de";
694 | }
695 | .ti-pencil-alt2:before {
696 | content: "\e6df";
697 | }
698 | .ti-palette:before {
699 | content: "\e6e0";
700 | }
701 | .ti-more:before {
702 | content: "\e6e1";
703 | }
704 | .ti-more-alt:before {
705 | content: "\e6e2";
706 | }
707 | .ti-microphone-alt:before {
708 | content: "\e6e3";
709 | }
710 | .ti-magnet:before {
711 | content: "\e6e4";
712 | }
713 | .ti-line-double:before {
714 | content: "\e6e5";
715 | }
716 | .ti-line-dotted:before {
717 | content: "\e6e6";
718 | }
719 | .ti-line-dashed:before {
720 | content: "\e6e7";
721 | }
722 | .ti-layout-width-full:before {
723 | content: "\e6e8";
724 | }
725 | .ti-layout-width-default:before {
726 | content: "\e6e9";
727 | }
728 | .ti-layout-width-default-alt:before {
729 | content: "\e6ea";
730 | }
731 | .ti-layout-tab:before {
732 | content: "\e6eb";
733 | }
734 | .ti-layout-tab-window:before {
735 | content: "\e6ec";
736 | }
737 | .ti-layout-tab-v:before {
738 | content: "\e6ed";
739 | }
740 | .ti-layout-tab-min:before {
741 | content: "\e6ee";
742 | }
743 | .ti-layout-slider:before {
744 | content: "\e6ef";
745 | }
746 | .ti-layout-slider-alt:before {
747 | content: "\e6f0";
748 | }
749 | .ti-layout-sidebar-right:before {
750 | content: "\e6f1";
751 | }
752 | .ti-layout-sidebar-none:before {
753 | content: "\e6f2";
754 | }
755 | .ti-layout-sidebar-left:before {
756 | content: "\e6f3";
757 | }
758 | .ti-layout-placeholder:before {
759 | content: "\e6f4";
760 | }
761 | .ti-layout-menu:before {
762 | content: "\e6f5";
763 | }
764 | .ti-layout-menu-v:before {
765 | content: "\e6f6";
766 | }
767 | .ti-layout-menu-separated:before {
768 | content: "\e6f7";
769 | }
770 | .ti-layout-menu-full:before {
771 | content: "\e6f8";
772 | }
773 | .ti-layout-media-right-alt:before {
774 | content: "\e6f9";
775 | }
776 | .ti-layout-media-right:before {
777 | content: "\e6fa";
778 | }
779 | .ti-layout-media-overlay:before {
780 | content: "\e6fb";
781 | }
782 | .ti-layout-media-overlay-alt:before {
783 | content: "\e6fc";
784 | }
785 | .ti-layout-media-overlay-alt-2:before {
786 | content: "\e6fd";
787 | }
788 | .ti-layout-media-left-alt:before {
789 | content: "\e6fe";
790 | }
791 | .ti-layout-media-left:before {
792 | content: "\e6ff";
793 | }
794 | .ti-layout-media-center-alt:before {
795 | content: "\e700";
796 | }
797 | .ti-layout-media-center:before {
798 | content: "\e701";
799 | }
800 | .ti-layout-list-thumb:before {
801 | content: "\e702";
802 | }
803 | .ti-layout-list-thumb-alt:before {
804 | content: "\e703";
805 | }
806 | .ti-layout-list-post:before {
807 | content: "\e704";
808 | }
809 | .ti-layout-list-large-image:before {
810 | content: "\e705";
811 | }
812 | .ti-layout-line-solid:before {
813 | content: "\e706";
814 | }
815 | .ti-layout-grid4:before {
816 | content: "\e707";
817 | }
818 | .ti-layout-grid3:before {
819 | content: "\e708";
820 | }
821 | .ti-layout-grid2:before {
822 | content: "\e709";
823 | }
824 | .ti-layout-grid2-thumb:before {
825 | content: "\e70a";
826 | }
827 | .ti-layout-cta-right:before {
828 | content: "\e70b";
829 | }
830 | .ti-layout-cta-left:before {
831 | content: "\e70c";
832 | }
833 | .ti-layout-cta-center:before {
834 | content: "\e70d";
835 | }
836 | .ti-layout-cta-btn-right:before {
837 | content: "\e70e";
838 | }
839 | .ti-layout-cta-btn-left:before {
840 | content: "\e70f";
841 | }
842 | .ti-layout-column4:before {
843 | content: "\e710";
844 | }
845 | .ti-layout-column3:before {
846 | content: "\e711";
847 | }
848 | .ti-layout-column2:before {
849 | content: "\e712";
850 | }
851 | .ti-layout-accordion-separated:before {
852 | content: "\e713";
853 | }
854 | .ti-layout-accordion-merged:before {
855 | content: "\e714";
856 | }
857 | .ti-layout-accordion-list:before {
858 | content: "\e715";
859 | }
860 | .ti-ink-pen:before {
861 | content: "\e716";
862 | }
863 | .ti-info-alt:before {
864 | content: "\e717";
865 | }
866 | .ti-help-alt:before {
867 | content: "\e718";
868 | }
869 | .ti-headphone-alt:before {
870 | content: "\e719";
871 | }
872 | .ti-hand-point-up:before {
873 | content: "\e71a";
874 | }
875 | .ti-hand-point-right:before {
876 | content: "\e71b";
877 | }
878 | .ti-hand-point-left:before {
879 | content: "\e71c";
880 | }
881 | .ti-hand-point-down:before {
882 | content: "\e71d";
883 | }
884 | .ti-gallery:before {
885 | content: "\e71e";
886 | }
887 | .ti-face-smile:before {
888 | content: "\e71f";
889 | }
890 | .ti-face-sad:before {
891 | content: "\e720";
892 | }
893 | .ti-credit-card:before {
894 | content: "\e721";
895 | }
896 | .ti-control-skip-forward:before {
897 | content: "\e722";
898 | }
899 | .ti-control-skip-backward:before {
900 | content: "\e723";
901 | }
902 | .ti-control-record:before {
903 | content: "\e724";
904 | }
905 | .ti-control-eject:before {
906 | content: "\e725";
907 | }
908 | .ti-comments-smiley:before {
909 | content: "\e726";
910 | }
911 | .ti-brush-alt:before {
912 | content: "\e727";
913 | }
914 | .ti-youtube:before {
915 | content: "\e728";
916 | }
917 | .ti-vimeo:before {
918 | content: "\e729";
919 | }
920 | .ti-twitter:before {
921 | content: "\e72a";
922 | }
923 | .ti-time:before {
924 | content: "\e72b";
925 | }
926 | .ti-tumblr:before {
927 | content: "\e72c";
928 | }
929 | .ti-skype:before {
930 | content: "\e72d";
931 | }
932 | .ti-share:before {
933 | content: "\e72e";
934 | }
935 | .ti-share-alt:before {
936 | content: "\e72f";
937 | }
938 | .ti-rocket:before {
939 | content: "\e730";
940 | }
941 | .ti-pinterest:before {
942 | content: "\e731";
943 | }
944 | .ti-new-window:before {
945 | content: "\e732";
946 | }
947 | .ti-microsoft:before {
948 | content: "\e733";
949 | }
950 | .ti-list-ol:before {
951 | content: "\e734";
952 | }
953 | .ti-linkedin:before {
954 | content: "\e735";
955 | }
956 | .ti-layout-sidebar-2:before {
957 | content: "\e736";
958 | }
959 | .ti-layout-grid4-alt:before {
960 | content: "\e737";
961 | }
962 | .ti-layout-grid3-alt:before {
963 | content: "\e738";
964 | }
965 | .ti-layout-grid2-alt:before {
966 | content: "\e739";
967 | }
968 | .ti-layout-column4-alt:before {
969 | content: "\e73a";
970 | }
971 | .ti-layout-column3-alt:before {
972 | content: "\e73b";
973 | }
974 | .ti-layout-column2-alt:before {
975 | content: "\e73c";
976 | }
977 | .ti-instagram:before {
978 | content: "\e73d";
979 | }
980 | .ti-google:before {
981 | content: "\e73e";
982 | }
983 | .ti-github:before {
984 | content: "\e73f";
985 | }
986 | .ti-flickr:before {
987 | content: "\e740";
988 | }
989 | .ti-facebook:before {
990 | content: "\e741";
991 | }
992 | .ti-dropbox:before {
993 | content: "\e742";
994 | }
995 | .ti-dribbble:before {
996 | content: "\e743";
997 | }
998 | .ti-apple:before {
999 | content: "\e744";
1000 | }
1001 | .ti-android:before {
1002 | content: "\e745";
1003 | }
1004 | .ti-save:before {
1005 | content: "\e746";
1006 | }
1007 | .ti-save-alt:before {
1008 | content: "\e747";
1009 | }
1010 | .ti-yahoo:before {
1011 | content: "\e748";
1012 | }
1013 | .ti-wordpress:before {
1014 | content: "\e749";
1015 | }
1016 | .ti-vimeo-alt:before {
1017 | content: "\e74a";
1018 | }
1019 | .ti-twitter-alt:before {
1020 | content: "\e74b";
1021 | }
1022 | .ti-tumblr-alt:before {
1023 | content: "\e74c";
1024 | }
1025 | .ti-trello:before {
1026 | content: "\e74d";
1027 | }
1028 | .ti-stack-overflow:before {
1029 | content: "\e74e";
1030 | }
1031 | .ti-soundcloud:before {
1032 | content: "\e74f";
1033 | }
1034 | .ti-sharethis:before {
1035 | content: "\e750";
1036 | }
1037 | .ti-sharethis-alt:before {
1038 | content: "\e751";
1039 | }
1040 | .ti-reddit:before {
1041 | content: "\e752";
1042 | }
1043 | .ti-pinterest-alt:before {
1044 | content: "\e753";
1045 | }
1046 | .ti-microsoft-alt:before {
1047 | content: "\e754";
1048 | }
1049 | .ti-linux:before {
1050 | content: "\e755";
1051 | }
1052 | .ti-jsfiddle:before {
1053 | content: "\e756";
1054 | }
1055 | .ti-joomla:before {
1056 | content: "\e757";
1057 | }
1058 | .ti-html5:before {
1059 | content: "\e758";
1060 | }
1061 | .ti-flickr-alt:before {
1062 | content: "\e759";
1063 | }
1064 | .ti-email:before {
1065 | content: "\e75a";
1066 | }
1067 | .ti-drupal:before {
1068 | content: "\e75b";
1069 | }
1070 | .ti-dropbox-alt:before {
1071 | content: "\e75c";
1072 | }
1073 | .ti-css3:before {
1074 | content: "\e75d";
1075 | }
1076 | .ti-rss:before {
1077 | content: "\e75e";
1078 | }
1079 | .ti-rss-alt:before {
1080 | content: "\e75f";
1081 | }
1082 |
--------------------------------------------------------------------------------
/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2
--------------------------------------------------------------------------------
/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot
--------------------------------------------------------------------------------
/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff
--------------------------------------------------------------------------------
/src/assets/fonts/themify.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/fonts/themify.eot
--------------------------------------------------------------------------------
/src/assets/fonts/themify.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/fonts/themify.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/themify.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/fonts/themify.woff
--------------------------------------------------------------------------------
/src/assets/img/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/apple-icon.png
--------------------------------------------------------------------------------
/src/assets/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/background.jpg
--------------------------------------------------------------------------------
/src/assets/img/faces/face-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/faces/face-0.jpg
--------------------------------------------------------------------------------
/src/assets/img/faces/face-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/faces/face-1.jpg
--------------------------------------------------------------------------------
/src/assets/img/faces/face-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/faces/face-2.jpg
--------------------------------------------------------------------------------
/src/assets/img/faces/face-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/faces/face-3.jpg
--------------------------------------------------------------------------------
/src/assets/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/favicon.png
--------------------------------------------------------------------------------
/src/assets/img/new_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/new_logo.png
--------------------------------------------------------------------------------
/src/assets/img/tim_80x80.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/tim_80x80.png
--------------------------------------------------------------------------------
/src/assets/img/vue-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/vue-paper-dashboard/6858e61b0f523d71e23407b6bc7ac47d0e22367e/src/assets/img/vue-logo.png
--------------------------------------------------------------------------------
/src/assets/sass/paper-dashboard.scss:
--------------------------------------------------------------------------------
1 | /*!
2 |
3 | =========================================================
4 | * Vue Paper Dashboard - v1.0.1
5 | =========================================================
6 |
7 | * Product Page: http://www.creative-tim.com/product/paper-dashboard
8 | * Copyright 2023 Creative Tim (http://www.creative-tim.com)
9 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE.md)
10 |
11 | =========================================================
12 |
13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
14 |
15 | */
16 | @import "paper/variables";
17 | @import "paper/mixins";
18 | @import "paper/typography";
19 | // Core CSS
20 | @import "paper/misc";
21 | @import "paper/sidebar-and-main-panel";
22 | @import "paper/buttons";
23 | @import "paper/inputs";
24 | @import "paper/alerts";
25 | @import "paper/tables";
26 | @import "paper/checkbox-radio";
27 | @import "paper/navbars";
28 | @import "paper/footers";
29 | // Fancy Stuff
30 | @import "paper/dropdown";
31 | @import "paper/cards";
32 | @import "paper/chartist";
33 | @import "paper/responsive";
34 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_alerts.scss:
--------------------------------------------------------------------------------
1 | .alert {
2 | border: 0;
3 | border-radius: 0;
4 | color: #FFFFFF;
5 | padding: 10px 15px;
6 | font-size: 14px;
7 |
8 | .container & {
9 | border-radius: 4px;
10 |
11 | }
12 | .navbar & {
13 | border-radius: 0;
14 | left: 0;
15 | position: absolute;
16 | right: 0;
17 | top: 85px;
18 | width: 100%;
19 | z-index: 3;
20 | }
21 | .navbar:not(.navbar-transparent) & {
22 | top: 70px;
23 | }
24 |
25 | span[data-notify="icon"] {
26 | font-size: 30px;
27 | display: block;
28 | left: 15px;
29 | position: absolute;
30 | top: 50%;
31 | margin-top: -20px;
32 | }
33 |
34 | .close ~ span {
35 | display: block;
36 | max-width: 89%;
37 | }
38 |
39 | &[data-notify="container"] {
40 | padding: 10px 10px 10px 20px;
41 | border-radius: $border-radius-base;
42 | }
43 |
44 | &.alert-with-icon {
45 | padding-left: 65px;
46 | }
47 | }
48 |
49 | .alert-info {
50 | background-color: $bg-info;
51 | color: $info-states-color;
52 | }
53 |
54 | .alert-success {
55 | background-color: $bg-success;
56 | color: $success-states-color;
57 | }
58 |
59 | .alert-warning {
60 | background-color: $bg-warning;
61 | color: $warning-states-color;
62 | }
63 |
64 | .alert-danger {
65 | background-color: $bg-danger;
66 | color: $danger-states-color;
67 | }
68 |
69 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_buttons.scss:
--------------------------------------------------------------------------------
1 | .btn{
2 | box-sizing: border-box;
3 | border-width: $border-thick;
4 | font-size: $font-size-small;
5 | font-weight: $font-weight-bold;
6 | padding: .5rem $padding-base-horizontal;
7 | line-height: 1.75;
8 | cursor: pointer;
9 | text-transform: uppercase;
10 |
11 | &.btn-border,
12 | &.btn-link{
13 | background-color: $transparent-bg;
14 | }
15 |
16 | @include btn-styles($default-color, $default-states-color);
17 | @include transition($fast-transition-time, linear);
18 |
19 | &:hover,
20 | &:focus{
21 | outline: 0 !important;
22 | @include box-shadow(none);
23 | }
24 | &:active,
25 | &.active,
26 | .open > &.dropdown-toggle {
27 | @include box-shadow(none);
28 | outline: 0 !important;
29 | }
30 |
31 | &[class*="btn-outline-"]{
32 | background-image: none;
33 | background-color: transparent;
34 | }
35 | }
36 | .btn-just-icon{
37 | border-radius: $border-radius-btn-large;
38 | height: 40px;
39 | width: 40px;
40 | min-width: 40px;
41 | padding: 8px;
42 |
43 | &.btn-sm{
44 | padding: 4px !important;
45 | }
46 | i{
47 | font-size: $font-size-medium;
48 | padding: 2px 0px;
49 | }
50 | }
51 | .upgrade-pro{
52 | .btn{
53 | margin-top: 30px;
54 | }
55 | }
56 | .btn-link.btn-just-icon{
57 | padding: 8px;
58 | }
59 |
60 | .btn-group .btn + .btn,
61 | .btn-group .btn + .btn-group,
62 | .btn-group .btn-group + .btn,
63 | .btn-group .btn-group + .btn-group{
64 | margin-left: -2px;
65 | }
66 |
67 |
68 | // Apply the mixin to the buttons
69 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); }
70 | .btn-success { @include btn-styles($success-color, $success-states-color); }
71 | .btn-info { @include btn-styles($info-color, $info-states-color); }
72 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); }
73 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); }
74 | .btn-neutral { @include btn-styles($white-color, $default-states-color); }
75 |
76 | .btn-outline-default { @include btn-outline-styles($default-color, $default-states-color); }
77 | .btn-outline-primary { @include btn-outline-styles($primary-color, $primary-states-color); }
78 | .btn-outline-success { @include btn-outline-styles($success-color, $success-states-color); }
79 | .btn-outline-info { @include btn-outline-styles($info-color, $info-states-color); }
80 | .btn-outline-warning { @include btn-outline-styles($warning-color, $warning-states-color); }
81 | .btn-outline-danger { @include btn-outline-styles($danger-color, $danger-states-color); }
82 | .btn-outline-neutral { @include btn-outline-styles($white-color, $default-states-color);
83 | &:hover,
84 | &:focus{
85 | color: $default-states-color;
86 | background-color: $white-color;
87 | }
88 | }
89 | .btn-neutral {
90 | @include btn-styles($white-color, $white-color);
91 | color: $default-color;
92 | &:hover,
93 | &:focus{
94 | color: $default-states-color;
95 | }
96 |
97 | &.btn-border{
98 | &:hover,
99 | &:focus{
100 | color: $default-color;
101 | }
102 |
103 | &:active,
104 | &.active,
105 | .open > &.dropdown-toggle{
106 | background-color: $white-color;
107 | color: $default-color;
108 | }
109 | }
110 |
111 | &.btn-link:active,
112 | &.btn-link.active{
113 | background-color: transparent;
114 | }
115 | }
116 |
117 | .btn{
118 | &:disabled,
119 | &[disabled],
120 | &.disabled{
121 | @include opacity(.5);
122 | }
123 | }
124 | .btn-link{
125 | border-color: transparent !important;
126 | padding: $padding-base-vertical $padding-base-horizontal;
127 |
128 | &:hover,
129 | &:focus,
130 | &:active{
131 | text-decoration: none;
132 | border-color: transparent;
133 | }
134 |
135 | &.btn-icon{
136 | padding: $padding-base-vertical;
137 | }
138 | }
139 |
140 | .btn-lg{
141 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-base, $line-height-small);
142 | }
143 | .btn-sm{
144 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small);
145 | }
146 | .btn-wd {
147 | min-width: 140px;
148 | }
149 |
150 | .btn-group.select{
151 | width: 100%;
152 | }
153 | .btn-group.select .btn{
154 | text-align: left;
155 | }
156 | .btn-group.select .caret{
157 | position: absolute;
158 | top: 50%;
159 | margin-top: -1px;
160 | right: 8px;
161 | }
162 | .btn-just-icon{
163 | &.btn-sm{
164 | height: 30px;
165 | width: 30px;
166 | min-width: 30px;
167 | padding: 0;
168 |
169 | i{
170 | font-size: $font-size-small;
171 |
172 | }
173 | }
174 | &.btn-lg{
175 | height: 50px;
176 | width: 50px;
177 | min-width: 50px;
178 | padding: 13px;
179 |
180 | i{
181 | font-size: 18px;
182 | padding: 0;
183 | }
184 |
185 | }
186 |
187 | }
188 | .btn-round{
189 | border-radius: 30px;
190 | }
191 | .btn.btn-link:focus{
192 | box-shadow: none !important;
193 | text-decoration: none;
194 | }
195 |
196 | .column .btn-link{
197 | padding: 7px 0;
198 | }
199 | .share-buttons .btn-outline-default{
200 | margin-top: 24px;
201 | }
202 | #modals .btn-outline-neutral{
203 | margin-bottom: 10px;
204 | }
205 | .btn-group.select{
206 | overflow: visible !important;
207 | }
208 | .media{
209 | .media-body{
210 | .media-footer{
211 | .btn-neutral{
212 | margin: $navbar-margin-btn;
213 | font-size: $font-size-base;
214 | i{
215 | margin-right: 0 !important;
216 | }
217 | }
218 | }
219 | }
220 | }
221 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_cards.scss:
--------------------------------------------------------------------------------
1 | .card {
2 | border-radius: $border-radius-extreme;
3 | box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
4 | background-color: #FFFFFF;
5 | color: $card-black-color;
6 | margin-bottom: 20px;
7 | position: relative;
8 | z-index: 1;
9 | border: none;
10 |
11 | .card-image {
12 | width: 100%;
13 | overflow: hidden;
14 | height: 260px;
15 | border-radius: $border-radius-extreme $border-radius-extreme 0 0;
16 | position: relative;
17 | -webkit-transform-style: preserve-3d;
18 | -moz-transform-style: preserve-3d;
19 | transform-style: preserve-3d;
20 |
21 | img {
22 | width: 100%;
23 | }
24 | }
25 | .card-body {
26 | padding: 15px 15px 10px 15px;
27 | }
28 | .card-header {
29 | padding: 20px 20px 0;
30 | border-bottom: 0;
31 | background-color: transparent;
32 | }
33 | .description {
34 | font-size: $font-paragraph;
35 | color: $font-color;
36 | }
37 |
38 | h6 {
39 | font-size: $font-size-small;
40 | margin: 0;
41 | }
42 | .card-category,
43 | label {
44 | font-size: $font-size-base;
45 | font-weight: $font-weight-normal;
46 | color: $dark-gray;
47 | margin-bottom: 0px;
48 | i {
49 | font-size: $font-paragraph;
50 | }
51 | }
52 |
53 | label {
54 | font-size: 15px;
55 | margin-bottom: 5px;
56 | }
57 |
58 | .card-title {
59 | margin: $none;
60 | color: $card-black-color;
61 | font-weight: $font-weight-light;
62 | }
63 | .avatar {
64 | width: 50px;
65 | height: 50px;
66 | overflow: hidden;
67 | border-radius: 50%;
68 | margin-right: 5px;
69 | }
70 | .footer {
71 | padding: 0;
72 | line-height: 30px;
73 |
74 | .legend {
75 | padding: 5px 0;
76 | }
77 |
78 | hr {
79 | margin-top: 5px;
80 | margin-bottom: 5px;
81 | }
82 | }
83 | .stats {
84 | color: #a9a9a9;
85 | font-weight: 300;
86 | i {
87 | margin-right: 2px;
88 | min-width: 15px;
89 | display: inline-block;
90 | }
91 | }
92 | .footer div {
93 | display: inline-block;
94 | }
95 |
96 | .author {
97 | font-size: $font-size-small;
98 | font-weight: $font-weight-bold;
99 | text-transform: uppercase;
100 | }
101 | .author i {
102 | font-size: $font-size-base;
103 | }
104 |
105 | &.card-separator:after {
106 | height: 100%;
107 | right: -15px;
108 | top: 0;
109 | width: 1px;
110 | background-color: $medium-gray;
111 | content: "";
112 | position: absolute;
113 | }
114 |
115 | .ct-chart {
116 | margin: 30px 0 30px;
117 | height: 245px;
118 | }
119 |
120 | .table {
121 | tbody td:first-child,
122 | tfoot th:first-child, tfoot td:first-child,
123 | thead th:first-child, thead td:first-child, {
124 | padding-left: 15px;
125 | }
126 |
127 | tbody td:last-child,
128 | tfoot th:last-child, tfoot td:last-child,
129 | thead th:last-child, thead td:last-child, {
130 | padding-right: 15px;
131 | }
132 | }
133 |
134 | .alert {
135 | border-radius: $border-radius-base;
136 | position: relative;
137 |
138 | &.alert-with-icon {
139 | padding-left: 65px;
140 | }
141 | }
142 | .icon-big {
143 | font-size: 3em;
144 | min-height: 64px;
145 | }
146 | .numbers {
147 | font-size: 2em;
148 | text-align: right;
149 | p {
150 | margin: 0;
151 | }
152 | }
153 | ul.team-members {
154 | li {
155 | padding: 10px 0px;
156 | &:not(:last-child) {
157 | border-bottom: 1px solid $medium-pale-bg;
158 | }
159 | }
160 | }
161 | }
162 |
163 | .card-user {
164 | .image {
165 | border-radius: 8px 8px 0 0;
166 | height: 150px;
167 | position: relative;
168 | overflow: hidden;
169 |
170 | img {
171 | width: 100%;
172 | }
173 | }
174 | .image-plain {
175 | height: 0;
176 | margin-top: 110px;
177 | }
178 | .author {
179 | text-align: center;
180 | text-transform: none;
181 | margin-top: -65px;
182 | .title {
183 | color: $default-states-color;
184 | small {
185 | color: $card-muted-color;
186 | }
187 | }
188 | }
189 | .avatar {
190 | width: 100px;
191 | height: 100px;
192 | border-radius: 50%;
193 | position: relative;
194 | margin-bottom: 15px;
195 |
196 | &.border-white {
197 | border: 5px solid $white-color;
198 | }
199 | &.border-gray {
200 | border: 5px solid $card-muted-color;
201 | }
202 | }
203 | .card-title {
204 | font-weight: 600;
205 | line-height: 24px;
206 | }
207 | .description {
208 | margin-top: 10px;
209 | }
210 | .card-body {
211 | min-height: 200px;
212 | }
213 |
214 | &.card-plain {
215 | .avatar {
216 | height: 190px;
217 | width: 190px;
218 | }
219 | }
220 | }
221 |
222 | .card-map {
223 | .map {
224 | height: 500px;
225 | padding-top: 20px;
226 |
227 | > div {
228 | height: 100%;
229 | }
230 | }
231 | }
232 |
233 | .card-user,
234 | .card-price {
235 | .card-footer {
236 | padding: 5px 15px 10px;
237 | }
238 | hr {
239 | margin: 5px 15px;
240 | }
241 | }
242 |
243 | .card-plain {
244 | background-color: transparent;
245 | box-shadow: none;
246 | border-radius: 0;
247 |
248 | .image {
249 | border-radius: 4px;
250 | }
251 | }
252 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_chartist.scss:
--------------------------------------------------------------------------------
1 | @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
2 | display: block;
3 | position: relative;
4 | width: $width;
5 |
6 | &:before {
7 | display: block;
8 | float: left;
9 | content: "";
10 | width: 0;
11 | height: 0;
12 | padding-bottom: $ratio * 100%;
13 | }
14 |
15 | &:after {
16 | content: "";
17 | display: table;
18 | clear: both;
19 | }
20 |
21 | > svg {
22 | display: block;
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | }
27 | }
28 |
29 | @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
30 | -webkit-box-align: $ct-text-align;
31 | -webkit-align-items: $ct-text-align;
32 | -ms-flex-align: $ct-text-align;
33 | align-items: $ct-text-align;
34 | -webkit-box-pack: $ct-text-justify;
35 | -webkit-justify-content: $ct-text-justify;
36 | -ms-flex-pack: $ct-text-justify;
37 | justify-content: $ct-text-justify;
38 | // Fallback to text-align for non-flex browsers
39 | @if ($ct-text-justify == 'flex-start') {
40 | text-align: left;
41 | } @else if ($ct-text-justify == 'flex-end') {
42 | text-align: right;
43 | } @else {
44 | text-align: center;
45 | }
46 | }
47 |
48 | @mixin ct-flex() {
49 | // Fallback to block
50 | display: block;
51 | display: -webkit-box;
52 | display: -moz-box;
53 | display: -ms-flexbox;
54 | display: -webkit-flex;
55 | display: flex;
56 | }
57 |
58 | @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
59 | fill: $ct-text-color;
60 | color: $ct-text-color;
61 | font-size: $ct-text-size;
62 | line-height: $ct-text-line-height;
63 | }
64 |
65 | @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
66 | stroke: $ct-grid-color;
67 | stroke-width: $ct-grid-width;
68 |
69 | @if ($ct-grid-dasharray) {
70 | stroke-dasharray: $ct-grid-dasharray;
71 | }
72 | }
73 |
74 | @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
75 | stroke-width: $ct-point-size;
76 | stroke-linecap: $ct-point-shape;
77 | }
78 |
79 | @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
80 | fill: none;
81 | stroke-width: $ct-line-width;
82 |
83 | @if ($ct-line-dasharray) {
84 | stroke-dasharray: $ct-line-dasharray;
85 | }
86 | }
87 |
88 | @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
89 | stroke: none;
90 | fill-opacity: $ct-area-opacity;
91 | }
92 |
93 | @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
94 | fill: none;
95 | stroke-width: $ct-bar-width;
96 | }
97 |
98 | @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
99 | fill: none;
100 | stroke-width: $ct-donut-width;
101 | }
102 |
103 | @mixin ct-chart-series-color($color) {
104 | .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
105 | stroke: $color;
106 | }
107 |
108 | .#{$ct-class-slice-pie}, .#{$ct-class-area} {
109 | fill: $color;
110 | }
111 | }
112 |
113 | @mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
114 |
115 | .#{$ct-class-label} {
116 | @include ct-chart-label($ct-text-color, $ct-text-size);
117 | }
118 |
119 | .#{$ct-class-chart-line} .#{$ct-class-label},
120 | .#{$ct-class-chart-bar} .#{$ct-class-label} {
121 | @include ct-flex();
122 | }
123 |
124 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
125 | @include ct-align-justify(flex-end, flex-start);
126 | // Fallback for browsers that don't support foreignObjects
127 | text-anchor: start;
128 | }
129 |
130 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
131 | @include ct-align-justify(flex-start, flex-start);
132 | // Fallback for browsers that don't support foreignObjects
133 | text-anchor: start;
134 | }
135 |
136 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
137 | @include ct-align-justify(flex-end, flex-end);
138 | // Fallback for browsers that don't support foreignObjects
139 | text-anchor: end;
140 | }
141 |
142 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
143 | @include ct-align-justify(flex-end, flex-start);
144 | // Fallback for browsers that don't support foreignObjects
145 | text-anchor: start;
146 | }
147 |
148 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
149 | @include ct-align-justify(flex-end, center);
150 | // Fallback for browsers that don't support foreignObjects
151 | text-anchor: start;
152 | }
153 |
154 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
155 | @include ct-align-justify(flex-start, center);
156 | // Fallback for browsers that don't support foreignObjects
157 | text-anchor: start;
158 | }
159 |
160 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
161 | @include ct-align-justify(flex-end, flex-start);
162 | // Fallback for browsers that don't support foreignObjects
163 | text-anchor: start;
164 | }
165 |
166 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
167 | @include ct-align-justify(flex-start, flex-start);
168 | // Fallback for browsers that don't support foreignObjects
169 | text-anchor: start;
170 | }
171 |
172 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
173 | //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
174 | @include ct-align-justify(center, flex-end);
175 | // Fallback for browsers that don't support foreignObjects
176 | text-anchor: end;
177 | }
178 |
179 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
180 | @include ct-align-justify(center, flex-start);
181 | // Fallback for browsers that don't support foreignObjects
182 | text-anchor: end;
183 | }
184 |
185 | .#{$ct-class-grid} {
186 | @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
187 | }
188 |
189 | .#{$ct-class-point} {
190 | @include ct-chart-point($ct-point-size, $ct-point-shape);
191 | }
192 |
193 | .#{$ct-class-line} {
194 | @include ct-chart-line($ct-line-width);
195 | }
196 |
197 | .#{$ct-class-area} {
198 | @include ct-chart-area();
199 | }
200 |
201 | .#{$ct-class-bar} {
202 | @include ct-chart-bar($ct-bar-width);
203 | }
204 |
205 | .#{$ct-class-slice-donut} {
206 | @include ct-chart-donut($ct-donut-width);
207 | }
208 |
209 | @if $ct-include-colored-series {
210 | @for $i from 0 to length($ct-series-names) {
211 | .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
212 | $color: nth($ct-series-colors, $i + 1);
213 |
214 | @include ct-chart-series-color($color);
215 | }
216 | }
217 | }
218 | }
219 |
220 | @if $ct-include-classes {
221 | @include ct-chart();
222 |
223 | @if $ct-include-alternative-responsive-containers {
224 | @for $i from 0 to length($ct-scales-names) {
225 | .#{nth($ct-scales-names, $i + 1)} {
226 | @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
227 | }
228 | }
229 | }
230 | }
231 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_checkbox-radio.scss:
--------------------------------------------------------------------------------
1 | /* Checkbox and radio */
2 | .checkbox,
3 | .radio {
4 | margin-bottom: 12px;
5 | padding-left: 30px;
6 | position: relative;
7 | -webkit-transition: color, opacity 0.25s linear;
8 | transition: color, opacity 0.25s linear;
9 | font-size: $font-size-base;
10 | font-weight: normal;
11 | line-height: 1.5;
12 | color: $font-color;
13 | cursor: pointer;
14 |
15 | .icons {
16 | color: $font-color;
17 | display: block;
18 | height: 20px;
19 | left: 0;
20 | position: absolute;
21 | top: 0;
22 | width: 20px;
23 | text-align: center;
24 | line-height: 21px;
25 | font-size: 20px;
26 | cursor: pointer;
27 | -webkit-transition: color, opacity 0.15s linear;
28 | transition: color, opacity 0.15s linear;
29 |
30 | opacity: .50;
31 | }
32 |
33 | &.checked {
34 | .icons {
35 | opacity: 1;
36 | }
37 | }
38 |
39 | input {
40 | outline: none !important;
41 | display: none;
42 | }
43 | }
44 |
45 | .checkbox,
46 | .radio {
47 | label {
48 | padding-left: 10px;
49 | }
50 | }
51 |
52 | .checkbox .icons .first-icon,
53 | .radio .icons .first-icon,
54 | .checkbox .icons .second-icon,
55 | .radio .icons .second-icon {
56 | display: inline-table;
57 | position: absolute;
58 | left: 0;
59 | top: 0;
60 | background-color: transparent;
61 | margin: 0;
62 | @include opacity(1);
63 | }
64 |
65 | .checkbox .icons .second-icon,
66 | .radio .icons .second-icon {
67 | @include opacity(0);
68 | }
69 |
70 | .checkbox:hover,
71 | .radio:hover {
72 | -webkit-transition: color 0.2s linear;
73 | transition: color 0.2s linear;
74 | }
75 |
76 | .checkbox:hover .first-icon,
77 | .radio:hover .first-icon {
78 | @include opacity(0);
79 | }
80 |
81 | .checkbox:hover .second-icon,
82 | .radio:hover .second-icon {
83 | @include opacity (1);
84 | }
85 |
86 | .checkbox.checked,
87 | .radio.checked {
88 | // color: $info-color;
89 | }
90 |
91 | .checkbox.checked .first-icon,
92 | .radio.checked .first-icon {
93 | opacity: 0;
94 | filter: alpha(opacity=0);
95 | }
96 |
97 | .checkbox.checked .second-icon,
98 | .radio.checked .second-icon {
99 | opacity: 1;
100 | filter: alpha(opacity=100);
101 | // color: $info-color;
102 | -webkit-transition: color 0.2s linear;
103 | transition: color 0.2s linear;
104 | }
105 |
106 | .checkbox.disabled,
107 | .radio.disabled {
108 | cursor: default;
109 | color: $medium-gray;
110 | }
111 |
112 | .checkbox.disabled .icons,
113 | .radio.disabled .icons {
114 | color: $medium-gray;
115 | }
116 |
117 | .checkbox.disabled .first-icon,
118 | .radio.disabled .first-icon {
119 | opacity: 1;
120 | filter: alpha(opacity=100);
121 | }
122 |
123 | .checkbox.disabled .second-icon,
124 | .radio.disabled .second-icon {
125 | opacity: 0;
126 | filter: alpha(opacity=0);
127 | }
128 |
129 | .checkbox.disabled.checked .icons,
130 | .radio.disabled.checked .icons {
131 | color: $medium-gray;
132 | }
133 |
134 | .checkbox.disabled.checked .first-icon,
135 | .radio.disabled.checked .first-icon {
136 | opacity: 0;
137 | filter: alpha(opacity=0);
138 | }
139 |
140 | .checkbox.disabled.checked .second-icon,
141 | .radio.disabled.checked .second-icon {
142 | opacity: 1;
143 | color: $medium-gray;
144 | filter: alpha(opacity=100);
145 | }
146 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_dropdown.scss:
--------------------------------------------------------------------------------
1 | .dropdown{
2 | .dropdown-menu{
3 | background-color: $pale-bg;
4 | border: 0 none;
5 | border-radius: $border-radius-extreme;
6 | display: block;
7 | margin-top: 10px;
8 | padding: 0px;
9 | position: absolute;
10 | visibility: hidden;
11 | z-index: 1000;
12 |
13 | @include opacity(0);
14 | @include box-shadow($dropdown-shadow);
15 |
16 | .divider{
17 | background-color: $medium-pale-bg;
18 | margin: 0px;
19 | }
20 |
21 | .dropdown-header{
22 | color: $dark-gray;
23 | font-size: $font-size-small;
24 | padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
25 | }
26 |
27 | .no-notification{
28 | color: #9A9A9A;
29 | font-size: 1.2em;
30 | padding: 30px 30px;
31 | text-align: center;
32 | }
33 |
34 | .dropdown-item{
35 | color: $font-color !important;
36 | font-size: $font-size-base;
37 | padding: 10px 45px 10px 15px;
38 | clear: both;
39 | white-space: nowrap;
40 | width: 100%;
41 | display: block;
42 | &:hover{
43 | color: $white-color !important;
44 | }
45 |
46 | img{
47 | margin-top: -3px;
48 | }
49 |
50 | }
51 | .dropdown-item a:focus{
52 | outline: 0 !important;
53 | }
54 |
55 | .btn-group.select &{
56 | min-width: 100%;
57 | }
58 |
59 | .dropdown-item:first-child a,
60 | .dropdown-item:first-child{
61 | border-top-left-radius: $border-radius-extreme;
62 | border-top-right-radius: $border-radius-extreme;
63 | }
64 |
65 | .dropdown-item:last-child a,
66 | .dropdown-item:last-child{
67 | border-bottom-left-radius: $border-radius-extreme;
68 | border-bottom-right-radius: $border-radius-extreme;
69 | }
70 |
71 | .select & .dropdown-item:first-child{
72 | border-radius: 0;
73 | border-bottom: 0 none;
74 | }
75 |
76 | .dropdown-item a:hover,
77 | .dropdown-item a:focus{
78 | color: $white-color;
79 | opacity: 1;
80 | text-decoration: none;
81 |
82 | }
83 | .dropdown-item:hover,
84 | .dropdown-item:focus{
85 | background-color: $default-color;
86 | }
87 |
88 | &.dropdown-primary .dropdown-item:hover,
89 | &.dropdown-primary .dropdown-item:focus{
90 | background-color: $bg-primary;
91 | }
92 | &.dropdown-info .dropdown-item:hover,
93 | &.dropdown-info .dropdown-item:focus{
94 | background-color: $bg-info;
95 | }
96 | &.dropdown-success .dropdown-item:hover,
97 | &.dropdown-success .dropdown-item:focus{
98 | background-color: $bg-success;
99 | }
100 | &.dropdown-warning .dropdown-item:hover,
101 | &.dropdown-warning .dropdown-item:focus{
102 | background-color: $bg-warning;
103 | }
104 | &.dropdown-danger .dropdown-item:hover,
105 | &.dropdown-danger .dropdown-item:focus{
106 | background-color: $bg-danger;
107 | }
108 |
109 | }
110 | .dropdown-divider{
111 | margin: 0 !important;
112 | }
113 | &:hover{
114 | cursor: pointer;
115 | }
116 | &.show .dropdown-menu{
117 | @include opacity(1);
118 | visibility: visible;
119 | }
120 | }
121 |
122 | //fix bug for the select items in btn-group
123 | .btn-group.select{
124 | // overflow: hidden;
125 | }
126 | .btn-group.select.open{
127 | overflow: visible;
128 | }
129 | .dropdown-menu-right{
130 | right: -2px;
131 | left: auto;
132 | }
133 |
134 | // the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file
135 | // code from _responsive.scss
136 |
137 | @media (min-width: 768px){
138 | .navbar-form {
139 | margin-top: 21px;
140 | margin-bottom: 21px;
141 | padding-left: 5px;
142 | padding-right: 5px;
143 | }
144 | .navbar-search-form{
145 | display: none;
146 | }
147 | .navbar-nav .dropdown-item .dropdown-menu,
148 | .dropdown .dropdown-menu,
149 | .dropdown-btn .dropdown-menu{
150 | transform: translate3d(0px, -40px, 0px);
151 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
152 | }
153 | .navbar-nav .dropdown-item.show .dropdown-menu,
154 | .dropdown.show .dropdown-menu,
155 | .dropdown-btn.show .dropdown-menu{
156 | transform: translate3d(0px, 0px, 0px);
157 | visibility: visible !important;
158 | }
159 | .bootstrap-select .dropdown-menu{
160 | -webkit-box-shadow: none;
161 | box-shadow: none;
162 | -webkit-transition: all 150ms linear;
163 | -moz-transition: all 150ms linear;
164 | -o-transition: all 150ms linear;
165 | -ms-transition: all 150ms linear;
166 | transition: all 150ms linear;
167 | }
168 | .bootstrap-datetimepicker-widget{
169 | visibility: visible !important;
170 | @include opacity(1);
171 | }
172 |
173 | .dropup.show .dropdown-menu{
174 | -webkit-transform: translate3d(0, -10px, 0);
175 | -moz-transform: translate3d(0, -10px, 0);
176 | -o-transform: translate3d(0, -10px, 0);
177 | -ms-transform: translate3d(0, -10px, 0);
178 | transform: translate3d(0, -10px, 0);
179 | opacity: 1;
180 | visibility: visible;
181 | }
182 | .dropup .dropdown-menu{
183 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
184 | -webkit-transform: translate3d(0, 30px, 0);
185 | -moz-transform: translate3d(0, 30px, 0);
186 | -o-transform: translate3d(0, 30px, 0);
187 | -ms-transform: translate3d(0, 30px, 0);
188 | transform: translate3d(0, 30px, 0);
189 | opacity: 0;
190 | visibility: hidden;
191 | display: block;
192 | }
193 |
194 | .bootstrap-select .show .dropdown-menu{
195 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
196 | transform: translate3d(0px, 0px, 0px);
197 | }
198 |
199 | .navbar-nav .dropdown-menu:before,
200 | #dropdown-row .dropdown .dropdown-menu:before,
201 | .card.card-just-text .dropdown .dropdown-menu:before,
202 | .card-just-text .dropdown .dropdown-menu:before,
203 | .dropdown-btn .dropdown-menu:before{
204 | border-bottom: 11px solid $medium-pale-bg;
205 | border-left: 11px solid rgba(0, 0, 0, 0);
206 | border-right: 11px solid rgba(0, 0, 0, 0);
207 | content: "";
208 | display: inline-block;
209 | position: absolute;
210 | right: 12px;
211 | top: -11px;
212 | }
213 |
214 | #dropdown-row .dropdown .dropdown-menu:before{
215 | left: 12px !important;
216 | right: auto;
217 | }
218 | .navbar-nav .dropdown-menu:after,
219 | #dropdown-row .dropdown .dropdown-menu:after,
220 | .card.card-just-text .dropdown .dropdown-menu:after,
221 | .card-just-text .dropdown .dropdown-menu:after,
222 | .dropdown-btn .dropdown-menu:after{
223 | border-bottom: 11px solid $white-color;
224 | border-left: 11px solid rgba(0, 0, 0, 0);
225 | border-right: 11px solid rgba(0, 0, 0, 0);
226 | content: "";
227 | display: inline-block;
228 | position: absolute;
229 | right: 12px;
230 | top: -10px;
231 | }
232 | #dropdown-row .dropdown .dropdown-menu:after{
233 | left: 12px !important;
234 | right: auto;
235 | }
236 | #dropdown-row .dropdown .dropdown-menu{
237 | left: 15px;
238 | }
239 | .navbar-nav.navbar-right li .dropdown-menu:before,
240 | .navbar-nav.navbar-right li .dropdown-menu:after{
241 | left: auto;
242 | right: 12px;
243 | }
244 |
245 |
246 | .footer:not(.footer-big){
247 | nav ul{
248 | li:first-child{
249 | margin-left: 0;
250 | }
251 | }
252 | }
253 |
254 | // no dragging the others navs in page
255 | body > .navbar-collapse.collapse{
256 | display: none !important;
257 | }
258 | }
259 |
260 | #navbar {
261 | .dropdown-menu {
262 | .dropdown-item{
263 | padding: 3px 1.5rem !important;
264 | }
265 | }
266 | }
267 | .dropdown-sharing{
268 |
269 | li{
270 | color: $font-color;
271 | font-size: $font-size-base;
272 |
273 | .social-line{
274 | line-height: 28px;
275 | padding: 10px 20px 5px 20px;
276 |
277 | [class*="icon-"]{
278 | font-size: 20px;
279 | }
280 | }
281 | }
282 |
283 | li:hover,
284 | li:focus{
285 | .social-line,
286 | a,
287 | .action-line{
288 | background-color: $white-color;
289 | color: $font-color;
290 | opacity: 1;
291 | text-decoration: none;
292 | }
293 | }
294 | }
295 | .show .dropdown-sharing{
296 | margin-bottom: 1px;
297 | li:last-child{
298 | padding: 10px 15px;
299 | }
300 | }
301 | .show .dropdown-actions{
302 | margin-bottom: 1px;
303 | }
304 |
305 | .dropdown-actions{
306 | li{
307 | margin: -15px 35px;
308 | .action-line{
309 | padding: 5px 10px;
310 | line-height: 24px;
311 | font-weight: bold;
312 | [class*="icon-"]{
313 | font-size: 24px;
314 | }
315 | .col-sm-9{
316 | line-height: 34px;
317 | }
318 | }
319 | .link-danger{
320 | color: $danger-color;
321 | &:hover, &:active, &:focus{
322 | color: $danger-color;
323 | }
324 | }
325 | }
326 | li:hover,
327 | li:focus{
328 | a{
329 | color: $font-color;
330 | opacity: 1;
331 | text-decoration: none;
332 | }
333 | }
334 | .action-line{
335 | .icon-simple{
336 | margin-left: -15px;
337 | }
338 | }
339 | }
340 | .dropup .dropdown-menu:before{
341 | border-top: 11px solid #DCD9D1;
342 | border-left: 11px solid transparent;
343 | border-right: 11px solid transparent;
344 | content: "";
345 | display: inline-block;
346 | position: absolute;
347 | right: 12px;
348 | bottom: -12px;
349 | }
350 | .dropup .dropdown-menu:after{
351 | border-top: 11px solid #FFF;
352 | border-left: 11px solid transparent;
353 | border-right: 11px solid transparent;
354 | content: "";
355 | display: inline-block;
356 | position: absolute;
357 | right: 12px;
358 | bottom: -11px;
359 | }
360 |
361 | .dropup,
362 | .dropdown{
363 | .dropdown-toggle:after{
364 | margin-left: 5px;
365 | }
366 | }
367 |
368 | .dropdown-notification{
369 | .dropdown-notification-list{
370 | & li{
371 | border-bottom: 1px solid #F1EAE0;
372 | color: #66615b;
373 | font-size: 16px;
374 | padding: 10px 5px;
375 | width: 330px;
376 |
377 | & a{
378 | color: #66615b;
379 | white-space: normal;
380 |
381 | & .notification-text{
382 | padding-left: 40px;
383 | position: relative;
384 |
385 | & .label{
386 | display: block;
387 | position: absolute;
388 | top: 50%;
389 | margin-top: -12px;
390 | left: 7px;
391 | }
392 | & .message{
393 | font-size: 0.9em;
394 | line-height: 0.7;
395 | margin-left: 10px;
396 | }
397 | & .time{
398 | color: #9A9A9A;
399 | font-size: 0.7em;
400 | margin-left: 10px;
401 | }
402 | }
403 | & .read-notification{
404 | font-size: 12px;
405 | opacity: 0;
406 | position: absolute;
407 | right: 5px;
408 | top: 50%;
409 | margin-top: -12px;
410 | }
411 | }
412 | &:hover{
413 | background-color: #F0EFEB;
414 | color: #66615b;
415 | opacity: 1;
416 | text-decoration: none;
417 |
418 | & .read-notification{
419 | opacity: 1 !important;
420 | }
421 | }
422 | }
423 | }
424 | .dropdown-footer{
425 | background-color: #E8E7E3;
426 | border-radius: 0 0 8px 8px;
427 |
428 | .dropdown-footer-menu{
429 | list-style: outside none none;
430 | padding: 0px 5px;
431 | li{
432 | display: inline-block;
433 | text-align: left;
434 | padding: 0 10px;
435 |
436 | a{
437 | color: #9C9B99;
438 | font-size: 0.9em;
439 | line-height: 35px;
440 | }
441 | }
442 | }
443 | }
444 | }
445 | .navbar-nav.mr-auto .dropdown-menu:before,
446 | .navbar-nav.mr-auto .dropdown-menu:after{
447 | left: 12px !important;
448 | right: auto;
449 | }
450 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_footers.scss:
--------------------------------------------------------------------------------
1 | .footer {
2 | background-attachment: fixed;
3 | position: relative;
4 | line-height: 20px;
5 | nav {
6 | ul {
7 | list-style: none;
8 | margin: 0;
9 | padding: 0;
10 | font-weight: normal;
11 | li {
12 | display: inline-block;
13 | padding: 10px 15px;
14 | margin: 15px 3px;
15 | line-height: 20px;
16 | text-align: center;
17 | }
18 | a:not(.btn) {
19 | color: $font-color;
20 | display: block;
21 | margin-bottom: 3px;
22 |
23 | &:focus,
24 | &:hover {
25 | color: $default-states-color;
26 | }
27 | }
28 | }
29 | }
30 | .copyright {
31 | color: $font-color;
32 | padding: 10px 15px;
33 | font-size: 14px;
34 | white-space: nowrap;
35 | margin: 15px 3px;
36 | line-height: 20px;
37 | }
38 | .heart {
39 | color: $danger-color;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_inputs.scss:
--------------------------------------------------------------------------------
1 | .form-control::-moz-placeholder {
2 | @include placeholder($medium-gray, 1);
3 | }
4 |
5 | .form-control:-moz-placeholder {
6 | @include placeholder($medium-gray, 1);
7 | }
8 |
9 | .form-control::-webkit-input-placeholder {
10 | @include placeholder($medium-gray, 1);
11 | }
12 |
13 | .form-control:-ms-input-placeholder {
14 | @include placeholder($medium-gray, 1);
15 | }
16 |
17 | .form-control {
18 | background-color: $gray-input-bg;
19 | border: medium none;
20 | border-radius: $border-radius-base;
21 | color: $font-color;
22 | font-size: $font-size-base;
23 | transition: background-color 0.3s ease 0s;
24 | @include input-size($padding-base-vertical, $padding-base-horizontal, $height-base);
25 | @include box-shadow(none);
26 |
27 | &:focus {
28 | background-color: $white-bg;
29 | @include box-shadow(none);
30 | outline: 0 !important;
31 | }
32 |
33 | .has-success &,
34 | .has-error &,
35 | .has-success &:focus,
36 | .has-error &:focus {
37 | @include box-shadow(none);
38 | }
39 |
40 | .has-success & {
41 | background-color: $success-input-bg;
42 | color: $success-color;
43 | &.border-input {
44 | border: 1px solid $success-color;
45 | }
46 | }
47 | .has-success &:focus {
48 | background-color: $white-bg;
49 | }
50 | .has-error & {
51 | background-color: $danger-input-bg;
52 | color: $danger-color;
53 | &.border-input {
54 | border: 1px solid $danger-color;
55 | }
56 | }
57 | .has-error &:focus {
58 | background-color: $white-bg;
59 | }
60 |
61 | & + .form-control-feedback {
62 | border-radius: $border-radius-large;
63 | font-size: $font-size-base;
64 | margin-top: -7px;
65 | position: absolute;
66 | right: 10px;
67 | top: 50%;
68 | vertical-align: middle;
69 | }
70 | &.border-input {
71 | border: 1px solid $table-line-color;
72 | }
73 | .open & {
74 | border-bottom-color: transparent;
75 | }
76 | }
77 |
78 | .input-lg {
79 | height: 55px;
80 | padding: $padding-large-vertical $padding-large-horizontal;
81 | }
82 |
83 | .has-error {
84 | .form-control-feedback, .control-label {
85 | color: $danger-color;
86 | }
87 | }
88 |
89 | .has-success {
90 | .form-control-feedback, .control-label {
91 | color: $success-color;
92 | }
93 | }
94 |
95 | .input-group-addon {
96 | background-color: $gray-input-bg;
97 | border: medium none;
98 | border-radius: $border-radius-base;
99 |
100 | .has-success &,
101 | .has-error & {
102 | background-color: $white-color;
103 | }
104 | .has-error .form-control:focus + & {
105 | color: $danger-color;
106 | }
107 | .has-success .form-control:focus + & {
108 | color: $success-color;
109 | }
110 | .form-control:focus + &,
111 | .form-control:focus ~ & {
112 | background-color: $white-color;
113 | }
114 | }
115 |
116 | .border-input {
117 | .input-group-addon {
118 | border: solid 1px $table-line-color;
119 | }
120 | }
121 |
122 | .input-group {
123 | margin-bottom: 15px;
124 | }
125 |
126 | .input-group[disabled] {
127 | .input-group-addon {
128 | background-color: $light-gray;
129 | }
130 | }
131 |
132 | .input-group .form-control:first-child,
133 | .input-group-addon:first-child,
134 | .input-group-btn:first-child > .dropdown-toggle,
135 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
136 | border-right: 0 none;
137 | }
138 |
139 | .input-group .form-control:last-child,
140 | .input-group-addon:last-child,
141 | .input-group-btn:last-child > .dropdown-toggle,
142 | .input-group-btn:first-child > .btn:not(:first-child) {
143 | border-left: 0 none;
144 | }
145 |
146 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
147 | background-color: $light-gray;
148 | cursor: not-allowed;
149 | @include placeholder($dark-gray, 1);
150 | }
151 |
152 | .form-control[disabled]::-moz-placeholder {
153 | @include placeholder($dark-gray, 1);
154 | }
155 |
156 | .form-control[disabled]:-moz-placeholder {
157 | @include placeholder($medium-gray, 1);
158 | }
159 |
160 | .form-control[disabled]::-webkit-input-placeholder {
161 | @include placeholder($medium-gray, 1);
162 | }
163 |
164 | .form-control[disabled]:-ms-input-placeholder {
165 | @include placeholder($medium-gray, 1);
166 | }
167 |
168 | .input-group-btn .btn {
169 | border-width: $border-thin;
170 | padding: $padding-round-vertical $padding-base-horizontal;
171 | }
172 |
173 | .input-group-btn .btn-default:not(.btn-fill) {
174 | border-color: $medium-gray;
175 | }
176 |
177 | .input-group-btn:last-child > .btn {
178 | margin-left: 0;
179 | }
180 |
181 | textarea.form-control {
182 | max-width: 100%;
183 | padding: 10px 18px;
184 | resize: none;
185 | }
186 |
187 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_misc.scss:
--------------------------------------------------------------------------------
1 | /* General overwrite */
2 | body {
3 | color: $font-color;
4 | font-size: $font-size-base;
5 | font-family: 'Muli', Arial, sans-serif;
6 | .wrapper {
7 | min-height: 100vh;
8 | position: relative;
9 | }
10 | }
11 |
12 | a {
13 | color: $info-color;
14 |
15 | &:hover, &:focus {
16 | color: $info-states-color;
17 | text-decoration: none;
18 | }
19 | }
20 |
21 | a:focus, a:active,
22 | button::-moz-focus-inner,
23 | input::-moz-focus-inner,
24 | select::-moz-focus-inner,
25 | input[type="file"] > input[type="button"]::-moz-focus-inner {
26 | outline: 0 !important;
27 | }
28 |
29 | .ui-slider-handle:focus,
30 | .navbar-toggle,
31 | input:focus,
32 | button:focus {
33 | outline: 0 !important;
34 | }
35 |
36 | .navbar.navbar-default {
37 | z-index: 2;
38 | }
39 |
40 | /* Animations */
41 | .form-control,
42 | .input-group-addon,
43 | .tagsinput,
44 | .navbar,
45 | .navbar .alert {
46 | @include transition($general-transition-time, $transition-linear);
47 | }
48 |
49 | .sidebar .nav a,
50 | .table > tbody > tr .td-actions .btn {
51 | @include transition($fast-transition-time, $transition-ease-in);
52 | }
53 |
54 | .btn {
55 | @include transition($ultra-fast-transition-time, $transition-ease-in);
56 | }
57 |
58 | .fa {
59 | width: 21px;
60 | text-align: center;
61 | }
62 |
63 | .fa-base {
64 | font-size: 1.25em !important;
65 | }
66 |
67 | .margin-top {
68 | margin-top: 50px;
69 | }
70 |
71 | hr {
72 | border-color: $medium-pale-bg;
73 | }
74 |
75 | .wrapper {
76 | position: relative;
77 | top: 0;
78 | height: 100vh;
79 | }
80 |
81 | @media (min-width: 992px) {
82 | .typo-line {
83 | padding-left: 140px;
84 | margin-bottom: 40px;
85 | position: relative;
86 | }
87 |
88 | .typo-line .category {
89 | transform: translateY(-50%);
90 | top: 50%;
91 | left: 0px;
92 | position: absolute;
93 | }
94 | }
95 |
96 | .icon-section {
97 | margin: 0 0 3em;
98 | clear: both;
99 | overflow: hidden;
100 | }
101 |
102 | .icon-container {
103 | width: 240px;
104 | padding: .7em 0;
105 | float: left;
106 | position: relative;
107 | text-align: left;
108 | }
109 |
110 | .icon-container [class^="ti-"],
111 | .icon-container [class*=" ti-"] {
112 | color: #000;
113 | position: absolute;
114 | margin-top: 3px;
115 | transition: .3s;
116 | }
117 |
118 | .icon-container:hover [class^="ti-"],
119 | .icon-container:hover [class*=" ti-"] {
120 | font-size: 2.2em;
121 | margin-top: -5px;
122 | }
123 |
124 | .icon-container:hover .icon-name {
125 | color: #000;
126 | }
127 |
128 | .icon-name {
129 | color: #aaa;
130 | margin-left: 35px;
131 | font-size: .8em;
132 | transition: .3s;
133 | }
134 |
135 | .icon-container:hover .icon-name {
136 | margin-left: 45px;
137 | }
138 |
139 | .places-buttons .btn {
140 | margin-bottom: 30px
141 | }
142 |
143 | .sidebar .nav > li.active-pro {
144 | position: absolute;
145 | width: 100%;
146 | bottom: 10px;
147 | }
148 |
149 | .sidebar .nav > li.active-pro a {
150 | background: rgba(255, 255, 255, 0.14);
151 | opacity: 1;
152 | color: #FFFFFF;
153 | }
154 |
155 | .table-upgrade td:nth-child(2),
156 | .table-upgrade td:nth-child(3) {
157 | text-align: center;
158 | }
159 |
160 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_mixins.scss:
--------------------------------------------------------------------------------
1 | //Utilities
2 | @import "mixins/transparency";
3 | @import "mixins/vendor-prefixes";
4 | //Components
5 | @import "mixins/buttons";
6 | @import "mixins/inputs";
7 | @import "mixins/labels";
8 | @import "mixins/tabs";
9 | @import "mixins/navbars";
10 | @import "mixins/icons";
11 | @import "mixins/cards";
12 | @import "mixins/chartist";
13 | @import "mixins/sidebar";
14 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_navbars.scss:
--------------------------------------------------------------------------------
1 | .nav {
2 | .nav-item{
3 | .nav-link:hover,
4 | .nav-link:focus{
5 | background-color: transparent;
6 | }
7 | }
8 | }
9 | .navbar{
10 | border: $none;
11 | font-size: $font-size-base;
12 | transition: all 0.4s;
13 | -webkit-transition: all 0.4s;
14 | padding: 0;
15 | background: $white-color;
16 | box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15);
17 |
18 | &.navbar-light {
19 | background-color: $bg-nude;
20 | box-shadow: none;
21 | border-bottom: 1px solid $medium-gray;
22 | }
23 | .navbar-toggler-right{
24 | float: right;
25 | }
26 |
27 | .navbar-brand{
28 | font-weight: $font-weight-bold;
29 | margin: $navbar-margin-brand;
30 | padding: $navbar-padding-brand;
31 | font-size: $font-size-base;
32 | color: $default-color;
33 | text-transform: uppercase;
34 | }
35 | .nav-link{
36 | i{
37 | font-size: 16px;
38 | position: relative;
39 | top: 4px;
40 | right: 3px;
41 | }
42 | [class^="fa"]{
43 | top: 2px;
44 | }
45 | p{
46 | margin: 0px 0px;
47 | color: #9A9A9A !important;
48 | text-transform: uppercase;
49 | font-weight: 600;
50 | font-size: 12px;
51 | line-height: 1.5em;
52 | padding: 15px 0;
53 | }
54 | p:hover{
55 | color: #403D39 !important;
56 | }
57 | }
58 | .navbar-nav{
59 | .nav-item .nav-link {
60 | line-height: 1.6;
61 | margin: $navbar-margin-a;
62 | padding: $navbar-padding-a;
63 | opacity: .8;
64 | font-size: $font-size-small;
65 | text-transform: uppercase;
66 | font-weight: 600;
67 | color: $default-color;
68 |
69 | &:hover{
70 | color: $font-color;
71 | }
72 | }
73 | .nav-item .nav-link.btn{
74 | margin: $navbar-margin-a-btn;
75 | padding: 9px;
76 |
77 | }
78 |
79 | .dropdown-menu{
80 | border-radius: $border-radius-extreme;
81 | margin-top: 1px;
82 | }
83 | }
84 | .navbar-collapse{
85 | & .nav-item{
86 | & .nav-link{
87 | p{
88 | display: inline;
89 | }
90 | }
91 | & .dropdown-item{
92 | i{
93 | margin: 0 10px;
94 | margin: 0 10px 0px 5px;
95 | font-size: 18px;
96 | position: relative;
97 | top: 3px;
98 | }
99 | }
100 | }
101 | &.show{
102 | & .navbar-nav{
103 | & .nav-item{
104 | padding-right: 10px;
105 | }
106 | }
107 | }
108 | }
109 |
110 | .notification-bubble{
111 | right: 72px;
112 | padding: 0.2em 0.6em;
113 | position: absolute;
114 | top: 15px;
115 | }
116 | .btn{
117 | margin: $navbar-margin-btn;
118 | font-size: $font-size-small;
119 | i{
120 | // margin-right: 5px !important;
121 | font-size: 14px;
122 | line-height: 13px;
123 | }
124 | }
125 | .btn-simple{
126 | font-size: $font-size-medium;
127 | }
128 | .caret{
129 | @include center-item();
130 | }
131 | &.navbar-transparent{
132 | padding-top: 25px;
133 | }
134 | .logo-container{
135 | margin-top: 5px;
136 | .logo{
137 | overflow: hidden;
138 | border-radius: 50%;
139 | border: 1px solid #333333;
140 | width: 50px;
141 | float: left;
142 |
143 | img{
144 | width: 100%;
145 | }
146 | }
147 | .brand{
148 | font-size: 18px;
149 | color: #FFFFFF;
150 | line-height: 20px;
151 | float: left;
152 | margin-left: 10px;
153 | margin-top: 5px;
154 | width: 75px;
155 | height: 50px;
156 | }
157 | }
158 | }
159 | .navbar.fixed-top{
160 | .nav-link{
161 | i{
162 | top: 4px;
163 | }
164 | }
165 | }
166 | .navbar-absolute{
167 | position: absolute;
168 | width: 100%;
169 | padding-top: 10px;
170 | z-index: 1029;
171 | }
172 | .navbar-transparent, [class*="bg"]{
173 | .navbar-brand{
174 | color: $white-color;
175 | @include opacity(.9);
176 |
177 | &:focus,
178 | &:hover{
179 | background-color: transparent;
180 | @include opacity(1);
181 | color: $white-color;
182 | }
183 | }
184 |
185 | .navbar-nav{
186 | .nav-item .nav-link:not(.btn){
187 | color: $white-color;
188 | border-color: $white-color;
189 | }
190 | .active .nav-link
191 | .active .nav-link:hover,
192 | .active .nav-link:focus,
193 | .nav-item .nav-link:hover,
194 | .nav-item .nav-link:focus{
195 | background-color: transparent;
196 | color: $white-color;
197 | @include opacity(1);
198 | }
199 | .nav .nav-item a.btn:hover{
200 | background-color: transparent;
201 | }
202 |
203 | .dropdown .nav-link .caret,
204 | .dropdown .nav-link:hover .caret,
205 | .dropdown .nav-link:focus .caret{
206 | border-bottom-color: $white-color;
207 | border-top-color: $white-color;
208 | }
209 |
210 | .open .nav-link,
211 | .open .nav-link:hover,
212 | .open .nav-link:focus {
213 | background-color: transparent;
214 | color: $default-color;
215 | @include opacity(1);
216 | }
217 | }
218 |
219 | .btn-default.btn-fill{
220 | color: $dark-gray;
221 | background-color: $white-color;
222 | @include opacity(.9);
223 | }
224 | .btn-default.btn-fill:hover,
225 | .btn-default.btn-fill:focus,
226 | .btn-default.btn-fill:active,
227 | .btn-default.btn-fill.active,
228 | .open .dropdown-toggle.btn-fill.btn-default{
229 | border-color: $white-color;
230 | @include opacity(1);
231 | }
232 |
233 | }
234 |
235 | .nav-open .nav .caret{
236 | border-bottom-color: $white-color;
237 | border-top-color: $white-color;
238 | }
239 |
240 | .navbar-default {
241 | .brand{
242 | color: $font-color !important;
243 | }
244 | .navbar-nav{
245 | .nav-item .nav-link:not(.btn){
246 | color: $dark-gray;
247 | }
248 |
249 | .active .nav-link,
250 | .active .nav-link:not(.btn):hover,
251 | .active .nav-link:not(.btn):focus,
252 | .nav-item .nav-link:not(.btn):hover,
253 | .nav-item .nav-link:not(.btn):focus {
254 | background-color: transparent;
255 | border-radius: 3px;
256 | color: $info-color;
257 | @include opacity(1);
258 | }
259 |
260 | .dropdown .nav-link:hover .caret,
261 | .dropdown .nav-link:focus .caret {
262 | border-bottom-color: $info-color;
263 | border-top-color: $info-color;
264 |
265 | }
266 |
267 | .open .nav-link,
268 | .open .nav-link:hover,
269 | .open .nav-link:focus{
270 | background-color: transparent;
271 | color: $info-color;
272 | }
273 |
274 | .navbar-toggler:hover,.navbar-toggler:focus {
275 | background-color: transparent;
276 | }
277 |
278 | }
279 |
280 | &:not(.navbar-transparent) .btn-default:hover{
281 | color: $info-color;
282 | border-color: $info-color;
283 | }
284 | &:not(.navbar-transparent) .btn-neutral,
285 | &:not(.navbar-transparent) .btn-neutral:hover,
286 | &:not(.navbar-transparent) .btn-neutral:active{
287 | color: $dark-gray;
288 | }
289 | }
290 |
291 | /* Navbar with icons */
292 |
293 | .navbar-icons{
294 | &.navbar .navbar-brand{
295 | margin-top: 12px;
296 | margin-bottom: 12px;
297 | }
298 | .navbar-nav{
299 | .nav-item .nav-link{
300 | text-align: center;
301 | padding: 10px;
302 | margin: 10px;
303 | }
304 |
305 | [class^="pe"] {
306 | font-size: 30px;
307 | position: relative;
308 | }
309 | p {
310 | margin: 3px 0 0;
311 | }
312 | }
313 | }
314 |
315 | .navbar-form{
316 | @include box-shadow(none);
317 | .form-control{
318 | @include light-form();
319 | height: 22px;
320 | font-size: $font-size-navbar;
321 | line-height: $line-height-general;
322 | color: $light-gray;
323 | }
324 | .navbar-transparent & .form-control,
325 | [class*="bg"] & .form-control{
326 | color: $white-color;
327 | border: $none;
328 | border-bottom: 1px solid rgba($white-color,.6);
329 | }
330 |
331 | }
332 |
333 | .navbar-toggler{
334 | margin-top: 19px;
335 | margin-bottom: 19px;
336 | border: $none;
337 |
338 | .icon-bar {
339 | background-color: $white-color;
340 | }
341 | .navbar-collapse,
342 | .navbar-form {
343 | border-color: transparent;
344 | }
345 |
346 | &.navbar-default .navbar-toggler:hover,
347 | &.navbar-default .navbar-toggler:focus {
348 | background-color: transparent;
349 | }
350 | }
351 |
352 | // stefan making edits
353 |
354 | .navbar-light .navbar-nav .nav-link:hover{
355 | color: $light-gray;
356 | }
357 |
358 | .red{
359 | color: #ff0000;
360 | }
361 | .collapse .navbar-text{
362 | line-height: 55px;
363 | }
364 |
365 | .navbar-default .navbar-brand{
366 | color: $default-color;
367 | }
368 | .navbar-default .navbar-brand:hover,
369 | .navbar-default .navbar-brand:focus{
370 | color: #5e5e5e;
371 | }
372 | .navbar-collapse.show{
373 | .navbar-nav{
374 | .nav-item{
375 | padding-right: 100px;
376 | }
377 | }
378 | }
379 | .nav-tabs-navigation{
380 | &:last-child{
381 | .nav-stacked{
382 | border-right: 1px solid #F1EAE0;
383 | font-size: 16px;
384 | font-weight: 600;
385 | padding: 20px 0;
386 | .nav-item{
387 | .nav-link{
388 | padding: 7px 25px;
389 | }
390 | }
391 | }
392 | border-bottom: 0 none;
393 | }
394 | }
395 |
396 |
397 | //menu bars
398 |
399 | .navbar-nav > li > .dropdown-menu,
400 | .dropdown .dropdown-menu{
401 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
402 | }
403 |
404 | .navbar-toggler{
405 | outline: none !important;
406 | cursor: pointer;
407 |
408 | .navbar & .navbar-toggler-bar{
409 | background: $font-color;
410 | }
411 |
412 | .navbar[class*="bg-"] & .navbar-toggler-bar,
413 | .navbar.navbar-transparent & .navbar-toggler-bar{
414 | background: #fff;
415 | }
416 |
417 | .navbar-toggler-bar{
418 | display: block;
419 | position: relative;
420 | width: 24px;
421 | height: 2px;
422 | border-radius: 1px;
423 | margin: 0 auto;
424 | }
425 | }
426 |
427 |
428 | .navbar-toggler .navbar-toggler-bar + .navbar-toggler-bar,
429 | .navbar-toggler .navbar-toggler-icon + .navbar-toggler-icon{
430 | margin-top: 4px;
431 | }
432 | .navbar .navbar-toggler{
433 | margin-top: 24px;
434 | }
435 | .navbar .navbar-burger{
436 | margin-top: 20px;
437 | }
438 | .navbar-toggler-icon{
439 | display: block;
440 | position: relative;
441 | width: 24px;
442 | height: 2px;
443 | border-radius: 1px;
444 | margin: 0 auto;
445 | background: gray;
446 | }
447 | .no-transition{
448 | -webkit-transition: none;
449 | -moz-transition: none;
450 | -o-transition: none;
451 | -ms-transition: none;
452 | transition: none;
453 | }
454 | #description-areas .nav-stacked .nav-link.active:before,
455 | #navtabs-row .nav-stacked .nav-link.active:before{
456 | border-right: 11px solid #F1EAE0;
457 | border-top: 11px solid transparent;
458 | border-bottom: 11px solid transparent;
459 | content: "";
460 | display: inline-block;
461 | position: absolute;
462 | right: 0;
463 | bottom: 7px;
464 | }
465 | #description-areas .nav-stacked .nav-link.active:after,
466 | #navtabs-row .nav-stacked .nav-link.active:after{
467 | border-right: 11px solid $white-color;
468 | border-top: 11px solid transparent;
469 | border-bottom: 11px solid transparent;
470 | content: "";
471 | display: inline-block;
472 | position: absolute;
473 | right: -1px;
474 | bottom: 7px;
475 | }
476 | #second-tabs{
477 | margin-left: 20px;
478 | }
479 |
480 | // navigation areas
481 |
482 | .scroll-area{
483 | max-height: 310px;
484 | overflow-y: scroll;
485 | list-style: outside none none;
486 | padding: 0px;
487 | }
488 |
489 | .burger-menu{
490 | .collapse{
491 | .navbar-nav{
492 | a{
493 | color: $black-color;
494 | }
495 | }
496 | }
497 | }
498 | .navbar-transparent{
499 | background: transparent !important;
500 | border-bottom: 1px solid transparent;
501 | box-shadow: none;
502 |
503 | .dropdown-menu .divider{
504 | background-color: rgba($white-color,.2);
505 | }
506 | }
507 | .section-navbars{
508 | #menu-dropdown{
509 | .navbar{
510 | .navbar-toggler{
511 | .navbar-toggler-icon{
512 | background: $white-color;
513 | }
514 | }
515 | }
516 | }
517 | }
518 | .nav-no-padding{
519 | padding-top: 0 !important;
520 | }
521 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_responsive.scss:
--------------------------------------------------------------------------------
1 | @media (min-width: 992px) {
2 | .navbar {
3 | min-height: 75px;
4 | }
5 | .navbar-nav.nav-mobile-menu{
6 | display: none;
7 | }
8 | .navbar-form {
9 | margin-top: 21px;
10 | margin-bottom: 21px;
11 | padding-left: 5px;
12 | padding-right: 5px;
13 | }
14 | .navbar-search-form {
15 | display: none;
16 | }
17 | .navbar-nav > li > .dropdown-menu,
18 | .dropdown .dropdown-menu {
19 | transform: translate3d(0px, -40px, 0px);
20 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
21 | }
22 | .navbar-nav > li.show > .dropdown-menu, .dropdown.show .dropdown-menu {
23 | transform: translate3d(0px, 0px, 0px);
24 | }
25 |
26 | .navbar-nav > li > .dropdown-menu:before {
27 | border-bottom: 11px solid $medium-pale-bg;
28 | border-left: 11px solid rgba(0, 0, 0, 0);
29 | border-right: 11px solid rgba(0, 0, 0, 0);
30 | content: "";
31 | display: inline-block;
32 | position: absolute;
33 | right: 12px;
34 | top: -11px;
35 | }
36 | .navbar-nav > li > .dropdown-menu:after {
37 | border-bottom: 11px solid $pale-bg;
38 | border-left: 11px solid rgba(0, 0, 0, 0);
39 | border-right: 11px solid rgba(0, 0, 0, 0);
40 | content: "";
41 | display: inline-block;
42 | position: absolute;
43 | right: 12px;
44 | top: -10px;
45 | }
46 |
47 | .navbar-nav.navbar-left > li > .dropdown-menu:before {
48 | right: auto;
49 | left: 12px;
50 | }
51 |
52 | .navbar-nav.navbar-left > li > .dropdown-menu:after {
53 | right: auto;
54 | left: 12px;
55 | }
56 |
57 | .navbar {
58 | .navbar-header {
59 | margin-left: 10px;
60 | }
61 | }
62 |
63 | .footer:not(.footer-big) {
64 | nav > ul {
65 | li:first-child {
66 | margin-left: 0;
67 | }
68 | }
69 | }
70 | .card {
71 | form {
72 | [class*="col-"] {
73 | padding: 6px;
74 | }
75 | [class*="col-"]:first-child {
76 | padding-left: 15px;
77 | }
78 | [class*="col-"]:last-child {
79 | padding-right: 15px;
80 | }
81 | }
82 | }
83 | }
84 |
85 | /* Changes for small display */
86 |
87 | @media (max-width: 991px) {
88 | .nav-open {
89 | .main-panel {
90 | position: absolute;
91 | left: 0;
92 | @include transform-translate-3d(-220px);
93 | @include transition (0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
94 | }
95 |
96 | .wrapper .sidebar {
97 | @include transform-translate-3d(10px);
98 | @include transition (0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
99 | }
100 | }
101 |
102 | .main-panel {
103 | width: 100%;
104 | max-height: 100vh;
105 | overflow: scroll;
106 | @include transform-translate-3d(0px);
107 | @include transition (0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
108 | }
109 |
110 | .navbar-transparent {
111 | padding-top: 15px;
112 | background-color: rgba(0, 0, 0, 0.45);
113 | }
114 | body {
115 | position: relative;
116 | }
117 | h6 {
118 | font-size: 1em;
119 | }
120 | .wrapper {
121 | @include transform-translate-x(0px);
122 | @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
123 | left: 0;
124 | background-color: white;
125 | }
126 | .navbar .container {
127 | left: 0;
128 | width: 100%;
129 | @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
130 | position: relative;
131 | }
132 | .navbar .navbar-collapse.collapse,
133 | .navbar .navbar-collapse.collapse.in,
134 | .navbar .navbar-collapse.collapsing {
135 | display: none !important;
136 | }
137 |
138 | .navbar-nav > li {
139 | float: none;
140 | position: relative;
141 | display: block;
142 | }
143 |
144 | .wrapper .sidebar {
145 | position: fixed;
146 | display: block;
147 | top: 0;
148 | height: 100%;
149 | width: 230px;
150 | right: 0;
151 | z-index: 1032;
152 | visibility: visible;
153 | background-color: #999;
154 | overflow-y: visible;
155 | border-top: none;
156 | text-align: left;
157 | padding-right: 0px;
158 | padding-left: 0;
159 | left: auto;
160 | @include transform-translate-3d(230px);
161 | @include transition (0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
162 |
163 | .sidebar-wrapper {
164 | position: relative;
165 | z-index: 3;
166 | overflow-y: scroll;
167 | height: 100%;
168 | box-shadow: inset 1px 0px 0px 0px $medium-gray;
169 | }
170 |
171 | .nav {
172 | margin-top: 0;
173 | padding: 10px $margin-base-vertical 0;
174 |
175 | > .nav-item {
176 |
177 | > .nav-link {
178 | margin: 0px 0px;
179 | color: $default-color;
180 | text-transform: uppercase;
181 | font-weight: 600;
182 | font-size: $font-size-small;
183 | line-height: $line-height-general;
184 | padding: 10px 0;
185 |
186 | &:hover,
187 | &.active {
188 | color: $default-states-color;
189 | }
190 |
191 | p,
192 | .notification,
193 | .caret {
194 | display: inline-block;
195 | }
196 |
197 | .caret {
198 | float: right;
199 | position: relative;
200 | top: 12px;
201 | }
202 |
203 | i {
204 | font-size: 18px;
205 | margin-right: 10px;
206 | line-height: 26px;
207 | }
208 | }
209 |
210 | &.active > .nav-link {
211 |
212 | &:before {
213 | border-right: none;
214 | border-left: 12px solid $medium-gray;
215 | border-top: 12px solid transparent;
216 | border-bottom: 12px solid transparent;
217 | right: auto;
218 | margin-left: -$margin-base-vertical;
219 | left: 0px;
220 | top: 10px;
221 | }
222 |
223 | &:after {
224 | border-right: none;
225 | border-left: 12px solid $bg-nude;
226 | border-top: 12px solid transparent;
227 | border-bottom: 12px solid transparent;
228 | right: auto;
229 | margin-left: -$margin-base-vertical;
230 | left: -1px;
231 | top: 10px;
232 | }
233 | }
234 |
235 | }
236 |
237 | }
238 |
239 | &::after {
240 | top: 0;
241 | left: 0;
242 | height: 100%;
243 | width: 100%;
244 | position: absolute;
245 | background-color: $bg-nude;
246 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%);
247 | display: block;
248 | content: "";
249 | z-index: 1;
250 | }
251 | &.has-image::after {
252 | @include black-filter(.8);
253 | }
254 |
255 | .logo {
256 | position: relative;
257 | z-index: 4;
258 | padding-top: 11px;
259 | padding-bottom: 11px;
260 | }
261 |
262 | .divider {
263 | height: 1px;
264 | margin: 10px 0;
265 | }
266 | }
267 | .nav-open .navbar-collapse {
268 | @include transform-translate-x(0px);
269 | }
270 | .nav-open .sidebar {
271 | transition: all .5s cubic-bezier(.685, .0473, .346, 1);
272 | // left: -230px;
273 | }
274 | .nav-open .main-panel {
275 | left: 0;
276 | @include transform-translate-x(-230px);
277 | }
278 | .navbar-toggle .icon-bar {
279 | display: block;
280 | position: relative;
281 | background: #fff;
282 | width: 24px;
283 | height: 2px;
284 | border-radius: 1px;
285 | margin: 0 auto;
286 | }
287 |
288 | .navbar-header .navbar-toggle {
289 | margin: 10px 15px 10px 0;
290 | width: 40px;
291 | height: 40px;
292 | }
293 | .bar1,
294 | .bar2,
295 | .bar3 {
296 | outline: 1px solid transparent;
297 | }
298 | .bar1 {
299 | top: 0px;
300 | @include bar-animation($topbar-back);
301 | }
302 | .bar2 {
303 | opacity: 1;
304 | }
305 | .bar3 {
306 | bottom: 0px;
307 | @include bar-animation($bottombar-back);
308 | }
309 | .toggled .bar1 {
310 | top: 6px;
311 | @include bar-animation($topbar-x);
312 | }
313 | .toggled .bar2 {
314 | opacity: 0;
315 | }
316 | .toggled .bar3 {
317 | bottom: 6px;
318 | @include bar-animation($bottombar-x);
319 | }
320 |
321 | @include topbar-x-rotation();
322 | @include topbar-back-rotation();
323 | @include bottombar-x-rotation();
324 | @include bottombar-back-rotation();
325 |
326 | @-webkit-keyframes fadeIn {
327 | 0% {
328 | opacity: 0;
329 | }
330 | 100% {
331 | opacity: 1;
332 | }
333 | }
334 | @-moz-keyframes fadeIn {
335 | 0% {
336 | opacity: 0;
337 | }
338 | 100% {
339 | opacity: 1;
340 | }
341 | }
342 | @keyframes fadeIn {
343 | 0% {
344 | opacity: 0;
345 | }
346 | 100% {
347 | opacity: 1;
348 | }
349 | }
350 |
351 | .dropdown-menu .divider {
352 | background-color: rgba(229, 229, 229, 0.15);
353 | }
354 |
355 | .navbar-nav {
356 | margin: 1px 0;
357 | }
358 |
359 | .dropdown-menu {
360 | display: none;
361 |
362 | & > li > a {
363 | &:hover,
364 | &:focus {
365 | background-color: transparent;
366 | }
367 | }
368 | }
369 |
370 | .navbar-fixed-top {
371 | -webkit-backface-visibility: hidden;
372 | }
373 | #bodyClick {
374 | height: 100%;
375 | width: 100%;
376 | position: fixed;
377 | opacity: 0;
378 | top: 0;
379 | left: auto;
380 | right: 230px;
381 | content: "";
382 | z-index: 9999;
383 | overflow-x: hidden;
384 | }
385 | .form-control + .form-control-feedback {
386 | margin-top: -8px;
387 | }
388 | .navbar-toggle:hover, .navbar-toggle:focus {
389 | background-color: transparent !important;
390 | }
391 | .btn.dropdown-toggle {
392 | margin-bottom: 0;
393 | }
394 | .media-post .author {
395 | width: 20%;
396 | float: none !important;
397 | display: block;
398 | margin: 0 auto 10px;
399 | }
400 | .media-post .media-body {
401 | width: 100%;
402 | }
403 |
404 | .navbar-collapse.collapse {
405 | height: 100% !important;
406 | }
407 | .navbar-collapse.collapse.in {
408 | display: block;
409 | }
410 | .navbar-header .collapse, .navbar-toggle {
411 | display: block !important;
412 | }
413 | .navbar-header {
414 | float: none;
415 | }
416 | .navbar-nav.nav-mobile-menu .dropdown,
417 | .navbar-nav.nav-mobile-menu .dropdown-menu {
418 | transition: none;
419 | &.show {
420 | transition: none;
421 | }
422 | }
423 | .navbar-nav.nav-mobile-menu .show .dropdown-menu {
424 | position: static;
425 | float: none;
426 | width: auto;
427 | margin-top: 0;
428 | background-color: transparent;
429 | border: 0;
430 | -webkit-box-shadow: none;
431 | box-shadow: none;
432 | .dropdown-item {
433 | margin-left: 20px;
434 | color: $white-color !important;
435 | opacity: 0.7;
436 | }
437 | }
438 |
439 | .main-panel > .content {
440 | padding-left: 0;
441 | padding-right: 0;
442 | }
443 | .nav .show > a {
444 | &,
445 | &:focus,
446 | &:hover {
447 | background-color: transparent;
448 | }
449 |
450 | }
451 |
452 | .footer .copyright {
453 | padding: 0px 15px;
454 | width: 100%;
455 | }
456 | }
457 |
458 | //overwrite table responsive for 768px screens
459 |
460 | @media (min-width: 992px) {
461 | .table-full-width {
462 | margin-left: -15px;
463 | margin-right: -15px;
464 | }
465 | .table-responsive {
466 | overflow: visible;
467 | }
468 |
469 | }
470 |
471 | @media (max-width: 991px) {
472 | .table-responsive {
473 | width: 100%;
474 | margin-bottom: 15px;
475 | border: 1px solid #dddddd;
476 | overflow-x: scroll;
477 | overflow-y: hidden;
478 | -ms-overflow-style: -ms-autohiding-scrollbar;
479 | -webkit-overflow-scrolling: touch;
480 | }
481 |
482 | }
483 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_sidebar-and-main-panel.scss:
--------------------------------------------------------------------------------
1 | .wrapper .sidebar {
2 | position: fixed;
3 | top: 0;
4 | bottom: 0;
5 | left: 0;
6 | z-index: 1;
7 | background-size: cover;
8 | background-position: center center;
9 | .sidebar-wrapper {
10 | position: relative;
11 | height: 100%;
12 | overflow-y: auto;
13 | overflow-x: hidden;
14 | width: 260px;
15 | z-index: 4;
16 | box-shadow: inset -1px 0px 0px 0px $medium-gray;
17 | }
18 | .sidebar-background {
19 | position: absolute;
20 | z-index: 1;
21 | height: 100%;
22 | width: 100%;
23 | display: block;
24 | top: 0;
25 | left: 0;
26 | background-size: cover;
27 | background-position: center center;
28 | }
29 |
30 | }
31 |
32 | .wrapper .sidebar {
33 | width: 260px;
34 | display: block;
35 | font-weight: 200;
36 |
37 | .logo {
38 | padding: 13px 0;
39 | margin: 0 20px;
40 |
41 | p {
42 | float: left;
43 | font-size: 20px;
44 | margin: 10px 10px;
45 | line-height: 20px;
46 | }
47 |
48 | .simple-text {
49 | padding: $padding-small-vertical $padding-zero;
50 | display: block;
51 | font-size: $font-size-base;
52 | text-align: center;
53 | font-weight: $font-weight-bold;
54 | line-height: 40px;
55 | text-align: left;
56 |
57 | .logo-img{
58 | width: 40px;
59 | display: inline-block;
60 | height: 40px;
61 | margin-left: 0px;
62 | margin-right: 10px;
63 | background: white;
64 | border-radius: 40px;
65 | text-align: center;
66 |
67 | img{
68 | max-width: 21px;
69 | }
70 | }
71 | }
72 | }
73 |
74 | .nav {
75 | //margin-top: 20px;
76 |
77 | .nav-item {
78 | width: 100%;
79 | .nav-link {
80 | margin: 10px 0px;
81 | padding-left: 25px;
82 | padding-right: 25px;
83 |
84 | opacity: .7;
85 | }
86 |
87 | &:hover > .nav-link {
88 | opacity: 1;
89 | }
90 |
91 | &.active > .nav-link {
92 | color: $primary-color;
93 | opacity: 1;
94 | }
95 | }
96 |
97 | p {
98 | margin: 0;
99 | line-height: 30px;
100 | font-size: 12px;
101 | font-weight: 600;
102 | text-transform: uppercase;
103 | }
104 |
105 | i {
106 | font-size: 24px;
107 | float: left;
108 | margin-right: 15px;
109 | line-height: 30px;
110 | width: 30px;
111 | text-align: center;
112 | }
113 | }
114 |
115 | &:after,
116 | &:before {
117 | display: block;
118 | content: "";
119 | position: absolute;
120 | width: 100%;
121 | height: 100%;
122 | top: 0;
123 | left: 0;
124 | z-index: 2;
125 | background: $white-background-color;
126 | }
127 |
128 | &,
129 | &[data-background-color="white"] {
130 | @include sidebar-background-color($white-background-color, $default-color);
131 | }
132 | &[data-background-color="black"] {
133 | @include sidebar-background-color($black-background-color, $white-color);
134 | }
135 | &[data-background-color="darkblue"] {
136 | @include sidebar-background-color($darkblue-background-color, $white-color);
137 | }
138 |
139 | &[data-active-color="primary"] {
140 | @include sidebar-active-color($primary-color);
141 | }
142 | &[data-active-color="info"] {
143 | @include sidebar-active-color($info-color);
144 | }
145 | &[data-active-color="success"] {
146 | @include sidebar-active-color($success-color);
147 | }
148 | &[data-active-color="warning"] {
149 | @include sidebar-active-color($warning-color);
150 | }
151 | &[data-active-color="danger"] {
152 | @include sidebar-active-color($danger-color);
153 | }
154 |
155 | }
156 |
157 | .main-panel {
158 | background-color: $bg-nude;
159 | position: relative;
160 | z-index: 2;
161 | float: right;
162 | width: $sidebar-width;
163 | min-height: 100%;
164 | overflow: auto;
165 |
166 | > .content {
167 | padding: 30px 15px;
168 | min-height: calc(100% - 123px);
169 | }
170 |
171 | > .footer {
172 | border-top: 1px solid rgba(0, 0, 0, 0.1);
173 | }
174 |
175 | .navbar {
176 | margin-bottom: 0;
177 | }
178 | }
179 |
180 | .wrapper .sidebar,
181 | .main-panel {
182 | -webkit-transition-property: top, bottom;
183 | transition-property: top, bottom;
184 | -webkit-transition-duration: .2s, .2s;
185 | transition-duration: .2s, .2s;
186 | -webkit-transition-timing-function: linear, linear;
187 | transition-timing-function: linear, linear;
188 | -webkit-overflow-scrolling: touch;
189 | }
190 |
191 | .wrapper .sidebar {
192 | max-height: 100%;
193 | height: 100%;
194 | overflow: hidden;
195 | overflow-y: hidden;
196 | }
197 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_tables.scss:
--------------------------------------------------------------------------------
1 | .table {
2 | thead,
3 | tbody,
4 | tfoot {
5 | tr > th,
6 | tr > td {
7 | border-top: 1px solid $table-line-color;
8 | }
9 | }
10 | thead th {
11 | border-bottom: 1px solid $table-line-color;
12 | border-top: 0;
13 | }
14 | > thead > tr > th {
15 | border-bottom-width: 0;
16 | font-size: $font-size-h5;
17 | font-weight: $font-weight-light;
18 | }
19 |
20 | .radio,
21 | .checkbox {
22 | margin-top: 0;
23 | margin-bottom: 22px;
24 | padding: 0;
25 | width: 15px;
26 | }
27 | > thead > tr > th,
28 | > tbody > tr > th,
29 | > tfoot > tr > th,
30 | > thead > tr > td,
31 | > tbody > tr > td,
32 | > tfoot > tr > td {
33 | padding: 12px;
34 | vertical-align: middle;
35 | }
36 |
37 | .th-description {
38 | max-width: 150px;
39 | }
40 | .td-price {
41 | font-size: 26px;
42 | font-weight: $font-weight-light;
43 | margin-top: 5px;
44 | text-align: right;
45 | }
46 | .td-total {
47 | font-weight: $font-weight-bold;
48 | font-size: $font-size-h5;
49 | padding-top: 20px;
50 | text-align: right;
51 | }
52 |
53 | .td-actions .btn {
54 |
55 | &.btn-sm,
56 | &.btn-xs {
57 | padding-left: 3px;
58 | padding-right: 3px;
59 | }
60 | }
61 |
62 | > tbody > tr {
63 | position: relative;
64 | }
65 | }
66 |
67 | .table-striped {
68 | tbody > tr:nth-of-type(2n+1) {
69 | background-color: #fff;
70 | }
71 | tbody > tr:nth-of-type(2n) {
72 | background-color: $pale-bg;
73 | }
74 | > thead > tr > th,
75 | > tbody > tr > th,
76 | > tfoot > tr > th,
77 | > thead > tr > td,
78 | > tbody > tr > td,
79 | > tfoot > tr > td {
80 | padding: 15px 8px;
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_typography.scss:
--------------------------------------------------------------------------------
1 | h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td {
2 | -moz-osx-font-smoothing: grayscale;
3 | -webkit-font-smoothing: antialiased;
4 | font-family: 'Muli', "Helvetica", Arial, sans-serif;
5 | }
6 |
7 | h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
8 | font-weight: $font-weight-normal;
9 | margin: $margin-large-vertical 0 $margin-base-vertical;
10 | }
11 |
12 | h1, .h1 {
13 | font-size: $font-size-h1;
14 | }
15 |
16 | h2, .h2 {
17 | font-size: $font-size-h2;
18 | }
19 |
20 | h3, .h3 {
21 | font-size: $font-size-h3;
22 | line-height: 1.4;
23 | margin: 20px 0 10px;
24 | }
25 |
26 | h4, .h4 {
27 | font-size: $font-size-h4;
28 | font-weight: $font-weight-bold;
29 | line-height: 1.2em;
30 | }
31 |
32 | h5, .h5 {
33 | font-size: $font-size-h5;
34 | font-weight: $font-weight-normal;
35 | line-height: 1.4em;
36 | margin-bottom: 15px;
37 | }
38 |
39 | h6, .h6 {
40 | font-size: $font-size-h6;
41 | font-weight: $font-weight-bold;
42 | text-transform: uppercase;
43 | }
44 |
45 | p {
46 | font-size: $font-paragraph;
47 | line-height: $line-height-general;
48 | }
49 |
50 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
51 | color: $dark-gray;
52 | font-weight: $font-weight-light;
53 | line-height: $line-height-general;
54 | }
55 |
56 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small {
57 | font-size: 60%;
58 | }
59 |
60 | .title-uppercase {
61 | text-transform: uppercase;
62 | }
63 |
64 | blockquote {
65 | font-style: italic;
66 | }
67 |
68 | blockquote small {
69 | font-style: normal;
70 | }
71 |
72 | .text-muted {
73 | color: $medium-gray;
74 | }
75 |
76 | .text-primary, .text-primary:hover {
77 | color: $primary-states-color;
78 | }
79 |
80 | .text-info, .text-info:hover {
81 | color: $info-states-color;
82 | }
83 |
84 | .text-success, .text-success:hover {
85 | color: $success-states-color;
86 | }
87 |
88 | .text-warning, .text-warning:hover {
89 | color: $warning-states-color;
90 | }
91 |
92 | .text-danger, .text-danger:hover {
93 | color: $danger-states-color;
94 | }
95 |
96 | .glyphicon {
97 | line-height: 1;
98 | }
99 |
100 | strong {
101 | color: $default-states-color;
102 | }
103 |
104 | .icon-primary {
105 | color: $primary-color;
106 | }
107 |
108 | .icon-info {
109 | color: $info-color;
110 | }
111 |
112 | .icon-success {
113 | color: $success-color;
114 | }
115 |
116 | .icon-warning {
117 | color: $warning-color;
118 | }
119 |
120 | .icon-danger {
121 | color: $danger-color;
122 | }
123 |
124 | .chart-legend {
125 | .text-primary, .text-primary:hover {
126 | color: $primary-color;
127 | }
128 | .text-info, .text-info:hover {
129 | color: $info-color;
130 | }
131 | .text-success, .text-success:hover {
132 | color: $success-color;
133 | }
134 | .text-warning, .text-warning:hover {
135 | color: $warning-color;
136 | }
137 | .text-danger, .text-danger:hover {
138 | color: $danger-color;
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/_variables.scss:
--------------------------------------------------------------------------------
1 | $font-color: #66615b !default;
2 | $fill-font-color: rgba(255, 255, 255, 0.7);
3 |
4 | $none: 0 !default;
5 | $border-thin: 1px !default;
6 | $border-thick: 2px !default;
7 |
8 | $white-color: #FFFFFF !default;
9 | $white-bg: #FFFFFF !default;
10 |
11 | $smoke-bg: #F5F5F5 !default;
12 | $pale-bg: #FFFCF5 !default;
13 | $medium-pale-bg: #F1EAE0 !default;
14 |
15 | $table-line-color: #CCC5B9 !default;
16 | $muted-color: #a49e93 !default;
17 |
18 | $black-bg: rgba(30, 30, 30, .97) !default;
19 |
20 | $black-color: #333333 !default;
21 | $black-hr: #444444 !default;
22 |
23 | $white-background-color: #FFFFFF !default;
24 | $black-background-color: #212120 !default;
25 | $darkblue-background-color: #35495E !default; // this is the dark blue color from Vue.js branding
26 |
27 | $light-gray: #E3E3E3 !default;
28 | $medium-gray: #DDDDDD !default;
29 | $dark-gray: #9A9A9A !default;
30 |
31 | $gray-input-bg: #fffcf5 !default;
32 | $danger-input-bg: #FFC0A4 !default;
33 | $success-input-bg: #ABF3CB !default;
34 | $other-medium-gray: #A49E93 !default;
35 | $transparent-bg: transparent !default;
36 |
37 | $default-color: #66615B !default;
38 | $default-bg: #66615B !default;
39 | $default-states-color: #403D39 !default;
40 |
41 | $primary-color: #7A9E9F !default;
42 | $primary-bg: #7A9E9F !default;
43 | $primary-states-color: #427C89 !default;
44 |
45 | $success-color: #41B883 !default; // this is the green color from Vue.js branding
46 | $success-bg: #41B883 !default;
47 | $success-states-color: #229863 !default;
48 |
49 | $info-color: #68B3C8 !default;
50 | $info-bg: #68B3C8 !default;
51 | $info-states-color: #3091B2 !default;
52 |
53 | $warning-color: #F3BB45 !default;
54 | $warning-bg: #F3BB45 !default;
55 | $warning-states-color: #BB992F !default;
56 |
57 | $danger-color: #EB5E28 !default;
58 | $danger-bg: #EB5E28 !default;
59 | $danger-states-color: #B33C12 !default;
60 |
61 | $link-disabled-color: #666666 !default;
62 |
63 | /* light colors - used for select dropdown */
64 |
65 | $light-blue: rgba($primary-color, .2);
66 | $light-azure: rgba($info-color, .2);
67 | $light-green: rgba($success-color, .2);
68 | $light-orange: rgba($warning-color, .2);
69 | $light-red: rgba($danger-color, .2);
70 |
71 | //== Components
72 | //
73 | $padding-base-vertical: 7px !default;
74 | $padding-base-horizontal: 18px !default;
75 |
76 | $padding-round-vertical: 9px !default;
77 | $padding-round-horizontal: 18px !default;
78 |
79 | $padding-simple-vertical: 10px !default;
80 | $padding-simple-horizontal: 18px !default;
81 |
82 | $padding-large-vertical: 11px !default;
83 | $padding-large-horizontal: 30px !default;
84 |
85 | $padding-small-vertical: 4px !default;
86 | $padding-small-horizontal: 10px !default;
87 |
88 | $padding-xs-vertical: 2px !default;
89 | $padding-xs-horizontal: 5px !default;
90 |
91 | $padding-label-vertical: 2px !default;
92 | $padding-label-horizontal: 12px !default;
93 |
94 | // padding for links inside dropdown menu
95 | $padding-dropdown-vertical: 10px !default;
96 | $padding-dropdown-horizontal: 15px !default;
97 |
98 | $margin-large-vertical: 30px !default;
99 | $margin-base-vertical: 15px !default;
100 |
101 | // border radius for buttons
102 | $border-radius-btn-small: 26px !default;
103 | $border-radius-btn-base: 20px !default;
104 | $border-radius-btn-large: 50px !default;
105 |
106 | // Cristina: am schimbat aici si s-au modificat inputurile
107 | $margin-bottom: 0 0 10px 0 !default;
108 | $border-radius-small: 3px !default;
109 | $border-radius-base: 4px !default;
110 | $border-radius-large: 6px !default;
111 | $border-radius-extreme: 6px !default;
112 |
113 | $border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
114 | $border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
115 |
116 | $btn-round-radius: 30px !default;
117 |
118 | $height-base: 40px !default;
119 |
120 | $font-size-base: 14px !default;
121 | $font-size-xs: 12px !default;
122 | $font-size-small: 12px !default;
123 | $font-size-medium: 16px !default;
124 | $font-size-large: 18px !default;
125 | $font-size-large-navbar: 20px !default;
126 |
127 | $font-size-h1: 3.2em !default;
128 | $font-size-h2: 2.6em !default;
129 | $font-size-h3: 1.825em !default;
130 | $font-size-h4: 1.5em !default;
131 | $font-size-h5: 1.25em !default;
132 | $font-size-h6: 0.9em !default;
133 | $font-paragraph: 16px !default;
134 | $font-size-navbar: 16px !default;
135 | $font-size-small: 12px !default;
136 |
137 | $font-weight-light: 300 !default;
138 | $font-weight-normal: 400 !default;
139 | $font-weight-semi: 500 !default;
140 | $font-weight-bold: 600 !default;
141 |
142 | $line-height-small: 20px !default;
143 | $line-height-general: 1.4em !default;
144 | $line-height: 36px !default;
145 | $line-height-lg: 54px !default;
146 |
147 | $border-radius-top: 10px 10px 0 0 !default;
148 | $border-radius-bottom: 0 0 10px 10px !default;
149 |
150 | $dropdown-shadow: 0 2px rgba(17, 16, 15, 0.1), 0 2px 10px rgba(17, 16, 15, 0.1);
151 |
152 | $general-transition-time: 300ms !default;
153 |
154 | $slow-transition-time: 300ms !default;
155 | $dropdown-coordinates: 29px -50px !default;
156 |
157 | $fast-transition-time: 150ms !default;
158 | $select-coordinates: 50% -40px !default;
159 |
160 | $transition-linear: linear !default;
161 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
162 | $transition-ease: ease 0s;
163 |
164 | $navbar-padding-a: 10px 15px;
165 | $navbar-margin-a: 15px 0px;
166 |
167 | $padding-social-a: 10px 5px;
168 |
169 | $navbar-margin-a-btn: 15px 3px;
170 | $navbar-margin-a-btn-round: 16px 3px;
171 |
172 | $navbar-padding-brand: 20px 15px;
173 | $navbar-margin-brand: 5px 0px;
174 |
175 | $navbar-margin-brand-icons: 12px auto;
176 |
177 | $navbar-margin-btn: 15px 3px;
178 |
179 | $height-icon: 64px !default;
180 | $width-icon: 64px !default;
181 | $padding-icon: 12px !default;
182 | $border-radius-icon: 15px !default;
183 |
184 | $white-navbar: rgba(#FFFFFF, .96);
185 | $blue-navbar: rgba(#34ACDC, .98);
186 | $azure-navbar: rgba(#5BCAFF, .98);
187 | $green-navbar: rgba(#4CD964, .98);
188 | $orange-navbar: rgba(#FF9500, .98);
189 | $red-navbar: rgba(#FF4C40, .98);
190 |
191 | $bg-nude: #f4f3ef !default;
192 | $bg-primary: #8ECFD5 !default;
193 | $bg-info: #7CE4FE !default;
194 | $bg-success: #8EF3C5 !default;
195 | $bg-warning: #FFE28C !default;
196 | $bg-danger: #FF8F5E !default;
197 |
198 | $topbar-x: topbar-x !default;
199 | $topbar-back: topbar-back !default;
200 | $bottombar-x: bottombar-x !default;
201 | $bottombar-back: bottombar-back !default;
202 |
203 | $transition-linear: linear !default;
204 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
205 | $transition-ease: ease 0s;
206 | $transition-ease-in: ease-in !default;
207 | $transition-ease-out: ease-out !default;
208 |
209 | $general-transition-time: 300ms !default;
210 |
211 | $slow-transition-time: 370ms !default;
212 | $dropdown-coordinates: 29px -50px !default;
213 |
214 | $fast-transition-time: 150ms !default;
215 |
216 | $ultra-fast-transition-time: 100ms !default;
217 |
218 | $select-coordinates: 50% -40px !default;
219 |
220 | $padding-zero: 0px !default;
221 |
222 | $sidebar-width: calc(100% - 260px) !default;
223 | $medium-dark-gray: #AAAAAA !default;
224 |
225 | //variables used in cards
226 | $card-black-color: #252422 !default;
227 | $card-muted-color: #ccc5b9 !default;
228 |
229 | //variables used for sidebar
230 | $sidebar-background-dark-blue: #506367;
231 |
232 | $sidebar-background-blue: #b8d8d8 !default;
233 | $sidebar-font-blue: #506568 !default;
234 | $sidebar-subtitle-blue: #7a9e9f !default;
235 |
236 | $sidebar-background-green: #d5e5a3 !default;
237 | $sidebar-font-green: #60773d !default;
238 | $sidebar-subtitle-green: #92ac56 !default;
239 |
240 | $sidebar-background-yellow: #ffe28c !default;
241 | $sidebar-font-yellow: #b25825 !default;
242 | $sidebar-subtitle-yellow: #d88715 !default;
243 |
244 | $sidebar-background-brown: #d6c1ab !default;
245 | $sidebar-font-brown: #75442e !default;
246 | $sidebar-subtitle-brown: #a47e65 !default;
247 |
248 | $sidebar-background-purple: #baa9ba !default;
249 | $sidebar-font-purple: #3a283d !default;
250 | $sidebar-subtitle-purple: #5a283d !default;
251 |
252 | $sidebar-background-orange: #ff8f5e !default;
253 | $sidebar-font-orange: #772510 !default;
254 | $sidebar-subtitle-orange: #e95e37 !default;
255 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_buttons.scss:
--------------------------------------------------------------------------------
1 | // Mixin for generating new styles
2 | @mixin btn-styles($btn-color, $btn-states-color) {
3 | background-color: $btn-color;
4 | border-color: $btn-color;
5 | color: $white-color;
6 | @include opacity(1);
7 |
8 | &:hover,
9 | &:focus,
10 | &:active,
11 | &.active,
12 | .show > &.dropdown-toggle{
13 | background-color: $btn-states-color;
14 | color: $white-color;
15 | border-color: $btn-states-color;
16 | }
17 |
18 | .caret{
19 | border-top-color: $white-color;
20 | }
21 |
22 | &.btn-link {
23 | color: $btn-color;
24 |
25 | &:hover,
26 | &:focus,
27 | &:active,
28 | &.active,
29 | .open > &.dropdown-toggle{
30 | background-color: $transparent-bg;
31 | color: $btn-states-color;
32 | }
33 |
34 | .caret{
35 | border-top-color: $btn-color;
36 | }
37 | }
38 |
39 | .caret{
40 | border-top-color: $white-color;
41 | }
42 | }
43 |
44 | @mixin btn-outline-styles($btn-color, $btn-states-color){
45 | border-color: $btn-color;
46 | color: $btn-color;
47 | @include opacity(1);
48 |
49 | &:hover,
50 | &:focus,
51 | &:active,
52 | &.active,
53 | .open > &.dropdown-toggle {
54 | background-color: $btn-color;
55 | color: $fill-font-color;
56 | border-color: $btn-color;
57 | .caret{
58 | border-top-color: $fill-font-color;
59 | }
60 | }
61 |
62 | .caret{
63 | border-top-color: $white-color;
64 | }
65 |
66 | &.disabled,
67 | &:disabled,
68 | &[disabled],
69 | fieldset[disabled] & {
70 | &,
71 | &:hover,
72 | &:focus,
73 | &.focus,
74 | &:active,
75 | &.active {
76 | background-color: $transparent-bg;
77 | border-color: $btn-color;
78 | }
79 | }
80 | }
81 |
82 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $line-height){
83 | font-size: $font-size;
84 | padding: $padding-vertical $padding-horizontal;
85 |
86 | &.btn-simple{
87 | padding: $padding-vertical + 2 $padding-horizontal;
88 | }
89 |
90 | }
91 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_cards.scss:
--------------------------------------------------------------------------------
1 | @mixin filter($color) {
2 | @if $color == #FFFFFF {
3 | background-color: rgba($color, .91);
4 | } @else {
5 | background-color: rgba($color, .69);
6 | }
7 | }
8 |
9 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_chartist.scss:
--------------------------------------------------------------------------------
1 | // Scales for responsive SVG containers
2 | $ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
3 | $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
4 |
5 | // Class names to be used when generating CSS
6 | $ct-class-chart: ct-chart !default;
7 | $ct-class-chart-line: ct-chart-line !default;
8 | $ct-class-chart-bar: ct-chart-bar !default;
9 | $ct-class-horizontal-bars: ct-horizontal-bars !default;
10 | $ct-class-chart-pie: ct-chart-pie !default;
11 | $ct-class-chart-donut: ct-chart-donut !default;
12 | $ct-class-label: ct-label !default;
13 | $ct-class-series: ct-series !default;
14 | $ct-class-line: ct-line !default;
15 | $ct-class-point: ct-point !default;
16 | $ct-class-area: ct-area !default;
17 | $ct-class-bar: ct-bar !default;
18 | $ct-class-slice-pie: ct-slice-pie !default;
19 | $ct-class-slice-donut: ct-slice-donut !default;
20 | $ct-class-grid: ct-grid !default;
21 | $ct-class-vertical: ct-vertical !default;
22 | $ct-class-horizontal: ct-horizontal !default;
23 | $ct-class-start: ct-start !default;
24 | $ct-class-end: ct-end !default;
25 |
26 | // Container ratio
27 | $ct-container-ratio: (1/1.618) !default;
28 |
29 | // Text styles for labels
30 | $ct-text-color: rgba(0, 0, 0, 0.4) !default;
31 | $ct-text-size: 0.9em !default;
32 | $ct-text-align: flex-start !default;
33 | $ct-text-justify: flex-start !default;
34 | $ct-text-line-height: 1;
35 |
36 | // Grid styles
37 | $ct-grid-color: rgba(0, 0, 0, 0.2) !default;
38 | $ct-grid-dasharray: 2px !default;
39 | $ct-grid-width: 1px !default;
40 |
41 | // Line chart properties
42 | $ct-line-width: 4px !default;
43 | $ct-line-dasharray: false !default;
44 | $ct-point-size: 10px !default;
45 | // Line chart point, can be either round or square
46 | $ct-point-shape: round !default;
47 | // Area fill transparency between 0 and 1
48 | $ct-area-opacity: 0.7 !default;
49 |
50 | // Bar chart bar width
51 | $ct-bar-width: 10px !default;
52 |
53 | // Donut width (If donut width is to big it can cause issues where the shape gets distorted)
54 | $ct-donut-width: 60px !default;
55 |
56 | // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
57 | // should set this property to false
58 | $ct-include-classes: true !default;
59 |
60 | // If this is set to true the CSS will contain colored series. You can extend or change the color with the
61 | // properties below
62 | $ct-include-colored-series: $ct-include-classes !default;
63 |
64 | // If set to true this will include all responsive container variations using the scales defined at the top of the script
65 | $ct-include-alternative-responsive-containers: $ct-include-classes !default;
66 |
67 | // Series names and colors. This can be extended or customized as desired. Just add more series and colors.
68 | $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
69 | $ct-series-colors: (
70 | $info-color,
71 | $warning-color,
72 | $danger-color,
73 | $success-color,
74 | $primary-color,
75 | rgba($info-color, .8),
76 | rgba($success-color, .8),
77 | rgba($warning-color, .8),
78 | rgba($danger-color, .8),
79 | rgba($primary-color, .8),
80 | rgba($info-color, .6),
81 | rgba($success-color, .6),
82 | rgba($warning-color, .6),
83 | rgba($danger-color, .6),
84 | rgba($primary-color, .6)
85 | ) !default;
86 |
87 | // Paper Kit Colors
88 |
89 | .ct-blue {
90 | stroke: $primary-color !important;
91 | }
92 |
93 | .ct-azure {
94 | stroke: $info-color !important;
95 | }
96 |
97 | .ct-green {
98 | stroke: $success-color !important;
99 | }
100 |
101 | .ct-orange {
102 | stroke: $warning-color !important;
103 | }
104 |
105 | .ct-red {
106 | stroke: $danger-color !important;
107 | }
108 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_icons.scss:
--------------------------------------------------------------------------------
1 | @mixin icon-background($icon-url) {
2 | background-image: url($icon-url);
3 |
4 | }
5 |
6 | @mixin icon-shape($size, $padding, $border-radius) {
7 | height: $size;
8 | width: $size;
9 | padding: $padding;
10 | border-radius: $border-radius;
11 | display: inline-table;
12 |
13 | }
14 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_inputs.scss:
--------------------------------------------------------------------------------
1 | @mixin input-size($padding-vertical, $padding-horizontal, $height) {
2 | padding: $padding-vertical $padding-horizontal;
3 | height: $height;
4 | }
5 |
6 | @mixin placeholder($color, $opacity) {
7 | color: $color;
8 | @include opacity(1);
9 | }
10 |
11 | @mixin light-form() {
12 | border-radius: 0;
13 | border: 0;
14 | padding: 0;
15 | background-color: transparent;
16 |
17 | }
18 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_labels.scss:
--------------------------------------------------------------------------------
1 | @mixin label-style() {
2 | padding: $padding-label-vertical $padding-label-horizontal;
3 | border: 1px solid $default-color;
4 | border-radius: $border-radius-small;
5 | color: $default-color;
6 | font-weight: $font-weight-semi;
7 | font-size: $font-size-small;
8 | text-transform: uppercase;
9 | display: inline-block;
10 | vertical-align: middle;
11 | }
12 |
13 | @mixin label-color($color) {
14 | border-color: $color;
15 | color: $color;
16 | }
17 |
18 | @mixin label-color-fill($color) {
19 | border-color: $color;
20 | color: $white-color;
21 | background-color: $color;
22 | }
23 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_navbars.scss:
--------------------------------------------------------------------------------
1 | @mixin navbar-color($color) {
2 | background-color: $color;
3 | }
4 |
5 | @mixin center-item() {
6 | left: 0;
7 | right: 0;
8 | margin-right: auto;
9 | margin-left: auto;
10 | position: absolute;
11 | }
12 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_sidebar.scss:
--------------------------------------------------------------------------------
1 | @mixin sidebar-background-color($background-color, $font-color) {
2 | &:after,
3 | &:before {
4 | background-color: $background-color;
5 | }
6 |
7 | #style-3::-webkit-scrollbar-track
8 | {
9 | -webkit-box-shadow: inset 0 0 6px $background-color;
10 | background-color: $background-color;
11 | }
12 |
13 | #style-3::-webkit-scrollbar
14 | {
15 | width: 6px;
16 | background-color: $font-color;
17 | }
18 |
19 | #style-3::-webkit-scrollbar-thumb
20 | {
21 | background-color: $background-color;
22 | }
23 |
24 |
25 | .logo {
26 | border-bottom: 1px solid rgba($font-color, .3);
27 |
28 | p {
29 | color: $font-color;
30 | }
31 |
32 | .simple-text {
33 | color: $font-color;
34 | }
35 | }
36 |
37 | .nav {
38 | .nav-item:not(.active) {
39 | > .nav-link {
40 | color: $font-color;
41 | }
42 | }
43 | .divider {
44 | background-color: rgba($font-color, .2);
45 | }
46 |
47 | }
48 |
49 | }
50 |
51 | @mixin sidebar-active-color($font-color) {
52 | .nav {
53 | .nav-item {
54 | &.active > .nav-link {
55 | color: $font-color;
56 | opacity: 1;
57 | }
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_tabs.scss:
--------------------------------------------------------------------------------
1 | @mixin pill-style($color) {
2 | border: 1px solid $color;
3 | color: $color;
4 | }
5 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_transparency.scss:
--------------------------------------------------------------------------------
1 | // Opacity
2 |
3 | @mixin opacity($opacity) {
4 | opacity: $opacity;
5 | // IE8 filter
6 | $opacity-ie: ($opacity * 100);
7 | filter: #{alpha(opacity=$opacity-ie)};
8 | }
9 |
10 | @mixin black-filter($opacity) {
11 | top: 0;
12 | left: 0;
13 | height: 100%;
14 | width: 100%;
15 | position: absolute;
16 | background-color: rgba(17, 17, 17, $opacity);
17 | display: block;
18 | content: "";
19 | z-index: 1;
20 | }
21 |
--------------------------------------------------------------------------------
/src/assets/sass/paper/mixins/_vendor-prefixes.scss:
--------------------------------------------------------------------------------
1 | // User select
2 | // For selecting text on the page
3 |
4 | @mixin user-select($select) {
5 | -webkit-user-select: $select;
6 | -moz-user-select: $select;
7 | -ms-user-select: $select; // IE10+
8 | user-select: $select;
9 | }
10 |
11 | @mixin box-shadow($shadow...) {
12 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
13 | box-shadow: $shadow;
14 | }
15 |
16 | // Box sizing
17 | @mixin box-sizing($boxmodel) {
18 | -webkit-box-sizing: $boxmodel;
19 | -moz-box-sizing: $boxmodel;
20 | box-sizing: $boxmodel;
21 | }
22 |
23 | @mixin transition($time, $type) {
24 | -webkit-transition: all $time $type;
25 | -moz-transition: all $time $type;
26 | -o-transition: all $time $type;
27 | -ms-transition: all $time $type;
28 | transition: all $time $type;
29 | }
30 |
31 | @mixin transition-none() {
32 | -webkit-transition: none;
33 | -moz-transition: none;
34 | -o-transition: none;
35 | -ms-transition: none;
36 | transition: none;
37 | }
38 |
39 | @mixin transform-scale($value) {
40 | -webkit-transform: scale($value);
41 | -moz-transform: scale($value);
42 | -o-transform: scale($value);
43 | -ms-transform: scale($value);
44 | transform: scale($value);
45 | }
46 |
47 | @mixin transform-translate-x($value) {
48 | -webkit-transform: translate3d($value, 0, 0);
49 | -moz-transform: translate3d($value, 0, 0);
50 | -o-transform: translate3d($value, 0, 0);
51 | -ms-transform: translate3d($value, 0, 0);
52 | transform: translate3d($value, 0, 0);
53 | }
54 |
55 | @mixin transform-translate-3d($value){
56 | -webkit-transform: translate3d($value, 0, 0);
57 | -moz-transform: translate3d($value, 0, 0);
58 | -o-transform: translate3d($value, 0, 0);
59 | -ms-transform: translate3d($value, 0, 0);
60 | transform: translate3d($value, 0, 0) !important;
61 | }
62 |
63 | @mixin transform-origin($coordinates) {
64 | -webkit-transform-origin: $coordinates;
65 | -moz-transform-origin: $coordinates;
66 | -o-transform-origin: $coordinates;
67 | -ms-transform-origin: $coordinates;
68 | transform-origin: $coordinates;
69 | }
70 |
71 | @mixin icon-gradient($top-color, $bottom-color) {
72 | background: $top-color;
73 | background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%);
74 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top-color), color-stop(100%, $bottom-color));
75 | background: -webkit-linear-gradient(top, $top-color 0%, $bottom-color 100%);
76 | background: -o-linear-gradient(top, $top-color 0%, $bottom-color 100%);
77 | background: -ms-linear-gradient(top, $top-color 0%, $bottom-color 100%);
78 | background: linear-gradient(to bottom, $top-color 0%, $bottom-color 100%);
79 | background-size: 150% 150%;
80 | }
81 |
82 | @mixin radial-gradient($extern-color, $center-color) {
83 | background: $extern-color;
84 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
85 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $center-color), color-stop(100%, $extern-color)); /* Chrome,Safari4+ */
86 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* Chrome10+,Safari5.1+ */
87 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* Opera 12+ */
88 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* IE10+ */
89 | background: radial-gradient(ellipse at center, $center-color 0%, $extern-color 100%); /* W3C */
90 | background-size: 550% 450%;
91 | }
92 |
93 | @mixin vertical-align {
94 | position: relative;
95 | top: 50%;
96 | -webkit-transform: translateY(-50%);
97 | -ms-transform: translateY(-50%);
98 | transform: translateY(-50%);
99 | }
100 |
101 | @mixin rotate-180() {
102 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
103 | -webkit-transform: rotate(180deg);
104 | -ms-transform: rotate(180deg);
105 | transform: rotate(180deg);
106 | }
107 |
108 | @mixin bar-animation($type) {
109 | -webkit-animation: $type 500ms linear 0s;
110 | -moz-animation: $type 500ms linear 0s;
111 | animation: $type 500ms 0s;
112 | -webkit-animation-fill-mode: forwards;
113 | -moz-animation-fill-mode: forwards;
114 | animation-fill-mode: forwards;
115 | }
116 |
117 | @mixin topbar-x-rotation() {
118 | @keyframes topbar-x {
119 | 0% {
120 | top: 0px;
121 | transform: rotate(0deg);
122 | }
123 | 45% {
124 | top: 6px;
125 | transform: rotate(145deg);
126 | }
127 | 75% {
128 | transform: rotate(130deg);
129 | }
130 | 100% {
131 | transform: rotate(135deg);
132 | }
133 | }
134 | @-webkit-keyframes topbar-x {
135 | 0% {
136 | top: 0px;
137 | -webkit-transform: rotate(0deg);
138 | }
139 | 45% {
140 | top: 6px;
141 | -webkit-transform: rotate(145deg);
142 | }
143 | 75% {
144 | -webkit-transform: rotate(130deg);
145 | }
146 | 100% {
147 | -webkit-transform: rotate(135deg);
148 | }
149 | }
150 | @-moz-keyframes topbar-x {
151 | 0% {
152 | top: 0px;
153 | -moz-transform: rotate(0deg);
154 | }
155 | 45% {
156 | top: 6px;
157 | -moz-transform: rotate(145deg);
158 | }
159 | 75% {
160 | -moz-transform: rotate(130deg);
161 | }
162 | 100% {
163 | -moz-transform: rotate(135deg);
164 | }
165 | }
166 | }
167 |
168 | @mixin topbar-back-rotation() {
169 | @keyframes topbar-back {
170 | 0% {
171 | top: 6px;
172 | transform: rotate(135deg);
173 | }
174 | 45% {
175 | transform: rotate(-10deg);
176 | }
177 | 75% {
178 | transform: rotate(5deg);
179 | }
180 | 100% {
181 | top: 0px;
182 | transform: rotate(0);
183 | }
184 | }
185 |
186 | @-webkit-keyframes topbar-back {
187 | 0% {
188 | top: 6px;
189 | -webkit-transform: rotate(135deg);
190 | }
191 | 45% {
192 | -webkit-transform: rotate(-10deg);
193 | }
194 | 75% {
195 | -webkit-transform: rotate(5deg);
196 | }
197 | 100% {
198 | top: 0px;
199 | -webkit-transform: rotate(0);
200 | }
201 | }
202 |
203 | @-moz-keyframes topbar-back {
204 | 0% {
205 | top: 6px;
206 | -moz-transform: rotate(135deg);
207 | }
208 | 45% {
209 | -moz-transform: rotate(-10deg);
210 | }
211 | 75% {
212 | -moz-transform: rotate(5deg);
213 | }
214 | 100% {
215 | top: 0px;
216 | -moz-transform: rotate(0);
217 | }
218 | }
219 | }
220 |
221 | @mixin bottombar-x-rotation() {
222 | @keyframes bottombar-x {
223 | 0% {
224 | bottom: 0px;
225 | transform: rotate(0deg);
226 | }
227 | 45% {
228 | bottom: 6px;
229 | transform: rotate(-145deg);
230 | }
231 | 75% {
232 | transform: rotate(-130deg);
233 | }
234 | 100% {
235 | transform: rotate(-135deg);
236 | }
237 | }
238 | @-webkit-keyframes bottombar-x {
239 | 0% {
240 | bottom: 0px;
241 | -webkit-transform: rotate(0deg);
242 | }
243 | 45% {
244 | bottom: 6px;
245 | -webkit-transform: rotate(-145deg);
246 | }
247 | 75% {
248 | -webkit-transform: rotate(-130deg);
249 | }
250 | 100% {
251 | -webkit-transform: rotate(-135deg);
252 | }
253 | }
254 | @-moz-keyframes bottombar-x {
255 | 0% {
256 | bottom: 0px;
257 | -moz-transform: rotate(0deg);
258 | }
259 | 45% {
260 | bottom: 6px;
261 | -moz-transform: rotate(-145deg);
262 | }
263 | 75% {
264 | -moz-transform: rotate(-130deg);
265 | }
266 | 100% {
267 | -moz-transform: rotate(-135deg);
268 | }
269 | }
270 | }
271 |
272 | @mixin bottombar-back-rotation {
273 | @keyframes bottombar-back {
274 | 0% {
275 | bottom: 6px;
276 | transform: rotate(-135deg);
277 | }
278 | 45% {
279 | transform: rotate(10deg);
280 | }
281 | 75% {
282 | transform: rotate(-5deg);
283 | }
284 | 100% {
285 | bottom: 0px;
286 | transform: rotate(0);
287 | }
288 | }
289 | @-webkit-keyframes bottombar-back {
290 | 0% {
291 | bottom: 6px;
292 | -webkit-transform: rotate(-135deg);
293 | }
294 | 45% {
295 | -webkit-transform: rotate(10deg);
296 | }
297 | 75% {
298 | -webkit-transform: rotate(-5deg);
299 | }
300 | 100% {
301 | bottom: 0px;
302 | -webkit-transform: rotate(0);
303 | }
304 | }
305 | @-moz-keyframes bottombar-back {
306 | 0% {
307 | bottom: 6px;
308 | -moz-transform: rotate(-135deg);
309 | }
310 | 45% {
311 | -moz-transform: rotate(10deg);
312 | }
313 | 75% {
314 | -moz-transform: rotate(-5deg);
315 | }
316 | 100% {
317 | bottom: 0px;
318 | -moz-transform: rotate(0);
319 | }
320 | }
321 |
322 | }
323 |
324 |
325 |
--------------------------------------------------------------------------------
/src/components/Button.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
21 |
22 |
31 |
32 |
--------------------------------------------------------------------------------
/src/components/Cards/ChartCard.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
11 |
12 | {{ title }}
9 |{{ subTitle }}
10 |
13 |
15 |
5 |
6 | {{ title }}
7 |
8 |
9 |
10 |
16 |
17 |
27 |
28 |
4 |
17 |
5 |
12 |
6 |
8 |
9 |
11 |
13 |
14 |
16 | 14 |
3 |
4 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
20 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
51 |
52 |
--------------------------------------------------------------------------------
/src/components/PaperTable.vue:
--------------------------------------------------------------------------------
1 |
2 | | {{ column }} | 6 |
|---|
| 16 | {{ itemValue(item, column) }} 17 | | 18 |
7 |
11 |
12 |
37 |
38 |
39 |
135 |
136 |
--------------------------------------------------------------------------------
/src/components/SidebarPlugin/SidebarLink.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ name }}
13 |
3 |
10 |
11 |
14 |
26 |
--------------------------------------------------------------------------------
/src/layout/dashboard/ContentFooter.vue:
--------------------------------------------------------------------------------
1 |
2 |
23 |
24 |
27 |
28 |
--------------------------------------------------------------------------------
/src/layout/dashboard/DashboardLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
18 |
19 |
20 |
21 |
24 |
30 | Notification 1
31 | Notification 2
32 | Notification 3
33 | Notification 4
34 | Another notification
35 |
36 |
37 |
38 |
39 |
42 |
43 |
44 |
45 |
53 |
54 |
55 |
76 |
--------------------------------------------------------------------------------
/src/layout/dashboard/MobileMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
9 |
10 |
--------------------------------------------------------------------------------
/src/layout/dashboard/TopNavbar.vue:
--------------------------------------------------------------------------------
1 |
2 |
46 |
47 |
79 |
80 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | /*!
2 |
3 | =========================================================
4 | * Vue Paper Dashboard - v1.0.1
5 | =========================================================
6 |
7 | * Product Page: http://www.creative-tim.com/product/paper-dashboard
8 | * Copyright 2023 Creative Tim (http://www.creative-tim.com)
9 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE.md)
10 |
11 | =========================================================
12 |
13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
14 |
15 | */
16 | import Vue from "vue";
17 | import App from "./App";
18 | import router from "./router/index";
19 |
20 | import PaperDashboard from "./plugins/paperDashboard";
21 | import "vue-notifyjs/themes/default.css";
22 |
23 | Vue.use(PaperDashboard);
24 |
25 | /* eslint-disable no-new */
26 | new Vue({
27 | router,
28 | render: (h) => h(App),
29 | }).$mount("#app");
30 |
--------------------------------------------------------------------------------
/src/pages/Dashboard.vue:
--------------------------------------------------------------------------------
1 |
2 | Stats
22 | 23 |Settings
40 | 41 |
46 |
49 |
50 |
52 |
3 |
4 |
85 |
86 |
206 |
207 |
--------------------------------------------------------------------------------
/src/pages/Maps.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
28 |
29 |
30 |
10 |
11 |
26 |
27 |
16 |
17 |
18 |
19 |
22 | {{ stats.title }}
20 | {{ stats.value }} 21 |
23 | {{ stats.footerText }}
24 |
25 |
31 |
84 |
32 |
38 |
39 | Updated 3 minutes ago
40 |
41 |
47 |
48 |
49 |
42 | Open
43 | Click
44 | Click Second Time
45 |
46 |
50 |
56 |
57 | Campaign set 2 days ago
59 |
65 |
66 |
67 |
60 | Open
61 | Bounce
62 | Unsubscribe
63 |
64 |
68 |
74 |
75 | Data information certified
76 |
77 |
82 |
83 |
78 | Tesla Model S
79 | BMW 5 Series
80 |
81 |
4 |
5 |
6 |
3 |
35 |
68 |
69 |
70 |
73 |
--------------------------------------------------------------------------------
/src/pages/Notifications.vue:
--------------------------------------------------------------------------------
1 |
2 |
36 |
49 |
67 |
37 |
48 |
38 |
47 |
39 |
46 |
40 |
45 | 404 Not Found
41 |42 | Oops! It seems that this page does not exist. 43 |
44 |
4 |
66 |
67 | 68 | 136 |
137 |
5 |
64 |
65 |
6 |
32 | Notifications Style
7 |
8 | This is a plain notification
9 |
10 |
11 |
12 | This is a notification with close button.
13 |
14 |
21 |
31 |
33 |
63 | Notification states
34 |
35 |
36 |
37 | Info - This is a regular notification made with
38 | ".alert-info"
40 |
41 |
42 |
43 |
44 | Success - This is a regular notification made with
45 | ".alert-success"
47 |
48 |
49 |
50 |
51 | Warning - This is a regular notification made with
52 | ".alert-warning"
54 |
55 |
56 |
57 |
58 | Danger - This is a regular notification made with
59 | ".alert-danger"
61 |
62 | 66 |
67 | 68 | 136 |
3 |
27 |
28 |
91 |
92 |
--------------------------------------------------------------------------------
/src/pages/Typography.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
10 |
11 |
12 |
6 |
7 |
8 |
9 |
13 |
14 |
25 |
26 |
15 |
22 |
23 |
24 |
3 |
197 |
198 |
201 |
202 |
--------------------------------------------------------------------------------
/src/pages/UserProfile.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
195 |
196 | Paper Dashboard Headings
7 |8 | Created using 9 | Muli Font 10 | Family 11 |
12 | 13 |
14 |
194 |
15 |
20 | 16 |
Header 1
17 | Paper Dashboard Heading 18 | 19 |
21 |
26 | 22 |
Header 2
23 | Paper Dashboard Heading 24 | 25 |
27 |
32 | 28 |
Header 3
29 | Paper Dashboard Heading 30 | 31 |
33 |
38 | 34 |
Header 4
35 | Paper Dashboard Heading 36 | 37 |
39 |
44 | 40 |
Header 5
41 | Paper Dashboard Heading 42 | 43 |
45 |
50 | 46 |
Header 6
47 | Paper Dashboard Heading 48 | 49 |
51 |
58 | 52 | ParagraphLorem ipsum dolor sit amet, 53 | consectetuer adipiscing elit, sed diam nonummy nibh euismod 54 | tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 55 | enim ad minim veniam. 56 |
57 |
59 |
69 | Quote
60 |61 |68 |62 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 63 | diam nonummy nibh euismod tincidunt ut laoreet dolore magna 64 | aliquam erat volutpat. Ut wisi enim ad minim veniam. 65 |
66 | Steve Jobs, CEO Apple 67 |
70 |
76 | Muted Text
71 |72 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 73 | nonummy nibh euismod tincidunt ut laoreet. 74 |
75 |
77 |
80 |
102 | Coloured Text
81 |82 | Text Primary - Light Bootstrap Table Heading and complex bootstrap 83 | dashboard you've ever seen on the internet. 84 |
85 |86 | Text Info - Light Bootstrap Table Heading and complex bootstrap 87 | dashboard you've ever seen on the internet. 88 |
89 |90 | Text Success - Light Bootstrap Table Heading and complex bootstrap 91 | dashboard you've ever seen on the internet. 92 |
93 |94 | Text Warning - Light Bootstrap Table Heading and complex bootstrap 95 | dashboard you've ever seen on the internet. 96 |
97 |98 | Text Danger - Light Bootstrap Table Heading and complex bootstrap 99 | dashboard you've ever seen on the internet. 100 |
101 |
103 |
107 | ".small" is a tag for the headers 108 | 109 |
110 | 104 |
Small Tag
105 | Header with small subtitle 106 |107 | ".small" is a tag for the headers 108 | 109 |
111 |
154 | Lists
112 |
113 |
153 |
114 |
128 | Unordered List
115 |-
116 |
- List Item 117 |
- List Item 118 |
-
119 |
-
120 |
- List Item 121 |
- List Item 122 |
- List Item 123 |
125 | - List Item 126 |
129 |
136 | Ordered List
130 |-
131 |
- List Item 132 |
- List Item 133 |
- List Item 134 |
137 |
144 | Unstyled List
138 |-
139 |
- List Item 140 |
- List Item 141 |
- List Item 142 |
145 |
152 | Inline List
146 |-
147 |
- List Item 148 |
- List Item 149 |
- List Item 150 |
155 |
181 | Blockquotes
156 |
157 |
180 |
158 |
166 | Default Blockquote
159 |160 |165 |161 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 162 | Integer posuere erat a ante. 163 |
164 |
167 |
179 | Blockquote with Citation
168 |169 |178 |170 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 171 | Integer posuere erat a ante. 172 |
173 | Someone famous in 175 | Source Title 176 | 177 |
182 |
193 | Code
183 |
184 | This is
185 | .css-class-as-code, an example of an inline code
186 | element. Wrap inline code within a
187 | <code>...</code>tag.
188 |
190 | 1. #This is an example of preformatted text. 2. #Here is another line of code192 |
3 |
11 |
12 |
24 |
25 |
--------------------------------------------------------------------------------
/src/pages/UserProfile/EditProfileForm.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
4 |
120 |
121 |
4 |
33 | -
5 |
-
6 | 7 |30 |8 |16 |9 |15 |
14 |
17 | {{ member.name }} 18 |23 | 24 |
19 | 20 | {{ member.status }} 21 | 22 |25 |29 |26 | 27 | 28 |
31 |
4 | 
5 |
6 |
5 |
7 |
28 |
8 | 
13 |
14 | Chet Faker
15 |
20 |
21 |
13 |
14 | Chet Faker
15 |
16 |
17 | @chetfaker
18 |
19 |
20 |
22 | "I like the way you work it
23 |
24 | No diggity
25 | I wanna bag it up"
26 |
29 |
30 |
44 |
31 |
43 |
36 |
37 | {{ info.title }}
38 |
41 |
42 |