clean scss (#21)

* [TASK] CGL - Formation

* [TASK] Generic font fallback

* [TASK] Remove swp file

scss/_filters.scss

@@ -2,7 +2,7 @@
   margin: 0;
   display: flex;
   flex-wrap: wrap;
-  font-family: Roboto;
+  font-family: Roboto, sans-serif;
   font-size: 0.83em;
   font-weight: bold;
   padding: 0 6pt 6pt !important;
@@ -10,7 +10,7 @@
   li {
     border-radius: 20pt;
     display: flex;
-    padding: 0pt 0 0pt 8pt;
+    padding: 0 0 0 8pt;
     margin: 3pt;
     align-items: center;
     background: #009ee0;

scss/_legend.scss

@@ -1,5 +1,4 @@
-.legend .symbol
+.legend .symbol {
-{
   width: 1em;
   height: 1em;
   border-radius: 50%;
@@ -7,22 +6,18 @@
   vertical-align: -5%;
 }
 
-.legend-new .symbol
+.legend-new .symbol {
-{
   background-color: #93E929;
 }
 
-.legend-online .symbol
+.legend-online .symbol {
-{
   background-color: #1566A9;
 }
 
-.legend-offline .symbol
+.legend-offline .symbol {
-{
   background-color: #D43E2A;
 }
 
-.legend-online, .legend-offline
+.legend-online, .legend-offline {
-{
   margin-left: 1em;
 }

scss/_map.scss

@@ -35,13 +35,25 @@
 }
 
 @-webkit-keyframes blink {
-  0%   { opacity: 1.0; }
+  0% {
-  80%  { opacity: 1.0; }
+    opacity: 1.0;
-  90%  { opacity: 0.0; }
+  }
+  80% {
+    opacity: 1.0;
+  }
+  90% {
+    opacity: 0.0;
+  }
 }
 
 @keyframes blink {
-  0%   { opacity: 1.0; }
+  0% {
-  80%  { opacity: 1.0; }
+    opacity: 1.0;
-  90%  { opacity: 0.0; }
+  }
+  80% {
+    opacity: 1.0;
+  }
+  90% {
+    opacity: 0.0;
+  }
 }

scss/_reset.scss

@@ -22,25 +22,31 @@ time, mark, audio, video {
   font: inherit;
   vertical-align: baseline;
 }
+
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
   display: block;
 }
+
 body {
   line-height: 1;
 }
+
 ol, ul {
   list-style: none;
 }
+
 blockquote, q {
   quotes: none;
 }
+
 blockquote:before, blockquote:after,
 q:before, q:after {
   content: '';
   content: none;
 }
+
 table {
   border-collapse: collapse;
   border-spacing: 0;

scss/_shadow.scss

@@ -3,17 +3,13 @@
 @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 {
-  @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 {
-  @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 {
-  @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 {
-  @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

@@ -44,7 +44,7 @@ $buttondistance: 12pt;
   margin: 0;
   list-style: none;
   display: flex;
-  font-family: Roboto;
+  font-family: Roboto, sans-serif;
   @include shadow(1);
 }
 
@@ -200,7 +200,7 @@ button:hover {
 }
 
 button:active {
-  box-shadow: inset 0px 5px 20px rgba(0, 0, 0, 0.19), inset 0px 3px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.19), inset 0 3px 6px rgba(0, 0, 0, 0.23);
 }
 
 button::-moz-focus-inner {
@@ -405,9 +405,9 @@ table {
 @media screen and (max-width: 80em) {
   .sidebar {
     font-size: 0.8em;
-    top: 0pt;
+    top: 0;
-    left: 0pt;
+    left: 0;
-    margin: 0pt;
+    margin: 0;
     width: $sidebarwidthsmall;
     min-height: 100vh;
     @include shadow(2);
@@ -438,7 +438,7 @@ table {
 
   .sidebar {
     position: static;
-    margin: 0em !important;
+    margin: 0 !important;
     width: auto;
     height: auto;
     min-height: 0;