hamburgers
hamburgers copied to clipboard
Add CSS Vars
First thanks for this. It's a time saver.
Looking at the CSS, the styles would benefit from using CSS variables for attributes like width, height, color, duration, timing function, etc. For my purposes, I changed the inner color:
:root {
--inner-color: #7cf358
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: var(--inner-color);
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: var(--inner-color);
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}