fix(sass-lint): fix all warnings and errors thrown by sass-lint

zalando · Nov 26, 2015 · b319a5f · b319a5f
1 parent 6c00c31
commit b319a5f
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 116 deletions.
diff --git a/dist/sass/modules/_forms.scss b/dist/sass/modules/_forms.scss
@@ -346,7 +346,7 @@
     }
 }
 
-.#{$dc-prefix}-checkbox--alt[disabled] + .#{$dc-prefix}-label {
+.dc-checkbox--alt[disabled] + .dc-label {
     &:after {
         // scss-lint:disable ImportantRule
         background: none !important;
@@ -355,14 +355,14 @@
     }
 }
 
-.#{$dc-prefix}-checkbox--alt + .#{$dc-prefix}-label {
+.dc-checkbox--alt + .dc-label {
     line-height: $dc-space150;
 }
 
 //  = SELECT BOXES
 //  ---------------------------------------------------------------------------
 
-.#{$dc-prefix}-select {
+.dc-select {
     padding: $dc-space75 $dc-space200 $dc-space75 $dc-space75;
     transition: box-shadow .2s linear, border-color .2s linear;
     border: $dc-border50 solid $dc-gray60;

diff --git a/docs/demo/assets/fabricator/styles/partials/_sg-breakpoint.scss b/docs/demo/assets/fabricator/styles/partials/_sg-breakpoint.scss
@@ -12,7 +12,7 @@
 //
 //  ---------------------------------------------------------------------------
 
-.#{$dc-prefix}-body--demo-breakpoints {
+.dc-body--demo-breakpoints {
     @include dc-debugmessage("Tiny \2014 0-320px", $dc-red60);
 
     @include breakpoint($dc-small-width) {
@@ -40,7 +40,7 @@
     }
 }
 
-.#{$dc-prefix}-is-show-breakpoints .#{$dc-prefix}-body--demo-breakpoints {
+.dc-is-show-breakpoints .dc-body--demo-breakpoints {
     &::before {
         transform: translateY(-100%);
         opacity: 1;

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -204,63 +204,63 @@ $dc-box-shadow100: 0 1px 1px $dc-box-shadow-color;
 
 // Base is 16px at this point
 
-	// Feature phone: 						0px
-	$dc-tiny-width: 							0;
+// Feature phone: 0px
+$dc-tiny-width: 0;
 
-	// Smartphone: 								320px
-	$dc-small-width: 							20em;
+// Smartphone: 320px
+$dc-small-width: 20em;
 
-	// Smartphone landscape: 			480px
-	$dc-medium-width: 						30em;
+// Smartphone landscape: 480px
+$dc-medium-width: 30em;
 
-	// Tablet: 										600px
-	$dc-large-width: 							37.5em;
+// Tablet: 600px
+$dc-large-width: 37.5em;
 
-	// Tablet landscape: 					1024px
-	$dc-huge-width: 							64em;
+// Tablet landscape: 1024px
+$dc-huge-width: 64em;
 
-	// Desktop: 									1280px
-	$dc-giant-width: 							80em;
+// Desktop: 1280px
+$dc-giant-width: 80em;
 
-	// Desktop large: 						1600px
-	$dc-monstrous-width: 					100em;
+// Desktop large: 1600px
+$dc-monstrous-width: 100em;
 
 
 
 //  = GRID LAYOUTS
 //  ---------------------------------------------------------------------------
 
-	$dc-tiny: (
-	  columns: 12,
-	  gutters: 1.5,
-	);
-
-	$dc-small: (
-	  columns: 12,
-	  gutters: 11/12,
-	);
-
-	$dc-medium: (
-	  columns: 12,
-	  gutters: 1.5,
-	);
-
-	$dc-large: (
-	  columns: 12,
-	  gutters: 1,
-	);
-
-	$dc-huge: (
-	  columns: 12,
-	  gutters: 2/5,
-	);
-
-	$dc-giant: (
-	  columns: 12,
-	  gutters: 3/7,
-	);
-
-	$dc-monstrous: (
-	  columns: 12,
-	  gutters: 4/11,
-	);
+$dc-tiny: (
+  columns: 12,
+  gutters: 1.5
+);
+
+$dc-small: (
+  columns: 12,
+  gutters: 11 / 12
+);
+
+$dc-medium: (
+  columns: 12,
+  gutters: 1.5
+);
+
+$dc-large: (
+  columns: 12,
+  gutters: 1
+);
+
+$dc-huge: (
+  columns: 12,
+  gutters: 2 / 5
+);
+
+$dc-giant: (
+  columns: 12,
+  gutters: 3 / 7
+);
+
+$dc-monstrous: (
+  columns: 12,
+  gutters: 4 / 11
+);
diff --git a/src/styles/modules/_box.scss b/src/styles/modules/_box.scss
@@ -7,18 +7,16 @@
 //  = THE INVISIBLE BOX
 //  ---------------------------------------------------------------------------
 
-.#{$dc-prefix}-box {
+.dc-box {
 
-    @extend .dc-cf;
+    @extend %dc-cf;
 
-    @include breakpoint($dc-large-width)
-    {
+    @include breakpoint($dc-large-width) {
         padding-right: $dc-space100;
         padding-left: $dc-space100;
     }
 
-    @include breakpoint($dc-huge-width)
-    {
+    @include breakpoint($dc-huge-width) {
         padding-right: $dc-space150;
         padding-left: $dc-space150;
     }
@@ -27,25 +25,23 @@
 //  = THE STANDARD BOX
 //  ---------------------------------------------------------------------------
 
-.#{$dc-prefix}-box--card {
+.dc-box--card {
     @include bleed;
     margin-bottom: $dc-space150;
     padding-top: $dc-space100;
     padding-bottom: $dc-space100;
     background: $dc-white;
-    box-shadow: 0 1px 1px rgba(0,0,0,.2);
+    box-shadow: $dc-box-shadow100;
 
-    @include breakpoint($dc-large-width)
-    {
+    @include breakpoint($dc-large-width) {
         margin-right: 0;
         margin-left: 0;
         padding-right: $dc-space100;
         padding-left: $dc-space100;
         border-radius: 2px;
     }
 
-    @include breakpoint($dc-huge-width)
-    {
+    @include breakpoint($dc-huge-width) {
         padding: $dc-space150;
     }
 }
diff --git a/src/styles/modules/_forms.scss b/src/styles/modules/_forms.scss
@@ -317,6 +317,7 @@
 
 .dc-checkbox--alt + .dc-label {
     padding-left: $dc-space200;
+    line-height: $dc-space150;
 
     &:before,
     &:after {
@@ -346,7 +347,7 @@
     }
 }
 
-.#{$dc-prefix}-checkbox--alt[disabled] + .#{$dc-prefix}-label {
+.dc-checkbox--alt[disabled] + .dc-label {
     &:after {
         // scss-lint:disable ImportantRule
         background: none !important;
@@ -355,14 +356,10 @@
     }
 }
 
-.#{$dc-prefix}-checkbox--alt + .#{$dc-prefix}-label {
-    line-height: $dc-space150;
-}
-
 //  = SELECT BOXES
 //  ---------------------------------------------------------------------------
 
-.#{$dc-prefix}-select {
+.dc-select {
     padding: $dc-space75 $dc-space200 $dc-space75 $dc-space75;
     transition: box-shadow .2s linear, border-color .2s linear;
     border: $dc-border50 solid $dc-gray60;

diff --git a/src/styles/modules/_grid.scss b/src/styles/modules/_grid.scss
@@ -12,87 +12,71 @@ $layouts: $dc-tiny $dc-small $dc-medium $dc-large $dc-huge $dc-giant $dc-monstro
 $breakpoints: $dc-tiny-width $dc-small-width $dc-medium-width $dc-large-width $dc-huge-width $dc-giant-width $dc-monstrous-width;
 $breakpoint-names: "tiny" "small" "medium" "large" "huge" "giant" "monstrous";
 
-.#{$dc-prefix}-span--demo {
+.dc-span--demo {
     margin-bottom: $dc-space50;
-    padding: $dc-space50/2;
-    background: rgba($dc-orange60, .4);
+    padding: $dc-space50 / 2;
     border: 1px solid rgba($dc-orange40, .6);
+    background: rgba($dc-orange60, .4);
+    color: $dc-orange20;
     font-size: $dc-font50;
     line-height: 1.5;
-    color: $dc-orange20;
 }
 
-.#{$dc-prefix}-grid--padded
-{
+.dc-grid--padded {
     padding: $dc-space50;
 
-    @include breakpoint($dc-small-width)
-    {
+    @include breakpoint($dc-small-width) {
         padding: $dc-space100;
     }
 
-    @include breakpoint($dc-giant-width)
-    {
+    @include breakpoint($dc-giant-width) {
         padding: $dc-space150;
     }
 
-    @include breakpoint($dc-monstrous-width)
-    {
+    @include breakpoint($dc-monstrous-width) {
         padding: $dc-space200;
     }
 }
 
-.#{$dc-prefix}-grid {
+.dc-grid {
 
     // For each breakpoint
-    @for $j from 1 through length($breakpoints)
-    {
+    @for $j from 1 through length($breakpoints) {
         // Check if there is another breakpoint after
         // the current one. If yes, limit the media query.
-        @if($j < length($breakpoints))
-        {
+        @if($j < length($breakpoints)) {
             // E. g. "80em 99.9em"
             $mq: nth($breakpoints, $j) nth($breakpoints, $j + 1) - .1;
-        }
-        // Don't limit the last media query
-        @else
-        {
+        } @else {
             // E. g. "100em"
             $mq: nth($breakpoints, $j);
         }
 
         // Add the media query
-        @include breakpoint(nth($breakpoints, $j))
-        {
+        @include breakpoint(nth($breakpoints, $j)) {
             // Set the layout on the grid itself
             @include container(nth($layouts, $j));
 
             // For each column size (1-12)
-            @for $i from 1 through 12
-            {
+            @for $i from 1 through 12 {
                 // Generate classes like .dc-large-span4
-                .#{$dc-prefix}-#{nth($breakpoint-names, $j)}-span#{$i}
-                {
+                .dc-#{nth($breakpoint-names, $j)}-span#{$i} {
                     @include span($i of nth($layouts, $j));
                 }
             }
         }
         // Add the media query
-        @include breakpoint($mq)
-        {
-            @for $i from 1 through 12
-            {
+        @include breakpoint($mq) {
+            @for $i from 1 through 12 {
                 // Generate classes for last columns like .dc-large-last
-                .#{$dc-prefix}-#{nth($breakpoint-names, $j)}-last
-                {
+                .dc-#{nth($breakpoint-names, $j)}-last {
                     // Reset last column to prevent line break
                     @include last;
 
                     // The first element of a new row must clear floats
                     // otherwise rows could get messed up when columns
                     // do not have the same height.
-                    + [class*='-span']
-                    {
+                    + [class*='-span'] {
                         clear: both;
                     }
                 }

diff --git a/src/styles/modules/_header.scss b/src/styles/modules/_header.scss
@@ -12,10 +12,6 @@ $dc-header-accent-color: $dc-orange40;
 
 .dc-header {
     display: flex;
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
     align-items: center;
     height: $dc-header-height;
     padding: $dc-space75 $dc-space100;
@@ -27,8 +23,7 @@ $dc-header-accent-color: $dc-orange40;
         max-height: $dc-touch-size - $dc-space150;
         padding-bottom: 2px;
 
-        ~ *
-        {
+        ~ * {
             margin-left: $dc-space150;
         }
     }

diff --git a/src/styles/patterns/_clearfix.scss b/src/styles/patterns/_clearfix.scss
@@ -19,17 +19,17 @@
 //
 //  ---------------------------------------------------------------------------
 
-.dc-cf:before,
-.dc-cf:after {
+%dc-cf:before,
+%dc-cf:after {
     display: table; // 2
     content: " "; // 1
 }
 
-.dc-cf:after {
+%dc-cf:after {
     clear: both;
 }
 
 // scss-lint:disable PropertySpelling
-.dc-cf {
+%dc-cf {
     *zoom: 1; // 3
 }