1 | import {
|
2 | component_styles_default
|
3 | } from "./chunk.7IGWJVQF.js";
|
4 | import {
|
5 | r
|
6 | } from "./chunk.WWAD5WF4.js";
|
7 |
|
8 |
|
9 | var skeleton_styles_default = r`
|
10 | ${component_styles_default}
|
11 |
|
12 | :host {
|
13 | --border-radius: var(--sl-border-radius-pill);
|
14 | --color: var(--sl-color-neutral-200);
|
15 | --sheen-color: var(--sl-color-neutral-300);
|
16 |
|
17 | display: block;
|
18 | position: relative;
|
19 | }
|
20 |
|
21 | .skeleton {
|
22 | display: flex;
|
23 | width: 100%;
|
24 | height: 100%;
|
25 | min-height: 1rem;
|
26 | }
|
27 |
|
28 | .skeleton__indicator {
|
29 | flex: 1 1 auto;
|
30 | background: var(--color);
|
31 | border-radius: var(--border-radius);
|
32 | }
|
33 |
|
34 | .skeleton--sheen .skeleton__indicator {
|
35 | background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
|
36 | background-size: 400% 100%;
|
37 | background-size: 400% 100%;
|
38 | animation: sheen 8s ease-in-out infinite;
|
39 | }
|
40 |
|
41 | .skeleton--pulse .skeleton__indicator {
|
42 | animation: pulse 2s ease-in-out 0.5s infinite;
|
43 | }
|
44 |
|
45 | @keyframes sheen {
|
46 | 0% {
|
47 | background-position: 200% 0;
|
48 | }
|
49 | to {
|
50 | background-position: -200% 0;
|
51 | }
|
52 | }
|
53 |
|
54 | @keyframes pulse {
|
55 | 0% {
|
56 | opacity: 1;
|
57 | }
|
58 | 50% {
|
59 | opacity: 0.4;
|
60 | }
|
61 | 100% {
|
62 | opacity: 1;
|
63 | }
|
64 | }
|
65 | `;
|
66 |
|
67 | export {
|
68 | skeleton_styles_default
|
69 | };
|