12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- // Alignment Classes
- $align-class-names:
- large-desktop,
- desktop,
- tablet,
- large-mobile,
- small-mobile,
- no-mobile,
- mobile-only;
- // Breakpoints
- $align-class-breakpoints:
- $large-desktop-range,
- $desktop-range,
- $tablet-range,
- $large-mobile-range,
- $small-mobile-range,
- $no-mobile,
- $mobile-only;
- // Create Responsive Alignment Classes
- @mixin align-classes{
- .text-left {
- text-align: left !important;
- }
- .text-right {
- text-align: right !important;
- }
- .text-center {
- text-align: center !important;
- }
- .text-justify {
- text-align: justify !important;
- }
- @for $i from 1 through length($align-class-names) {
- @media #{(nth($align-class-breakpoints, $i))} {
- .#{(nth($align-class-names, $i))}-text-left { text-align: left !important; }
- .#{(nth($align-class-names, $i))}-text-right { text-align: right !important; }
- .#{(nth($align-class-names, $i))}-text-center { text-align: center !important; }
- .#{(nth($align-class-names, $i))}-text-justify { text-align: justify !important; }
- }
- }
- }
- @include align-classes;
|