32 lines
847 B
TypeScript
32 lines
847 B
TypeScript
|
import { keyframes, style } from '@vanilla-extract/css';
|
||
|
|
import { color, toRem } from 'folds';
|
||
|
|
|
||
|
|
// A brief, gentle acknowledgement when a draft first becomes persisted.
|
||
|
|
// Guarded by `prefers-reduced-motion` so it only plays for users who opt in.
|
||
|
|
const savedPulse = keyframes({
|
||
|
|
'0%': { opacity: 0.4, transform: 'scale(0.7)' },
|
||
|
|
'45%': { opacity: 1, transform: 'scale(1.15)' },
|
||
|
|
'100%': { opacity: 1, transform: 'scale(1)' },
|
||
|
|
});
|
||
|
|
|
||
|
|
export const DraftIndicatorBase = style({
|
||
|
|
userSelect: 'none',
|
||
|
|
whiteSpace: 'nowrap',
|
||
|
|
});
|
||
|
|
|
||
|
|
export const DraftDot = style({
|
||
|
|
width: toRem(6),
|
||
|
|
height: toRem(6),
|
||
|
|
borderRadius: '50%',
|
||
|
|
backgroundColor: color.Success.Main,
|
||
|
|
flexShrink: 0,
|
||
|
|
});
|
||
|
|
|
||
|
|
export const DraftDotPulse = style({
|
||
|
|
'@media': {
|
||
|
|
'(prefers-reduced-motion: no-preference)': {
|
||
|
|
animation: `${savedPulse} 600ms ease-out`,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|