mirror of
https://github.com/vercel/commerce.git
synced 2025-07-24 10:41:23 +00:00
✨ feat: Skeleton Common
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
@import '../../../../styles/utilities';
|
||||
|
||||
.skeletonImage:empty {
|
||||
@apply relative;
|
||||
background: #DDDBDD;
|
||||
|
||||
&.small {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
&.default {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
&.large {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
&.left {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.center {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
rgba(#fff, 0) 0,
|
||||
rgba(#fff, 0.2) 20%,
|
||||
rgba(#fff, 0.5) 60%,
|
||||
rgba(#fff, 0)
|
||||
);
|
||||
animation: shimmer 2s infinite;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user