_align-text.scss 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. // Alignment Classes
  2. $align-class-names:
  3. large-desktop,
  4. desktop,
  5. tablet,
  6. large-mobile,
  7. small-mobile,
  8. no-mobile,
  9. mobile-only;
  10. // Breakpoints
  11. $align-class-breakpoints:
  12. $large-desktop-range,
  13. $desktop-range,
  14. $tablet-range,
  15. $large-mobile-range,
  16. $small-mobile-range,
  17. $no-mobile,
  18. $mobile-only;
  19. // Create Responsive Alignment Classes
  20. @mixin align-classes{
  21. .text-left {
  22. text-align: left !important;
  23. }
  24. .text-right {
  25. text-align: right !important;
  26. }
  27. .text-center {
  28. text-align: center !important;
  29. }
  30. .text-justify {
  31. text-align: justify !important;
  32. }
  33. @for $i from 1 through length($align-class-names) {
  34. @media #{(nth($align-class-breakpoints, $i))} {
  35. .#{(nth($align-class-names, $i))}-text-left { text-align: left !important; }
  36. .#{(nth($align-class-names, $i))}-text-right { text-align: right !important; }
  37. .#{(nth($align-class-names, $i))}-text-center { text-align: center !important; }
  38. .#{(nth($align-class-names, $i))}-text-justify { text-align: justify !important; }
  39. }
  40. }
  41. }
  42. @include align-classes;