` elements
53 | a.btn.disabled,
54 | fieldset:disabled a.btn {
55 | pointer-events: none;
56 | }
57 |
58 |
59 | //
60 | // Alternate buttons
61 | //
62 |
63 | @each $color, $value in $theme-colors {
64 | .btn-#{$color} {
65 | @include button-variant($value, $value);
66 | }
67 | }
68 |
69 | @each $color, $value in $theme-colors {
70 | .btn-outline-#{$color} {
71 | @include button-outline-variant($value);
72 | }
73 | }
74 |
75 |
76 | //
77 | // Link buttons
78 | //
79 |
80 | // Make a button look and behave like a link
81 | .btn-link {
82 | font-weight: $font-weight-normal;
83 | color: $link-color;
84 | background-color: transparent;
85 |
86 | @include hover {
87 | color: $link-hover-color;
88 | text-decoration: $link-hover-decoration;
89 | background-color: transparent;
90 | border-color: transparent;
91 | }
92 |
93 | &:focus,
94 | &.focus {
95 | text-decoration: $link-hover-decoration;
96 | border-color: transparent;
97 | box-shadow: none;
98 | }
99 |
100 | &:disabled,
101 | &.disabled {
102 | color: $btn-link-disabled-color;
103 | pointer-events: none;
104 | }
105 |
106 | // No need for an active state here
107 | }
108 |
109 |
110 | //
111 | // Button Sizes
112 | //
113 |
114 | .btn-lg {
115 | @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
116 | }
117 |
118 | .btn-sm {
119 | @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
120 | }
121 |
122 |
123 | //
124 | // Block button
125 | //
126 |
127 | .btn-block {
128 | display: block;
129 | width: 100%;
130 |
131 | // Vertically space out multiple block buttons
132 | + .btn-block {
133 | margin-top: $btn-block-spacing-y;
134 | }
135 | }
136 |
137 | // Specificity overrides
138 | input[type="submit"],
139 | input[type="reset"],
140 | input[type="button"] {
141 | &.btn-block {
142 | width: 100%;
143 | }
144 | }
145 |
--------------------------------------------------------------------------------
/landingpage/dist/scss/bootstrap/mixins/_buttons.scss:
--------------------------------------------------------------------------------
1 | // Button variants
2 | //
3 | // Easily pump out default styles, as well as :hover, :focus, :active,
4 | // and disabled options for all buttons
5 |
6 | @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
7 | color: color-yiq($background);
8 | @include gradient-bg($background);
9 | border-color: $border;
10 | @include box-shadow($btn-box-shadow);
11 |
12 | @include hover {
13 | color: color-yiq($hover-background);
14 | @include gradient-bg($hover-background);
15 | border-color: $hover-border;
16 | }
17 |
18 | &:focus,
19 | &.focus {
20 | // Avoid using mixin so we can pass custom focus shadow properly
21 | @if $enable-shadows {
22 | box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
23 | } @else {
24 | box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
25 | }
26 | }
27 |
28 | // Disabled comes first so active can properly restyle
29 | &.disabled,
30 | &:disabled {
31 | color: color-yiq($background);
32 | background-color: $background;
33 | border-color: $border;
34 | }
35 |
36 | &:not(:disabled):not(.disabled):active,
37 | &:not(:disabled):not(.disabled).active,
38 | .show > &.dropdown-toggle {
39 | color: color-yiq($active-background);
40 | background-color: $active-background;
41 | @if $enable-gradients {
42 | background-image: none; // Remove the gradient for the pressed/active state
43 | }
44 | border-color: $active-border;
45 |
46 | &:focus {
47 | // Avoid using mixin so we can pass custom focus shadow properly
48 | @if $enable-shadows {
49 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
50 | } @else {
51 | box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
52 | }
53 | }
54 | }
55 | }
56 |
57 | @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
58 | color: $color;
59 | background-color: transparent;
60 | background-image: none;
61 | border-color: $color;
62 |
63 | &:hover {
64 | color: $color-hover;
65 | background-color: $active-background;
66 | border-color: $active-border;
67 | }
68 |
69 | &:focus,
70 | &.focus {
71 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
72 | }
73 |
74 | &.disabled,
75 | &:disabled {
76 | color: $color;
77 | background-color: transparent;
78 | }
79 |
80 | &:not(:disabled):not(.disabled):active,
81 | &:not(:disabled):not(.disabled).active,
82 | .show > &.dropdown-toggle {
83 | color: color-yiq($active-background);
84 | background-color: $active-background;
85 | border-color: $active-border;
86 |
87 | &:focus {
88 | // Avoid using mixin so we can pass custom focus shadow properly
89 | @if $enable-shadows and $btn-active-box-shadow != none {
90 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
91 | } @else {
92 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
93 | }
94 | }
95 | }
96 | }
97 |
98 | // Button sizes
99 | @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
100 | padding: $padding-y $padding-x;
101 | font-size: $font-size;
102 | line-height: $line-height;
103 | // Manually declare to provide an override to the browser default
104 | @if $enable-rounded {
105 | border-radius: $border-radius;
106 | } @else {
107 | border-radius: 0;
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/landingpage/dist/scss/bootstrap/_print.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important, selector-no-qualifying-type
2 |
3 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
4 |
5 | // ==========================================================================
6 | // Print styles.
7 | // Inlined to avoid the additional HTTP request:
8 | // https://www.phpied.com/delay-loading-your-print-css/
9 | // ==========================================================================
10 |
11 | @if $enable-print-styles {
12 | @media print {
13 | *,
14 | *::before,
15 | *::after {
16 | // Bootstrap specific; comment out `color` and `background`
17 | //color: $black !important; // Black prints faster
18 | text-shadow: none !important;
19 | //background: transparent !important;
20 | box-shadow: none !important;
21 | }
22 |
23 | a {
24 | &:not(.btn) {
25 | text-decoration: underline;
26 | }
27 | }
28 |
29 | // Bootstrap specific; comment the following selector out
30 | //a[href]::after {
31 | // content: " (" attr(href) ")";
32 | //}
33 |
34 | abbr[title]::after {
35 | content: " (" attr(title) ")";
36 | }
37 |
38 | // Bootstrap specific; comment the following selector out
39 | //
40 | // Don't show links that are fragment identifiers,
41 | // or use the `javascript:` pseudo protocol
42 | //
43 |
44 | //a[href^="#"]::after,
45 | //a[href^="javascript:"]::after {
46 | // content: "";
47 | //}
48 |
49 | pre {
50 | white-space: pre-wrap !important;
51 | }
52 | pre,
53 | blockquote {
54 | border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
55 | page-break-inside: avoid;
56 | }
57 |
58 | //
59 | // Printing Tables:
60 | // http://css-discuss.incutio.com/wiki/Printing_Tables
61 | //
62 |
63 | thead {
64 | display: table-header-group;
65 | }
66 |
67 | tr,
68 | img {
69 | page-break-inside: avoid;
70 | }
71 |
72 | p,
73 | h2,
74 | h3 {
75 | orphans: 3;
76 | widows: 3;
77 | }
78 |
79 | h2,
80 | h3 {
81 | page-break-after: avoid;
82 | }
83 |
84 | // Bootstrap specific changes start
85 |
86 | // Specify a size and min-width to make printing closer across browsers.
87 | // We don't set margin here because it breaks `size` in Chrome. We also
88 | // don't use `!important` on `size` as it breaks in Chrome.
89 | @page {
90 | size: $print-page-size;
91 | }
92 | body {
93 | min-width: $print-body-min-width !important;
94 | }
95 | .container {
96 | min-width: $print-body-min-width !important;
97 | }
98 |
99 | // Bootstrap components
100 | .navbar {
101 | display: none;
102 | }
103 | .badge {
104 | border: $border-width solid $black;
105 | }
106 |
107 | .table {
108 | border-collapse: collapse !important;
109 |
110 | td,
111 | th {
112 | background-color: $white !important;
113 | }
114 | }
115 |
116 | .table-bordered {
117 | th,
118 | td {
119 | border: 1px solid $gray-300 !important;
120 | }
121 | }
122 |
123 | .table-dark {
124 | color: inherit;
125 |
126 | th,
127 | td,
128 | thead th,
129 | tbody + tbody {
130 | border-color: $table-border-color;
131 | }
132 | }
133 |
134 | .table .thead-dark th {
135 | color: inherit;
136 | border-color: $table-border-color;
137 | }
138 |
139 | // Bootstrap specific changes end
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/package/components/dashboard/TimelineInbox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Wordpress
7 | 80%
8 |
9 |
17 |
18 | HTML 5
19 | 90%
20 |
21 |
28 |
29 | jQuery
30 | 50%
31 |
32 |
39 |
40 | Photoshop
41 | 70%
42 |
49 |
50 |
51 | Vuejs
52 | 80%
53 |
60 |
61 |
62 | Nextjs
63 | 50%
64 |
71 |
72 |
73 | Nuxtjs
74 | 90%
75 |
82 |
83 |
84 |
85 | Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim
86 | justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
87 | eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum
88 | semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor
89 | eu, consequat vitae, eleifend ac, enim.
90 |
91 |
92 | Lorem Ipsum is simply dummy text of the printing and typesetting industry.
93 | Lorem Ipsum has been the industry's standard dummy text ever since the
94 | 1500s, when an unknown printer took a galley of type and scrambled it to
95 | make a type specimen book. It has survived not only five centuries
96 |
97 |
98 | It was popularised in the 1960s with the release of Letraset sheets
99 | containing Lorem Ipsum passages, and more recently with desktop publishing
100 | software like Aldus PageMaker including versions of Lorem Ipsum.
101 |
102 |
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/package/components/dashboard/TotalSales.vue:
--------------------------------------------------------------------------------
1 |
76 |
77 |
78 |
79 |
80 |
81 |
Our Visitors
82 | Different Devices Used to Visit
83 |
84 |
87 |
88 |
89 |
90 |
91 | Mobile
92 |
93 |
94 |
95 | Desktop
96 |
97 |
98 |
99 | Tablet
100 |
101 |
10 | Johnathan Deo
11 |
12 |
13 | Mobile
14 |
15 | (123) 456 7890
16 |
17 |
18 | Email
19 |
20 | johnathan@admin.com
21 |
22 |
23 | Location
24 |
25 | London
26 |
27 |
28 |
29 |
30 |
31 | Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim
32 | justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
33 | eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum
34 | semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor
35 | eu, consequat vitae, eleifend ac, enim.
36 |
37 |
38 | Lorem Ipsum is simply dummy text of the printing and typesetting industry.
39 | Lorem Ipsum has been the industry's standard dummy text ever since the
40 | 1500s, when an unknown printer took a galley of type and scrambled it to
41 | make a type specimen book. It has survived not only five centuries
42 |
43 |
44 | It was popularised in the 1960s with the release of Letraset sheets
45 | containing Lorem Ipsum passages, and more recently with desktop publishing
46 | software like Aldus PageMaker including versions of Lorem Ipsum.
47 |
48 |
49 |
Skill Set
50 |
51 |
52 | Wordpress
53 | 80%
54 |
55 |
63 |
64 | HTML 5
65 | 90%
66 |
67 |
74 |
75 | jQuery
76 | 50%
77 |
78 |
85 |
86 | Photoshop
87 | 70%
88 |
95 |
96 |
97 |
118 |
119 |
120 |
121 |
122 |
123 |
--------------------------------------------------------------------------------
/landingpage/dist/scss/bootstrap/_tables.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Basic Bootstrap table
3 | //
4 |
5 | .table {
6 | width: 100%;
7 | max-width: 100%;
8 | margin-bottom: $spacer;
9 | background-color: $table-bg; // Reset for nesting within parents with `background-color`.
10 |
11 | th,
12 | td {
13 | padding: $table-cell-padding;
14 | vertical-align: top;
15 | border-top: $table-border-width solid $table-border-color;
16 | }
17 |
18 | thead th {
19 | vertical-align: bottom;
20 | border-bottom: (2 * $table-border-width) solid $table-border-color;
21 | }
22 |
23 | tbody + tbody {
24 | border-top: (2 * $table-border-width) solid $table-border-color;
25 | }
26 |
27 | .table {
28 | background-color: $body-bg;
29 | }
30 | }
31 |
32 |
33 | //
34 | // Condensed table w/ half padding
35 | //
36 |
37 | .table-sm {
38 | th,
39 | td {
40 | padding: $table-cell-padding-sm;
41 | }
42 | }
43 |
44 |
45 | // Border versions
46 | //
47 | // Add or remove borders all around the table and between all the columns.
48 |
49 | .table-bordered {
50 | border: $table-border-width solid $table-border-color;
51 |
52 | th,
53 | td {
54 | border: $table-border-width solid $table-border-color;
55 | }
56 |
57 | thead {
58 | th,
59 | td {
60 | border-bottom-width: (2 * $table-border-width);
61 | }
62 | }
63 | }
64 |
65 | .table-borderless {
66 | th,
67 | td,
68 | thead th,
69 | tbody + tbody {
70 | border: 0;
71 | }
72 | }
73 |
74 | // Zebra-striping
75 | //
76 | // Default zebra-stripe styles (alternating gray and transparent backgrounds)
77 |
78 | .table-striped {
79 | tbody tr:nth-of-type(#{$table-striped-order}) {
80 | background-color: $table-accent-bg;
81 | }
82 | }
83 |
84 |
85 | // Hover effect
86 | //
87 | // Placed here since it has to come after the potential zebra striping
88 |
89 | .table-hover {
90 | tbody tr {
91 | @include hover {
92 | background-color: $table-hover-bg;
93 | }
94 | }
95 | }
96 |
97 |
98 | // Table backgrounds
99 | //
100 | // Exact selectors below required to override `.table-striped` and prevent
101 | // inheritance to nested tables.
102 |
103 | @each $color, $value in $theme-colors {
104 | @include table-row-variant($color, theme-color-level($color, -9));
105 | }
106 |
107 | @include table-row-variant(active, $table-active-bg);
108 |
109 |
110 | // Dark styles
111 | //
112 | // Same table markup, but inverted color scheme: dark background and light text.
113 |
114 | // stylelint-disable-next-line no-duplicate-selectors
115 | .table {
116 | .thead-dark {
117 | th {
118 | color: $table-dark-color;
119 | background-color: $table-dark-bg;
120 | border-color: $table-dark-border-color;
121 | }
122 | }
123 |
124 | .thead-light {
125 | th {
126 | color: $table-head-color;
127 | background-color: $table-head-bg;
128 | border-color: $table-border-color;
129 | }
130 | }
131 | }
132 |
133 | .table-dark {
134 | color: $table-dark-color;
135 | background-color: $table-dark-bg;
136 |
137 | th,
138 | td,
139 | thead th {
140 | border-color: $table-dark-border-color;
141 | }
142 |
143 | &.table-bordered {
144 | border: 0;
145 | }
146 |
147 | &.table-striped {
148 | tbody tr:nth-of-type(odd) {
149 | background-color: $table-dark-accent-bg;
150 | }
151 | }
152 |
153 | &.table-hover {
154 | tbody tr {
155 | @include hover {
156 | background-color: $table-dark-hover-bg;
157 | }
158 | }
159 | }
160 | }
161 |
162 |
163 | // Responsive tables
164 | //
165 | // Generate series of `.table-responsive-*` classes for configuring the screen
166 | // size of where your table will overflow.
167 |
168 | .table-responsive {
169 | @each $breakpoint in map-keys($grid-breakpoints) {
170 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
171 | $infix: breakpoint-infix($next, $grid-breakpoints);
172 |
173 | &#{$infix} {
174 | @include media-breakpoint-down($breakpoint) {
175 | display: block;
176 | width: 100%;
177 | overflow-x: auto;
178 | -webkit-overflow-scrolling: touch;
179 | -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
180 |
181 | // Prevent double border on horizontal scroll due to use of `display: block;`
182 | > .table-bordered {
183 | border: 0;
184 | }
185 | }
186 | }
187 | }
188 | }
189 |
--------------------------------------------------------------------------------
/landingpage/dist/scss/bootstrap/_dropdown.scss:
--------------------------------------------------------------------------------
1 | // The dropdown wrapper (``)
2 | .dropup,
3 | .dropright,
4 | .dropdown,
5 | .dropleft {
6 | position: relative;
7 | }
8 |
9 | .dropdown-toggle {
10 | // Generate the caret automatically
11 | @include caret;
12 | }
13 |
14 | // The dropdown menu
15 | .dropdown-menu {
16 | position: absolute;
17 | top: 100%;
18 | left: 0;
19 | z-index: $zindex-dropdown;
20 | display: none; // none by default, but block on "open" of the menu
21 | float: left;
22 | min-width: $dropdown-min-width;
23 | padding: $dropdown-padding-y 0;
24 | margin: $dropdown-spacer 0 0; // override default ul
25 | font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
26 | color: $body-color;
27 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
28 | list-style: none;
29 | background-color: $dropdown-bg;
30 | background-clip: padding-box;
31 | border: $dropdown-border-width solid $dropdown-border-color;
32 | @include border-radius($dropdown-border-radius);
33 | @include box-shadow($dropdown-box-shadow);
34 | }
35 |
36 | .dropdown-menu-right {
37 | right: 0;
38 | left: auto;
39 | }
40 |
41 | // Allow for dropdowns to go bottom up (aka, dropup-menu)
42 | // Just add .dropup after the standard .dropdown class and you're set.
43 | .dropup {
44 | .dropdown-menu {
45 | top: auto;
46 | bottom: 100%;
47 | margin-top: 0;
48 | margin-bottom: $dropdown-spacer;
49 | }
50 |
51 | .dropdown-toggle {
52 | @include caret(up);
53 | }
54 | }
55 |
56 | .dropright {
57 | .dropdown-menu {
58 | top: 0;
59 | right: auto;
60 | left: 100%;
61 | margin-top: 0;
62 | margin-left: $dropdown-spacer;
63 | }
64 |
65 | .dropdown-toggle {
66 | @include caret(right);
67 | &::after {
68 | vertical-align: 0;
69 | }
70 | }
71 | }
72 |
73 | .dropleft {
74 | .dropdown-menu {
75 | top: 0;
76 | right: 100%;
77 | left: auto;
78 | margin-top: 0;
79 | margin-right: $dropdown-spacer;
80 | }
81 |
82 | .dropdown-toggle {
83 | @include caret(left);
84 | &::before {
85 | vertical-align: 0;
86 | }
87 | }
88 | }
89 |
90 | // When enabled Popper.js, reset basic dropdown position
91 | // stylelint-disable no-duplicate-selectors
92 | .dropdown-menu {
93 | &[x-placement^="top"],
94 | &[x-placement^="right"],
95 | &[x-placement^="bottom"],
96 | &[x-placement^="left"] {
97 | right: auto;
98 | bottom: auto;
99 | }
100 | }
101 | // stylelint-enable no-duplicate-selectors
102 |
103 | // Dividers (basically an `
`) within the dropdown
104 | .dropdown-divider {
105 | @include nav-divider($dropdown-divider-bg);
106 | }
107 |
108 | // Links, buttons, and more within the dropdown menu
109 | //
110 | // `
17 | 
4 | # Live Demo
5 |
6 |
7 | # Nuxt 3 Starter
8 |
9 | > 💚 A Better Nuxt 3 starter template
10 |
11 | ## Use the Template
12 |
13 | ### Clone to local
14 |
15 | ```bash
16 |
17 | $> 💿 Install dependencies with `npm install` or `yarn install`
18 | $>
19 | $> 🚀 Start development server with `npm run dev` or `yarn dev`
20 | ```
21 |
22 | ## Setup
23 |
24 | ### Installation
25 |
26 | Make sure to install the dependencies
27 |
28 | ```bash
29 | yarn install
30 | ```
31 |
32 | ### Development
33 |
34 | Start the development server on http://localhost:3088
35 |
36 | ```bash
37 | yarn dev
38 | ```
39 |
40 | ### Production
41 |
42 | Build the application for production:
43 |
44 | ```bash
45 | yarn build
46 | ```
47 |
48 |
49 |
--------------------------------------------------------------------------------
/package/components/auth/RegisterForm.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | 
5 | 
9 | 
14 | 
10 |