[BUGFIX] fixing loop of responsive icon classes - order wasn't the issue

uswitch · Oct 31, 2016 · 318d869 · 318d869
1 parent 07634d6
commit 318d869
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/dist/ustyle-icons.css b/dist/ustyle-icons.css
diff --git a/dist/ustyle.json b/dist/ustyle.json
diff --git a/vendor/assets/stylesheets/ustyle/icons/_base.scss b/vendor/assets/stylesheets/ustyle/icons/_base.scss
@@ -221,29 +221,42 @@
     $width: nth($size, 2);
     $height: nth($size, 3);
 
-    @include respond-to(to-small-tablet) {
+    .us-icon--#{$size-name},
+    .us-icon--#{$size-name}--after:after,
+    .us-icon--#{$size-name}--before:before {
+      width: $width;
+      height: $height;
+    }
+  }
+
+  @include respond-to(to-small-tablet) {
+    @each $size in $icon-sizes {
+      $size-name: nth($size, 1);
+      $width: nth($size, 2);
+      $height: nth($size, 3);
+
       .us-icon--#{$size-name}--sm-tablet,
       .us-icon--#{$size-name}--after--sm-tablet:after,
       .us-icon--#{$size-name}--before--sm-tablet:before {
         width: $width;
         height: $height;
       }
     }
+  }
+
+  @include respond-to(mobile) {
+    @each $size in $icon-sizes {
+      $size-name: nth($size, 1);
+      $width: nth($size, 2);
+      $height: nth($size, 3);
 
-    @include respond-to(mobile) {
       .us-icon--#{$size-name}--mobile,
       .us-icon--#{$size-name}--after--mobile:after,
       .us-icon--#{$size-name}--before--mobile:before {
         width: $width;
         height: $height;
       }
     }
-
-    .us-icon--#{$size-name},
-    .us-icon--#{$size-name}--after:after,
-    .us-icon--#{$size-name}--before:before {
-      width: $width;
-      height: $height;
-    }
   }
 }
+