litruv
47979718eb
All checks were successful
Trigger cinny-mobile / dispatch (push) Successful in 2s
Constrain image attachments to their parent while preserving their aspect ratio.
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
export const Attachment = recipe({
|
|
base: {
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
color: color.SurfaceVariant.OnContainer,
|
|
borderRadius: config.radii.R400,
|
|
overflow: 'hidden',
|
|
maxWidth: `min(100%, ${toRem(400)})`,
|
|
},
|
|
variants: {
|
|
outlined: {
|
|
true: {
|
|
boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
|
|
},
|
|
},
|
|
transparent: {
|
|
true: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export type AttachmentVariants = RecipeVariants<typeof Attachment>;
|
|
|
|
export const AttachmentHeader = style({
|
|
padding: config.space.S300,
|
|
});
|
|
|
|
export const AttachmentBox = style([
|
|
DefaultReset,
|
|
{
|
|
maxWidth: `min(100%, ${toRem(400)})`,
|
|
maxHeight: toRem(400),
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|
|
|
|
export const AttachmentContent = style({
|
|
padding: config.space.S300,
|
|
paddingTop: 0,
|
|
});
|