Fix the lint validation and add the task in the default gulp

Author: raphaelfabeni

dist/css-loader.css

@@ -12,7 +12,7 @@ gulp.task('serve', ['sass'], function() {
     open: false
   });
 
-  gulp.watch(['src/*.sass', 'src/**/*.sass'], ['sass']);
+  gulp.watch(['src/*.sass', 'src/**/*.sass'], ['lint', 'sass']);
   gulp.watch('examples/*.html').on('change', browserSync.reload);
 });
 

gulpfile.js

@@ -14,18 +14,17 @@
       width: 100%
       font-size: $font-size-loader
 
-  // Default text
+// Default text
   &[data-text = '']
     &:before
       content: 'Loading'
 
-  // Passing text as attribute
+// Passing text as attribute
   &:not([data-text = ''])
     &:before
       content: attr(data-text)
 
-  // Blink animation
-  // ==========================================================================
+// Blink animation
   &[blink]
     &:before
       animation: blink 1s linear infinite alternate

src/general/_utils.sass

@@ -17,11 +17,11 @@
 
   &[shadow]:before
     box-shadow: -5px -5px 10px 0 $loader-ball--shadow inset
-  
+
   &:after
     content: ''
     position: absolute
-    background-color: rgba(0,0,0,.3)
+    background-color: rgba(0, 0, 0, .3)
     border-radius: 50%
     width: 45px
     height: 20px
@@ -32,23 +32,29 @@
     animation: shadow 1s infinite alternate ease-out both
 
 @keyframes shadow
-  0%, 
+  0%
+    background-color: rgba(0, 0, 0, 0)
+    transform: scale(0)
+
   40%
-    background-color: rgba(0,0,0,0)
+    background-color: rgba(0, 0, 0, 0)
     transform: scale(0)
 
-  95%,
+  95%
+    background-color: rgba(0, 0, 0, .75)
+    transform: scale(1)
+
   100%
-    background-color: rgba(0,0,0, .75)
+    background-color: rgba(0, 0, 0, .75)
     transform: scale(1)
 
 @keyframes kick
   0%
     transform: translateY(-80px) scaleX(.95)
-  
+
   90%
     border-radius: 50%
-  
+
   100%
     transform: translateY(0) scaleX(1)
     border-radius: 50% 50% 20% 20%

src/loaders/_loader-ball.sass

@@ -2,7 +2,7 @@
 // ==========================================================================
 
 .loader-clock
-  
+
   &:before
     content: ''
     position: fixed
@@ -13,12 +13,10 @@
     border-radius: 50%
     overflow: hidden
     margin: -60px 0 0 -60px
-    background: linear-gradient(to bottom, transparent 50%, $loader-clock--color-bg 50%),
-    linear-gradient(90deg, transparent 55px, $loader-clock--color 55px, $loader-clock--color 65px, transparent 65px),
-    linear-gradient(to bottom, $loader-clock--color-bg 50%, $loader-clock--color-bg 50%)
+    background: linear-gradient(to bottom, transparent 50%, $loader-clock--color-bg 50%), linear-gradient(90deg, transparent 55px, $loader-clock--color 55px, $loader-clock--color 65px, transparent 65px), linear-gradient(to bottom, $loader-clock--color-bg 50%, $loader-clock--color-bg 50%)
     box-shadow: 0 0 0 10px $loader-clock--color-bg inset, 0 0 0 5px $loader-clock--color-border, 0 0 0 10px lighten($loader-clock--color-border, 15%)
     animation: rotation infinite 2s linear
-  
+
   &:after
     content: ''
     position: fixed
@@ -29,8 +27,6 @@
     margin: -20px 0 0 -15px
     border-radius: 20px 0 0 20px
     overflow: hidden
-    background: radial-gradient(circle at 14px 20px, darken($loader-clock--color, 10%) 10px, transparent 10px),
-    radial-gradient(circle at 14px 20px, darken($loader-clock--color, 20%) 14px, transparent 14px),
-    linear-gradient(180deg, transparent 15px, $loader-clock--color 15px, $loader-clock--color 25px, transparent 25px)
+    background: radial-gradient(circle at 14px 20px, darken($loader-clock--color, 10%) 10px, transparent 10px), radial-gradient(circle at 14px 20px, darken($loader-clock--color, 20%) 14px, transparent 14px), linear-gradient(180deg, transparent 15px, $loader-clock--color 15px, $loader-clock--color 25px, transparent 25px)
     animation: rotation infinite 24s linear
     transform-origin: 15px center

src/loaders/_loader-clock.sass

@@ -19,30 +19,48 @@
     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%)
+    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
       content: 'Loading'
 
-  // Passing text as attribute
+// Passing text as attribute
   &:not([data-screen = ''])
     &:after
       content: attr(data-screen)
 
 @keyframes shake
-  5%,
-  15%,
-  25%,
-  35%,
-  45%,
-  55%
-    transform: translate3d(-1px, 0, 0);
-  
-  10%,
-  20%,
-  30%,
-  40%,
+  5%
+    transform: translate3d(-1px, 0, 0)
+
+  10%
+    transform: translate3d(1px, 0, 0)
+
+  15%
+    transform: translate3d(-1px, 0, 0)
+
+  20%
+    transform: translate3d(1px, 0, 0)
+
+  25%
+    transform: translate3d(-1px, 0, 0)
+
+  30%
+    transform: translate3d(1px, 0, 0)
+
+  35%
+    transform: translate3d(-1px, 0, 0)
+
+  40%
+    transform: translate3d(1px, 0, 0)
+
+  45%
+    transform: translate3d(-1px, 0, 0)
+
   50%
-    transform: translate3d(1px, 0, 0);
+    transform: translate3d(1px, 0, 0)
+
+  55%
+    transform: translate3d(-1px, 0, 0)

src/loaders/_loader-smartphone.sass

@@ -24,7 +24,7 @@
     &:after
       border-right-color: transparent
 
-  // Inverse
+// Inverse
   &[inverse]
     &:after
       animation-direction: reverse