Merge pull request #28 from icelam/remove-unused-theme

refactor: remove unused css rules used for theming

src/assets/scss/_base.scss

@@ -29,17 +29,6 @@ body {
 }
 
 #app {
-  padding: 0 3.125rem;
-  min-height: 100%;
-  overflow: hidden;
-  @include flex-center;
-
-  @media #{$mobile} {
-    padding: 0 5%;
-  }
-}
-
-.theme--red {
   background: linear-gradient(
     240deg,
     $color-red-step1 0.13%,
@@ -49,19 +38,14 @@ body {
     $color-red-step5 100%
   );
   color: $color-text-light;
-}
+  padding: 0 3.125rem;
+  min-height: 100%;
+  overflow: hidden;
+  @include flex-center;
 
-.theme--purple {
-  background: linear-gradient(
-    0deg,
-    $color-purple-step1 0.13%,
-    $color-purple-step2 23.02%,
-    $color-purple-step3 46.22%,
-    $color-purple-step4 69.56%,
-    $color-purple-step5 92.87%,
-    $color-purple-step6 100%
-  );
-  color: $color-text-light;
+  @media #{$mobile} {
+    padding: 0 5%;
+  }
 }
 
 .main {

src/assets/scss/_colors.scss

@@ -10,13 +10,6 @@ $color-red-step3: #ff3634;
 $color-red-step4: #ff223c;
 $color-red-step5: #ff0c45;
 
-$color-purple-step1: #7e3efd;
-$color-purple-step2: #7b3df9;
-$color-purple-step3: #7039ed;
-$color-purple-step4: #5f32d8;
-$color-purple-step5: #4828bc;
-$color-purple-step6: #3f25b2;
-
 $color-yellow: #ffbf1f;
 $color-blood-orange: #e54c23;
 $color-shadow: rgba($color-black, 0.2);
@@ -45,8 +38,7 @@ $color-slot-text: $color-black;
 
 // settings
 $color-settings-mask: rgba($color-black, 0.6);
-$color-settings-background-red: darken($color-red-step5, 8%);
-$color-settings-background-purple: darken($color-purple-step6, 8%);
+$color-settings-background: darken($color-red-step5, 8%);
 
 // textarea
 $color-input-background: $color-light-grey;
@@ -55,5 +47,4 @@ $color-input-text: $color-black;
 
 // switch
 $color-switch-handle-disabled: $color-dark-grey;
-$color-switch-handle-red: darken($color-red-step5, 8%);
-$color-switch-handle-purple: darken($color-purple-step6, 8%);
+$color-switch-handle: darken($color-red-step5, 8%);

src/assets/scss/_inputs.scss

@@ -89,7 +89,8 @@
   height: $switch-slider-height;
   border-radius: $switch-slider-height;
   flex: 0 0 $switch-slider-width;
-  @include shadow('small') margin: 0 0 0 1rem;
+  @include shadow('small');
+  margin: 0 0 0 1rem;
 
   .slider {
     position: absolute;
@@ -124,20 +125,10 @@
   }
 
   input:checked + .slider:before {
+    background-color: $color-switch-handle;
     transform: translateX(
       $switch-slider-width - ($switch-slider-padding * 2) -
         $switch-handle-diameter
     );
   }
 }
-
-.theme--red .input--switch {
-  input:checked + .slider:before {
-    background-color: $color-switch-handle-red;
-  }
-}
-.theme--purple .input--switch {
-  input:checked + .slider:before {
-    background-color: $color-switch-handle-purple;
-  }
-}

src/assets/scss/_slot.scss

@@ -186,13 +186,8 @@
   }
 }
 
-.theme--red .settings__panel {
-  background-color: $color-settings-background-red;
-  color: $color-text-light;
-}
-
-.theme--purple .settings__panel {
-  background-color: $color-settings-background-purple;
+.settings__panel {
+  background-color: $color-settings-background;
   color: $color-text-light;
 }
 

src/index.pug

@@ -31,6 +31,6 @@ html(xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en")
     //- Google Tag Manager (noscript)
     include ./partials/gtm-noscript.html
 
-    #app.theme--red
+    #app
       include ./pages/landing.pug
       include ./partials/footer.pug