From c73a52b2704bc442fad76a4e7a8141bb3d37c383 Mon Sep 17 00:00:00 2001
From: Shawn Allen <shawn.allen@github.com>
Date: Tue, 17 Jul 2018 23:26:16 -0700
Subject: [PATCH] use $responsive-variants for padding utils

---
 modules/primer-utilities/lib/padding.scss | 52 +++++------------------
 1 file changed, 11 insertions(+), 41 deletions(-)

diff --git a/modules/primer-utilities/lib/padding.scss b/modules/primer-utilities/lib/padding.scss
index f62d7e40..8825d680 100644
--- a/modules/primer-utilities/lib/padding.scss
+++ b/modules/primer-utilities/lib/padding.scss
@@ -1,64 +1,34 @@
 // Padding spacer utilities
 // stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
 // stylelint-disable comment-empty-line-before
-@for $i from 1 through length($spacers) {
-  $size: #{nth($spacers, $i)};
-  $scale: #{$i - 1};
-
-  /* Set a #{$size} padding to all sides */
-  .p-#{$scale}   { padding       : #{$size} !important; }
-  /* Set a #{$size} padding to the top */
-  .pt-#{$scale}  { padding-top   : #{$size} !important; }
-  /* Set a #{$size} padding to the right */
-  .pr-#{$scale}  { padding-right : #{$size} !important; }
-  /* Set a #{$size} padding to the bottom */
-  .pb-#{$scale}  { padding-bottom: #{$size} !important; }
-  /* Set a #{$size} padding to the left */
-  .pl-#{$scale}  { padding-left  : #{$size} !important; }
-
-  /* Set a #{$size} padding to the left & right */
-  .px-#{$scale} {
-    padding-right: #{$size} !important;
-    padding-left: #{$size} !important;
-  }
-
-  /* Set a #{$size} padding to the top & bottom */
-  .py-#{$scale} {
-    padding-top: #{$size} !important;
-    padding-bottom: #{$size} !important;
-  }
-}
 
 // Responsive padding spacer utilities
-
-// Loop through the breakpoint values
-@each $breakpoint in map-keys($breakpoints) {
-
-  // Loop through the spacer values
-  @for $i from 1 through length($spacers) {
-    @include breakpoint($breakpoint) {
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    // Loop through the spacer values
+    @for $i from 1 through length($spacers) {
       $size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
       $scale: #{$i - 1};  // 0, 1, 2, 3, 4, 5, 6
 
       /* Set a #{$size} padding to all sides at the #{$breakpoint} breakpoint */
-      .p-#{$breakpoint}-#{$scale}  { padding: #{$size} !important; }
+      .p#{$variant}-#{$scale}  { padding: #{$size} !important; }
       /* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
-      .pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
+      .pt#{$variant}-#{$scale} { padding-top: #{$size} !important; }
       /* Set a #{$size} padding to the right at the #{$breakpoint} breakpoint */
-      .pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
+      .pr#{$variant}-#{$scale} { padding-right: #{$size} !important; }
       /* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
-      .pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
+      .pb#{$variant}-#{$scale} { padding-bottom: #{$size} !important; }
       /* Set a #{$size} padding to the left at the #{$breakpoint} breakpoint */
-      .pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
+      .pl#{$variant}-#{$scale} { padding-left: #{$size} !important; }
 
       /* Set a #{$size} padding to the left & right at the #{$breakpoint} breakpoint */
-      .px-#{$breakpoint}-#{$scale} {
+      .px#{$variant}-#{$scale} {
         padding-right: #{$size} !important;
         padding-left: #{$size} !important;
       }
 
       /* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
-      .py-#{$breakpoint}-#{$scale} {
+      .py#{$variant}-#{$scale} {
         padding-top: #{$size} !important;
         padding-bottom: #{$size} !important;
       }