doc/themes/learn2/scss/nucleus/particles/_align-text.scss
tituspijean 7b447ac5ae Grav-ification
Creating the pages hierarchy for transitioning to Grav
2020-11-10 17:34:30 +01:00

46 lines
No EOL
1 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;