56 lines
1.2 KiB
JavaScript
56 lines
1.2 KiB
JavaScript
|
export default {
|
||
|
|
variables: {
|
||
|
|
colorScheme: {
|
||
|
|
light: {
|
||
|
|
root: {
|
||
|
|
background: '{surface.200}',
|
||
|
|
animationBackground: 'rgba(255,255,255,0.4)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dark: {
|
||
|
|
root: {
|
||
|
|
background: 'rgba(255, 255, 255, 0.06)',
|
||
|
|
animationBackground: 'rgba(255, 255, 255, 0.04)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
css: `
|
||
|
|
.p-skeleton {
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: var(--p-skeleton-background);
|
||
|
|
border-radius: var(--p-rounded-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-skeleton::after {
|
||
|
|
content: "";
|
||
|
|
animation: p-skeleton-animation 1.2s infinite;
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
transform: translateX(-100%);
|
||
|
|
z-index: 1;
|
||
|
|
background: linear-gradient( 90deg, rgba(255, 255, 255, 0), var(--p-skeleton-animation-background), rgba(255, 255, 255, 0) );
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-skeleton-circle {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-skeleton-none::after {
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes p-skeleton-animation {
|
||
|
|
from {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`
|
||
|
|
};
|