hamburgers icon indicating copy to clipboard operation
hamburgers copied to clipboard

Add CSS Vars

Open rbrisita opened this issue 2 years ago • 1 comments

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;
      }

rbrisita avatar Aug 18 '22 20:08 rbrisita