From 010b6d70a0e4baff1554b7c6406e71fd64881ca1 Mon Sep 17 00:00:00 2001 From: Tim MacDonald Date: Sat, 5 Aug 2017 08:44:19 +1000 Subject: [PATCH] [Suggestion] Add responsive helpers to text-align helpers (#985) * add responsive helpers to text-align helpers * better generation of classes * better naming --- sass/base/helpers.sass | 38 +++++++++++++++++++++++++++++++------- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass index 64fdcff5..a7bc9404 100755 --- a/sass/base/helpers.sass +++ b/sass/base/helpers.sass @@ -44,14 +44,38 @@ .is-size-#{$i}-fullhd font-size: $size !important -.has-text-centered - text-align: center !important +$alignments: ('centered': 'center', 'left': 'left', 'right': 'right') -.has-text-left - text-align: left !important - -.has-text-right - text-align: right !important +@each $alignment, $text-align in $alignments + .has-text-#{$alignment} + text-align: #{$text-align} !important + +mobile + .has-text-#{$alignment}-mobile + text-align: #{$text-align} !important + +tablet + .has-text-#{$alignment}-tablet + text-align: #{$text-align} !important + +tablet-only + .has-text-#{$alignment}-tablet-only + text-align: #{$text-align} !important + +touch + .has-text-#{$alignment}-touch + text-align: #{$text-align} !important + +desktop + .has-text-#{$alignment}-desktop + text-align: #{$text-align} !important + +desktop-only + .has-text-#{$alignment}-desktop-only + text-align: #{$text-align} !important + +widescreen + .has-text-#{$alignment}-widescreen + text-align: #{$text-align} !important + +widescreen-only + .has-text-#{$alignment}-widescreen-only + text-align: #{$text-align} !important + +fullhd + .has-text-#{$alignment}-fullhd + text-align: #{$text-align} !important .is-capitalized text-transform: capitalize !important