/** * typography * * */ .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } .justify { text-align: justify; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .crossed { text-decoration: line-through; } .underline { text-decoration: underline; } .capitalize { text-transform: capitalize; } .italic { font-style: italic; } .light { font-weight: lighter; } .normal { font-weight: normal; } .medium { font-weight: medium; } .bold { font-weight: bolder; } /** * font-sizes * * */ @mixin add-font-size($name, $font-size) { .size-#{$name} { font-size: #{$font-size}; } } @each $name, $font-size in $font-sizes { @include add-font-size($name, $font-size); @include media-xs() { @include add-font-size('xs-' + $name, $font-size); } @include media-sm() { @include add-font-size('sm-' + $name, $font-size); } @include media-md() { @include add-font-size('md-' + $name, $font-size); } @include media-lg() { @include add-font-size('lg-' + $name, $font-size); } @include media-xlg() { @include add-font-size('xlg-' + $name, $font-size); } } /** * white-space * * */ .white-space-normal { white-space: normal; } .white-space-nowrap { white-space: nowrap; } .white-space-pre { white-space: pre; } .white-space-preline { white-space: preline; } .white-space-preline { white-space: pre-line; } .white-space-prewrap { white-space: pre-wrap; }