@bobbykim/manguito-theme 0.25.0 → 0.27.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.
- package/CHANGELOG.md +204 -0
- package/README.md +81 -55
- package/dist/core.cjs +2 -2
- package/dist/core.d.ts +3 -3
- package/dist/core.js +487 -391
- package/dist/mcl-theme-v4.css +747 -0
- package/package.json +20 -11
- package/dist/mcl-theme.cjs +0 -1
- package/dist/mcl-theme.d.ts +0 -12
- package/dist/mcl-theme.js +0 -523
|
@@ -0,0 +1,747 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Default Theme Variables
|
|
3
|
+
Users can override these by defining them before importing this file
|
|
4
|
+
or by using CSS layers with higher specificity
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@theme {
|
|
8
|
+
/* Colors - Can be overridden by users */
|
|
9
|
+
--color-primary: var(--mcl-primary, #ec489a);
|
|
10
|
+
--color-secondary: var(--mcl-secondary, #00feda);
|
|
11
|
+
--color-success: var(--mcl-success, #78be20);
|
|
12
|
+
--color-info: var(--mcl-info, #00a3e0);
|
|
13
|
+
--color-warning: var(--mcl-warning, #f1ac18);
|
|
14
|
+
--color-danger: var(--mcl-danger, #cc2f2f);
|
|
15
|
+
--color-light-1: var(--mcl-light-1, #fafafa);
|
|
16
|
+
--color-light-2: var(--mcl-light-2, #f1f1f1);
|
|
17
|
+
--color-light-3: var(--mcl-light-3, #e8e8e8);
|
|
18
|
+
--color-light-4: var(--mcl-light-4, #d0d0d0);
|
|
19
|
+
--color-dark-1: var(--mcl-dark-1, #747474);
|
|
20
|
+
--color-dark-2: var(--mcl-dark-2, #484848);
|
|
21
|
+
--color-dark-3: var(--mcl-dark-3, #1f2937);
|
|
22
|
+
--color-dark-4: var(--mcl-dark-4, #191919);
|
|
23
|
+
|
|
24
|
+
/* Custom Spacing - Can be overridden by users */
|
|
25
|
+
--spacing-3xs: var(--mcl-spacing-3xs, 0.25rem); /* 4px */
|
|
26
|
+
--spacing-2xs: var(--mcl-spacing-2xs, 0.5rem); /* 8px */
|
|
27
|
+
--spacing-xs: var(--mcl-spacing-xs, 1rem); /* 16px */
|
|
28
|
+
--spacing-sm: var(--mcl-spacing-sm, 1.5rem); /* 24px */
|
|
29
|
+
--spacing-md: var(--mcl-spacing-md, 2rem); /* 32px */
|
|
30
|
+
--spacing-lg: var(--mcl-spacing-lg, 3rem); /* 48px */
|
|
31
|
+
--spacing-xl: var(--mcl-spacing-xl, 4rem); /* 64px */
|
|
32
|
+
--spacing-2xl: var(--mcl-spacing-2xl, 6rem); /* 96px */
|
|
33
|
+
--spacing-3xl: var(--mcl-spacing-3xl, 8rem); /* 128px */
|
|
34
|
+
|
|
35
|
+
/* Font Sizes - Can be overridden by users */
|
|
36
|
+
--text-xs: var(--mcl-text-size-xs, 0.75rem); /* 12px */
|
|
37
|
+
--text-sm: var(--mcl-text-size-sm, 0.875rem); /* 14px */
|
|
38
|
+
--text-md: var(--mcl-text-size-md, 1rem); /* 16px */
|
|
39
|
+
--text-lg: var(--mcl-text-size-lg, 1.125rem); /* 18px */
|
|
40
|
+
--text-xl: var(--mcl-text-size-xl, 1.25rem); /* 20px */
|
|
41
|
+
|
|
42
|
+
/* Container breakpoints */
|
|
43
|
+
--breakpoint-*: initial;
|
|
44
|
+
--breakpoint-sm: 40rem; /* 640px */
|
|
45
|
+
--breakpoint-md: 48rem; /* 768px */
|
|
46
|
+
--breakpoint-lg: 64rem; /* 1024px */
|
|
47
|
+
--breakpoint-xl: 80rem; /* 1280px */
|
|
48
|
+
--breakpoint-2xl: 96rem; /* 1536px */
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Base Styles - replaces addBase from your plugin */
|
|
52
|
+
@layer base {
|
|
53
|
+
body {
|
|
54
|
+
font-size: 1rem;
|
|
55
|
+
line-height: 1.5;
|
|
56
|
+
}
|
|
57
|
+
h1 {
|
|
58
|
+
font-size: 1.875rem;
|
|
59
|
+
font-weight: bold;
|
|
60
|
+
line-height: 1.2;
|
|
61
|
+
}
|
|
62
|
+
h2 {
|
|
63
|
+
font-size: 1.5rem;
|
|
64
|
+
font-weight: bold;
|
|
65
|
+
line-height: 1.2;
|
|
66
|
+
}
|
|
67
|
+
h3 {
|
|
68
|
+
font-size: 1.125rem;
|
|
69
|
+
font-weight: bold;
|
|
70
|
+
line-height: 1.2;
|
|
71
|
+
}
|
|
72
|
+
h4 {
|
|
73
|
+
font-size: 1rem;
|
|
74
|
+
font-weight: bold;
|
|
75
|
+
line-height: 1.2;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Responsive typography */
|
|
79
|
+
@media (min-width: theme(--breakpoint-lg)) {
|
|
80
|
+
h1 {
|
|
81
|
+
font-size: 3rem;
|
|
82
|
+
}
|
|
83
|
+
h2 {
|
|
84
|
+
font-size: 2.25rem;
|
|
85
|
+
}
|
|
86
|
+
h3 {
|
|
87
|
+
font-size: 1.25rem;
|
|
88
|
+
}
|
|
89
|
+
h4 {
|
|
90
|
+
font-size: 1.125rem;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@layer components {
|
|
96
|
+
/* container class */
|
|
97
|
+
.container {
|
|
98
|
+
width: 100%;
|
|
99
|
+
margin-right: auto;
|
|
100
|
+
margin-left: auto;
|
|
101
|
+
}
|
|
102
|
+
@media (min-width: var(--breakpoint-sm)) {
|
|
103
|
+
.container {
|
|
104
|
+
max-width: var(--breakpoint-sm);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
@media (min-width: var(--breakpoint-md)) {
|
|
108
|
+
.container {
|
|
109
|
+
max-width: var(--breakpoint-md);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
@media (min-width: var(--breakpoint-lg)) {
|
|
113
|
+
.container {
|
|
114
|
+
max-width: var(--breakpoint-lg);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
@media (min-width: var(--breakpoint-xl)) {
|
|
118
|
+
.container {
|
|
119
|
+
max-width: var(--breakpoint-xl);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
@media (min-width: var(--breakpoint-2xl)) {
|
|
123
|
+
.container {
|
|
124
|
+
max-width: var(--breakpoint-2xl);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
/* Heading size variants */
|
|
128
|
+
.h1-sm {
|
|
129
|
+
font-size: 1.5rem; /* 24px */
|
|
130
|
+
font-weight: bold;
|
|
131
|
+
line-height: 1.2;
|
|
132
|
+
}
|
|
133
|
+
.h1-md {
|
|
134
|
+
font-size: 1.875rem; /* 30px */
|
|
135
|
+
font-weight: bold;
|
|
136
|
+
line-height: 1.2;
|
|
137
|
+
}
|
|
138
|
+
.h1-lg {
|
|
139
|
+
font-size: 2.25rem; /* 36px */
|
|
140
|
+
font-weight: bold;
|
|
141
|
+
line-height: 1.2;
|
|
142
|
+
}
|
|
143
|
+
.h1-xl {
|
|
144
|
+
font-size: 3.5rem; /* 56px */
|
|
145
|
+
font-weight: bold;
|
|
146
|
+
line-height: 1.2;
|
|
147
|
+
}
|
|
148
|
+
@media (min-width: theme(--breakpoint-lg)) {
|
|
149
|
+
.h1-sm {
|
|
150
|
+
font-size: 2.25rem; /* 36px */
|
|
151
|
+
}
|
|
152
|
+
.h1-md {
|
|
153
|
+
font-size: 3rem; /* 48px */
|
|
154
|
+
}
|
|
155
|
+
.h1-lg {
|
|
156
|
+
font-size: 3.5rem; /* 56px */
|
|
157
|
+
}
|
|
158
|
+
.h1-xl {
|
|
159
|
+
font-size: 4.5rem; /* 72px */
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
/* H2 variants */
|
|
163
|
+
.h2-sm {
|
|
164
|
+
font-size: 1.125rem; /* 18px */
|
|
165
|
+
font-weight: bold;
|
|
166
|
+
line-height: 1.2;
|
|
167
|
+
}
|
|
168
|
+
.h2-md {
|
|
169
|
+
font-size: 1.5rem; /* 24px */
|
|
170
|
+
font-weight: bold;
|
|
171
|
+
line-height: 1.2;
|
|
172
|
+
}
|
|
173
|
+
.h2-lg {
|
|
174
|
+
font-size: 1.875rem; /* 30px */
|
|
175
|
+
font-weight: bold;
|
|
176
|
+
line-height: 1.2;
|
|
177
|
+
}
|
|
178
|
+
.h2-xl {
|
|
179
|
+
font-size: 3rem; /* 48px */
|
|
180
|
+
font-weight: bold;
|
|
181
|
+
line-height: 1.2;
|
|
182
|
+
}
|
|
183
|
+
@media (min-width: theme(--breakpoint-lg)) {
|
|
184
|
+
.h2-sm {
|
|
185
|
+
font-size: 1.5rem; /* 24px */
|
|
186
|
+
}
|
|
187
|
+
.h2-md {
|
|
188
|
+
font-size: 2.25rem; /* 36px */
|
|
189
|
+
}
|
|
190
|
+
.h2-lg {
|
|
191
|
+
font-size: 3rem; /* 48px */
|
|
192
|
+
}
|
|
193
|
+
.h2-xl {
|
|
194
|
+
font-size: 3.75rem; /* 60px */
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
/* H3 variants */
|
|
198
|
+
.h3-sm {
|
|
199
|
+
font-size: 1rem; /* 16px */
|
|
200
|
+
font-weight: bold;
|
|
201
|
+
line-height: 1.2;
|
|
202
|
+
}
|
|
203
|
+
.h3-md {
|
|
204
|
+
font-size: 1.125rem; /* 18px */
|
|
205
|
+
font-weight: bold;
|
|
206
|
+
line-height: 1.2;
|
|
207
|
+
}
|
|
208
|
+
.h3-lg {
|
|
209
|
+
font-size: 1.125rem; /* 18px */
|
|
210
|
+
font-weight: bold;
|
|
211
|
+
line-height: 1.2;
|
|
212
|
+
}
|
|
213
|
+
.h3-xl {
|
|
214
|
+
font-size: 1.875rem; /* 30px */
|
|
215
|
+
font-weight: bold;
|
|
216
|
+
line-height: 1.2;
|
|
217
|
+
}
|
|
218
|
+
@media (min-width: theme(--breakpoint-lg)) {
|
|
219
|
+
.h3-md {
|
|
220
|
+
font-size: 1.25rem; /* 20px */
|
|
221
|
+
}
|
|
222
|
+
.h3-lg {
|
|
223
|
+
font-size: 1.5rem; /* 24px */
|
|
224
|
+
}
|
|
225
|
+
.h3-xl {
|
|
226
|
+
font-size: 2.25rem; /* 36px */
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
/* H4 variants */
|
|
230
|
+
.h4-sm {
|
|
231
|
+
font-size: 0.875rem; /* 14px */
|
|
232
|
+
font-weight: bold;
|
|
233
|
+
line-height: 1.2;
|
|
234
|
+
}
|
|
235
|
+
.h4-md {
|
|
236
|
+
font-size: 1rem; /* 16px */
|
|
237
|
+
font-weight: bold;
|
|
238
|
+
line-height: 1.2;
|
|
239
|
+
}
|
|
240
|
+
.h4-lg {
|
|
241
|
+
font-size: 1rem; /* 16px */
|
|
242
|
+
font-weight: bold;
|
|
243
|
+
line-height: 1.2;
|
|
244
|
+
}
|
|
245
|
+
.h4-xl {
|
|
246
|
+
font-size: 1.5rem; /* 24px */
|
|
247
|
+
font-weight: bold;
|
|
248
|
+
line-height: 1.2;
|
|
249
|
+
}
|
|
250
|
+
@media (min-width: theme(--breakpoint-lg)) {
|
|
251
|
+
.h4-sm {
|
|
252
|
+
font-size: 1rem; /* 16px */
|
|
253
|
+
}
|
|
254
|
+
.h4-md {
|
|
255
|
+
font-size: 1.125rem; /* 18px */
|
|
256
|
+
}
|
|
257
|
+
.h4-lg {
|
|
258
|
+
font-size: 1.25rem; /* 20px */
|
|
259
|
+
}
|
|
260
|
+
.h4-xl {
|
|
261
|
+
font-size: 1.875rem; /* 30px */
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
/* MCL Link */
|
|
265
|
+
.mcl-link {
|
|
266
|
+
color: var(--mcl-link-color, theme(--color-primary));
|
|
267
|
+
text-decoration: underline;
|
|
268
|
+
transition: color 200ms ease-in;
|
|
269
|
+
}
|
|
270
|
+
.mcl-link:hover {
|
|
271
|
+
color: --alpha(var(--mcl-link-color, theme(--color-primary)) / 60%);
|
|
272
|
+
}
|
|
273
|
+
/* MCL List */
|
|
274
|
+
.mcl-list {
|
|
275
|
+
list-style-position: inside;
|
|
276
|
+
padding: 0;
|
|
277
|
+
margin-left: 1rem;
|
|
278
|
+
list-style: none;
|
|
279
|
+
}
|
|
280
|
+
.mcl-list li {
|
|
281
|
+
margin-bottom: 0.5rem;
|
|
282
|
+
}
|
|
283
|
+
.mcl-list li::before {
|
|
284
|
+
content: '•';
|
|
285
|
+
font-weight: 700;
|
|
286
|
+
display: inline-block;
|
|
287
|
+
width: 1rem;
|
|
288
|
+
margin-left: -1rem;
|
|
289
|
+
color: var(--mcl-list-color, theme(--color-primary));
|
|
290
|
+
}
|
|
291
|
+
.mcl-list.mcl-list-sm li::before {
|
|
292
|
+
font-weight: 500;
|
|
293
|
+
}
|
|
294
|
+
.mcl-list.mcl-list-lg li::before {
|
|
295
|
+
font-weight: 900;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* Button Base */
|
|
299
|
+
.btn {
|
|
300
|
+
padding: 0.5rem 1rem;
|
|
301
|
+
cursor: pointer;
|
|
302
|
+
font-size: 1rem;
|
|
303
|
+
transition-property:
|
|
304
|
+
color, background-color, outline-width, outline-offset, outline-color;
|
|
305
|
+
transition-duration: 300ms;
|
|
306
|
+
transition-timing-function: linear;
|
|
307
|
+
overflow: hidden;
|
|
308
|
+
display: inline-block;
|
|
309
|
+
font-weight: bold;
|
|
310
|
+
outline-style: solid;
|
|
311
|
+
outline-width: 0;
|
|
312
|
+
outline-offset: 0;
|
|
313
|
+
outline-color: var(--mcl-btn-color, theme(--color-primary));
|
|
314
|
+
background-color: var(--mcl-btn-color, theme(--color-primary));
|
|
315
|
+
text-align: center;
|
|
316
|
+
border-radius: theme(--radius-sm);
|
|
317
|
+
}
|
|
318
|
+
.btn:hover {
|
|
319
|
+
background-color: --alpha(
|
|
320
|
+
var(--mcl-btn-color, theme(--color-primary)) / 70%
|
|
321
|
+
);
|
|
322
|
+
outline-color: --alpha(var(--mcl-btn-color, theme(--color-primary)) / 70%);
|
|
323
|
+
}
|
|
324
|
+
.btn:focus {
|
|
325
|
+
outline-width: 0.25rem; /* 4px */
|
|
326
|
+
outline-offset: 0.125rem; /* 2px */
|
|
327
|
+
}
|
|
328
|
+
/* Button variants */
|
|
329
|
+
.btn.btn-round {
|
|
330
|
+
border-radius: 9999px;
|
|
331
|
+
}
|
|
332
|
+
.btn.btn-full {
|
|
333
|
+
display: block;
|
|
334
|
+
width: 100%;
|
|
335
|
+
}
|
|
336
|
+
.btn.btn-sm {
|
|
337
|
+
padding: 0.25rem 0.5rem;
|
|
338
|
+
font-size: 0.875rem;
|
|
339
|
+
}
|
|
340
|
+
.btn.btn-lg {
|
|
341
|
+
padding: 0.625rem 1.25rem;
|
|
342
|
+
font-size: 1.125rem;
|
|
343
|
+
}
|
|
344
|
+
.btn.btn-no-ring {
|
|
345
|
+
outline: none;
|
|
346
|
+
}
|
|
347
|
+
/* Inverted button */
|
|
348
|
+
.btn.btn-invert {
|
|
349
|
+
border: 2px solid var(--mcl-btn-color, theme(--color-primary));
|
|
350
|
+
color: var(--mcl-btn-color, theme(--color-primary));
|
|
351
|
+
background-color: transparent;
|
|
352
|
+
}
|
|
353
|
+
.btn.btn-invert:hover {
|
|
354
|
+
background-color: var(--mcl-btn-color, theme(--color-primary));
|
|
355
|
+
outline-color: var(--mcl-btn-color, theme(--color-primary));
|
|
356
|
+
color: white;
|
|
357
|
+
}
|
|
358
|
+
/* Progress button */
|
|
359
|
+
.btn.btn-progress {
|
|
360
|
+
position: relative;
|
|
361
|
+
border: 2px solid var(--mcl-btn-color, theme(--color-primary));
|
|
362
|
+
color: var(--mcl-btn-color, theme(--color-primary));
|
|
363
|
+
background-color: transparent;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.btn.btn-progress::before {
|
|
367
|
+
content: '';
|
|
368
|
+
position: absolute;
|
|
369
|
+
height: 100%;
|
|
370
|
+
width: 0;
|
|
371
|
+
bottom: 0;
|
|
372
|
+
left: 0;
|
|
373
|
+
transition: width 300ms linear;
|
|
374
|
+
background-color: var(--mcl-btn-color, theme(--color-primary));
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.btn.btn-progress > * {
|
|
378
|
+
position: relative;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.btn.btn-progress.btn-progress-r::before {
|
|
382
|
+
left: 100%;
|
|
383
|
+
transition: all 300ms linear;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.btn.btn-progress:hover,
|
|
387
|
+
.btn.btn-progress:focus {
|
|
388
|
+
color: white;
|
|
389
|
+
outline-color: var(--mcl-btn-color, theme(--color-primary));
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.btn.btn-progress:hover::before,
|
|
393
|
+
.btn.btn-progress:focus::before {
|
|
394
|
+
width: 100%;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.btn.btn-progress.btn-progress-r:hover::before,
|
|
398
|
+
.btn.btn-progress.btn-progress-r:focus::before {
|
|
399
|
+
width: 100%;
|
|
400
|
+
left: 0;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/* Button Groups */
|
|
404
|
+
.btn-group {
|
|
405
|
+
display: inline-flex;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.btn-group.btn-group-span {
|
|
409
|
+
width: 100%;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.btn-group.btn-group-span .btn {
|
|
413
|
+
display: block;
|
|
414
|
+
width: 100%;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.btn-group .btn {
|
|
418
|
+
outline: none;
|
|
419
|
+
border-radius: 0;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.btn-group .btn:first-child {
|
|
423
|
+
border-top-left-radius: theme(--radius-sm);
|
|
424
|
+
border-bottom-left-radius: theme(--radius-sm);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.btn-group .btn:last-child {
|
|
428
|
+
border-top-right-radius: theme(--radius-sm);
|
|
429
|
+
border-bottom-right-radius: theme(--radius-sm);
|
|
430
|
+
}
|
|
431
|
+
/* Tooltips */
|
|
432
|
+
.tooltip {
|
|
433
|
+
font-weight: normal;
|
|
434
|
+
font-size: theme(--text-sm);
|
|
435
|
+
transition: opacity 200ms;
|
|
436
|
+
padding: theme(--spacing-2xs);
|
|
437
|
+
position: absolute;
|
|
438
|
+
border-radius: theme(--radius-sm);
|
|
439
|
+
text-align: center;
|
|
440
|
+
filter: drop-shadow(var(--drop-shadow-md));
|
|
441
|
+
background-color: theme(--color-dark-3);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.tooltip.tooltip-top {
|
|
445
|
+
left: 50%;
|
|
446
|
+
bottom: 110%;
|
|
447
|
+
transform: translateX(-50%);
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.tooltip.tooltip-top::after {
|
|
451
|
+
content: ' ';
|
|
452
|
+
position: absolute;
|
|
453
|
+
top: 100%;
|
|
454
|
+
left: 50%;
|
|
455
|
+
margin-left: -5px;
|
|
456
|
+
border-width: 5px;
|
|
457
|
+
border-style: solid;
|
|
458
|
+
border-top-color: theme(--color-dark-3);
|
|
459
|
+
border-left-color: transparent;
|
|
460
|
+
border-right-color: transparent;
|
|
461
|
+
border-bottom-color: transparent;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.tooltip-bottom {
|
|
465
|
+
left: 50%;
|
|
466
|
+
top: 110%;
|
|
467
|
+
transform: translateX(-50%);
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.tooltip.tooltip-bottom::after {
|
|
471
|
+
content: ' ';
|
|
472
|
+
position: absolute;
|
|
473
|
+
bottom: 100%;
|
|
474
|
+
left: 50%;
|
|
475
|
+
margin-left: -5px;
|
|
476
|
+
border-width: 5px;
|
|
477
|
+
border-style: solid;
|
|
478
|
+
border-top-color: transparent;
|
|
479
|
+
border-left-color: transparent;
|
|
480
|
+
border-right-color: transparent;
|
|
481
|
+
border-bottom-color: theme(--color-dark-3);
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.tooltip.tooltip-left {
|
|
485
|
+
top: 50%;
|
|
486
|
+
right: 110%;
|
|
487
|
+
transform: translateY(-50%);
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
.tooltip.tooltip-left::after {
|
|
491
|
+
content: ' ';
|
|
492
|
+
position: absolute;
|
|
493
|
+
top: 50%;
|
|
494
|
+
left: 100%;
|
|
495
|
+
margin-top: -5px;
|
|
496
|
+
border-width: 5px;
|
|
497
|
+
border-style: solid;
|
|
498
|
+
border-top-color: transparent;
|
|
499
|
+
border-right-color: transparent;
|
|
500
|
+
border-bottom-color: transparent;
|
|
501
|
+
border-left-color: theme(--color-dark-3);
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
.tooltip.tooltip-right {
|
|
505
|
+
top: 50%;
|
|
506
|
+
left: 110%;
|
|
507
|
+
transform: translateY(-50%);
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
.tooltip.tooltip-right::after {
|
|
511
|
+
content: ' ';
|
|
512
|
+
position: absolute;
|
|
513
|
+
top: 50%;
|
|
514
|
+
right: 100%;
|
|
515
|
+
margin-top: -5px;
|
|
516
|
+
border-width: 5px;
|
|
517
|
+
border-style: solid;
|
|
518
|
+
border-top-color: transparent;
|
|
519
|
+
border-left-color: transparent;
|
|
520
|
+
border-bottom-color: transparent;
|
|
521
|
+
border-right-color: theme(--color-dark-3);
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
/* set variable for color-specific button variants */
|
|
526
|
+
@utility btn-* {
|
|
527
|
+
--mcl-btn-color: --value(--color-*);
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
/* set varibale for list color variants */
|
|
531
|
+
@utility mcl-list-* {
|
|
532
|
+
--mcl-list-color: --value(--color-*);
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
/* set variable for link color variants */
|
|
536
|
+
@utility mcl-link-* {
|
|
537
|
+
--mcl-link-color: --value(--color-*);
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
/* background opacity class which has been deprecated with tailwind v4 */
|
|
541
|
+
@utility bg-opacity-* {
|
|
542
|
+
--mcl-bg-opacity: calc(--value(integer) / 100);
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
@utility bg-* {
|
|
546
|
+
background-color: --alpha(
|
|
547
|
+
--value(--color-*) / calc(var(--mcl-bg-opacity, 1) * 100%)
|
|
548
|
+
);
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
/* new outline opacity class which will replace deprecated ring-opacity class */
|
|
552
|
+
@utility outline-opacity-* {
|
|
553
|
+
--mcl-outline-opacity: calc(--value(integer) / 100);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
@utility outline-* {
|
|
557
|
+
outline-color: --alpha(
|
|
558
|
+
--value(--color-*) / calc(var(--mcl-outline-opacity, 1) * 100%)
|
|
559
|
+
);
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
/* Utility Classes - replaces addUtilities from your plugin */
|
|
563
|
+
@layer utilities {
|
|
564
|
+
/* Tooltip color variants */
|
|
565
|
+
/* primary */
|
|
566
|
+
.tooltip.bg-primary::after {
|
|
567
|
+
border-color: theme(--color-primary) transparent transparent transparent;
|
|
568
|
+
}
|
|
569
|
+
.tooltip.tooltip-bottom.bg-primary::after {
|
|
570
|
+
border-color: transparent transparent theme(--color-primary) transparent;
|
|
571
|
+
}
|
|
572
|
+
.tooltip.tooltip-left.bg-primary::after {
|
|
573
|
+
border-color: transparent transparent transparent theme(--color-primary);
|
|
574
|
+
}
|
|
575
|
+
.tooltip.tooltip-right.bg-primary::after {
|
|
576
|
+
border-color: transparent theme(--color-primary) transparent transparent;
|
|
577
|
+
}
|
|
578
|
+
/* secondary */
|
|
579
|
+
.tooltip.bg-secondary::after {
|
|
580
|
+
border-color: theme(--color-secondary) transparent transparent transparent;
|
|
581
|
+
}
|
|
582
|
+
.tooltip.tooltip-bottom.bg-secondary::after {
|
|
583
|
+
border-color: transparent transparent theme(--color-secondary) transparent;
|
|
584
|
+
}
|
|
585
|
+
.tooltip.tooltip-left.bg-secondary::after {
|
|
586
|
+
border-color: transparent transparent transparent theme(--color-secondary);
|
|
587
|
+
}
|
|
588
|
+
.tooltip.tooltip-right.bg-secondary::after {
|
|
589
|
+
border-color: transparent theme(--color-secondary) transparent transparent;
|
|
590
|
+
}
|
|
591
|
+
/* success */
|
|
592
|
+
.tooltip.bg-success::after {
|
|
593
|
+
border-color: theme(--color-success) transparent transparent transparent;
|
|
594
|
+
}
|
|
595
|
+
.tooltip.tooltip-bottom.bg-success::after {
|
|
596
|
+
border-color: transparent transparent theme(--color-success) transparent;
|
|
597
|
+
}
|
|
598
|
+
.tooltip.tooltip-left.bg-success::after {
|
|
599
|
+
border-color: transparent transparent transparent theme(--color-success);
|
|
600
|
+
}
|
|
601
|
+
.tooltip.tooltip-right.bg-success::after {
|
|
602
|
+
border-color: transparent theme(--color-success) transparent transparent;
|
|
603
|
+
}
|
|
604
|
+
/* danger */
|
|
605
|
+
.tooltip.bg-danger::after {
|
|
606
|
+
border-color: theme(--color-danger) transparent transparent transparent;
|
|
607
|
+
}
|
|
608
|
+
.tooltip.tooltip-bottom.bg-danger::after {
|
|
609
|
+
border-color: transparent transparent theme(--color-danger) transparent;
|
|
610
|
+
}
|
|
611
|
+
.tooltip.tooltip-left.bg-danger::after {
|
|
612
|
+
border-color: transparent transparent transparent theme(--color-danger);
|
|
613
|
+
}
|
|
614
|
+
.tooltip.tooltip-right.bg-danger::after {
|
|
615
|
+
border-color: transparent theme(--color-danger) transparent transparent;
|
|
616
|
+
}
|
|
617
|
+
/* info */
|
|
618
|
+
.tooltip.bg-info::after {
|
|
619
|
+
border-color: theme(--color-info) transparent transparent transparent;
|
|
620
|
+
}
|
|
621
|
+
.tooltip.tooltip-bottom.bg-info::after {
|
|
622
|
+
border-color: transparent transparent theme(--color-info) transparent;
|
|
623
|
+
}
|
|
624
|
+
.tooltip.tooltip-left.bg-info::after {
|
|
625
|
+
border-color: transparent transparent transparent theme(--color-info);
|
|
626
|
+
}
|
|
627
|
+
.tooltip.tooltip-right.bg-info::after {
|
|
628
|
+
border-color: transparent theme(--color-info) transparent transparent;
|
|
629
|
+
}
|
|
630
|
+
/* warning */
|
|
631
|
+
.tooltip.bg-warning::after {
|
|
632
|
+
border-color: theme(--color-warning) transparent transparent transparent;
|
|
633
|
+
}
|
|
634
|
+
.tooltip.tooltip-bottom.bg-warning::after {
|
|
635
|
+
border-color: transparent transparent theme(--color-warning) transparent;
|
|
636
|
+
}
|
|
637
|
+
.tooltip.tooltip-left.bg-warning::after {
|
|
638
|
+
border-color: transparent transparent transparent theme(--color-warning);
|
|
639
|
+
}
|
|
640
|
+
.tooltip.tooltip-right.bg-warning::after {
|
|
641
|
+
border-color: transparent theme(--color-warning) transparent transparent;
|
|
642
|
+
}
|
|
643
|
+
/* light-1 */
|
|
644
|
+
.tooltip.bg-light-1::after {
|
|
645
|
+
border-color: theme(--color-light-1) transparent transparent transparent;
|
|
646
|
+
}
|
|
647
|
+
.tooltip.tooltip-bottom.bg-light-1::after {
|
|
648
|
+
border-color: transparent transparent theme(--color-light-1) transparent;
|
|
649
|
+
}
|
|
650
|
+
.tooltip.tooltip-left.bg-light-1::after {
|
|
651
|
+
border-color: transparent transparent transparent theme(--color-light-1);
|
|
652
|
+
}
|
|
653
|
+
.tooltip.tooltip-right.bg-light-1::after {
|
|
654
|
+
border-color: transparent theme(--color-light-1) transparent transparent;
|
|
655
|
+
}
|
|
656
|
+
/* light-2 */
|
|
657
|
+
.tooltip.bg-light-2::after {
|
|
658
|
+
border-color: theme(--color-light-2) transparent transparent transparent;
|
|
659
|
+
}
|
|
660
|
+
.tooltip.tooltip-bottom.bg-light-2::after {
|
|
661
|
+
border-color: transparent transparent theme(--color-light-2) transparent;
|
|
662
|
+
}
|
|
663
|
+
.tooltip.tooltip-left.bg-light-2::after {
|
|
664
|
+
border-color: transparent transparent transparent theme(--color-light-2);
|
|
665
|
+
}
|
|
666
|
+
.tooltip.tooltip-right.bg-light-2::after {
|
|
667
|
+
border-color: transparent theme(--color-light-2) transparent transparent;
|
|
668
|
+
}
|
|
669
|
+
/* light-3 */
|
|
670
|
+
.tooltip.bg-light-3::after {
|
|
671
|
+
border-color: theme(--color-light-3) transparent transparent transparent;
|
|
672
|
+
}
|
|
673
|
+
.tooltip.tooltip-bottom.bg-light-3::after {
|
|
674
|
+
border-color: transparent transparent theme(--color-light-3) transparent;
|
|
675
|
+
}
|
|
676
|
+
.tooltip.tooltip-left.bg-light-3::after {
|
|
677
|
+
border-color: transparent transparent transparent theme(--color-light-3);
|
|
678
|
+
}
|
|
679
|
+
.tooltip.tooltip-right.bg-light-3::after {
|
|
680
|
+
border-color: transparent theme(--color-light-3) transparent transparent;
|
|
681
|
+
}
|
|
682
|
+
/* light-4 */
|
|
683
|
+
.tooltip.bg-light-4::after {
|
|
684
|
+
border-color: theme(--color-light-4) transparent transparent transparent;
|
|
685
|
+
}
|
|
686
|
+
.tooltip.tooltip-bottom.bg-light-4::after {
|
|
687
|
+
border-color: transparent transparent theme(--color-light-4) transparent;
|
|
688
|
+
}
|
|
689
|
+
.tooltip.tooltip-left.bg-light-4::after {
|
|
690
|
+
border-color: transparent transparent transparent theme(--color-light-4);
|
|
691
|
+
}
|
|
692
|
+
.tooltip.tooltip-right.bg-light-4::after {
|
|
693
|
+
border-color: transparent theme(--color-light-4) transparent transparent;
|
|
694
|
+
}
|
|
695
|
+
/* dark-1 */
|
|
696
|
+
.tooltip.bg-dark-1::after {
|
|
697
|
+
border-color: theme(--color-dark-1) transparent transparent transparent;
|
|
698
|
+
}
|
|
699
|
+
.tooltip.tooltip-bottom.bg-dark-1::after {
|
|
700
|
+
border-color: transparent transparent theme(--color-dark-1) transparent;
|
|
701
|
+
}
|
|
702
|
+
.tooltip.tooltip-left.bg-dark-1::after {
|
|
703
|
+
border-color: transparent transparent transparent theme(--color-dark-1);
|
|
704
|
+
}
|
|
705
|
+
.tooltip.tooltip-right.bg-dark-1::after {
|
|
706
|
+
border-color: transparent theme(--color-dark-1) transparent transparent;
|
|
707
|
+
}
|
|
708
|
+
/* dark-2 */
|
|
709
|
+
.tooltip.bg-dark-2::after {
|
|
710
|
+
border-color: theme(--color-dark-2) transparent transparent transparent;
|
|
711
|
+
}
|
|
712
|
+
.tooltip.tooltip-bottom.bg-dark-2::after {
|
|
713
|
+
border-color: transparent transparent theme(--color-dark-2) transparent;
|
|
714
|
+
}
|
|
715
|
+
.tooltip.tooltip-left.bg-dark-2::after {
|
|
716
|
+
border-color: transparent transparent transparent theme(--color-dark-2);
|
|
717
|
+
}
|
|
718
|
+
.tooltip.tooltip-right.bg-dark-2::after {
|
|
719
|
+
border-color: transparent theme(--color-dark-2) transparent transparent;
|
|
720
|
+
}
|
|
721
|
+
/* dark-3 */
|
|
722
|
+
.tooltip.bg-dark-3::after {
|
|
723
|
+
border-color: theme(--color-dark-3) transparent transparent transparent;
|
|
724
|
+
}
|
|
725
|
+
.tooltip.tooltip-bottom.bg-dark-3::after {
|
|
726
|
+
border-color: transparent transparent theme(--color-dark-3) transparent;
|
|
727
|
+
}
|
|
728
|
+
.tooltip.tooltip-left.bg-dark-3::after {
|
|
729
|
+
border-color: transparent transparent transparent theme(--color-dark-3);
|
|
730
|
+
}
|
|
731
|
+
.tooltip.tooltip-right.bg-dark-3::after {
|
|
732
|
+
border-color: transparent theme(--color-dark-3) transparent transparent;
|
|
733
|
+
}
|
|
734
|
+
/* dark-4 */
|
|
735
|
+
.tooltip.bg-dark-4::after {
|
|
736
|
+
border-color: theme(--color-dark-4) transparent transparent transparent;
|
|
737
|
+
}
|
|
738
|
+
.tooltip.tooltip-bottom.bg-dark-4::after {
|
|
739
|
+
border-color: transparent transparent theme(--color-dark-4) transparent;
|
|
740
|
+
}
|
|
741
|
+
.tooltip.tooltip-left.bg-dark-4::after {
|
|
742
|
+
border-color: transparent transparent transparent theme(--color-dark-4);
|
|
743
|
+
}
|
|
744
|
+
.tooltip.tooltip-right.bg-dark-4::after {
|
|
745
|
+
border-color: transparent theme(--color-dark-4) transparent transparent;
|
|
746
|
+
}
|
|
747
|
+
}
|