@14ch/svelte-ui 0.0.53 → 0.0.55
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.
|
@@ -385,8 +385,10 @@
|
|
|
385
385
|
<div class="button__loading">
|
|
386
386
|
<LoadingSpinner size={18} strokeWidth={2} color="currentColor" />
|
|
387
387
|
</div>
|
|
388
|
-
{
|
|
389
|
-
|
|
388
|
+
{/if}
|
|
389
|
+
|
|
390
|
+
{#if icon && iconPosition === 'left'}
|
|
391
|
+
<div class="button__icon button__icon--left" class:button__icon--hidden={loading}>
|
|
390
392
|
{@render iconContent()}
|
|
391
393
|
</div>
|
|
392
394
|
{/if}
|
|
@@ -395,14 +397,14 @@
|
|
|
395
397
|
{@render children()}
|
|
396
398
|
</div>
|
|
397
399
|
|
|
398
|
-
{#if icon && iconPosition === 'right'
|
|
399
|
-
<div class="button__icon button__icon--right">
|
|
400
|
+
{#if icon && iconPosition === 'right'}
|
|
401
|
+
<div class="button__icon button__icon--right" class:button__icon--hidden={loading}>
|
|
400
402
|
{@render iconContent()}
|
|
401
403
|
</div>
|
|
402
404
|
{/if}
|
|
403
405
|
|
|
404
|
-
{#if popup
|
|
405
|
-
<div class="button__popup-icon">
|
|
406
|
+
{#if popup}
|
|
407
|
+
<div class="button__popup-icon" class:button__popup-icon--hidden={loading}>
|
|
406
408
|
<Icon>arrow_drop_down</Icon>
|
|
407
409
|
</div>
|
|
408
410
|
{/if}
|
|
@@ -560,7 +562,9 @@
|
|
|
560
562
|
transition-duration: var(--svelte-ui-transition-duration);
|
|
561
563
|
}
|
|
562
564
|
|
|
563
|
-
.button__label--hidden
|
|
565
|
+
.button__label--hidden,
|
|
566
|
+
.button__icon--hidden,
|
|
567
|
+
.button__popup-icon--hidden {
|
|
564
568
|
opacity: 0;
|
|
565
569
|
}
|
|
566
570
|
|
|
@@ -366,8 +366,10 @@
|
|
|
366
366
|
<div class="fab__loading">
|
|
367
367
|
<LoadingSpinner size={24} strokeWidth={2} color="currentColor" />
|
|
368
368
|
</div>
|
|
369
|
-
{
|
|
370
|
-
|
|
369
|
+
{/if}
|
|
370
|
+
|
|
371
|
+
{#if icon && iconPosition === 'left'}
|
|
372
|
+
<div class="fab__icon fab__icon--left" class:fab__icon--hidden={loading}>
|
|
371
373
|
{@render iconContent()}
|
|
372
374
|
</div>
|
|
373
375
|
{/if}
|
|
@@ -378,8 +380,8 @@
|
|
|
378
380
|
</div>
|
|
379
381
|
{/if}
|
|
380
382
|
|
|
381
|
-
{#if icon && iconPosition === 'right'
|
|
382
|
-
<div class="fab__icon fab__icon--right">
|
|
383
|
+
{#if icon && iconPosition === 'right'}
|
|
384
|
+
<div class="fab__icon fab__icon--right" class:fab__icon--hidden={loading}>
|
|
383
385
|
{@render iconContent()}
|
|
384
386
|
</div>
|
|
385
387
|
{/if}
|
|
@@ -513,7 +515,8 @@
|
|
|
513
515
|
transition-property: opacity;
|
|
514
516
|
transition-duration: var(--svelte-ui-transition-duration);
|
|
515
517
|
}
|
|
516
|
-
.fab .fab__label--hidden
|
|
518
|
+
.fab .fab__label--hidden,
|
|
519
|
+
.fab .fab__icon--hidden {
|
|
517
520
|
opacity: 0;
|
|
518
521
|
}
|
|
519
522
|
|