79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
import typographyStyles from 'src/components/typography/styles'
|
|
import {
|
|
white,
|
|
disabledColor,
|
|
secondaryColor,
|
|
secondaryColorDark,
|
|
secondaryColorDarker,
|
|
offColor,
|
|
offDarkColor,
|
|
offDarkerColor,
|
|
spacer
|
|
} from 'src/styling/variables'
|
|
|
|
const { h1, h3 } = typographyStyles
|
|
|
|
const pickSize = size => {
|
|
switch (size) {
|
|
case 'xl':
|
|
return spacer * 7.625
|
|
case 'sm':
|
|
return spacer * 4
|
|
case 'lg':
|
|
default:
|
|
return spacer * 5
|
|
}
|
|
}
|
|
|
|
export default {
|
|
wrapper: ({ size }) => {
|
|
const height = pickSize(size)
|
|
const shadowSize = height / 12
|
|
return { height: height + shadowSize / 2 }
|
|
},
|
|
button: ({ size, backgroundColor }) => {
|
|
const height = pickSize(size)
|
|
const shadowSize = size === 'xl' ? 3 : height / 12
|
|
const padding = size === 'xl' ? 20 : height / 2
|
|
const isGrey = backgroundColor === 'grey'
|
|
|
|
return {
|
|
extend: size === 'xl' ? h1 : h3,
|
|
border: 'none',
|
|
color: white,
|
|
cursor: 'pointer',
|
|
fontWeight: 900,
|
|
outline: 0,
|
|
backgroundColor: isGrey ? offDarkColor : secondaryColor,
|
|
'&:disabled': {
|
|
backgroundColor: disabledColor,
|
|
boxShadow: 'none',
|
|
'&:hover': {
|
|
backgroundColor: disabledColor,
|
|
boxShadow: 'none'
|
|
},
|
|
'&:active': {
|
|
marginTop: 0
|
|
}
|
|
},
|
|
shadowSize,
|
|
height,
|
|
padding: `0 ${padding}px`,
|
|
borderRadius: height / 4,
|
|
boxShadow: `0 ${shadowSize}px ${isGrey ? offColor : secondaryColorDark}`,
|
|
'&:hover': {
|
|
backgroundColor: isGrey ? offColor : secondaryColorDark,
|
|
boxShadow: `0 ${shadowSize}px ${
|
|
isGrey ? offDarkerColor : secondaryColorDarker
|
|
}`
|
|
},
|
|
'&:active': {
|
|
marginTop: shadowSize / 2,
|
|
backgroundColor: isGrey ? offDarkColor : secondaryColorDark,
|
|
boxShadow: `0 ${shadowSize / 2}px ${
|
|
isGrey ? offDarkerColor : secondaryColorDarker
|
|
}`
|
|
}
|
|
}
|
|
}
|
|
}
|