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`,
}); });

17
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',
ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
>(({ className, variant, outlined, ...props }, ref) => (
<Box <Box
className={classNames( className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
css.SequenceCard,
ContainerColor({ variant: 'SurfaceVariant' }),
className
)}
{...props} {...props}
ref={ref} ref={ref}
/> />
) ));
);

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

@ -1,7 +1,12 @@
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');
export const SequenceCard = recipe({
base: {
border: `${outlinedWidth} solid ${color.Surface.ContainerLine}`,
borderBottomWidth: 0,
selectors: { selectors: {
'&:first-child': { '&:first-child': {
borderTopLeftRadius: config.radii.R400, borderTopLeftRadius: config.radii.R400,
@ -10,6 +15,18 @@ export const SequenceCard = style({
'&:last-child': { '&:last-child': {
borderBottomLeftRadius: config.radii.R400, borderBottomLeftRadius: config.radii.R400,
borderBottomRightRadius: config.radii.R400, borderBottomRightRadius: config.radii.R400,
borderBottomWidth: outlinedWidth,
},
},
},
variants: {
outlined: {
true: {
vars: {
[outlinedWidth]: config.borderWidth.B300,
},
},
}, },
}, },
}); });
export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;