[TASK] Activate sass no-color-literals

.sass-lint.yml

 rules:
-  no-color-literals: 0
   single-line-per-selector: 0
   # Allow for new prefixes like -webkit-tap-highlight-color or antialiasing
   # Can maybe be enabled again with sass-lint 1.8 https://github.com/sasstools/sass-lint/pull/709

scss/mixins/_shadow.scss

 // 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($color-black, .12), 0 1px 2px rgba($color-black, .24);
+    box-shadow: 0 1px 3px transparentize($color-black, .88), 0 1px 2px transparentize($color-black, .76);
   } @else if $level == 2 {
-    box-shadow: 0 3px 6px rgba($color-black, .16), 0 3px 6px rgba($color-black, .23);
+    box-shadow: 0 3px 6px transparentize($color-black, .84), 0 3px 6px transparentize($color-black, .77);
   } @else if $level == 3 {
-    box-shadow: 0 10px 20px rgba($color-black, .19), 0 6px 6px rgba($color-black, .23);
+    box-shadow: 0 10px 20px transparentize($color-black, .81), 0 6px 6px transparentize($color-black, .77);
   } @else if $level == 4 {
-    box-shadow: 0 14px 28px rgba($color-black, .25), 0 10px 10px rgba($color-black, .22);
+    box-shadow: 0 14px 28px transparentize($color-black, .75), 0 10px 10px transparentize($color-black, .78);
   } @else if $level == 5 {
-    box-shadow: 0 19px 38px rgba($color-black, .3), 0 15px 12px rgba($color-black, .22);
+    box-shadow: 0 19px 38px transparentize($color-black, .7), 0 15px 12px transparentize($color-black, .78);
   }
 }

scss/modules/_base.scss

@@ -7,7 +7,7 @@ body {
 }
 
 header {
-  background: rgba($color-black, .02);
+  background: transparentize($color-black, .98);
 }
 
 h1, h2, h3, h4, h5, h6 {

scss/modules/_button.scss

@@ -30,7 +30,7 @@ button {
       }
 
       &:active {
-        box-shadow: inset 0 5px 20px rgba($color-black, .19), inset 0 3px 6px rgba($color-black, .23);
+        box-shadow: inset 0 5px 20px transparentize($color-black, .81), inset 0 3px 6px transparentize($color-black, .77);
       }
     }
   }
@@ -41,7 +41,7 @@ button {
     @if $shadows == 1 {
       box-shadow: none;
     }
-    color: rgba($color-black, .5);
+    color: transparentize($color-black, .5);
     float: right;
     font-size: 20pt;
     height: auto;

scss/modules/_leaflet-layer.scss

@@ -5,7 +5,7 @@
     border-radius: 0;
     box-shadow: none;
     margin: 0;
-    opacity: .7;
+    opacity: .8;
   }
 }
 
@@ -33,7 +33,7 @@
 }
 
 .leaflet-control-layers-list {
-  background: rgba($color-white, .9);
+  background: transparentize($color-white, .1);
   color: $color-gray-dark;
   padding: 10px;
 

scss/modules/_node.scss

 .bar {
-  background: rgba($color-new, .5);
+  background: transparentize($color-new, .5);
   display: block;
   height: 1.4em;
   position: relative;
 
   span {
-    background: rgba($color-new, .8);
+    background: transparentize($color-new, .92);
     display: inline-block;
     height: 1.4em;
   }

scss/modules/_sidebar.scss

@@ -58,7 +58,7 @@
     } @else {
       border-right: 1px solid darken($color-white, 10%);
     }
-    background: rgba($color-white, .97);
+    background: transparentize($color-white, .03);
     min-height: 100vh;
     overflow-y: visible;
   }

scss/modules/_tabs.scss

@@ -5,7 +5,7 @@
     border: solid darken($color-white, 10%);
     border-width: 1px 0;
   }
-  background: rgba($color-black, .02);
+  background: transparentize($color-black, .98);
   display: flex;
   font-family: $font-family-secondary;
   list-style: none;
@@ -13,7 +13,7 @@
   padding: 0;
 
   li {
-    color: rgba($color-black, .5);
+    color: transparentize($color-black, .5);
     cursor: pointer;
     flex: 1 1 auto;
     padding: 1.3em .5em 1em;