From 1c69363233121c47b3e920b141ceb6c45b8f3d30 Mon Sep 17 00:00:00 2001
From: Xaver Maierhofer <xmaierhofer@1drop.de>
Date: Wed, 1 Jun 2016 21:21:21 +0200
Subject: [PATCH] [TASK] Activate sass no-color-literals

---
 .sass-lint.yml                   |  1 -
 scss/mixins/_shadow.scss         | 10 +++++-----
 scss/modules/_base.scss          |  2 +-
 scss/modules/_button.scss        |  4 ++--
 scss/modules/_leaflet-layer.scss |  4 ++--
 scss/modules/_node.scss          |  4 ++--
 scss/modules/_sidebar.scss       |  2 +-
 scss/modules/_tabs.scss          |  4 ++--
 8 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/.sass-lint.yml b/.sass-lint.yml
index 29b9e9a..9b46f7b 100644
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@@ -1,5 +1,4 @@
 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
diff --git a/scss/mixins/_shadow.scss b/scss/mixins/_shadow.scss
index 6e86e10..1275832 100644
--- a/scss/mixins/_shadow.scss
+++ b/scss/mixins/_shadow.scss
@@ -1,14 +1,14 @@
 // 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);
   }
 }
diff --git a/scss/modules/_base.scss b/scss/modules/_base.scss
index 20308fe..873eb48 100644
--- a/scss/modules/_base.scss
+++ b/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 {
diff --git a/scss/modules/_button.scss b/scss/modules/_button.scss
index cd47c2f..74cb725 100644
--- a/scss/modules/_button.scss
+++ b/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;
diff --git a/scss/modules/_leaflet-layer.scss b/scss/modules/_leaflet-layer.scss
index 7e8a806..e76bc14 100644
--- a/scss/modules/_leaflet-layer.scss
+++ b/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;
 
diff --git a/scss/modules/_node.scss b/scss/modules/_node.scss
index 0cb951d..8af2027 100644
--- a/scss/modules/_node.scss
+++ b/scss/modules/_node.scss
@@ -1,11 +1,11 @@
 .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;
   }
diff --git a/scss/modules/_sidebar.scss b/scss/modules/_sidebar.scss
index da5d183..b52e55d 100644
--- a/scss/modules/_sidebar.scss
+++ b/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;
   }
diff --git a/scss/modules/_tabs.scss b/scss/modules/_tabs.scss
index 8422700..6e97613 100644
--- a/scss/modules/_tabs.scss
+++ b/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;