Skip to content

Commit 30abad4

Browse files
magiccartmagiccart
committed
Add Skeleton
1 parent a3ce39b commit 30abad4

File tree

2 files changed

+282
-0
lines changed

2 files changed

+282
-0
lines changed

‎view/base/web/css/source/_module.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import 'module/_skeleton.less';
12
@import 'module/_slick.less';
23
@import 'module/_slick-theme.less';
34
@import 'module/_core.less';

‎view/base/web/css/source/module/_skeleton.less‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
& when (@media-common =true) {
2+
body.skeleton-page {
3+
overflow: hidden;
4+
}
5+
6+
@media (min-width: 1921px) {
7+
.grid-slider:not([class*=initialized])[data-visible="8"] .item {
8+
width: calc(100% / 8);
9+
}
10+
11+
.grid-slider:not([class*=initialized])[data-visible="7"] .item {
12+
width: calc(100% / 7);
13+
}
14+
15+
.grid-slider:not([class*=initialized])[data-visible="6"] .item {
16+
width: calc(100% / 6);
17+
}
18+
19+
.grid-slider:not([class*=initialized])[data-visible="5"] .item {
20+
width: calc(100% / 5);
21+
}
22+
23+
.grid-slider:not([class*=initialized])[data-visible="4"] .item {
24+
width: calc(100% / 4);
25+
}
26+
27+
.grid-slider:not([class*=initialized])[data-visible="3"] .item {
28+
width: calc(100% / 3);
29+
}
30+
31+
.grid-slider:not([class*=initialized])[data-visible="2"] .item {
32+
width: calc(100% / 2);
33+
}
34+
35+
.grid-slider:not([class*=initialized])[data-visible="1"] .item {
36+
width: calc(100% / 1);
37+
}
38+
}
39+
40+
@media (min-width: 1481px) and (max-width: 1920px) {
41+
.grid-slider:not([class*=initialized])[data-widescreen="8"] .item {
42+
width: calc(100% / 8);
43+
}
44+
45+
.grid-slider:not([class*=initialized])[data-widescreen="7"] .item {
46+
width: calc(100% / 7);
47+
}
48+
49+
.grid-slider:not([class*=initialized])[data-widescreen="6"] .item {
50+
width: calc(100% / 6);
51+
}
52+
53+
.grid-slider:not([class*=initialized])[data-widescreen="5"] .item {
54+
width: calc(100% / 5);
55+
}
56+
57+
.grid-slider:not([class*=initialized])[data-widescreen="4"] .item {
58+
width: calc(100% / 4);
59+
}
60+
61+
.grid-slider:not([class*=initialized])[data-widescreen="3"] .item {
62+
width: calc(100% / 3);
63+
}
64+
65+
.grid-slider:not([class*=initialized])[data-widescreen="2"] .item {
66+
width: calc(100% / 2);
67+
}
68+
69+
.grid-slider:not([class*=initialized])[data-widescreen="1"] .item {
70+
width: calc(100% / 1);
71+
}
72+
}
73+
74+
@media (min-width: 1200px) and (max-width: 1480px) {
75+
.grid-slider:not([class*=initialized])[data-desktop="8"] .item {
76+
width: calc(100% / 8);
77+
}
78+
79+
.grid-slider:not([class*=initialized])[data-desktop="7"] .item {
80+
width: calc(100% / 7);
81+
}
82+
83+
.grid-slider:not([class*=initialized])[data-desktop="6"] .item {
84+
width: calc(100% / 6);
85+
}
86+
87+
.grid-slider:not([class*=initialized])[data-desktop="5"] .item {
88+
width: calc(100% / 5);
89+
}
90+
91+
.grid-slider:not([class*=initialized])[data-desktop="4"] .item {
92+
width: calc(100% / 4);
93+
}
94+
95+
.grid-slider:not([class*=initialized])[data-desktop="3"] .item {
96+
width: calc(100% / 3);
97+
}
98+
99+
.grid-slider:not([class*=initialized])[data-desktop="2"] .item {
100+
width: calc(100% / 2);
101+
}
102+
103+
.grid-slider:not([class*=initialized])[data-desktop="1"] .item {
104+
width: calc(100% / 1);
105+
}
106+
}
107+
108+
@media (min-width: 992px) and (max-width: 1199px) {
109+
.grid-slider:not([class*=initialized])[data-laptop="8"] .item {
110+
width: calc(100% / 8);
111+
}
112+
113+
.grid-slider:not([class*=initialized])[data-laptop="7"] .item {
114+
width: calc(100% / 7);
115+
}
116+
117+
.grid-slider:not([class*=initialized])[data-laptop="6"] .item {
118+
width: calc(100% / 6);
119+
}
120+
121+
.grid-slider:not([class*=initialized])[data-laptop="5"] .item {
122+
width: calc(100% / 5);
123+
}
124+
125+
.grid-slider:not([class*=initialized])[data-laptop="4"] .item {
126+
width: calc(100% / 4);
127+
}
128+
129+
.grid-slider:not([class*=initialized])[data-laptop="3"] .item {
130+
width: calc(100% / 3);
131+
}
132+
133+
.grid-slider:not([class*=initialized])[data-laptop="2"] .item {
134+
width: calc(100% / 2);
135+
}
136+
137+
.grid-slider:not([class*=initialized])[data-laptop="1"] .item {
138+
width: calc(100% / 1);
139+
}
140+
}
141+
142+
@media (min-width: 768px) and (max-width: 992px) {
143+
.grid-slider:not([class*=initialized])[data-notebook="8"] .item {
144+
width: calc(100% / 8);
145+
}
146+
147+
.grid-slider:not([class*=initialized])[data-notebook="7"] .item {
148+
width: calc(100% / 7);
149+
}
150+
151+
.grid-slider:not([class*=initialized])[data-notebook="6"] .item {
152+
width: calc(100% / 6);
153+
}
154+
155+
.grid-slider:not([class*=initialized])[data-notebook="5"] .item {
156+
width: calc(100% / 5);
157+
}
158+
159+
.grid-slider:not([class*=initialized])[data-notebook="4"] .item {
160+
width: calc(100% / 4);
161+
}
162+
163+
.grid-slider:not([class*=initialized])[data-notebook="3"] .item {
164+
width: calc(100% / 3);
165+
}
166+
167+
.grid-slider:not([class*=initialized])[data-notebook="2"] .item {
168+
width: calc(100% / 2);
169+
}
170+
171+
.grid-slider:not([class*=initialized])[data-notebook="1"] .item {
172+
width: calc(100% / 1);
173+
}
174+
}
175+
176+
@media (min-width: 576px) and (max-width: 768px) {
177+
.grid-slider:not([class*=initialized])[data-tablet="8"] .item {
178+
width: calc(100% / 8);
179+
}
180+
181+
.grid-slider:not([class*=initialized])[data-tablet="7"] .item {
182+
width: calc(100% / 7);
183+
}
184+
185+
.grid-slider:not([class*=initialized])[data-tablet="6"] .item {
186+
width: calc(100% / 6);
187+
}
188+
189+
.grid-slider:not([class*=initialized])[data-tablet="5"] .item {
190+
width: calc(100% / 5);
191+
}
192+
193+
.grid-slider:not([class*=initialized])[data-tablet="4"] .item {
194+
width: calc(100% / 4);
195+
}
196+
197+
.grid-slider:not([class*=initialized])[data-tablet="3"] .item {
198+
width: calc(100% / 3);
199+
}
200+
201+
.grid-slider:not([class*=initialized])[data-tablet="2"] .item {
202+
width: calc(100% / 2);
203+
}
204+
205+
.grid-slider:not([class*=initialized])[data-tablet="1"] .item {
206+
width: calc(100% / 1);
207+
}
208+
}
209+
210+
@media (min-width: 480px) and (max-width: 576px) {
211+
.grid-slider:not([class*=initialized])[data-landscape="6"] .item {
212+
width: calc(100% / 6);
213+
}
214+
215+
.grid-slider:not([class*=initialized])[data-landscape="5"] .item {
216+
width: calc(100% / 5);
217+
}
218+
219+
.grid-slider:not([class*=initialized])[data-landscape="4"] .item {
220+
width: calc(100% / 4);
221+
}
222+
223+
.grid-slider:not([class*=initialized])[data-landscape="3"] .item {
224+
width: calc(100% / 3);
225+
}
226+
227+
.grid-slider:not([class*=initialized])[data-landscape="2"] .item {
228+
width: calc(100% / 2);
229+
}
230+
231+
.grid-slider:not([class*=initialized])[data-landscape="1"] .item {
232+
width: calc(100% / 1);
233+
}
234+
}
235+
236+
@media (min-width: 360px) and (max-width: 480px) {
237+
238+
.grid-slider:not([class*=initialized])[data-portrait="6"] .item {
239+
width: calc(100% / 6);
240+
}
241+
242+
.grid-slider:not([class*=initialized])[data-portrait="5"] .item {
243+
width: calc(100% / 5);
244+
}
245+
246+
.grid-slider:not([class*=initialized])[data-portrait="4"] .item {
247+
width: calc(100% / 4);
248+
}
249+
250+
.grid-slider:not([class*=initialized])[data-portrait="3"] .item {
251+
width: calc(100% / 3);
252+
}
253+
254+
.grid-slider:not([class*=initialized])[data-portrait="2"] .item {
255+
width: calc(100% / 2);
256+
}
257+
258+
.grid-slider:not([class*=initialized])[data-portrait="1"] .item {
259+
width: calc(100% / 1);
260+
}
261+
}
262+
263+
@media (max-width: 360px) {
264+
265+
.grid-slider:not([class*=initialized])[data-mobile="4"] .item {
266+
width: calc(100% / 4);
267+
}
268+
269+
.grid-slider:not([class*=initialized])[data-mobile="3"] .item {
270+
width: calc(100% / 3);
271+
}
272+
273+
.grid-slider:not([class*=initialized])[data-mobile="2"] .item {
274+
width: calc(100% / 2);
275+
}
276+
277+
.grid-slider:not([class*=initialized])[data-mobile="1"] .item {
278+
width: calc(100% / 1);
279+
}
280+
}
281+
}

0 commit comments

Comments
 (0)