46 lines
1.0 KiB
SCSS
46 lines
1.0 KiB
SCSS
|
// 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;
|