Add a first version of sass-lint

.sass-lint.yml

@@ -0,0 +1,126 @@
+options:
+  formatter: stylish
+files:
+  include: '_sass/**/*.s+(a|c)ss'
+  ignore: 
+    - '/node_modules/**/*.s+(a|c)ss'
+    - 'dist/*.css'
+rules:
+
+  # Extends
+  extends-before-declarations: 0
+  extends-before-mixins: 0
+  placeholder-in-extend: 0
+
+  # Styleguide
+  attribute-quotes: 2
+  bem-depth: 0
+  border-zero: 0
+  brace-style: 2
+  clean-import-paths: 2
+  empty-args: 0
+  hex-length: 2
+  hex-notation: 2
+  indentation: 
+    - 2
+    -
+      size: 2
+  leading-zero: 0
+  nesting-depth: 2
+  property-sort-order: 0
+  pseudo-element: 0
+  quotes: 
+    - 2
+    -
+      style: 'single'
+  shorthand-values: 0
+  url-quotes: 2
+  variable-for-property: 0
+  zero-unit: 2
+
+  # Final items
+  final-newline: 0
+
+  # Nesting
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+
+  # Disallow
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 2
+  no-color-literals: 0
+  no-combinators: 0
+  no-css-comments: 2
+  no-debug: 0
+  no-disallowed-properties: 0
+  no-duplicate-properties:
+    - 2
+    -
+      exclude:
+        - display
+        - opacity
+  no-empty-rulesets: 2
+  no-extends: 0
+  no-ids: 0
+  no-important: 0
+  no-invalid-hex: 2
+  no-mergeable-selectors: 0
+  no-qualifying-elements:
+    - 2
+    -
+      allow-element-with-attribute: true
+      allow-element-with-class: true
+  no-misspelled-properties: 2
+  no-trailing-whitespace: 2
+  no-trailing-zero: 0
+  no-transition-all: 0
+  no-universal-selectors: 0
+  no-url-domain: 0
+  no-url-protocols: 0
+  no-vendor-prefixes: 0
+  no-warn: 0
+  property-units: 0
+
+  # Mixins
+  mixins-before-declarations: 0
+
+  # Inner spacing
+  space-after-bang: 0
+  space-before-bang: 0
+
+  space-before-brace: 2
+
+  space-after-colon: 2
+  space-before-colon: 0
+
+  space-after-comma: 2
+
+  space-between-parens: 0
+
+  space-around-operator: 2
+
+  # Line spacing
+  empty-line-between-blocks: 2
+  one-declaration-per-line: 2
+  single-line-per-selector: 2
+
+  # Final items
+  trailing-semicolon: 2
+
+  # Name formats  
+  class-name-format:
+    - 2
+    -
+      convention: 'hyphenatedbem'
+      ignore:
+        - 'processStep'
+  function-name-format: 0
+  id-name-format: 0
+  mixin-name-format: 2
+  placeholder-name-format: 0
+  variable-name-format: 
+    - 2
+    -
+      convention: 'hyphenatedbem'

src/_config.sass

@@ -28,16 +28,16 @@ $loader-bar--text-color: #fff
 $loader-border--width: 15px
 $loader-border--height: 15px
 $loader-border--text-color: #fff
-$loader-border--color: yellow
+$loader-border--color: #fff000
 
 // Loader ball
 // ==========================================================================
 $loader-ball--color: #fff
-$loader-ball--shadow: rgba(0,0,0,.5)
+$loader-ball--shadow: rgba(0, 0, 0, .5)
 
 // Loader smartphone
 // ==========================================================================
-$loader-smartphone--color: gold
+$loader-smartphone--color: #ffd700
 $loader-smartphone--text-color: #fff
 
 // Loader clock

src/loaders/_loader-ball.sass

@@ -32,7 +32,7 @@
     animation: shadow 1s infinite alternate ease-out both
 
 @keyframes shadow
-  0%,
+  0%, 
   40%
     background-color: rgba(0,0,0,0)
     transform: scale(0)

src/loaders/_loader-bar.sass

@@ -2,7 +2,7 @@
 // ==========================================================================
 
 .loader-bar
-  
+
   // Before is used for data-text attribute
   &[data-text]:before
     top: calc(50% - 40px)

src/loaders/_loader-border.sass

@@ -34,7 +34,7 @@
 
 
 .loader-border
-  
+
   // Before is used for data-text attribute
   &[data-text]:before
     color: $loader-border--text-color

src/loaders/_loader-smartphone.sass

@@ -19,8 +19,8 @@
     border: solid 5px $loader-smartphone--color
     border-radius: 10px
     box-shadow: 0 5px 0 0 $loader-smartphone--color inset
-    background: radial-gradient(circle at 50% 90%, rgba(0,0,0,.5) 6px, transparent 6px), linear-gradient(to top, $loader-smartphone--color 22px, transparent 22px), linear-gradient(to top, rgba(0,0,0,.5) 22px, rgba(0,0,0,.5) 100%)
-    animation: shake 2s cubic-bezier(.36,.07,.19,.97) both infinite
+    background: radial-gradient(circle at 50% 90%, rgba(0, 0, 0, .5) 6px, transparent 6px), linear-gradient(to top, $loader-smartphone--color 22px, transparent 22px), linear-gradient(to top, rgba(0, 0, 0,.5) 22px, rgba(0, 0, 0, .5) 100%)
+    animation: shake 2s cubic-bezier(.36, .07, .19, .97) both infinite
 
   &[data-screen = '']
     &:after
@@ -32,8 +32,17 @@
       content: attr(data-screen)
 
 @keyframes shake
-  5%, 15%, 25%, 35%, 45%, 55%
+  5%,
+  15%,
+  25%,
+  35%,
+  45%,
+  55%
     transform: translate3d(-1px, 0, 0);
 
-  10%, 20%, 30%, 40%, 50%
+  10%,
+  20%,
+  30%,
+  40%,
+  50%
     transform: translate3d(1px, 0, 0);

src/loaders/_loader.sass

@@ -18,7 +18,7 @@
     top: calc(50% - #{$loader--size / 2})
     left: calc(50% - #{$loader--size / 2})
     animation: rotation 1s linear infinite
-  
+
   // Half
   &[half]
     &:after