Files
react/components/select/styles.ts
2020-05-06 14:25:10 +08:00

36 lines
865 B
TypeScript

import { NormalSizes } from 'components/utils/prop-types'
import { ZeitUIThemes } from 'components/styles/themes'
export interface SelectSize {
height: string
fontSize: string
minWidth: string
}
export const getSizes = (theme: ZeitUIThemes, size?: NormalSizes) => {
const sizes: { [key in NormalSizes]: SelectSize } = {
medium: {
height: `calc(1.688 * ${theme.layout.gap})`,
fontSize: '.875rem',
minWidth: '10rem',
},
small: {
height: `calc(1.344 * ${theme.layout.gap})`,
fontSize: '.75rem',
minWidth: '8rem',
},
mini: {
height: `calc(1 * ${theme.layout.gap})`,
fontSize: '.75rem',
minWidth: '6.5rem',
},
large: {
height: `calc(2 * ${theme.layout.gap})`,
fontSize: '1.225rem',
minWidth: '12.5rem',
},
}
return size ? sizes[size] : sizes.medium
}