chore(sass): Clean up a few warnings from sass-lint

danivijay · Nov 19, 2015 · df08fb8 · df08fb8
1 parent bf27345
commit df08fb8
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 58 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -1,5 +1,10 @@
 rules:
+  clean-import-paths: 0
   force-attribute-nesting: 0
   force-element-nesting: 0
   force-pseudo-nesting: 0
+  nesting-depth: [2, max-depth: 4]
   no-ids: 0
+  no-mergeable-selectors: 0
+  no-qualifying-elements: 0
+  no-warn: 0
diff --git a/gulpfile.js b/gulpfile.js
@@ -115,7 +115,7 @@ gulp.task('scripts', ['lint'], function scriptsTask() {
   return bundledStream;
 });
 
-gulp.task('styles', function stylesTask() {
+gulp.task('styles', ['sass-lint'], function stylesTask() {
   return gulp.src(SRC_PATH + 'styles/**/*.scss')
     .pipe(sourcemaps.init())
     .pipe(sass({

diff --git a/idea_town/frontend/static-src/styles/_base.scss b/idea_town/frontend/static-src/styles/_base.scss
@@ -10,11 +10,11 @@ html {
 }
 
 body {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   font-family: 'Open Sans', sans-serif;
   font-size: 1.6rem;
-  box-sizing: border-box;
 }
 
 h1,

diff --git a/idea_town/frontend/static-src/styles/_layout-helpers.scss b/idea_town/frontend/static-src/styles/_layout-helpers.scss
@@ -1,4 +1,4 @@
-@mixin wrapper() {
+@mixin wrapper {
   clear: both;
   margin-left: auto;
   margin-right: auto;
@@ -8,11 +8,11 @@
 }
 
 @mixin flex-container($direction, $justification, $alignment, $wrap: nowrap, $wrapper: false) {
+  align-items: $alignment;
   display: flex;
   flex-direction: $direction;
-  justify-content: $justification;
-  align-items: $alignment;
   flex-wrap: $wrap;
+  justify-content: $justification;
   @if ($wrapper) {
     @include wrapper;
   }

diff --git a/idea_town/frontend/static-src/styles/_state.scss b/idea_town/frontend/static-src/styles/_state.scss
@@ -74,7 +74,7 @@
   50% {
     transform: scale(1.4);
   }
-  
+
   100% {
     transform: scale(1);
   }

diff --git a/idea_town/frontend/static-src/styles/_theme-helpers.scss b/idea_town/frontend/static-src/styles/_theme-helpers.scss
@@ -12,13 +12,15 @@ $transparent-black: rgba($black, .3);
 $trasparent-wash: rgba($wash, .96);
 $transparent-stick: rgba($white, .96);
 
+$feedback-modal-width: 300px;
+$feedback-modal-border-radius: 5px;
 
 // Color Management
 @mixin color-scheme-special ($border-top: false) {
   @include hidpi-background-image('grad-background', 1200px 984px);
+  background-color: $default;
   background-position: center top;
   background-repeat: no-repeat;
-  background-color: $default;
   @if($border-top) {
     border-top: 6px solid $white;
   }
@@ -27,18 +29,18 @@ $transparent-stick: rgba($white, .96);
 
 @mixin color-scheme-special-inverse($border-top: false) {
   @include hidpi-background-image('grad-background', 1200px 984px);
+  background-color: $white;
   background-position: center top;
   background-repeat: no-repeat;
-  background-color: $white;
   @if($border-top) {
     border-top: 6px solid $default;
   }
   color: $dark;
 }
 
 @mixin color-scheme($color, $background) {
+  background: $background;
   color: $color;
-  background: $background; 
 }
 
 // Font Management
@@ -57,10 +59,10 @@ $transparent-stick: rgba($white, .96);
     background-size: $background-size;
   }
   @media (min--moz-device-pixel-ratio: 1.3),
-  (-o-min-device-pixel-ratio: 2.6/2),
-  (-webkit-min-device-pixel-ratio: 1.3),
-  (min-device-pixel-ratio: 1.3),
-  (min-resolution: 1.3dppx) {
-    background-image: url('../images/#{$filename}@2x.#{$extension}');
-  }
+    (-o-min-device-pixel-ratio: 2.6/2),
+    (-webkit-min-device-pixel-ratio: 1.3),
+    (min-device-pixel-ratio: 1.3),
+    (min-resolution: 1.3dppx) {
+      background-image: url('../images/#{$filename}@2x.#{$extension}');
+    }
 }
diff --git a/idea_town/frontend/static-src/styles/modules/_idea-view.scss b/idea_town/frontend/static-src/styles/modules/_idea-view.scss
@@ -7,7 +7,7 @@
   @include color-scheme-special(false);
 
   &.detail-header {
-      @include color-scheme-special-inverse(false);
+    @include color-scheme-special-inverse(false);
   }
 
   .row {
@@ -27,7 +27,7 @@
 
 #details {
   flex: 1;
-  margin: 60px 0 60px;
+  margin: 60px 0;
 }
 
 .details-header-wrapper {

diff --git a/idea_town/frontend/static-src/styles/modules/_list-view.scss b/idea_town/frontend/static-src/styles/modules/_list-view.scss
@@ -53,19 +53,18 @@
 
 @keyframes slide-over {
   0% {
-    opacity: 0;
     left: 40px;
+    opacity: 0;
   }
 
   100% { 
-    opacity: 1;
     left: 0;
+    opacity: 1;
   }
 }
 
 #idea-card-list {
   @include wrapper;
-  margin: 6rem 0;
 
   @include respond-to('big') {
     @include flex-container(default, space-between, top, wrap, true);
@@ -74,6 +73,8 @@
   @include respond-to('medium') {
     @include flex-container(default, space-around, top, wrap, true);
   }
+
+  margin: 6rem 0;
 }
 
 .idea-card {
@@ -88,7 +89,7 @@
   text-decoration: none;
   transition: background 100ms;
   width: 310px;
-   
+
   h2 {
     font-size: 24px;
     font-weight: 400;

diff --git a/idea_town/frontend/static-src/styles/modules/_modals.scss b/idea_town/frontend/static-src/styles/modules/_modals.scss
@@ -82,78 +82,87 @@
 }
 
 .feedback-modal {
-  $feedback-modal-width: 300px;
-  $feedback-modal-border-radius: 5px;
-
-  z-index: 200;
-  width: $feedback-modal-width;
+  background-color: $white;
+  border-radius: $feedback-modal-border-radius;
+  left: 50%;
+  margin-left: -($feedback-modal-width / 2);
   position: fixed;
   top: 60px;
-  left: 50%;
-  margin-left: -($feedback-modal-width/2);
-  background-color: #fff;
-  border-radius: $feedback-modal-border-radius;
+  width: $feedback-modal-width;
+  z-index: 200;
 
   h3.title {
     background-color: $default;
+    border-top-left-radius: $feedback-modal-border-radius;
+    border-top-right-radius: $feedback-modal-border-radius;
+    color: $white;
     font-size: 2.4rem;
-    color: #fff;
     margin: 0;
     padding: 10px;
-    border-top-left-radius: $feedback-modal-border-radius;
-    border-top-right-radius: $feedback-modal-border-radius;
     text-align: center;
   }
+
   section.main {
     padding: 0 25px;
+
     ul {
       list-style-type: none;
-      padding: 20px 0 0 0;
       margin: 0;
+      padding: 20px 0 0;
+
       li {
+        margin: 0 0 .25em;
         padding: 0;
-        margin: 0 0 0.25em 0;
+
         input {
+          margin: 0 .25em;
           padding: 0;
-          margin: 0 0.25em 0 0;
         }
+
         label {
           font-size: 1.8rem;
           font-weight: 200;
         }
       }
     }
-    section.extra, section.controls {
+
+    section.extra,
+    section.controls {
       text-align: center;
+
       p {
+        color: #bbb;
         font-size: 1rem;
+        margin: 10px 0 4px;
         padding: 0;
-        margin: 10px 0 4px 0;
-        color: #bbb;
       }
+
       textarea {
+        border: 1px solid #bbb;
         display: block;
-        width: 100%;
-        height: 8em;
         font-size: 1.1rem;
+        height: 8em;
         padding: 5px;
-        border: 1px solid #bbb;
+        width: 100%;
       }
     }
+
     section.controls {
+      margin: 20px 0;
       text-align: center;
-      margin: 20px 0 20px 0;
+
       button.submit {
         display: block;
-        width: 100%;
-        font-weight: 400;
         font-size: 1.8rem;
+        font-weight: 400;
+        width: 100%;
       }
+
       a.cancel {
         display: block;
-        margin: 10px 0 10px 0;
-        text-decoration: none;
         font-size: 1.1rem;
+        margin: 10px 0;
+        text-decoration: none;
       }
     }
   }

diff --git a/idea_town/frontend/static-src/styles/modules/_settings.scss b/idea_town/frontend/static-src/styles/modules/_settings.scss
@@ -1,20 +1,19 @@
-
 .settings-button {
   @include flex-container(row, space-between, center);
-  background: rgba($white,.2);
-  border-radius: 7px;
+  background: rgba($white, .2);
   border: 1px solid rgba($white, .3);
+  border-radius: 7px;
   cursor: pointer;
   height: 30px;
   line-height: 150%;
   padding: 0 6px;
-  transition: background 100ms;
   text-align: center;
+  transition: background 100ms;
   width: 46px;
 
   &.active,
   &:hover {
-    background: rgba($white,.4);
+    background: rgba($white, .4);
   }
 
   span {
@@ -26,7 +25,6 @@
   }
 
   &:hover:not(.active) {
-
     :nth-child(1) {
       animation: pop 200ms;
     }
@@ -35,7 +33,7 @@
       animation: pop 200ms;
       animation-delay: 50ms;
     }
-    
+
     :nth-child(3) {
       animation: pop 200ms;
       animation-delay: 100ms;
@@ -59,25 +57,24 @@
   z-index: 999;
 
   &:after {
-    content: '';
     border-bottom: 10px solid $white;
     border-left: 11px solid transparent;
     border-right: 11px solid transparent;
+    content: '';
     left: 126px;
     position: absolute;
     top: -10px;
   }
 
   a {
-    text-decoration: none;
     cursor: pointer;
+    text-decoration: none;
 
     &:hover,
     &:focus {
       text-decoration: underline;
     }
-    }
-
+  }
 
   ul {
     margin: 0;
-Original file line number
+Diff line change
@@ Expand Up / @@ -74,7 +74,7 @@ @@
 % {
         transform: scale(1.4);
       }
 % {
         transform: scale(1);
       }
@@ Expand Down @@