tailwindcss-hamburgers
Version:
Hamburger menus built with Tailwind CSS
61 lines (60 loc) • 2.73 kB
JavaScript
module.exports = function({settings, variant, classPrefixer}) {
const animationName = 'stack'
settings.classes.animation = classPrefixer(animationName, variant)
return (
{
[`.${settings.classes.animation}`]: {
[`span.${settings.classes.bar}`]: {
transition: `transform 0.3s ${settings.ease} 0.2s, opacity 0.25s ${settings.ease} 0.25s`,
'&::before': {
...settings.bar,
height: 'inherit',
transitionProperty: 'transform, background-color',
transitionDuration: '0.35s, 0.35s',
transitionTimingFunction: settings.ease,
},
'&:nth-child(1), &:nth-child(3)': {
background: 'none',
top: 0,
},
'&:nth-child(1)': {
transform: `translate3d(0,-${settings.scale.spaceBetween}em,0)`
},
'&:nth-child(3)': {
transform: `translate3d(0,${settings.scale.spaceBetween}em,0)`
}
},
[`&.${settings.classes.active}`]: {
[`span.${settings.classes.bar}`]: {
transition: `transform 0.25s ${settings.ease}, opacity 0.25s ${settings.ease}`,
'&:nth-child(1), &:nth-child(3)': {
transform: 'translate3d(0, 0, 0)',
},
'&::before': {
transitionProperty: 'transform, background-color',
transitionDuration: '0.35s, 0.50s',
transitionTimingFunction: settings.ease,
transitionDelay: '0.15s, 0s',
},
'&:nth-child(1)': {
'&::before': {
transform: 'rotate3d(0, 0, 1, 45deg)'
}
},
'&:nth-child(2)': {
'&::before': {
backgroundColor: 'rgba(0, 0, 0, 0)',
},
opacity: 0
},
'&:nth-child(3)': {
'&::before': {
transform: 'rotate3d(0, 0, 1, -45deg)'
}
},
},
}
}
}
)
}