show unverified tab indicator on sidebar (#1862)
This commit is contained in:
parent
9cb5c70d51
commit
681287c46a
7 changed files with 123 additions and 33 deletions
24
src/app/pages/client/sidebar/UnverifiedTab.css.ts
Normal file
24
src/app/pages/client/sidebar/UnverifiedTab.css.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
import { color, toRem } from 'folds';
|
||||
|
||||
const pushRight = keyframes({
|
||||
from: {
|
||||
transform: `translateX(${toRem(2)}) scale(1)`,
|
||||
},
|
||||
to: {
|
||||
transform: 'translateX(0) scale(1)',
|
||||
},
|
||||
});
|
||||
|
||||
export const UnverifiedTab = style({
|
||||
animationName: pushRight,
|
||||
animationDuration: '400ms',
|
||||
animationIterationCount: 30,
|
||||
animationDirection: 'alternate',
|
||||
});
|
||||
|
||||
export const UnverifiedAvatar = style({
|
||||
backgroundColor: color.Critical.Container,
|
||||
color: color.Critical.OnContainer,
|
||||
borderColor: color.Critical.ContainerLine,
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue