From 4c66512fd54860e6562e96503e0906b8211466f3 Mon Sep 17 00:00:00 2001
From: Taylor Dolan <taylordolan@me.com>
Date: Mon, 30 Jan 2017 14:04:14 -0800
Subject: [PATCH] fix ordering of responsive utility classes

---
 src/styles/globals/utility.scss | 34 +++++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/styles/globals/utility.scss b/src/styles/globals/utility.scss
index 1ac066f0..79e30f84 100644
--- a/src/styles/globals/utility.scss
+++ b/src/styles/globals/utility.scss
@@ -29,14 +29,15 @@
   float: left;
 }
 
-// default sizes
+// padding-sm, etc.
 @for $i from 1 to 8 {
-
-  // padding
   .padding-#{nth($size-list,$i)} {
     padding: nth($sizes,$i);
   }
+}
 
+// padding-top-sm, etc.
+@for $i from 1 to 8 {
   @for $y from 1 to 8 {
     @media (max-width: #{nth($screen-sizes,$y)}) {
       .padding-#{nth($size-list,$i)}-#{nth($screen-size-list,$y)} {
@@ -44,13 +45,21 @@
       }
     }
   }
+}
 
+// padding-sm-sm, etc.
+@for $i from 1 to 8 {
   @for $x from 1 to 5 {
     .padding-#{nth($size-directions,$x)}-#{nth($size-list,$i)} {
       padding-#{nth($size-directions,$x)}: nth($sizes,$i);
     }
+  }
+}
 
-    @for $y from 1 to 8 {
+// padding-top-sm-sm, etc.
+@for $i from 1 to 8 {
+  @for $y from 1 to 8 {
+    @for $x from 1 to 5 {
       @media (max-width: #{nth($screen-sizes,$y)}) {
         .padding-#{nth($size-directions,$x)}-#{nth($size-list,$i)}-#{nth($screen-size-list,$y)} {
           padding-#{nth($size-directions,$x)}: nth($sizes,$i);
@@ -58,12 +67,17 @@
       }
     }
   }
+}
 
-  // margin
+// margin-sm, etc.
+@for $i from 1 to 8 {
   .margin-#{nth($size-list,$i)} {
     margin: nth($sizes,$i);
   }
+}
 
+// margin-top-sm, etc.
+@for $i from 1 to 8 {
   @for $y from 1 to 8 {
     @media (max-width: #{nth($screen-sizes,$y)}) {
       .margin-#{nth($size-list,$i)}-#{nth($screen-size-list,$y)} {
@@ -71,13 +85,21 @@
       }
     }
   }
+}
 
+// margin-sm-sm, etc.
+@for $i from 1 to 8 {
   @for $x from 1 to 5 {
     .margin-#{nth($size-directions,$x)}-#{nth($size-list,$i)} {
       margin-#{nth($size-directions,$x)}: nth($sizes,$i);
     }
+  }
+}
 
-    @for $y from 1 to 8 {
+// margin-top-sm-sm, etc.
+@for $i from 1 to 8 {
+  @for $y from 1 to 8 {
+    @for $x from 1 to 5 {
       @media (max-width: #{nth($screen-sizes,$y)}) {
         .margin-#{nth($size-directions,$x)}-#{nth($size-list,$i)}-#{nth($screen-size-list,$y)} {
           margin-#{nth($size-directions,$x)}: nth($sizes,$i);