jonsuh / hamburgers

Tasty CSS-animated Hamburgers
https://jonsuh.com/hamburgers
MIT License
7.06k stars 1.63k forks source link

Add CSS Vars #119

Open rbrisita opened 2 years ago

rbrisita commented 2 years ago

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;
      }
TomoyaKuroda commented 3 months ago

This repo isn't actively maintained so I created it by myself. Please check it out https://github.com/TomoyaKuroda/CSS-Variables-Hamburgers