sudovanilla-website/public/@shoelace-style/shoelace/cdn/chunks/chunk.YRGXNOO7.js

76 lines
1.3 KiB
JavaScript
Raw Normal View History

2024-05-13 22:34:06 -05:00
import {
component_styles_default
} from "./chunk.K23QWHWK.js";
import {
i
} from "./chunk.CXZZ2LVK.js";
// src/components/skeleton/skeleton.styles.ts
var skeleton_styles_default = i`
${component_styles_default}
:host {
--border-radius: var(--sl-border-radius-pill);
--color: var(--sl-color-neutral-200);
--sheen-color: var(--sl-color-neutral-300);
display: block;
position: relative;
}
.skeleton {
display: flex;
width: 100%;
height: 100%;
min-height: 1rem;
}
.skeleton__indicator {
flex: 1 1 auto;
background: var(--color);
border-radius: var(--border-radius);
}
.skeleton--sheen .skeleton__indicator {
background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
background-size: 400% 100%;
animation: sheen 8s ease-in-out infinite;
}
.skeleton--pulse .skeleton__indicator {
animation: pulse 2s ease-in-out 0.5s infinite;
}
/* Forced colors mode */
@media (forced-colors: active) {
:host {
--color: GrayText;
}
}
@keyframes sheen {
0% {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
`;
export {
skeleton_styles_default
};