Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
li a {
display: block;
padding-left: 3.4375rem;
height: 2.6875rem;
line-height: 2.6875rem;
cursor: pointer;
font-size: 0.875rem;
color: #222;
&:hover {
background-color: rgba(0, 126, 205, 0.1);
}
}
}
`,
none: css({}),
};
const variantStyles = createVariant({
key: 'collapse.variants',
prop: 'variant',
default: DEFAULT_VARIANT,
variants: variants,
});
const StyledCollapse = styled('div')`
display: block;
box-sizing: border-box;
font-family: base;
${variantStyles}
${({ position }) =>
({
left: css({ flexDirection: 'row' }),
top: css({ flexDirection: 'column' }),
bottom: css({ flexDirection: 'column-reverse' }),
right: css({ flexDirection: 'row-reverse' }),
}[position || 'top'])}
${({ position }) =>
({
left: css({
flexDirection: 'column',
}),
top: css({
flexDirection: 'row',
overflowX: 'auto',
}),
bottom: css({
flexDirection: 'row',
overflowX: 'auto',
}),
right: css({
flexDirection: 'column',
}),
}[position || 'top'])}
activeBorderColor: 'primary.base',
spacing: '2rem',
styles: ({ position, active }: any) =>
css({
border: 'solid transparent',
padding: ['left', 'right'].includes(position)
? '0.625rem'
: '0.625rem 0',
borderWidth: ['left', 'right'].includes(position)
? '0 3px'
: '3px 0',
fontWeight: active ? 600 : undefined,
color: active ? undefined : 'text.label',
}),
},
pane: css({}),
},
};
export const variantStyles = createVariant({
key: 'tabs.variants',
prop: 'variant',
default: 'regular',
variants: TabVariants,
});
borderBottomRightRadius: 0,
'&:last-of-type': {
marginRight: 0,
},
}),
bottom: css({
borderTop: active ? activeBorder : undefined,
borderTopColor: active ? activeBorderColor : undefined,
marginRight: spacing,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
'&:last-of-type': {
marginRight: 0,
},
}),
right: css({
borderLeft: active ? activeBorder : undefined,
borderLeftColor: active ? activeBorderColor : undefined,
marginBottom: spacing,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
textAlign: 'left',
'&:last-of-type': {
marginBottom: 0,
},
}),
}[position])}
`;
${({
tabTheme,
active,
activeBorder = tabTheme.activeBorder,
activeBorderColor = tabTheme.activeBorderColor,
spacing = tabTheme.spacing,
position = 'top',
}) =>
({
left: css({
borderRight: active ? activeBorder : undefined,
borderRightColor: active ? activeBorderColor : undefined,
marginBottom: spacing,
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
textAlign: 'right',
justifyContent: 'flex-end',
'&:last-of-type': {
marginBottom: 0,
},
}),
top: css({
borderBottom: active ? activeBorder : undefined,
borderBottomColor: active ? activeBorderColor : undefined,
marginRight: spacing,
borderBottomLeftRadius: 0,
position = 'top',
}) =>
({
left: css({
borderRight: active ? activeBorder : undefined,
borderRightColor: active ? activeBorderColor : undefined,
marginBottom: spacing,
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
textAlign: 'right',
justifyContent: 'flex-end',
'&:last-of-type': {
marginBottom: 0,
},
}),
top: css({
borderBottom: active ? activeBorder : undefined,
borderBottomColor: active ? activeBorderColor : undefined,
marginRight: spacing,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
'&:last-of-type': {
marginRight: 0,
},
}),
bottom: css({
borderTop: active ? activeBorder : undefined,
borderTopColor: active ? activeBorderColor : undefined,
marginRight: spacing,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
'&:last-of-type': {
justifyContent: 'flex-end',
'&:last-of-type': {
marginBottom: 0,
},
}),
top: css({
borderBottom: active ? activeBorder : undefined,
borderBottomColor: active ? activeBorderColor : undefined,
marginRight: spacing,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
'&:last-of-type': {
marginRight: 0,
},
}),
bottom: css({
borderTop: active ? activeBorder : undefined,
borderTopColor: active ? activeBorderColor : undefined,
marginRight: spacing,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
'&:last-of-type': {
marginRight: 0,
},
}),
right: css({
borderLeft: active ? activeBorder : undefined,
borderLeftColor: active ? activeBorderColor : undefined,
marginBottom: spacing,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
textAlign: 'left',
${({ position }) =>
({
left: css({ flexDirection: 'row' }),
top: css({ flexDirection: 'column' }),
bottom: css({ flexDirection: 'column-reverse' }),
right: css({ flexDirection: 'row-reverse' }),
}[position || 'top'])}
${({ position }) =>
({
left: css({ flexDirection: 'row' }),
top: css({ flexDirection: 'column' }),
bottom: css({ flexDirection: 'column-reverse' }),
right: css({ flexDirection: 'row-reverse' }),
}[position || 'top'])}