@code-coaching/vuetiful 0.45.0 → 0.47.0

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 (4) hide show
  1. package/dist/css/overrides/quasar.css +50 -48
  2. package/dist/css/themes/vuetiful.css +275 -239
  3. package/dist/themes/vuetiful.css +275 -239
  4. package/package.json +1 -1
package/dist/css/overrides/quasar.css CHANGED
@@ -1,3 +1,5 @@
1
+ @reference "tailwindcss";
2
+
1
3
  html,
2
4
  body,
3
5
  #q-app {
@@ -43,7 +45,7 @@ body,
43
45
  }
44
46
 
45
47
  .q-banner {
46
- @apply rounded-container;
48
+ border-radius: var(--radius-container);
47
49
  @apply transition-all;
48
50
  }
49
51
 
@@ -65,10 +67,10 @@ body,
65
67
  }
66
68
 
67
69
  .q-menu {
68
- @apply bg-surface-100-900;
69
- @apply text-surface-950-50;
70
+ background-color: var(--color-surface-100-900);
71
+ color: var(--color-surface-950-50);
70
72
 
71
- @apply rounded-container;
73
+ border-radius: var(--radius-container);
72
74
  @apply transition-all;
73
75
  }
74
76
 
@@ -80,7 +82,7 @@ body,
80
82
  }
81
83
 
82
84
  .q-card {
83
- @apply rounded-container;
85
+ border-radius: var(--radius-container);
84
86
  @apply transition-all;
85
87
  }
86
88
 
@@ -98,7 +100,7 @@ body,
98
100
  }
99
101
 
100
102
  .q-color-picker {
101
- @apply rounded-container;
103
+ border-radius: var(--radius-container);
102
104
  @apply transition-all;
103
105
  }
104
106
 
@@ -110,12 +112,12 @@ body,
110
112
  }
111
113
 
112
114
  .q-color-picker__header-bg {
113
- @apply rounded-tl-container;
114
- @apply rounded-tr-container;
115
+ border-top-left-radius: var(--radius-container);
116
+ border-top-right-radius: var(--radius-container);
115
117
  }
116
118
 
117
119
  .q-editor {
118
- @apply rounded-container;
120
+ border-radius: var(--radius-container);
119
121
  @apply transition-all;
120
122
  }
121
123
 
@@ -149,31 +151,31 @@ body,
149
151
  * the background and text color need to be set here
150
152
  */
151
153
  .q-list {
152
- @apply bg-surface-100-900;
153
- @apply text-surface-950-50;
154
+ background-color: var(--color-surface-100-900);
155
+ color: var(--color-surface-950-50);
154
156
 
155
- @apply rounded-container;
157
+ border-radius: var(--radius-container);
156
158
  @apply transition-all;
157
159
  }
158
160
 
159
161
  .q-list .q-card {
160
- @apply bg-surface-100-900;
161
- @apply text-surface-950-50;
162
+ background-color: var(--color-surface-100-900);
163
+ color: var(--color-surface-950-50);
162
164
  }
163
165
 
164
166
  .q-list > .q-expansion-item:first-child .q-focus-helper {
165
- @apply rounded-tl-container;
166
- @apply rounded-tr-container;
167
+ border-top-left-radius: var(--radius-container);
168
+ border-top-right-radius: var(--radius-container);
167
169
  }
168
170
 
169
171
  .q-list > .q-expansion-item:last-child .q-focus-helper {
170
- @apply rounded-bl-container;
171
- @apply rounded-br-container;
172
+ border-bottom-left-radius: var(--radius-container);
173
+ border-bottom-right-radius: var(--radius-container);
172
174
  }
173
175
 
174
176
  .q-list > .q-expansion-item:last-child .q-card {
175
- @apply rounded-bl-container;
176
- @apply rounded-br-container;
177
+ border-bottom-left-radius: var(--radius-container);
178
+ border-bottom-right-radius: var(--radius-container);
177
179
  }
178
180
 
179
181
  .q-drawer .q-list {
@@ -182,23 +184,23 @@ body,
182
184
  }
183
185
 
184
186
  .q-input {
185
- @apply rounded-container;
187
+ border-radius: var(--radius-container);
186
188
  @apply transition-all;
187
189
  }
188
190
 
