@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
59 lines • 1.98 kB
JavaScript
import { css } from '@xstyled/styled-components';
import { th, variant as createVariant } from '@xstyled/system';
const TabVariants = {
tabular: {
base: css({}),
header: ({ position }) => css({
position: 'relative',
right: position === 'left' ? '-1px' : undefined,
left: position === 'right' ? '-1px' : undefined,
bottom: position === 'top' ? '-1px' : undefined,
top: position === 'bottom' ? '-1px' : undefined,
}),
tab: {
activeBorderColor: 'transparent',
spacing: '0.25rem',
styles: ({ active }) => css({
border: 'light',
padding: '0.75rem 1rem',
background: active ? 'white' : th.color('background.base'),
fontWeight: active ? 500 : undefined,
}),
},
pane: css({}),
},
regular: {
base: css({
border: 'light',
}),
header: ({ position }) => css({
padding: ['left', 'right'].includes(position)
? '1rem 0'
: '0 1rem',
background: th.color('white'),
}),
tab: {
activeBorderColor: 'primary.base',
spacing: '2rem',
styles: ({ position, active }) => 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,
});
//# sourceMappingURL=utils.js.map