litruv
8a68a1e30a
All checks were successful
Trigger cinny-mobile / dispatch (push) Successful in 2s
Bots can publish a declarative panel UI that takes over a room; user actions are sent as im.paarrot.ui.action timeline events.
75 lines
1.3 KiB
TypeScript
75 lines
1.3 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { recipe } from '@vanilla-extract/recipes';
|
|
import { DefaultReset, config, toRem } from 'folds';
|
|
|
|
export const Root = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexGrow: 1,
|
|
minHeight: 0,
|
|
minWidth: 0,
|
|
},
|
|
]);
|
|
|
|
export const Header = style({
|
|
paddingLeft: config.space.S200,
|
|
paddingRight: config.space.S200,
|
|
});
|
|
|
|
export const Body = style([
|
|
DefaultReset,
|
|
{
|
|
flexGrow: 1,
|
|
minHeight: 0,
|
|
overflow: 'auto',
|
|
padding: config.space.S400,
|
|
},
|
|
]);
|
|
|
|
export const Panel = style({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: config.space.S300,
|
|
width: '100%',
|
|
});
|
|
|
|
export const Row = style({
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: config.space.S200,
|
|
alignItems: 'center',
|
|
});
|
|
|
|
export const Field = style({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: config.space.S100,
|
|
minWidth: toRem(160),
|
|
flexGrow: 1,
|
|
});
|
|
|
|
export const Image = style({
|
|
maxWidth: '100%',
|
|
height: 'auto',
|
|
borderRadius: config.radii.R300,
|
|
});
|
|
|
|
export const Spacer = recipe({
|
|
base: {
|
|
flexShrink: 0,
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: { height: config.space.S200 },
|
|
md: { height: config.space.S400 },
|
|
lg: { height: config.space.S600 },
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
});
|