bg-fill-button: move inline styles to CSS (jakearchibald#324)

* bg-fill-button: move inline styles to CSS

* Alternative solution

* Alternative

* Update src/js/page/ui/bg-fill-button.js

Co-authored-by: Jake Archibald <[email protected]>

* prettier

* Update src/css/_utils.scss

Co-authored-by: Jake Archibald <[email protected]>

* Update _utils.scss

Co-authored-by: Jake Archibald <[email protected]>

Author: XhmikosR

src/css/_utils.scss

@@ -30,3 +30,7 @@ $easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 $easeInOutExpo: cubic-bezier(1, 0, 0, 1);
 $easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
 $easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+.bg-dark {
+  background-color: rgba(0, 0, 0, 0.7);
+}

src/js/page/ui/bg-fill-button.js

@@ -16,17 +16,13 @@ export default class BgFillButton extends FloatingActionButton {
 
   onClick(event) {
     super.onClick(event);
-    // event adds a background color
+
     if (this.container.classList.contains('active')) {
       this.container.classList.remove('active');
-      this.setColor('transparent');
+      document.documentElement.classList.remove('bg-dark');
     } else {
       this.container.classList.add('active');
-      this.setColor('rgba(0, 0, 0, 0.7)');
+      document.documentElement.classList.add('bg-dark');
     }
   }
-
-  setColor(color) {
-    document.documentElement.style.backgroundColor = color;
-  }
 }