1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
@charset "UTF-8";
.pf-v6-c-skeleton {
--pf-v6-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
--pf-v6-c-skeleton--Width: auto;
--pf-v6-c-skeleton--Height: auto;
--pf-v6-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
--pf-v6-c-skeleton--before--PaddingBlockEnd: 0;
--pf-v6-c-skeleton--before--Height: auto;
--pf-v6-c-skeleton--before--Content: " ";
--pf-v6-c-skeleton--after--LinearGradientAngle: 90deg;
--pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
--pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
--pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
--pf-v6-c-skeleton--after--TranslateX: 0;
--pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
--pf-v6-c-skeleton--after--AnimationDuration: 3s;
--pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
--pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
--pf-v6-c-skeleton--after--AnimationDelay: .5s;
--pf-v6-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
--pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd: 100%;
--pf-v6-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
--pf-v6-c-skeleton--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
--pf-v6-c-skeleton--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
--pf-v6-c-skeleton--m-text-xl--Height: calc(var(--pf-t--global--font--size--xl) * var(--pf-t--global--font--line-height--heading));
--pf-v6-c-skeleton--m-text-lg--Height: calc(var(--pf-t--global--font--size--lg) * var(--pf-t--global--font--line-height--body));
--pf-v6-c-skeleton--m-text-md--Height: calc(var(--pf-t--global--font--size--md) * var(--pf-t--global--font--line-height--body));
--pf-v6-c-skeleton--m-text-sm--Height: calc(var(--pf-t--global--font--size--sm) * var(--pf-t--global--font--line-height--body));
--pf-v6-c-skeleton--m-width-sm--Width: 6.25rem;
--pf-v6-c-skeleton--m-width-md--Width: 12.5rem;
--pf-v6-c-skeleton--m-width-lg--Width: 18.75rem;
--pf-v6-c-skeleton--m-width-25--Width: 25%;
--pf-v6-c-skeleton--m-width-33--Width: calc(100% / 3);
--pf-v6-c-skeleton--m-width-50--Width: 50%;
--pf-v6-c-skeleton--m-width-66--Width: calc(100% / 3 * 2);
--pf-v6-c-skeleton--m-width-75--Width: 75%;
--pf-v6-c-skeleton--m-height-sm--Height: 6.25rem;
--pf-v6-c-skeleton--m-height-md--Height: 12.5rem;
--pf-v6-c-skeleton--m-height-lg--Height: 18.75rem;
--pf-v6-c-skeleton--m-height-25--Height: 25%;
--pf-v6-c-skeleton--m-height-33--Height: calc(100% / 3);
--pf-v6-c-skeleton--m-height-50--Height: 50%;
--pf-v6-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
--pf-v6-c-skeleton--m-height-75--Height: 75%;
--pf-v6-c-skeleton--m-height-100--Height: 100%;
}
@media screen and (prefers-reduced-motion: no-preference) {
.pf-v6-c-skeleton {
--pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
--pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
--pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
--pf-v6-c-skeleton--after--TranslateX: -100%;
--pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
}
}
.pf-v6-c-skeleton {
position: relative;
width: var(--pf-v6-c-skeleton--Width);
height: var(--pf-v6-c-skeleton--Height);
overflow: hidden;
background-color: var(--pf-v6-c-skeleton--BackgroundColor);
border-radius: var(--pf-v6-c-skeleton--BorderRadius);
transform: translate(0);
}
.pf-v6-c-skeleton::before {
display: block;
height: var(--pf-v6-c-skeleton--before--Height);
padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBlockEnd);
content: var(--pf-v6-c-skeleton--before--Content);
}
.pf-v6-c-skeleton::after {
position: absolute;
inset: 0;
display: block;
content: "";
background: linear-gradient(var(--pf-v6-c-skeleton--after--LinearGradientAngle), var(--pf-v6-c-skeleton--after--LinearGradientColorStop1), var(--pf-v6-c-skeleton--after--LinearGradientColorStop2), var(--pf-v6-c-skeleton--after--LinearGradientColorStop3));
transform: translate3d(var(--pf-v6-c-skeleton--after--TranslateX), 0, 0);
animation: var(--pf-v6-c-skeleton--after--AnimationName) var(--pf-v6-c-skeleton--after--AnimationDuration) var(--pf-v6-c-skeleton--after--AnimationTimingFunction) var(--pf-v6-c-skeleton--after--AnimationDelay) var(--pf-v6-c-skeleton--after--AnimationIterationCount);
}
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
scale: -1 1;
}
.pf-v6-c-skeleton.pf-m-circle {
--pf-v6-c-skeleton--BorderRadius: var(--pf-v6-c-skeleton--m-circle--BorderRadius);
}
.pf-v6-c-skeleton.pf-m-square, .pf-v6-c-skeleton.pf-m-circle {
--pf-v6-c-skeleton--before--Height: 0;
--pf-v6-c-skeleton--before--PaddingBlockEnd: var(--pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd);
}
.pf-v6-c-skeleton.pf-m-width-sm {
--pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-sm--Width);
}
.pf-v6-c-skeleton.pf-m-width-md {
--pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-md--Width);
}
.pf-v6-c-skeleton.pf-m-width-lg {
--pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-lg--Width);
}
.pf-v6-c-skeleton.pf-m-width-25 {
--pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-25--Width);
}
.pf-v6-c-skeleton.pf-m-width-33 {
--pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-33--Width);
}
.pf-v6-c-skeleton.pf-m-width-50 {
--pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-50--Width);
}
.pf-v6-c-skeleton.pf-m-width-66 {
--pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-66--Width);
}
.pf-v6-c-skeleton.pf-m-width-75 {
--pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-75--Width);
}
.pf-v6-c-skeleton.pf-m-height-sm {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-sm--Height);
}
.pf-v6-c-skeleton.pf-m-height-md {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-md--Height);
}
.pf-v6-c-skeleton.pf-m-height-lg {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-lg--Height);
}
.pf-v6-c-skeleton.pf-m-height-25 {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-25--Height);
}
.pf-v6-c-skeleton.pf-m-height-33 {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-33--Height);
}
.pf-v6-c-skeleton.pf-m-height-50 {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-50--Height);
}
.pf-v6-c-skeleton.pf-m-height-66 {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-66--Height);
}
.pf-v6-c-skeleton.pf-m-height-75 {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-75--Height);
}
.pf-v6-c-skeleton.pf-m-height-100 {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-height-100--Height);
}
.pf-v6-c-skeleton.pf-m-text-4xl {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-4xl--Height);
}
.pf-v6-c-skeleton.pf-m-text-3xl {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-3xl--Height);
}
.pf-v6-c-skeleton.pf-m-text-2xl {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-2xl--Height);
}
.pf-v6-c-skeleton.pf-m-text-xl {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-xl--Height);
}
.pf-v6-c-skeleton.pf-m-text-lg {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-lg--Height);
}
.pf-v6-c-skeleton.pf-m-text-md {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-md--Height);
}
.pf-v6-c-skeleton.pf-m-text-sm {
--pf-v6-c-skeleton--Height: var(--pf-v6-c-skeleton--m-text-sm--Height);
}
@keyframes pf-v6-c-skeleton-loading {
0% {
transform: translateX(-100%);
}
60% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes pf-v6-c-skeleton-loading-reduced-motion {
0% {
opacity: 0.25;
}
60% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
|
