Add stylelint (#161)

* add stylelint package and config file

* adds some rules for stylelint and styleline-scss

* add prettier collision detection for stylelint + more rules, with list of stylelint-scss plugin rules

* some more rulez

* add max-nesting rule, disable stylelint in SideNav styles file because its a mess - to be resolved later

* add new properties, refactor css in app and framework to correctly respect order rules from stylelint, greatly refactor form element scss to use shared mixin property helpers

* add a lottttt more rules

* Updates rule to not ignore background

* add remaining stylelint rules

* add default operators to new undernet config vars

Author: geotrev

app/components/Footer/styles.scss

@@ -10,6 +10,6 @@
   .has-feather {
     @include colored-link;
     display: inline-block;
-    padding: 1rem;
+    padding: $global-space;
   }
 }

app/components/GlobalNav/styles.scss

@@ -13,6 +13,10 @@
   padding: 0;
   z-index: 5;
 
+  li {
+    padding: 0;
+  }
+
   .nav-list {
     list-style-type: none;
     margin: 0;
@@ -41,23 +45,19 @@
         list-style-type: none;
         margin: 0;
         padding: 0;
+      }
 
-        li {
-          display: flex;
-          align-items: center;
-        }
+      li {
+        display: flex;
+        align-items: center;
       }
     }
   }
 
-  li {
-    padding: 0;
-  }
-
   li a {
     @include colored-link($white);
     display: flex;
     text-decoration: none;
-    padding: 1rem;
+    padding: $global-space;
   }
 }

app/components/SideNav/styles.scss

@@ -1,5 +1,7 @@
 @import "app/global";
 
+// stylelint-disable
+
 #side-nav {
   background: #fbfbfb;
 

app/layouts/Main/prism.scss

@@ -7,6 +7,9 @@ Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting
 Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
 
 */
+
+// stylelint-disable
+
 code[class*="language-"],
 pre[class*="language-"] {
   font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console",

app/pages/Docs/styles.scss

@@ -20,7 +20,7 @@
     .filler {
       background: $gray900;
       border-radius: $global-border-radius;
-      margin-bottom: 1rem;
+      margin-bottom: $global-space;
     }
 
     .static-height {
@@ -63,13 +63,13 @@
 
     .inverted-bg {
       background: $gray200;
-      padding: 1rem 1rem 0 1rem;
+      padding: $global-space $global-space 0 $global-space;
     }
 
     .filler-bg {
       background: $gray900;
-      padding: 1rem;
-      margin-bottom: 1rem;
+      padding: $global-space;
+      margin-bottom: $global-space;
       border-radius: $global-border-radius;
 
       .filler {

app/pages/Home/styles.scss

@@ -10,6 +10,23 @@
 #home {
   width: 100%;
 
+  .animations {
+    background-color: $brand-dark-blue;
+
+    .animated-icon {
+      width: 125px;
+      margin: 0 auto;
+    }
+
+    p {
+      margin: 0 8px;
+
+      @include breakpoint-down(large) {
+        margin-bottom: 24px;
+      }
+    }
+  }
+
   .hero {
     background-image: url("../../assets/images/grid-bg.svg");
     background-repeat: no-repeat;
@@ -49,24 +66,7 @@
     }
   }
 
-  .animations {
-    background-color: $brand-dark-blue;
-
-    .animated-icon {
-      width: 125px;
-      margin: 0 auto;
-    }
-
-    p {
-      margin: 0 8px;
-
-      @include breakpoint-down(large) {
-        margin-bottom: 24px;
-      }
-    }
-  }
-
-  a.has-gradient {
+  .has-gradient {
     @include bg-gradient;
     border: none;
     padding: 14px 18px;