[TASK] Box-shadow variable

scss/modules/_button.scss

@@ -21,22 +21,26 @@ button {
     color: $color-primary;
   }
 
-  &.shadow {
-    @include shadow(1);
+  @if $shadows == 1 {
+    &.shadow {
+      @include shadow(1);
 
-    &:hover {
-      @include shadow(2);
-    }
+      &:hover {
+        @include shadow(2);
+      }
 
-    &:active {
-      box-shadow: inset 0 5px 20px rgba($color-black, .19), inset 0 3px 6px rgba($color-black, .23);
+      &:active {
+        box-shadow: inset 0 5px 20px rgba($color-black, .19), inset 0 3px 6px rgba($color-black, .23);
+      }
     }
   }
 
   &.close {
     background: none;
     border-radius: 0;
-    box-shadow: none;
+    @if $shadows == 1 {
+      box-shadow: none;
+    }
     color: rgba($color-black, .5);
     float: right;
     font-size: 20pt;

scss/modules/_sidebar.scss

@@ -53,7 +53,11 @@
   }
 
   .infobox, .container {
-    @include shadow(2);
+    @if $shadows == 1 {
+      @include shadow(2);
+    } @else {
+      border-right: 1px solid darken($color-white, 10%);
+    }
     background: rgba($color-white, .97);
     min-height: 100vh;
     overflow-y: visible;
@@ -66,7 +70,6 @@
   }
 
   @media screen and (max-width: 80em) {
-    @include shadow(2);
     background: $color-white;
     font-size: .8em;
     margin: 0;
@@ -78,7 +81,9 @@
 
     .container, .infobox {
       border-radius: 0;
-      box-shadow: none;
+      @if $shadows == 1 {
+        box-shadow: none;
+      }
       margin: 0;
     }
   }

scss/modules/_tabs.scss

@@ -1,5 +1,10 @@
 .tabs {
-  @include shadow(1);
+  @if $shadows == 1 {
+    @include shadow(1);
+  } @else {
+    border: solid darken($color-white, 10%);
+    border-width: 1px 0;
+  }
   background: rgba($color-black, .02);
   display: flex;
   font-family: $font-family;

scss/modules/_variables.scss

@@ -20,3 +20,6 @@ $minscreenwidth: 630pt !default;
 $sidebarwidth: 420pt !default;
 $sidebarwidthsmall: 320pt !default;
 $buttondistance: 12pt !default;
+
+// En/disable box-shadows
+$shadows: 1 !default;