wehub-resource-sync
49 lines
1.1 KiB
CSS
49 lines
1.1 KiB
CSS
.skeleton {
|
|
@apply pointer-events-none relative overflow-hidden rounded-sm bg-surface-tertiary/70;
|
|
}
|
|
|
|
/* TODO: Skeleton with parent are not visible */
|
|
|
|
/* Animation types */
|
|
.skeleton--shimmer {
|
|
&::after {
|
|
@apply absolute inset-0 -translate-x-full animate-skeleton bg-linear-to-r from-transparent via-surface-tertiary to-transparent content-[''];
|
|
}
|
|
|
|
/* When applied to a parent container with multiple skeletons */
|
|
&:has(.skeleton) {
|
|
&::after {
|
|
content: none;
|
|
}
|
|
|
|
/* Single synchronized shimmer that passes over all children */
|
|
&::before {
|
|
@apply absolute inset-0 -translate-x-full animate-skeleton content-[''];
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.5) 50%,
|
|
transparent 100%
|
|
);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
/* Use mix-blend-mode to only show over skeleton elements */
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
/* Ensure children don't have their own shimmer */
|
|
& .skeleton {
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.skeleton--pulse {
|
|
@apply animate-pulse;
|
|
}
|
|
|
|
.skeleton--none {
|
|
}
|