Stop hardcoding grid breakpoints in responsive alignment utility classes; fixes ...

[skip sauce]
[skip validator]

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 12e29626e7f70a2bfbd7bc265c49433575f1af89..d5bd4dfe047e4785086472a8241eabe044aa3437 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -60,32 +60,12 @@
 
 // Responsive alignment
 
-.text-xs-left   { text-align: left; }
-.text-xs-right  { text-align: right; }
-.text-xs-center { text-align: center; }
-
-@include media-breakpoint-up(sm) {
-  .text-sm-left   { text-align: left; }
-  .text-sm-right  { text-align: right; }
-  .text-sm-center { text-align: center; }
-}
-
-@include media-breakpoint-up(md) {
-  .text-md-left   { text-align: left; }
-  .text-md-right  { text-align: right; }
-  .text-md-center { text-align: center; }
-}
-
-@include media-breakpoint-up(lg) {
-  .text-lg-left   { text-align: left; }
-  .text-lg-right  { text-align: right; }
-  .text-lg-center { text-align: center; }
-}
-
-@include media-breakpoint-up(xl) {
-  .text-xl-left   { text-align: left; }
-  .text-xl-right  { text-align: right; }
-  .text-xl-center { text-align: center; }
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .text-#{$breakpoint}-left   { text-align: left; }
+    .text-#{$breakpoint}-right  { text-align: right; }
+    .text-#{$breakpoint}-center { text-align: center; }
+  }
 }
 
 // Transformation