nuxt-glorious 1.2.9-4 → 1.2.9-5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/G/Button.vue +3 -2
  3. package/dist/runtime/style/components/button.css +40 -125
  4. package/dist/runtime/style/components/button.scss +7 -5
  5. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "nuxt-glorious",
3
3
  "configKey": "glorious",
4
- "version": "1.2.9-4"
4
+ "version": "1.2.9-5"
5
5
  }
package/dist/runtime/components/G/Button.vue CHANGED
@@ -9,7 +9,8 @@ const props: any = defineProps(_props)
9
9
  v-if="props.to === ''"
10
10
  :aria-label="props.ariaLabel"
11
11
  :class="[
12
- `glorious-button-${props.color}`,
12
+ `glorious-button `,
13
+ `color-${props.color}`,
13
14
  `size-${props.size}`,
14
15
  props.outline ? 'outline' : '',
15
16
  ]"
@@ -17,7 +18,7 @@ const props: any = defineProps(_props)
17
18
  >
18
19
  <div
19
20
  v-if="props.loading"
20
- class="loading"
21
+ class="loading flex justify-center"
21
22
  >
22
23
  <GLoading />
23
24
  </div>
package/dist/runtime/style/components/button.css CHANGED
@@ -2,197 +2,112 @@ button:focus-visible {
2
2
  @apply outline-none;
3
3
  }
4
4
 
