Skip to content

Commit dfd1e2f

Browse files
lazy-godvdvibhu20
lazy-god
authored and
vdvibhu20
committed
lSkeleton card (#233)
* Refactor: object layer o-arragement * Move: row styling to o-arrangement * Add: skeleton card * Remove redundant designs * Rename o-skeleton.scss to o-skeleton-card.scss * Update _objects.scss
1 parent b42aa98 commit dfd1e2f

File tree

6 files changed

+236
-2
lines changed

6 files changed

+236
-2
lines changed

‎examples/views/skeleton-card.hbs

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<div class="row">
2+
<div class="card-layout col-md-4 col-sm-6 col-lg-4">
3+
<div class="card skeleton-card skeleton-animation">
4+
<div class="row justify-content-end">
5+
<div class="round-img-sm round-img"></div>
6+
</div>
7+
<div class="rod-component ">
8+
<div class="skeleton-lg "></div>
9+
<div class="skeleton-md "></div>
10+
</div>
11+
<div class="rod-component">
12+
<div class="skeleton-lg bg-grey "></div>
13+
<div class="skeleton-md bg-grey "></div>
14+
</div>
15+
<div class="img-component d-flex">
16+
<div class=" round-img"></div>
17+
<div class="rod-component">
18+
<div class="skeleton-lg bg-grey "></div>
19+
<div class="skeleton-md bg-grey "></div>
20+
</div>
21+
</div>
22+
<div class="rod-component">
23+
<div class="skeleton-md "></div>
24+
<div class="skeleton-sm "></div>
25+
</div>
26+
</div>
27+
</div>
28+
29+
<div class="card-layout col-md-4 col-sm-6 col-lg-4">
30+
<div class="card skeleton-card skeleton-animation">
31+
<div class="row justify-content-end">
32+
<div class="round-img-sm round-img"></div>
33+
</div>
34+
<div class="rod-component">
35+
<div class="skeleton-lg"></div>
36+
<div class="skeleton-md"></div>
37+
</div>
38+
<div class="rod-component">
39+
<div class="skeleton-lg bg-grey"></div>
40+
<div class="skeleton-md bg-grey"></div>
41+
</div>
42+
<div class="img-component d-flex">
43+
<div class=" round-img"></div>
44+
<div class="rod-component">
45+
<div class="skeleton-lg bg-grey"></div>
46+
<div class="skeleton-md bg-grey"></div>
47+
</div>
48+
</div>
49+
<div class="rod-component">
50+
<div class="skeleton-md"></div>
51+
<div class="skeleton-sm"></div>
52+
</div>
53+
</div>
54+
</div>
55+
56+
<div class="card-layout col-md-4 col-sm-6 col-lg-4">
57+
<div class="card skeleton-card">
58+
<div class="row justify-content-end">
59+
<div class="round-img-sm round-img"></div>
60+
</div>
61+
<div class="rod-component">
62+
<div class="skeleton-lg "></div>
63+
<div class="skeleton-md "></div>
64+
</div>
65+
<div class="rod-component">
66+
<div class="skeleton-lg bg-grey "></div>
67+
<div class="skeleton-md bg-grey "></div>
68+
</div>
69+
<div class="img-component d-flex">
70+
<div class=" round-img"></div>
71+
<div class="rod-component">
72+
<div class="skeleton-lg bg-grey "></div>
73+
<div class="skeleton-md bg-grey "></div>
74+
</div>
75+
</div>
76+
<div class="rod-component">
77+
<div class="skeleton-md "></div>
78+
<div class="skeleton-sm "></div>
79+
</div>
80+
</div>
81+
</div>
82+
83+
<div class="card-layout col-md-4 col-sm-6 col-lg-4">
84+
<div class="card skeleton-card skeleton-animation">
85+
<div class="row justify-content-end">
86+
<div class="round-img-sm round-img"></div>
87+
</div>
88+
<div class="rod-component">
89+
<div class="skeleton-lg "></div>
90+
<div class="skeleton-md "></div>
91+
</div>
92+
<div class="rod-component">
93+
<div class="skeleton-lg bg-grey "></div>
94+
<div class="skeleton-md bg-grey "></div>
95+
</div>
96+
<div class="img-component d-flex">
97+
<div class=" round-img"></div>
98+
<div class="rod-component">
99+
<div class="skeleton-lg bg-grey "></div>
100+
<div class="skeleton-md bg-grey "></div>
101+
</div>
102+
</div>
103+
<div class="rod-component">
104+
<div class="skeleton-md "></div>
105+
<div class="skeleton-sm "></div>
106+
</div>
107+
</div>
108+
</div>
109+
110+
<div class="card-layout col-md-4 col-sm-6 col-lg-4">
111+
<div class="card skeleton-card skeleton-animation">
112+
<div class="row justify-content-end">
113+
<div class="round-img-sm round-img"></div>
114+
</div>
115+
<div class="rod-component">
116+
<div class="skeleton-lg "></div>
117+
<div class="skeleton-md "></div>
118+
</div>
119+
<div class="rod-component">
120+
<div class="skeleton-lg bg-grey "></div>
121+
<div class="skeleton-md bg-grey "></div>
122+
</div>
123+
<div class="img-component d-flex">
124+
<div class=" round-img"></div>
125+
<div class="rod-component">
126+
<div class="skeleton-lg bg-grey "></div>
127+
<div class="skeleton-md bg-grey "></div>
128+
</div>
129+
</div>
130+
<div class="skeleton-circle-dark"></div>
131+
<div class="skeleton-circle-light"></div>
132+
<div class="rod-component">
133+
<div class="skeleton-md "></div>
134+
<div class="skeleton-sm "></div>
135+
</div>
136+
</div>
137+
</div>
138+
</div>

‎sass/styles/_elements.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,5 @@
3333
@import "elements/element.border-card";
3434
@import "elements/elements.background";
3535
@import "elements/html/elements.heading";
36-
@import "elements/elements.pill";
36+
@import "elements/elements.pill";
37+
@import "elements/elements.skeleton";

‎sass/styles/_objects.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,4 @@
5454
@import "objects/tab-nav/tab-nav";
5555
@import "objects/o-changedp/o-changedp";
5656
@import "objects/o-side-nav/o-side-nav";
57+
@import "objects/o-skeleton/o-skeleton-card";

‎sass/styles/elements/elements.skeleton.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
%skeleton {
2+
height: 20px;
3+
border-radius: 20px;
4+
background-color: $skeleton;
5+
6+
}
7+
8+
@keyframes shine {
9+
to{
10+
background-position: 100% 0;
11+
}
12+
}
13+
14+
.skeleton-lg {
15+
@extend %skeleton;
16+
width: 65%;
17+
}
18+
19+
.skeleton-md {
20+
@extend %skeleton;
21+
width: 50%;
22+
}
23+
24+
.skeleton-sm {
25+
@extend %skeleton;
26+
width: 40%;
27+
}
28+
29+
.skeleton-animation {
30+
31+
&::before {
32+
content: '';
33+
width: 100%;
34+
height: 100%;
35+
position: absolute;
36+
left: 0;
37+
top: 0;
38+
background: linear-gradient(
39+
100deg,
40+
rgba(255, 255, 255, 0),
41+
rgba(255, 255, 255, 0.5) 50%,
42+
rgba(255, 255, 255, 0) 80%
43+
);
44+
background-position: 0 0;
45+
background-size: 50px 100%;
46+
background-repeat: no-repeat;
47+
animation: shine 1s infinite;
48+
}
49+
50+
}

‎sass/styles/objects/o-skeleton/o-skeleton-card.scss

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.skeleton-card {
2+
height: auto;
3+
position: relative;
4+
@include padding-mixin(10px, 20px, 60px, 20px);
5+
6+
.img-component {
7+
margin: 60px 20px;
8+
9+
.rod-component {
10+
margin: 0;
11+
width: 100%;
12+
}
13+
}
14+
15+
.rod-component {
16+
margin-top: 30px;
17+
}
18+
19+
.round-img {
20+
width: 70px;
21+
height: 70px;
22+
}
23+
24+
.round-img-sm {
25+
width: 40px;
26+
height: 40px;
27+
margin-bottom: 40px;
28+
}
29+
30+
.skeleton-lg {
31+
margin: 10px 20px;
32+
}
33+
34+
.skeleton-md {
35+
margin: 10px 20px;
36+
}
37+
38+
.skeleton-sm{
39+
margin: 10px 20px;
40+
}
41+
42+
}

‎sass/styles/settings/settings.color.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,6 @@ $hover-bg: #fafafa;
4949
$dropdown-divider: #f4f4f4;
5050

5151
$vp-select-box: #262626;
52-
$nav-info-bg: #fcfcfc;
52+
$nav-info-bg: #fcfcfc;
53+
54+
$skeleton: #e8e8e8;

0 commit comments

Comments
 (0)