125 lines
1.8 KiB
SCSS
125 lines
1.8 KiB
SCSS
/**
|
|
* Breakpoints
|
|
*/
|
|
|
|
$breakpoints: (
|
|
'lg' '(min-width: ' + ($breakpoint-md + 1) + ')',
|
|
'md' '(min-width: ' + ($breakpoint-sm + 1) + ') and (max-width: ' + $breakpoint-md + ')',
|
|
'sm' '(min-width: ' + ($breakpoint-xs + 1) + ') and (max-width:' + $breakpoint-sm + ')',
|
|
'xs' '(max-width: ' + $breakpoint-xs + ')'
|
|
);
|
|
|
|
/**
|
|
* Spacing
|
|
*/
|
|
|
|
@each $spacing in $spacings {
|
|
$key : nth($spacing, 1);
|
|
$value : nth($spacing, 2);
|
|
|
|
// Padding on the Y axis
|
|
|
|
.py-#{$key} {
|
|
padding-top: $value;
|
|
padding-bottom: $value;
|
|
}
|
|
|
|
.pt-#{$key} {
|
|
padding-top: $value;
|
|
}
|
|
|
|
.pb-#{$key} {
|
|
padding-bottom: $value;
|
|
}
|
|
|
|
// Padding on the X axis
|
|
|
|
.px-#{$key} {
|
|
padding-left: $value;
|
|
padding-right: $value;
|
|
}
|
|
|
|
.pl-#{$key} {
|
|
padding-left: $value;
|
|
}
|
|
|
|
.pr-#{$key} {
|
|
padding-right: $value;
|
|
}
|
|
|
|
// Margin on the Y axis
|
|
|
|
.my-#{$key} {
|
|
margin-top: $value;
|
|
margin-bottom: $value;
|
|
}
|
|
|
|
.mt-#{$key} {
|
|
margin-top: $value;
|
|
}
|
|
|
|
.mb-#{$key} {
|
|
margin-bottom: $value;
|
|
}
|
|
|
|
// Margin on the X axis
|
|
|
|
.mx-#{$key} {
|
|
margin-left: $value;
|
|
margin-right: $value;
|
|
}
|
|
|
|
.ml-#{$key} {
|
|
margin-left: $value;
|
|
}
|
|
|
|
.mr-#{$key} {
|
|
margin-right: $value;
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Fonts
|
|
*/
|
|
|
|
.font-base {
|
|
font-family: $base-font-family;
|
|
}
|
|
|
|
.font-alt {
|
|
font-family: $alt-font-family;
|
|
}
|
|
|
|
/**
|
|
* Font Sizes
|
|
*/
|
|
|
|
@each $font-size in $font-sizes {
|
|
$key : nth($font-size, 1);
|
|
$value : nth($font-size, 2);
|
|
|
|
.text-#{$key} {
|
|
@include font-size($value);
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Colors
|
|
*/
|
|
|
|
@each $color in $colors {
|
|
$key : nth($color, 1);
|
|
$value : nth($color, 2);
|
|
|
|
.text-#{$key} {
|
|
color: $value;
|
|
}
|
|
|
|
.bg-#{$key} {
|
|
background-color: $value;
|
|
}
|
|
|
|
}
|