189
191
  .q-field__control::before {
190
- @apply rounded-container;
192
+ border-radius: var(--radius-container);
191
193
  }
192
194
 
193
195
  .q-field--outlined .q-field__control::after {
194
- @apply rounded-container;
196
+ border-radius: var(--radius-container);
195
197
  }
196
198
 
197
199
  .q-input,
198
200
  .q-select,
199
201
  .q-file,
200
202
  .q-time {
201
- @apply rounded-container;
203
+ border-radius: var(--radius-container);
202
204
  }
203
205
 
204
206
  .q-item--dark {
@@ -216,25 +218,25 @@ body,
216
218
  0 2px 2px rgba(0, 0, 0, 0.14),
217
219
  0 3px 1px -2px rgba(0, 0, 0, 0.12);
218
220
 
219
- @apply bg-surface-100-900;
220
- @apply text-surface-950-50;
221
+ background-color: var(--color-surface-100-900);
222
+ color: var(--color-surface-950-50);
221
223
 
222
- @apply rounded-tl-container;
223
- @apply rounded-tr-container;
224
+ border-top-left-radius: var(--radius-container);
225
+ border-top-right-radius: var(--radius-container);
224
226
  }
225
227
 
226
228
  .q-time__header {
227
- @apply bg-surface-300-700;
228
- @apply text-surface-950-50;
229
+ background-color: var(--color-surface-300-700);
230
+ color: var(--color-surface-950-50);
229
231
 
230
- @apply rounded-tl-container;
231
- @apply rounded-tr-container;
232
+ border-top-left-radius: var(--radius-container);
233
+ border-top-right-radius: var(--radius-container);
232
234
  }
233
235
 
234
236
  .q-time__clock-position--active,
235
237
  .q-time__clock-pointer {
236
- @apply bg-surface-900-100;
237
- @apply text-surface-50-950;
238
+ background-color: var(--color-surface-900-100);
239
+ color: var(--color-surface-50-950);
238
240
  }
239
241
 
240
242
  .q-date {
@@ -243,38 +245,38 @@ body,
243
245
  0 2px 2px rgba(0, 0, 0, 0.14),
244
246
  0 3px 1px -2px rgba(0, 0, 0, 0.12);
245
247
 
246
- @apply bg-surface-100-900;
247
- @apply text-surface-950-50;
248
+ background-color: var(--color-surface-100-900);
249
+ color: var(--color-surface-950-50);
248
250
 
249
- @apply rounded-container;
251
+ border-radius: var(--radius-container);
250
252
  }
251
253
 
252
254
  .q-date__calendar-item .q-btn {
253
- @apply bg-surface-100-900;
254
- @apply text-surface-950-50;
255
+ background-color: var(--color-surface-100-900);
256
+ color: var(--color-surface-950-50);
255
257
 
256
258
  @apply rounded;
257
259
  }
258
260
 
259
261
  .q-date__calendar-item .q-btn--unelevated {
260
- @apply !bg-surface-800;
261
- @apply !text-surface-200;
262
+ background-color: var(--color-surface-800) !important;
263
+ color: var(--color-surface-200) !important;
262
264
  }
263
265
  .dark .q-date__calendar-item .q-btn--unelevated {
264
- @apply !bg-surface-200;
265
- @apply !text-surface-800;
266
+ background-color: var(--color-surface-200) !important;
267
+ color: var(--color-surface-800) !important;
266
268
  }
267
269
 
268
270
  .q-date__navigation .q-btn {
269
271
  @apply bg-transparent;
270
- @apply text-surface-950-50;
272
+ color: var(--color-surface-950-50);
271
273
 
272
274
  @apply rounded;
273
275
  }
274
276
 
275
277
  .q-date__header {
276
- @apply bg-surface-300-700;
277
- @apply text-surface-950-50;
278
+ background-color: var(--color-surface-300-700);
279
+ color: var(--color-surface-950-50);
278
280
  }
279
281
 
280
282
  .q-date__months {
@@ -308,6 +310,6 @@ body,
308
310
  }
309
311
 
310
312
  .q-toolbar {
311
- @apply bg-surface-300-700;
312
- @apply text-surface-950-50;
313
+ background-color: var(--color-surface-300-700);
314
+ color: var(--color-surface-950-50);
313
315
  }