Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-20 21:32:31 -05:00
Code Issues Activity

feat(console): page skeleton animation mixin

Browse source
This commit is contained in:
Charles Zhao 2022-05-13 10:14:35 +08:00
parent bc19a298f8
commit de97bb53f5
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
2 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/console/src/scss/_colors.scss
View file

@ -149,6 +149,7 @@
// Client specific variables (not available in design system)
--color-danger-focused: rgba(186, 27, 27, 16%); // 16% Error-40
--color-skeleton-shimmer-rgb: 255, 255, 255; // rgb of Layer-1
}
@mixin dark-theme {
@ -302,4 +303,5 @@
// Client specific variables (not available in design system)
--color-danger-focused: rgba(255, 180, 169, 16%); // 16% Error-40
--color-skeleton-shimmer-rgb: 42, 44, 50; // rgb of Layer-1
}

28
packages/console/src/scss/_underscore.scss
View file

@ -30,6 +30,28 @@
animation: rotating 1s ease-in-out infinite;
}
@mixin shimmering-animation($baseColor: var(--color-neutral-95)) {
background-color: $baseColor;
position: relative;
overflow: hidden;
&::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background-image:
linear-gradient(
90deg,
rgba(var(--color-skeleton-shimmer-rgb), 0) 0,
rgba(var(--color-skeleton-shimmer-rgb), 0.2) 20%,
rgba(var(--color-skeleton-shimmer-rgb), 0.5) 60%,
$baseColor
);
animation: shimmer 2s infinite;
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
@ -39,3 +61,9 @@
transform: rotate(360deg);
}
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}