fix(scsslint): Fixing the wrong path of the scss linter and fixing 40…

…0+ errors
fabric-design · Nov 3, 2017 · 6e31f50 · 6e31f50
1 parent 8636d29
commit 6e31f50
Show file tree

Hide file tree

Showing 22 changed files with 7,533 additions and 522 deletions.
diff --git a/atoms/_badges.scss b/atoms/_badges.scss
@@ -15,6 +15,7 @@ $badge-small-line-height: $space-m !default;
 @mixin badge() {
   // Percent refer to width and height of element which leads to an ellipse in most cases (width > height)
   // Therefore we use fixed length values which will leads the browser to use a square for curve calculation
+  border: 1px solid transparent;
   border-radius: 9999px;
   display: inline-block;
   font-size: $badge-font-size;
@@ -28,37 +29,43 @@ $badge-small-line-height: $space-m !default;
  * @param $background-color Color for background
  */
 @mixin badge-color($color, $background-color) {
-  color: $color;
   background-color: $background-color;
+  color: $color;  
 }
 
 @if $include-badge-css {
   .badge {
     @include badge();
     @include badge-color($badge-color, $badge-background-color);
+
     &.mod-blue {
       @include badge-color($badge-blue-color, $badge-blue-background-color);
     }
+
     &.mod-red {
       @include badge-color($badge-red-color, $badge-red-background-color);
     }
+
     &.mod-small {
       line-height: $badge-small-line-height;
     }
+
     .icon,
-    [class^="icon-"],
-    [class*=" icon"] {
+    [class^='icon-'],
+    [class*='icon'] {
+      cursor: pointer;
       // Fix some spacings and sizes
       margin: rem(-1px -4px 0 0);
-      cursor: pointer;
     }
   }
-  .badge-group {
+
+  .badge-group {    
     .badge {
       &:not(:first-child) {
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
       }
+
       &:not(:last-child) {
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;

diff --git a/atoms/_buttons.scss b/atoms/_buttons.scss
@@ -40,7 +40,7 @@ $button-shadows: (
   white-space: nowrap;
   outline: none;
   @include appearance(none);
-  @include transition(all .2s);
+  @include transition(all 0.2s);
 }
 
 /**
@@ -54,15 +54,18 @@ $button-shadows: (
   background-color: $background;
   color: $color;
   box-shadow: map-get($button-shadows, normal);
+
   &:hover,
   &.is-hovered {
     box-shadow: map-get($button-shadows, hover);
   }
+
   &:active,
   &.is-active {
     background-color: darken($background, 2%);
     box-shadow: map-get($button-shadows, active);
   }
+
   &:disabled,
   &.is-disabled {
     cursor: not-allowed;
@@ -101,6 +104,7 @@ $button-shadows: (
  */
 @mixin button-type-toggle() {
   @include button-style($secondary-color, $asphalt, transparent, $ghost);
+
   &:active,
   &.is-active {
     box-shadow: $paper-shadow-1;
@@ -114,11 +118,13 @@ $button-shadows: (
 @mixin button-type-flat() {
   @include button-style(transparent, $primary-color, $catkin, $ghost);
   box-shadow: none;
+
   &:hover,
   &.is-hovered {
     box-shadow: $paper-shadow-2;
     background-color: $catkin;
   }
+
   &:active,
   &.is-active {
     box-shadow: none;
@@ -129,37 +135,45 @@ $button-shadows: (
 @if $export-button-css {
   .button,
   button,
-  input[type="reset"],
-  input[type="button"],
-  input[type="submit"] {
+  input[type='reset'],
+  input[type='button'],
+  input[type='submit'] {
     @include button-base;
     @include button-style($button-background, $button-color, $button-background-disabled, $button-color-disabled);
     @include button-size-medium;
+
     &.mod-large {
       @include button-size-large;
     }
+
     &.mod-small {
       @include button-size-small;
     }
+
     &.mod-secondary {
       @include button-style($secondary-color, $asphalt, $silver, $ghost);
     }
+
     &.mod-toggle {
       @include button-type-toggle;
     }
+
     &.mod-flat {
       @include button-type-flat;
     }
+
     &.mod-collapse {
       padding: 0;
     }
   }
+
   .file-button {
     font-weight: normal;
     display: inline-block;
     vertical-align: middle;
     overflow: visible;
-    input[type="file"] {
+
+    input[type='file'] {
       display: none;
     }
   }

diff --git a/atoms/_cards.scss b/atoms/_cards.scss
@@ -7,20 +7,22 @@ $card-padding: $space-l !default;
 
 @mixin card($background-color, $shadow, $padding, $spacing) {
   background-color: $background-color;
+  border-top: 1px solid $earl-gray;
   box-shadow: $shadow;
-  padding: $padding;
   margin: $spacing;
-  border-top: 1px solid $earl-gray;
+  padding: $padding;
 }
 
 @if $include-card-css {
   .card {
     @include card($card-background-color, $card-box-shadow, $card-padding, $card-spacing);
+
     .card-title {
-      margin: 0 0 $card-padding 0;
-      font-weight: 200;
       font-size: $card-title-size;
+      font-weight: 200;
+      margin: 0 0 $card-padding 0;
     }
+
     .card-actions {
       margin: $space-m 0 0 0;
       text-align: right;

diff --git a/atoms/_forms.scss b/atoms/_forms.scss
@@ -10,35 +10,36 @@ $input-disabled-background-color: $catkin !default;
 @mixin input-box($bg-color, $border-color, $shadow-color, $focus-border-color, $focus-shadow-color, $disabled-color) {
   padding: rem(8px);
   border: 1px solid $border-color;
-  box-shadow: inset 0px 1px 3px 0px $shadow-color;
+  box-shadow: inset 0 1px 3px 0 $shadow-color;
   box-sizing: border-box;
   outline: none;
   background-color: $bg-color;
   height: rem(34px);
   font-weight: normal;
-  transition: border-color .15s linear, box-shadow .15s linear;
+  transition: border-color 0.15s linear, box-shadow 0.15s linear;
+
   &:focus {
     border-color: $focus-border-color;
-    box-shadow: inset 0 1px 3px 0px $focus-shadow-color;
+    box-shadow: inset 0 1px 3px 0 $focus-shadow-color;
   }
+
   &:disabled {
     background-color: $disabled-color;
   }
 }
 
 @mixin default-input {
   @include input-box(
-      $bg-color: $input-background-color,
-      $border-color: $input-border-color,
-      $shadow-color: $input-shadow-color,
-      $focus-border-color: $input-focused-border-color,
-      $focus-shadow-color: $input-focused-shadow-color,
-      $disabled-color: $input-disabled-background-color
+    $bg-color: $input-background-color,
+    $border-color: $input-border-color,
+    $shadow-color: $input-shadow-color,
+    $focus-border-color: $input-focused-border-color,
+    $focus-shadow-color: $input-focused-shadow-color,
+    $disabled-color: $input-disabled-background-color
   );
 }
 
 @if $export-form-css {
-
   fieldset {
     background-color: $catkin;
     border: $base-border;
@@ -56,8 +57,9 @@ $input-disabled-background-color: $catkin !default;
 
   label {
     &.required::after {
-      content: "*";
+      content: '*';
     }
+
     abbr {
       display: none;
     }
@@ -74,17 +76,18 @@ $input-disabled-background-color: $catkin !default;
   select,
   textarea {
     @include input-box(
-        $bg-color: $input-background-color,
-        $border-color: $input-border-color,
-        $shadow-color: $input-shadow-color,
-        $focus-border-color: $input-focused-border-color,
-        $focus-shadow-color: $input-focused-shadow-color,
-        $disabled-color: $input-disabled-background-color
-    )
+      $bg-color: $input-background-color,
+      $border-color: $input-border-color,
+      $shadow-color: $input-shadow-color,
+      $focus-border-color: $input-focused-border-color,
+      $focus-shadow-color: $input-focused-shadow-color,
+      $disabled-color: $input-disabled-background-color
+    );
   }
 
   .input-wrapper {
     position: relative;
+
     .icon {
       position: absolute;
       top: 10px;
@@ -96,11 +99,11 @@ $input-disabled-background-color: $catkin !default;
     resize: vertical;
   }
 
-  input[type="search"] {
+  input[type='search'] {
     appearance: none;
   }
 
-  input[type="file"] {
+  input[type='file'] {
     padding-bottom: $space-s;
     width: 100%;
   }
@@ -123,12 +126,13 @@ $input-disabled-background-color: $catkin !default;
     position: relative;
     display: block;
     cursor: pointer;
-    -webkit-user-select: none;
+    -webkit-user-select: none; /* stylelint-disable-line */
     user-select: none;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    &:after {
+
+    &::after {
       content: '';
       position: absolute;
       right: rem(7px);
@@ -137,6 +141,7 @@ $input-disabled-background-color: $catkin !default;
       border: 4px solid rgba(0, 0, 0, 0);
       border-top-color: $input-border-color;
     }
+
     &.is-disabled {
       background-color: $input-disabled-background-color;
       cursor: not-allowed;