mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-04 22:40:29 +03:00
faa952295f
* add new create room * rename create room modal file * default restrict access for space children in room create modal * move create room kind selector to components * add radii variant to sequence card component * more more reusable create room logic to components * add create space * update address input description * add new space modal * fix add room button visible on left room in space lobby
82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import { createVar } from '@vanilla-extract/css';
|
|
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
|
|
import { config } from 'folds';
|
|
|
|
const outlinedWidth = createVar('0');
|
|
const radii = createVar(config.radii.R400);
|
|
export const SequenceCard = recipe({
|
|
base: {
|
|
vars: {
|
|
[outlinedWidth]: '0',
|
|
},
|
|
borderStyle: 'solid',
|
|
borderWidth: outlinedWidth,
|
|
borderBottomWidth: 0,
|
|
selectors: {
|
|
'&:first-child, :not(&) + &': {
|
|
borderTopLeftRadius: [radii],
|
|
borderTopRightRadius: [radii],
|
|
},
|
|
'&:last-child, &:not(:has(+&))': {
|
|
borderBottomLeftRadius: [radii],
|
|
borderBottomRightRadius: [radii],
|
|
borderBottomWidth: outlinedWidth,
|
|
},
|
|
[`&[data-first-child="true"]`]: {
|
|
borderTopLeftRadius: [radii],
|
|
borderTopRightRadius: [radii],
|
|
},
|
|
[`&[data-first-child="false"]`]: {
|
|
borderTopLeftRadius: 0,
|
|
borderTopRightRadius: 0,
|
|
},
|
|
[`&[data-last-child="true"]`]: {
|
|
borderBottomLeftRadius: [radii],
|
|
borderBottomRightRadius: [radii],
|
|
},
|
|
[`&[data-last-child="false"]`]: {
|
|
borderBottomLeftRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
},
|
|
|
|
'button&': {
|
|
cursor: 'pointer',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
radii: {
|
|
'0': {
|
|
vars: {
|
|
[radii]: config.radii.R0,
|
|
},
|
|
},
|
|
'300': {
|
|
vars: {
|
|
[radii]: config.radii.R300,
|
|
},
|
|
},
|
|
'400': {
|
|
vars: {
|
|
[radii]: config.radii.R400,
|
|
},
|
|
},
|
|
'500': {
|
|
vars: {
|
|
[radii]: config.radii.R500,
|
|
},
|
|
},
|
|
},
|
|
outlined: {
|
|
true: {
|
|
vars: {
|
|
[outlinedWidth]: config.borderWidth.B300,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
radii: '400',
|
|
},
|
|
});
|
|
export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;
|