From cb8ea749d3711044b7afd00f409782fd201a082a Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 11 Jun 2020 21:46:46 -0400 Subject: [PATCH] used "inherit" for ::before and ::after instead of $hamburger-active-layer-color; Since the ::before and ::after css pseudo elements are not accessible from Javascript, the color of the two bars at the bottom and top cannot be changed at runtime. By using "inherit" they will take over the color of middle bar thus the color can be changed dinamically. --- _sass/hamburgers/_base.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/_sass/hamburgers/_base.scss b/_sass/hamburgers/_base.scss index 7263067..8cdb0d9 100644 --- a/_sass/hamburgers/_base.scss +++ b/_sass/hamburgers/_base.scss @@ -37,10 +37,12 @@ } } - .hamburger-inner, + .hamburger-inner{ + background-color: $hamburger-active-layer-color; + } .hamburger-inner::before, .hamburger-inner::after { - background-color: $hamburger-active-layer-color; + background-color: inherit; } } } @@ -62,7 +64,7 @@ &::after { width: $hamburger-layer-width; height: $hamburger-layer-height; - background-color: $hamburger-layer-color; + background-color: inherit; border-radius: $hamburger-layer-border-radius; position: absolute; transition-property: transform;