scss: refactor box shadows

scss/_shadow.scss

@@ -0,0 +1,19 @@
+/* Original is in LESS and can be found here: https://gist.github.com/gefangenimnetz/3ef3e18364edf105c5af */
+
+@mixin shadow($level:1){
+  @if $level == 1 {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  }
+  @else if $level == 2 {
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  }
+  @else if $level == 3 {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  }
+  @else if $level == 4 {
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+  }
+  @else if $level == 5 {
+    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
+  }
+}

scss/main.scss

@@ -1,4 +1,5 @@
 @import '_reset';
+@import '_shadow';
 @import '_base';
 @import '_leaflet';
 @import '_leaflet.label';
@@ -40,7 +41,7 @@ $buttondistance: 12pt;
   display: flex;
   font-family: Roboto;
   background: rgba(0, 0, 0, 0.02);
-  box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24);
+  @include shadow(1);
 }
 
 .tabs li {
@@ -121,7 +122,7 @@ table.attributes td {
 
 .sidebar {
   .infobox, .container {
-    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
+    @include shadow(2);
     background: rgba(255, 255, 255, 0.9);
     border-radius: 2px;
   }
@@ -155,7 +156,7 @@ table.attributes td {
 button {
   -webkit-tap-highlight-color: transparent;
   font-family: "ionicons";
-  box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24);
+  @include shadow(1);
   border-radius: 0.9em;
   background: rgba(255, 255, 255, 0.7);
   border: none;
@@ -174,7 +175,7 @@ button.active {
 button:hover {
   background: white;
   color: #dc0067;
-  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
+  @include shadow(2);
 }
 
 button:active {
@@ -357,7 +358,7 @@ table {
     margin: 0pt;
     width: $sidebarwidthsmall;
     min-height: 100vh;
-    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
+    @include shadow(2);
     background: white;
 
     .sidebarhandle {