61 lines
1.2 KiB
TypeScript
61 lines
1.2 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { config, color } from 'folds';
|
|
|
|
export const AvatarPresence = style({
|
|
display: 'flex',
|
|
position: 'relative',
|
|
flexShrink: 0,
|
|
});
|
|
|
|
export const AvatarPresenceBadge = style({
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
right: 0,
|
|
transform: 'translate(25%, 25%)',
|
|
zIndex: 1,
|
|
|
|
display: 'flex',
|
|
padding: config.borderWidth.B600,
|
|
backgroundColor: 'inherit',
|
|
borderRadius: config.radii.Pill,
|
|
overflow: 'hidden',
|
|
});
|
|
|
|
export const PresenceAvatarContainer = style({
|
|
display: 'flex',
|
|
position: 'relative',
|
|
flexShrink: 0,
|
|
alignSelf: 'flex-start',
|
|
'::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: '10%',
|
|
height: '80%',
|
|
width: '3px',
|
|
borderTopRightRadius: '2px',
|
|
borderBottomRightRadius: '2px',
|
|
zIndex: 1,
|
|
},
|
|
});
|
|
|
|
export const PresenceIndicator = style({});
|
|
|
|
export const PresenceOnline = style({
|
|
'::before': {
|
|
backgroundColor: color.Success.Main,
|
|
},
|
|
});
|
|
|
|
export const PresenceUnavailable = style({
|
|
'::before': {
|
|
backgroundColor: color.Warning.Main,
|
|
},
|
|
});
|
|
|
|
export const PresenceOffline = style({
|
|
'::before': {
|
|
backgroundColor: color.Secondary.Main,
|
|
},
|
|
});
|