Jelajahi Sumber

[Suggestion] Add responsive helpers to text-align helpers (#985)

* add responsive helpers to text-align helpers

* better generation of classes

* better naming
Tim MacDonald 8 tahun lalu
induk
melakukan
010b6d70a0
1 mengubah file dengan 31 tambahan dan 7 penghapusan
  1. 31 7
      sass/base/helpers.sass

+ 31 - 7
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