1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | .ui.placeholder {
|
16 | position: static;
|
17 | overflow: hidden;
|
18 | -webkit-animation: placeholderShimmer 2s linear;
|
19 | animation: placeholderShimmer 2s linear;
|
20 | -webkit-animation-iteration-count: infinite;
|
21 | animation-iteration-count: infinite;
|
22 | background-color: #FFFFFF;
|
23 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0.08)), color-stop(15%, rgba(0, 0, 0, 0.15)), color-stop(30%, rgba(0, 0, 0, 0.08)));
|
24 | background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
|
25 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
|
26 | background-size: 1200px 100%;
|
27 | max-width: 30rem;
|
28 | }
|
29 | @-webkit-keyframes placeholderShimmer {
|
30 | 0% {
|
31 | background-position: -1200px 0;
|
32 | }
|
33 | 100% {
|
34 | background-position: 1200px 0;
|
35 | }
|
36 | }
|
37 | @keyframes placeholderShimmer {
|
38 | 0% {
|
39 | background-position: -1200px 0;
|
40 | }
|
41 | 100% {
|
42 | background-position: 1200px 0;
|
43 | }
|
44 | }
|
45 | .ui.placeholder + .ui.placeholder {
|
46 | margin-top: 2rem;
|
47 | }
|
48 | .ui.placeholder + .ui.placeholder {
|
49 | -webkit-animation-delay: 0.15s;
|
50 | animation-delay: 0.15s;
|
51 | }
|
52 | .ui.placeholder + .ui.placeholder + .ui.placeholder {
|
53 | -webkit-animation-delay: 0.3s;
|
54 | animation-delay: 0.3s;
|
55 | }
|
56 | .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
|
57 | -webkit-animation-delay: 0.45s;
|
58 | animation-delay: 0.45s;
|
59 | }
|
60 | .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
|
61 | -webkit-animation-delay: 0.6s;
|
62 | animation-delay: 0.6s;
|
63 | }
|
64 | .ui.placeholder,
|
65 | .ui.placeholder > :before,
|
66 | .ui.placeholder .image.header:after,
|
67 | .ui.placeholder .line,
|
68 | .ui.placeholder .line:after {
|
69 | background-color: #FFFFFF;
|
70 | }
|
71 | .ui.placeholder.hidden {
|
72 | display: none;
|
73 | }
|
74 |
|
75 |
|
76 | .ui.placeholder .image:not(.header):not(.ui):not(.icon) {
|
77 | height: 100px;
|
78 | }
|
79 | .ui.placeholder .square.image:not(.header) {
|
80 | height: 0;
|
81 | overflow: hidden;
|
82 |
|
83 |
|
84 | padding-top: 100%;
|
85 | }
|
86 | .ui.placeholder .rectangular.image:not(.header) {
|
87 | height: 0;
|
88 | overflow: hidden;
|
89 |
|
90 |
|
91 | padding-top: 75%;
|
92 | }
|
93 |
|
94 |
|
95 | .ui.placeholder .line {
|
96 | position: relative;
|
97 | height: 0.85714286em;
|
98 | }
|
99 | .ui.placeholder .line:before,
|
100 | .ui.placeholder .line:after {
|
101 | top: 100%;
|
102 | position: absolute;
|
103 | content: '';
|
104 | background-color: inherit;
|
105 | }
|
106 | .ui.placeholder .line:before {
|
107 | left: 0;
|
108 | }
|
109 | .ui.placeholder .line:after {
|
110 | right: 0;
|
111 | }
|
112 |
|
113 |
|
114 | .ui.placeholder .line {
|
115 | margin-bottom: 0.5em;
|
116 | }
|
117 | .ui.placeholder .line:before,
|
118 | .ui.placeholder .line:after {
|
119 | height: 0.5em;
|
120 | }
|
121 | .ui.placeholder .line:not(:first-child) {
|
122 | margin-top: 0.5em;
|
123 | }
|
124 |
|
125 |
|
126 | .ui.placeholder .header {
|
127 | position: relative;
|
128 | overflow: hidden;
|
129 | }
|
130 |
|
131 |
|
132 | .ui.placeholder .line:nth-child(1):after {
|
133 | width: 0;
|
134 | }
|
135 | .ui.placeholder .line:nth-child(2):after {
|
136 | width: 50%;
|
137 | }
|
138 | .ui.placeholder .line:nth-child(3):after {
|
139 | width: 10%;
|
140 | }
|
141 | .ui.placeholder .line:nth-child(4):after {
|
142 | width: 35%;
|
143 | }
|
144 | .ui.placeholder .line:nth-child(5):after {
|
145 | width: 65%;
|
146 | }
|
147 |
|
148 |
|
149 | .ui.placeholder .header .line {
|
150 | margin-bottom: 0.64285714em;
|
151 | }
|
152 | .ui.placeholder .header .line:before,
|
153 | .ui.placeholder .header .line:after {
|
154 | height: 0.64285714em;
|
155 | }
|
156 | .ui.placeholder .header .line:not(:first-child) {
|
157 | margin-top: 0.64285714em;
|
158 | }
|
159 | .ui.placeholder .header .line:after {
|
160 | width: 20%;
|
161 | }
|
162 | .ui.placeholder .header .line:nth-child(2):after {
|
163 | width: 60%;
|
164 | }
|
165 |
|
166 | .ui.placeholder .image.header .line {
|
167 | margin-left: 3em;
|
168 | }
|
169 | .ui.placeholder .image.header .line:before {
|
170 | width: 0.71428571rem;
|
171 | }
|
172 | .ui.placeholder .image.header:after {
|
173 | display: block;
|
174 | height: 0.85714286em;
|
175 | content: '';
|
176 | margin-left: 3em;
|
177 | }
|
178 |
|
179 |
|
180 | .ui.placeholder .image .line:first-child,
|
181 | .ui.placeholder .paragraph .line:first-child,
|
182 | .ui.placeholder .header .line:first-child {
|
183 | height: 0.01px;
|
184 | }
|
185 | .ui.placeholder .image:not(:first-child):before,
|
186 | .ui.placeholder .paragraph:not(:first-child):before,
|
187 | .ui.placeholder .header:not(:first-child):before {
|
188 | height: 1.42857143em;
|
189 | content: '';
|
190 | display: block;
|
191 | }
|
192 |
|
193 |
|
194 | .ui.inverted.placeholder {
|
195 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0.08)), color-stop(15%, rgba(255, 255, 255, 0.14)), color-stop(30%, rgba(255, 255, 255, 0.08)));
|
196 | background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
|
197 | background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
|
198 | }
|
199 | .ui.inverted.placeholder,
|
200 | .ui.inverted.placeholder > :before,
|
201 | .ui.inverted.placeholder .image.header:after,
|
202 | .ui.inverted.placeholder .line,
|
203 | .ui.inverted.placeholder .line:after {
|
204 | background-color: #1B1C1D;
|
205 | }
|
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 |
|
215 |
|
216 |
|
217 | .ui.placeholder .full.line.line.line:after {
|
218 | width: 0;
|
219 | }
|
220 | .ui.placeholder .very.long.line.line.line:after {
|
221 | width: 10%;
|
222 | }
|
223 | .ui.placeholder .long.line.line.line:after {
|
224 | width: 35%;
|
225 | }
|
226 | .ui.placeholder .medium.line.line.line:after {
|
227 | width: 50%;
|
228 | }
|
229 | .ui.placeholder .short.line.line.line:after {
|
230 | width: 65%;
|
231 | }
|
232 | .ui.placeholder .very.short.line.line.line:after {
|
233 | width: 80%;
|
234 | }
|
235 |
|
236 |
|
237 |
|
238 |
|
239 |
|
240 | .ui.fluid.placeholder {
|
241 | max-width: none;
|
242 | }
|
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|