You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
2.7 KiB
163 lines
2.7 KiB
/**
|
|
* typography
|
|
*
|
|
*
|
|
*/
|
|
|
|
@mixin media-add-typography($class) {
|
|
.#{$class} {
|
|
@content;
|
|
}
|
|
|
|
@include media-xs() {
|
|
.#{$class}-xs {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@include media-sm() {
|
|
.#{$class}-sm {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@include media-md() {
|
|
.#{$class}-md {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@include media-lg() {
|
|
.#{$class}-lg {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@include media-xlg() {
|
|
.#{$class}-xlg {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-add-typography('left') {
|
|
text-align: left;
|
|
}
|
|
|
|
@include media-add-typography('right') {
|
|
text-align: right;
|
|
}
|
|
|
|
@include media-add-typography('center') {
|
|
text-align: center;
|
|
}
|
|
|
|
@include media-add-typography('justify') {
|
|
text-align: justify;
|
|
}
|
|
|
|
@include media-add-typography('uppercase') {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@include media-add-typography('lowercase') {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
@include media-add-typography('crossed') {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
@include media-add-typography('underline') {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@include media-add-typography('capitalize') {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
@include media-add-typography('italic') {
|
|
font-style: italic;
|
|
}
|
|
|
|
@include media-add-typography('light') {
|
|
font-weight: lighter;
|
|
}
|
|
|
|
@include media-add-typography('normal') {
|
|
font-weight: normal;
|
|
}
|
|
|
|
@include media-add-typography('medium') {
|
|
font-weight: medium;
|
|
}
|
|
|
|
@include media-add-typography('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
|
|
*
|
|
*
|
|
*/
|
|
|
|
@include media-add-typography('white-space-normal') {
|
|
white-space: normal;
|
|
}
|
|
|
|
@include media-add-typography('white-space-nowrap') {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@include media-add-typography('white-space-pre') {
|
|
white-space: pre;
|
|
}
|
|
|
|
@include media-add-typography('white-space-preline') {
|
|
white-space: preline;
|
|
}
|
|
|
|
@include media-add-typography('white-space-preline') {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
@include media-add-typography('white-space-prewrap') {
|
|
white-space: pre-wrap;
|
|
} |