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,63 @@
|
||||
@import '../../../../styles/utilities';
|
||||
|
||||
.skeletonParagraph {
|
||||
.row {
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #DDDBDD;
|
||||
|
||||
&::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: '';
|
||||
}
|
||||
}
|
||||
|
||||
.lastRow {
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 80%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #DDDBDD;
|
||||
|
||||
&::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