64 lines
1.3 KiB
TypeScript
64 lines
1.3 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { recipe } from '@vanilla-extract/recipes';
|
|
import { DefaultReset, color, config } from 'folds';
|
|
|
|
export const ComposerDock = style({
|
|
position: 'relative',
|
|
});
|
|
|
|
/** Read receipts float above the input so they don't reserve layout height. */
|
|
export const FollowingFloat = style({
|
|
position: 'absolute',
|
|
bottom: '100%',
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: 2,
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
pointerEvents: 'none',
|
|
padding: `0 ${config.space.S200}`,
|
|
});
|
|
|
|
export const FollowingFloatHit = style({
|
|
pointerEvents: 'auto',
|
|
maxWidth: '100%',
|
|
});
|
|
|
|
export const RoomViewFollowingPlaceholder = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'none',
|
|
height: 0,
|
|
},
|
|
]);
|
|
|
|
export const RoomViewFollowing = recipe({
|
|
base: [
|
|
DefaultReset,
|
|
{
|
|
minHeight: 0,
|
|
padding: `${config.space.S100} ${config.space.S200}`,
|
|
width: 'auto',
|
|
maxWidth: '100%',
|
|
backgroundColor: 'transparent',
|
|
color: color.Surface.OnContainer,
|
|
outline: 'none',
|
|
},
|
|
],
|
|
variants: {
|
|
clickable: {
|
|
true: {
|
|
cursor: 'pointer',
|
|
selectors: {
|
|
'&:hover, &:focus-visible': {
|
|
color: color.Primary.Main,
|
|
},
|
|
'&:active': {
|
|
color: color.Primary.Main,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|