@x33025/sveltely 0.0.48 → 0.0.50
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.
|
@@ -60,15 +60,15 @@
|
|
|
60
60
|
onclick={handleClick}
|
|
61
61
|
>
|
|
62
62
|
{#if pending}
|
|
63
|
-
<Spinner class="size-4" />
|
|
63
|
+
<Spinner class="async-button-icon size-4" />
|
|
64
64
|
{:else if error}
|
|
65
|
-
<CircleAlertIcon class="size-4" />
|
|
65
|
+
<CircleAlertIcon class="async-button-icon size-4 text-red-600" />
|
|
66
66
|
{:else if icon}
|
|
67
67
|
{@const Icon = icon}
|
|
68
|
-
<Icon class="size-4" />
|
|
68
|
+
<Icon class="async-button-icon size-4" />
|
|
69
69
|
{/if}
|
|
70
70
|
{#if styleMode === 'iconAndLabel'}
|
|
71
|
-
<span>{label}</span>
|
|
71
|
+
<span class="async-button-text">{label}</span>
|
|
72
72
|
{/if}
|
|
73
73
|
</button>
|
|
74
74
|
</Tooltip>
|
package/dist/style/index.css
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
@import 'tailwindcss';
|
|
2
2
|
@custom-variant error (&[data-error='true']);
|
|
3
|
+
@custom-variant error-icon (&[data-error='true'] .async-button-icon);
|
|
4
|
+
@custom-variant error-text (&[data-error='true'] .async-button-text);
|
|
3
5
|
|
|
4
6
|
@layer base {
|
|
5
7
|
html,
|
|
@@ -18,11 +20,11 @@
|
|
|
18
20
|
}
|
|
19
21
|
|
|
20
22
|
.vstack {
|
|
21
|
-
@apply flex min-h-0 flex-col;
|
|
23
|
+
@apply flex min-h-0 min-w-0 flex-col;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
.hstack {
|
|
25
|
-
@apply flex min-w-0 flex-row;
|
|
27
|
+
@apply flex min-h-0 min-w-0 flex-row;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
.spacer {
|
package/dist/style.css
CHANGED
|
@@ -434,6 +434,9 @@
|
|
|
434
434
|
.text-gray-700 {
|
|
435
435
|
color: var(--color-gray-700);
|
|
436
436
|
}
|
|
437
|
+
.text-red-600 {
|
|
438
|
+
color: var(--color-red-600);
|
|
439
|
+
}
|
|
437
440
|
.text-red-700 {
|
|
438
441
|
color: var(--color-red-700);
|
|
439
442
|
}
|
|
@@ -579,10 +582,12 @@
|
|
|
579
582
|
.vstack {
|
|
580
583
|
display: flex;
|
|
581
584
|
min-height: calc(var(--spacing) * 0);
|
|
585
|
+
min-width: calc(var(--spacing) * 0);
|
|
582
586
|
flex-direction: column;
|
|
583
587
|
}
|
|
584
588
|
.hstack {
|
|
585
589
|
display: flex;
|
|
590
|
+
min-height: calc(var(--spacing) * 0);
|
|
586
591
|
min-width: calc(var(--spacing) * 0);
|
|
587
592
|
flex-direction: row;
|
|
588
593
|
}
|