@14ch/svelte-ui 0.0.43 → 0.0.44
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.
|
@@ -170,14 +170,7 @@
|
|
|
170
170
|
{:else if patternConfig.type === 'button'}
|
|
171
171
|
{@const { width, height, radius, align, customStyle } = patternConfig}
|
|
172
172
|
<div class="skeleton__button">
|
|
173
|
-
<SkeletonButton
|
|
174
|
-
{width}
|
|
175
|
-
{height}
|
|
176
|
-
{radius}
|
|
177
|
-
{align}
|
|
178
|
-
{customStyle}
|
|
179
|
-
{animated}
|
|
180
|
-
/>
|
|
173
|
+
<SkeletonButton {width} {height} {radius} {align} {customStyle} {animated} />
|
|
181
174
|
</div>
|
|
182
175
|
{/if}
|
|
183
176
|
{/each}
|
|
@@ -192,7 +185,6 @@
|
|
|
192
185
|
display: block;
|
|
193
186
|
width: 100%;
|
|
194
187
|
max-width: 100%;
|
|
195
|
-
overflow-x: hidden;
|
|
196
188
|
}
|
|
197
189
|
|
|
198
190
|
.skeleton__items {
|
|
@@ -61,24 +61,14 @@
|
|
|
61
61
|
: ''} {finalAspectRatioStyle
|
|
62
62
|
? `aspect-ratio: ${finalAspectRatioStyle};`
|
|
63
63
|
: ''} border-radius: {radiusStyle}; {customStyle}"
|
|
64
|
-
>
|
|
65
|
-
<div class="skeleton-box__content"></div>
|
|
66
|
-
</div>
|
|
64
|
+
></div>
|
|
67
65
|
|
|
68
66
|
<style>.skeleton-box {
|
|
69
67
|
display: block;
|
|
70
|
-
position: relative;
|
|
71
|
-
overflow: hidden;
|
|
72
|
-
}
|
|
73
|
-
.skeleton-box--animated .skeleton-box__content {
|
|
74
|
-
animation: skeleton-pulse 4s infinite;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.skeleton-box__content {
|
|
78
|
-
width: 100%;
|
|
79
|
-
height: 100%;
|
|
80
68
|
background-color: var(--svelte-ui-skeleton-color);
|
|
81
|
-
|
|
69
|
+
}
|
|
70
|
+
.skeleton-box--animated {
|
|
71
|
+
animation: skeleton-pulse 3s infinite;
|
|
82
72
|
}
|
|
83
73
|
|
|
84
74
|
@keyframes skeleton-pulse {
|
|
@@ -87,7 +77,7 @@
|
|
|
87
77
|
animation-timing-function: ease-in-out;
|
|
88
78
|
}
|
|
89
79
|
50% {
|
|
90
|
-
opacity: 0.
|
|
80
|
+
opacity: 0.3;
|
|
91
81
|
animation-timing-function: ease-in-out;
|
|
92
82
|
}
|
|
93
83
|
100% {
|