TODO: replace value to css variables https://css-tricks.com/building-skeleton-screens-css-custom-properties/
&:empty {
&:before,
&:after {
content: '';
display: block;
opacity: 0;
height: 165px;
box-sizing: border-box;
margin-bottom: 20px;
background-repeat: no-repeat;
background-image:
linear-gradient(
90deg,
rgba(white, 0) 0,
rgba(white, .6) 25%,
rgba(white, .8) 50%,
rgba(white, .6) 75%,
rgba(white, 0) 100%
),
linear-gradient(map-get($colors, gray-light
linear-gradient(map-get($colors, gray-light
linear-gradient(map-get($colors, gray-light
background-size:
60% 100%,
calc(50% - 20px) 35px,
calc(100% - 20px) 35px,
calc(100% - 20px) 35px;
background-position:
-150% 0,
10px 10px,
center,
center bottom 15px;
background-color: #fff;
border: solid 1px map-get($colors, gray-dark)
animation: loading 1.5s infinite, loading2 .2
}
@keyframes loading {
to {
background-position:
350% 0,
10px 10px,
center,
center bottom 15px;
}
}
@keyframes loading2 {
to {
opacity: 1;
}
}
}