5
- .glorious-button-orange {
6
- @apply bg-orange-600 border-orange-700 hover:bg-orange-700;
5
+ .glorious-button {
7
6
  @apply rounded-md text-white px-3 relative;
8
7
  }
9
- .glorious-button-orange div > loading {
8
+ .glorious-button div > loading {
10
9
  @apply flex justify-center items-center;
11
10
  }
12
- .glorious-button-orange div.loading > div > div {
11
+ .glorious-button div.loading > div > div {
13
12
  @apply w-6 !important;
14
13
  }
15
- .glorious-button-orange.size-xl {
14
+ .glorious-button.size-xl {
16
15
  @apply py-2.5;
17
16
  }
18
- .glorious-button-orange.size-lg {
17
+ .glorious-button.size-lg {
19
18
  @apply py-2;
20
19
  }
21
- .glorious-button-orange.size-md {
20
+ .glorious-button.size-md {
22
21
  @apply py-1.5;
23
22
  }
24
- .glorious-button-orange.size-sm {
23
+ .glorious-button.size-sm {
25
24
  @apply py-1;
26
25
  }
27
- .glorious-button-orange.size-xs {
26
+ .glorious-button.size-xs {
28
27
  @apply py-0.5;
29
28
  }
30
- .glorious-button-orange.outline {
29
+
30
+ .color-orange {
31
+ @apply bg-orange-600 border-orange-700 hover:bg-orange-700;
32
+ }
33
+ .color-orange.outline {
31
34
  @apply bg-transparent border outline-none;
32
35
  @apply text-orange-500 hover:bg-orange-100;
33
36
  }
34
- .glorious-button-orange.outline div.loading > div > div {
37
+ .color-orange.outline div.loading > div > div {
35
38
  border-color: theme("colors.orange.700") !important;
36
39
  }
37
- .glorious-button-orange:disabled {
40
+ .color-orange:disabled {
38
41
  @apply cursor-not-allowed;
39
42
  }
40
- .glorious-button-orange:disabled:not(:disabled) {
41
- @apply bg-green-300;
43
+ .color-orange:disabled:not(:disabled) {
44
+ @apply bg-orange-300;
42
45
  }
43
46
 
44
- .glorious-button-blue {
47
+ .color-blue {
45
48
  @apply bg-blue-600 border-blue-700 hover:bg-blue-700;
46
- @apply rounded-md text-white px-3 relative;
47
- }
48
- .glorious-button-blue div > loading {
49
- @apply flex justify-center items-center;
50
- }
51
- .glorious-button-blue div.loading > div > div {
52
- @apply w-6 !important;
53
- }
54
- .glorious-button-blue.size-xl {
55
- @apply py-2.5;
56
- }
57
- .glorious-button-blue.size-lg {
58
- @apply py-2;
59
- }
60
- .glorious-button-blue.size-md {
61
- @apply py-1.5;
62
- }
63
- .glorious-button-blue.size-sm {
64
- @apply py-1;
65
- }
66
- .glorious-button-blue.size-xs {
67
- @apply py-0.5;
68
49
  }
69
- .glorious-button-blue.outline {
50
+ .color-blue.outline {
70
51
  @apply bg-transparent border outline-none;
71
52
  @apply text-blue-500 hover:bg-blue-100;
72
53
  }
73
- .glorious-button-blue.outline div.loading > div > div {
54
+ .color-blue.outline div.loading > div > div {
74
55
  border-color: theme("colors.blue.700") !important;
75
56
  }
76
- .glorious-button-blue:disabled {
57
+ .color-blue:disabled {
77
58
  @apply cursor-not-allowed;
78
59
  }
79
- .glorious-button-blue:disabled:not(:disabled) {
80
- @apply bg-green-300;
60
+ .color-blue:disabled:not(:disabled) {
61
+ @apply bg-blue-300;
81
62
  }
82
63
 
83
- .glorious-button-gray {
64
+ .color-gray {
84
65
  @apply bg-gray-600 border-gray-700 hover:bg-gray-700;
85
- @apply rounded-md text-white px-3 relative;
86
- }
87
- .glorious-button-gray div > loading {
88
- @apply flex justify-center items-center;
89
- }
90
- .glorious-button-gray div.loading > div > div {
91
- @apply w-6 !important;
92
- }
93
- .glorious-button-gray.size-xl {
94
- @apply py-2.5;
95
- }
96
- .glorious-button-gray.size-lg {
97
- @apply py-2;
98
- }
99
- .glorious-button-gray.size-md {
100
- @apply py-1.5;
101
- }
102
- .glorious-button-gray.size-sm {
103
- @apply py-1;
104
66
  }
105
- .glorious-button-gray.size-xs {
106
- @apply py-0.5;
107
- }
108
- .glorious-button-gray.outline {
67
+ .color-gray.outline {
109
68
  @apply bg-transparent border outline-none;
110
69
  @apply text-gray-500 hover:bg-gray-100;
111
70
  }
112
- .glorious-button-gray.outline div.loading > div > div {
71
+ .color-gray.outline div.loading > div > div {
113
72
  border-color: theme("colors.gray.700") !important;
114
73
  }
115
- .glorious-button-gray:disabled {
74
+ .color-gray:disabled {
116
75
  @apply cursor-not-allowed;
117
76
  }
118
- .glorious-button-gray:disabled:not(:disabled) {
119
- @apply bg-green-300;
77
+ .color-gray:disabled:not(:disabled) {
78
+ @apply bg-gray-300;
120
79
  }
121
80
 
122
- .glorious-button-red {
81
+ .color-red {
123
82
  @apply bg-red-600 border-red-700 hover:bg-red-700;
124
- @apply rounded-md text-white px-3 relative;
125
- }
126
- .glorious-button-red div > loading {
127
- @apply flex justify-center items-center;
128
- }
129
- .glorious-button-red div.loading > div > div {
130
- @apply w-6 !important;
131
- }
132
- .glorious-button-red.size-xl {
133
- @apply py-2.5;
134
- }
135
- .glorious-button-red.size-lg {
136
- @apply py-2;
137
- }
138
- .glorious-button-red.size-md {
139
- @apply py-1.5;
140
- }
141
- .glorious-button-red.size-sm {
142
- @apply py-1;
143
- }
144
- .glorious-button-red.size-xs {
145
- @apply py-0.5;
146
83
  }
147
- .glorious-button-red.outline {
84
+ .color-red.outline {
148
85
  @apply bg-transparent border outline-none;
149
86
  @apply text-red-500 hover:bg-red-100;
150
87
  }
151
- .glorious-button-red.outline div.loading > div > div {
88
+ .color-red.outline div.loading > div > div {
152
89
  border-color: theme("colors.red.700") !important;
153
90
  }
154
- .glorious-button-red:disabled {
91
+ .color-red:disabled {
155
92
  @apply cursor-not-allowed;
156
93
  }
157
- .glorious-button-red:disabled:not(:disabled) {
158
- @apply bg-green-300;
94
+ .color-red:disabled:not(:disabled) {
95
+ @apply bg-red-300;
159
96
  }
160
97
 
161
- .glorious-button-green {
98
+ .color-green {
162
99
  @apply bg-green-600 border-green-700 hover:bg-green-700;
163
- @apply rounded-md text-white px-3 relative;
164
- }
165
- .glorious-button-green div > loading {
166
- @apply flex justify-center items-center;
167
- }
168
- .glorious-button-green div.loading > div > div {
169
- @apply w-6 !important;
170
- }
171
- .glorious-button-green.size-xl {
172
- @apply py-2.5;
173
- }
174
- .glorious-button-green.size-lg {
175
- @apply py-2;
176
- }
177
- .glorious-button-green.size-md {
178
- @apply py-1.5;
179
- }
180
- .glorious-button-green.size-sm {
181
- @apply py-1;
182
- }
183
- .glorious-button-green.size-xs {
184
- @apply py-0.5;
185
100
  }
186
- .glorious-button-green.outline {
101
+ .color-green.outline {
187
102
  @apply bg-transparent border outline-none;
188
103
  @apply text-green-500 hover:bg-green-100;
189
104
  }
190
- .glorious-button-green.outline div.loading > div > div {
105
+ .color-green.outline div.loading > div > div {
191
106
  border-color: theme("colors.green.700") !important;
192
107
  }
193
- .glorious-button-green:disabled {
108
+ .color-green:disabled {
194
109
  @apply cursor-not-allowed;
195
110
  }
196
- .glorious-button-green:disabled:not(:disabled) {
111
+ .color-green:disabled:not(:disabled) {
197
112
  @apply bg-green-300;
198
113
  }
package/dist/runtime/style/components/button.scss CHANGED
@@ -5,12 +5,14 @@ button:focus-visible {
5
5
  @apply outline-none;
6
6
  }
7
7
 
8
+ .glorious-button {
9
+ @apply rounded-md text-white px-3 relative;
10
+ @include mixin.loading-size(6);
11
+ @include mixin.load-size();
12
+ }
8
13
  @each $color in var.$colors {
9
- .#{'glorious-button-' + $color} {
14
+ .#{'color-' + $color} {
10
15
  @apply #{"bg-" + ($color) + "-600 border-" + $color + "-700 hover:bg-" + $color + "-700"};
11
- @apply rounded-md text-white px-3 relative;
12
- @include mixin.loading-size(6);
13
- @include mixin.load-size();
14
16
 
15
17
  &.outline {
16
18
  @apply bg-transparent border outline-none;
@@ -21,7 +23,7 @@ button:focus-visible {
21
23
  &:disabled {
22
24
  @apply cursor-not-allowed;
23
25
  &:not(:disabled) {
24
- @apply bg-green-300;
26
+ @apply #{"bg-" + ($color) + "-300"};
25
27
  }
26
28
  }
27
29
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.2.9-4",
2
+ "version": "1.2.9-5",
3
3
  "name": "nuxt-glorious",
4
4
  "description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
5
5
  "repository": "sajadhzj/nuxt-glorious",