mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-02-24 06:03:04 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

update sequence card styles

Browse source
This commit is contained in:
Ajay Bura 2024-03-22 10:00:57 +05:30
parent fd638f9e6a
commit 23d823b0d3
3 changed files with 39 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/scroll-top-container/style.css.ts
View file

@ -15,6 +15,6 @@ export const ScrollTopContainer = style({
top: config.space.S200, top: config.space.S200,
left: '50%', left: '50%',
transform: 'translateX(-50%)', transform: 'translateX(-50%)',
zIndex: 1, zIndex: config.zIndex.Z100,
animation: `${ScrollContainerAnime} 100ms`, animation: `${ScrollContainerAnime} 100ms`,
}); });

25
src/app/components/sequence-card/SequenceCard.tsx
View file

@ -1,19 +1,16 @@
import React, { ComponentProps } from 'react'; import React, { ComponentProps } from 'react';
import { Box, as } from 'folds'; import { Box, as } from 'folds';
import classNames from 'classnames'; import classNames from 'classnames';
import { ContainerColor } from '../../styles/ContainerColor.css'; import { ContainerColor, ContainerColorVariants } from '../../styles/ContainerColor.css';
import * as css from './style.css'; import * as css from './style.css';
export const SequenceCard = as<'div', ComponentProps<typeof Box>>( export const SequenceCard = as<
({ className, ...props }, ref) => ( 'div',
<Box ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
className={classNames( >(({ className, variant, outlined, ...props }, ref) => (
css.SequenceCard, <Box
ContainerColor({ variant: 'SurfaceVariant' }), className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
className {...props}
)} ref={ref}
{...props} />
ref={ref} ));
/>
)
);

37
src/app/components/sequence-card/style.css.ts
View file

@ -1,15 +1,32 @@
import { style } from '@vanilla-extract/css'; import { createVar } from '@vanilla-extract/css';
import { config } from 'folds'; import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { color, config } from 'folds';
export const SequenceCard = style({ const outlinedWidth = createVar('0');
selectors: { export const SequenceCard = recipe({
'&:first-child': { base: {
borderTopLeftRadius: config.radii.R400, border: `${outlinedWidth} solid ${color.Surface.ContainerLine}`,
borderTopRightRadius: config.radii.R400, borderBottomWidth: 0,
selectors: {
'&:first-child': {
borderTopLeftRadius: config.radii.R400,
borderTopRightRadius: config.radii.R400,
},
'&:last-child': {
borderBottomLeftRadius: config.radii.R400,
borderBottomRightRadius: config.radii.R400,
borderBottomWidth: outlinedWidth,
},
}, },
'&:last-child': { },
borderBottomLeftRadius: config.radii.R400, variants: {
borderBottomRightRadius: config.radii.R400, outlined: {
true: {
vars: {
[outlinedWidth]: config.borderWidth.B300,
},
},
}, },
}, },
}); });
export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;