add css scss lint

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

Makefile

@@ -5,6 +5,11 @@ WATCHIFY = $(BIN_DIR)/watchify
 SASS = $(BIN_DIR)/node-sass
 MOCHA = $(BIN_DIR)/_mocha
 ISTANBUL = $(BIN_DIR)/istanbul
+STYLELINT = $(BIN_DIR)/stylelint
+
+.PHONY: stylelint
+stylelint:
+	$(STYLELINT) css/*.scss components/**/*.scss
 
 .PHONY: standard
 standard:
@@ -30,4 +35,4 @@ serve:
 
 .PHONY: test
 test:
-	$(STANDARD) && $(ISTANBUL) cover $(MOCHA) test/.setup.js components/**/test/test.js
+	$(STANDARD) && $(STYLELINT) && $(ISTANBUL) cover $(MOCHA) test/.setup.js components/**/test/test.js

components/button/Button.scss

@@ -16,27 +16,27 @@
 
 .Button:hover,
 .Button:focus {
-  background: rgba(#999999, 0.2);
+  background: rgba(#999, 0.2);
 }
 
 .Button:active {
-  background: rgba(#999999, 0.4);
+  background: rgba(#999, 0.4);
 }
 
 .Button:disabled {
-  color: rgba(#000000, 0.4);
+  color: rgba(#000, 0.4);
   background: none;
 }
 
 /* http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons */
 
 .Button--raised {
-  background: rgba(#999999, 0.2);
+  background: rgba(#999, 0.2);
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.26);
   transition: 0.25s;
 }
 
 .Button--raised:active {
-  background: rgba(#999999, 0.2);
+  background: rgba(#999, 0.2);
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
 }

components/card/Card.scss

@@ -6,12 +6,12 @@
 .Card {
   border-radius: 2px;
   background: #fff;
-  box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
 }
 
 .Card-title {
   font-size: 24px;
-  padding: 24px 16px 16px 16px;
+  padding: 24px 16px 16px;
 }
 
 .Card-actions {

components/checkbox/Checkbox.scss

@@ -32,8 +32,6 @@
   color: rgba(0, 0, 0, 0.54);
 }
 
-
-
 /**
  * checked
  */
@@ -43,8 +41,6 @@
   fill: $blue-dark;
 }
 
-
-
 /**
  * disabled
  */

components/chip/Chip.scss

@@ -26,7 +26,8 @@
   cursor: default;
 }
 
-.Chip:focus, .Chip:hover {
+.Chip:focus,
+.Chip:hover {
   color: #fff;
   background-color: rgba(0, 0, 0, 0.54);
   outline: none;
@@ -44,7 +45,8 @@
   fill: rgba(0, 0, 0, 0.26);
 }
 
-.Chip:focus svg, .Chip:hover svg {
+.Chip:focus svg,
+.Chip:hover svg {
   fill: #fff;
 }
 

components/list/List.scss

@@ -6,7 +6,7 @@
 
 .List {
   padding: 8px 0;
-  margin: 0 0;
+  margin: 0;
   list-style: none;
   background-color: white;
 }
@@ -18,36 +18,41 @@
 
 .List-row-text-primary {
   font-size: 16px;
-  margin: 0 0;
+  margin: 0;
   margin-bottom: 6px;
   font-weight: normal;
-  padding: 0 0;
+  padding: 0;
 }
 
 .List-row--oneline .List-row-text-primary {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
-.List-row--islink:focus, .List-row--selectable:hover, .List-row--islink:hover {
+.List-row--islink:focus,
+.List-row--selectable:hover,
+.List-row--islink:hover {
   background-color: #f5f5f5;
   transition: background-color 0.3s ease;
   outline: none;
 }
 
-.List-row--islink, .List-row--selectable {
+.List-row--islink,
+.List-row--selectable {
   cursor: pointer;
 }
 
-.List-row:not(.List-row--islink):focus, .List-row--islink.active {
+.List-row:not(.List-row--islink):focus,
+.List-row--islink.active {
   background-color: #e9e9e9;
   outline: none;
 }
 
-.List-row-text-secondary, .List-row-text-subheader {
+.List-row-text-secondary,
+.List-row-text-subheader {
   font-size: 14px;
   font-weight: normal;
-  padding: 0 0;
-  margin: 0 0;
+  padding: 0;
+  margin: 0;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: inline-block;
@@ -74,19 +79,23 @@
   align-items: center;
   padding-left: 16px;
   padding-right: 16px;
+
   /** This article suggest to increase padding for table and above
    * https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
    */
   @include medium {
     padding-left: 24px;
     padding-right: 24px;
   }
+
   text-decoration: none;
   width: 100%;
   color: inherit;
 }
 
-.List-row-icon-left, .List-row-icon-right, .List-row-avatar {
+.List-row-icon-left,
+.List-row-icon-right,
+.List-row-avatar {
   flex-shrink: 0;
   width: 56px;
 }
@@ -116,8 +125,9 @@
   height: 56px;
   display: flex;
   align-items: center;
+
   > * {
     border-radius: 100%;
     width: 40px;
- }
+  }
 }

components/modal/Modal.scss

@@ -5,9 +5,8 @@
 $padding: 24px;
 $border-color: #e5e5e5;
 
-
-
-.Modal-overlay.is-visible, .Modal.is-visible {
+.Modal-overlay.is-visible,
+.Modal.is-visible {
   opacity: 1;
   pointer-events: initial;
 }
@@ -57,7 +56,7 @@ $border-color: #e5e5e5;
 }
 
 .Modal-header {
-  color: #0D0D0D;
+  color: #0d0d0d;
   font-size: 20px;
   margin-bottom: 20px;
 }
@@ -69,8 +68,6 @@ $border-color: #e5e5e5;
   justify-content: flex-end;
 }
 
-
-
 /**
  * Fix button styles
  */

components/navigation/Navigation.scss

@@ -29,6 +29,7 @@ nav {
 nav.is-visible {
   visibility: visible;
   transform: translateX(0);
+
   /**
    * Show overlay first and then slide in navigation
    */
@@ -50,7 +51,7 @@ nav.is-visible {
   list-style: none;
   margin: 0;
   padding: 0;
-  padding: 12px 0 10px 0;
+  padding: 12px 0 10px;
 }
 
 .Navigation-link {
@@ -84,7 +85,6 @@ nav.is-visible {
   @include xlarge {
     display: none;
   }
-
 }
 
 .Navigation-overlay {

components/progress/Progress.scss

@@ -15,7 +15,7 @@
   height: inherit;
   background-color: #3f51b5;
   // https://github.com/google/material-design-lite/blob/master/src/_variables.scss#L497
-  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .Progress-circular {

components/radiobutton/Radiobutton.scss

@@ -35,8 +35,6 @@
   fill: rgba(0, 0, 0, 0.54);
 }
 
-
-
 /**
  * checked
  */
@@ -46,8 +44,6 @@
   fill: $blue-dark;
 }
 
-
-
 /**
  * disabled
  */

components/select/Select.scss

@@ -6,6 +6,7 @@
   justify-content: space-between;
   position: relative;
   font-size: 16px;
+
   /**
    * align text horizontally with textfields / text inputs
    */
@@ -15,8 +16,8 @@
 
 .Select-label {
   font-size: 12px;
-  padding: 0 0 8px 0;
-  color: rgba($blue-dark, 0.6)
+  padding: 0 0 8px;
+  color: rgba($blue-dark, 0.6);
 }
 
 /**
@@ -54,16 +55,16 @@
  */
 .Select-list {
   margin: 0;
-  padding: 0;
   z-index: 1;
   position: absolute;
   left: -16px;
   top: -8px;
   background: #fff;
   padding: 8px 0;
   border-radius: 2px;
-  box-shadow: 0 2px 40px rgba(0, 0, 0, .4);
+  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
   overflow-y: auto;
+
   /**
    * max-height is equal to 5 elements + margin top and margin bottom
    */

components/slider/Slider.scss

@@ -34,14 +34,6 @@
   background: $blue-dark;
 }
 
-/*.Slider-input:focus ~ .Slider-track .Slider-thumb {
-  animation: click-jump 0.5s ease;
-}*/
-
-/*.Slider-track-on.is-animating {
-  transition: width 0.5s ease;
-}*/
-
 .Slider-thumb {
   pointer-events: none;
   position: absolute;
@@ -55,35 +47,14 @@
 
 .Slider-thumb.is-mouseDown {
   transition: left 0.5s;
-  /*transform: scale(1.25);
-  animation: click-jump 0.5s;*/
 }
 
-/*.Slider-thumb.is-clicking {
-  transform: scale(1.25);
-  transition: left 0.5s ease;
-  animation: click-jump 0.5s ease;
-}*/
-
 .Slider-thumb.is-zero {
   transition: border 0.5s, background 0.5s;
   background: #fff;
   border-color: rgba(0, 0, 0, 0.26);
 }
 
-/*.Slider-thumb.is-dragging {
-  transform: scale(1.25);
-}*/
-
-/*.Slider-thumb.is-click-jumping.is-zero {
-  transition: left 0.5s, background 0.25s 0.25s, border 0.25s 0.25s;
-  background: #fff;
-  border-color: rgba(0, 0, 0, 0.26);
-  animation: click-jump 0.5s ease;
-}*/
-
-
-
 @keyframes click-jump {
   0% {
     transform: scale(1);

components/snackbar/Snackbar.scss

@@ -65,6 +65,6 @@
   border: none;
   margin: 0 0 0 24px;
   padding: 0;
-  color: #42A5F5;
+  color: #42a5f5;
   outline: none;
 }