165 lines
3.0 KiB
SCSS
165 lines
3.0 KiB
SCSS
/* WIDTH */
|
|
|
|
$widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1024);
|
|
|
|
@each $width in $widthvalues {
|
|
.w-#{$width} {
|
|
width: #{$width}px;
|
|
}
|
|
|
|
.max-w-#{$width} {
|
|
max-width: #{$width}px;
|
|
}
|
|
|
|
.min-w-#{$width} {
|
|
min-width: #{$width}px;
|
|
}
|
|
|
|
.h-#{$width} {
|
|
height: #{$width}px;
|
|
}
|
|
|
|
.max-h-#{$width} {
|
|
max-height: #{$width}px;
|
|
}
|
|
|
|
.min-h-#{$width} {
|
|
min-height: #{$width}px;
|
|
}
|
|
|
|
@media(max-width: $breakpoint-phone) {
|
|
.sm-w-#{$width} {
|
|
width: #{$width}px;
|
|
}
|
|
|
|
.sm-max-w-#{$width} {
|
|
max-width: #{$width}px;
|
|
}
|
|
|
|
.sm-min-w-#{$width} {
|
|
min-width: #{$width}px;
|
|
}
|
|
|
|
.sm-h-#{$width} {
|
|
height: #{$width}px;
|
|
}
|
|
|
|
.sm-max-h-#{$width} {
|
|
max-height: #{$width}px;
|
|
}
|
|
|
|
.sm-min-h-#{$width} {
|
|
min-height: #{$width}px;
|
|
}
|
|
}
|
|
|
|
@media(min-width: $breakpoint-phone) and (max-width: $breakpoint-tablet) {
|
|
.md-w-#{$width} {
|
|
width: #{$width}px;
|
|
}
|
|
|
|
.md-max-w-#{$width} {
|
|
max-width: #{$width}px;
|
|
}
|
|
|
|
.md-min-w-#{$width} {
|
|
min-width: #{$width}px;
|
|
}
|
|
|
|
.md-h-#{$width} {
|
|
height: #{$width}px;
|
|
}
|
|
|
|
.md-max-h-#{$width} {
|
|
max-height: #{$width}px;
|
|
}
|
|
|
|
.md-min-h-#{$width} {
|
|
min-height: #{$width}px;
|
|
}
|
|
}
|
|
|
|
@media(min-width: $breakpoint-tablet) {
|
|
.lg-w-#{$width} {
|
|
width: #{$width}px;
|
|
}
|
|
|
|
.lg-max-w-#{$width} {
|
|
max-width: #{$width}px;
|
|
}
|
|
|
|
.lg-min-w-#{$width} {
|
|
min-width: #{$width}px;
|
|
}
|
|
|
|
.lg-h-#{$width} {
|
|
height: #{$width}px;
|
|
}
|
|
|
|
.lg-max-h-#{$width} {
|
|
max-height: #{$width}px;
|
|
}
|
|
|
|
.lg-min-h-#{$width} {
|
|
min-height: #{$width}px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.w-full {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.h-full {
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* POSITIONING */
|
|
|
|
.ta-r {
|
|
text-align: right;
|
|
}
|
|
.ta-l {
|
|
text-align: left;
|
|
}
|
|
.ta-c {
|
|
text-align: center;
|
|
}
|
|
.ta-j {
|
|
text-align: justify;
|
|
}
|
|
|
|
/* SPACINGS */
|
|
.m-auto {
|
|
margin: auto;
|
|
}
|
|
|
|
$spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 200, 300);
|
|
$sides: (top, bottom, left, right);
|
|
|
|
@each $space in $spaceamounts {
|
|
|
|
.m-#{$space} {
|
|
margin: #{$space}px !important;
|
|
}
|
|
.p-#{$space} {
|
|
padding: #{$space}px !important;
|
|
}
|
|
|
|
@each $side in $sides {
|
|
.m-#{str-slice($side, 0, 1)}-#{$space} {
|
|
margin-#{$side}: #{$space}px !important;
|
|
}
|
|
|
|
.p-#{str-slice($side, 0, 1)}-#{$space} {
|
|
padding-#{$side}: #{$space}px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* TEXT SIZE */
|
|
|
|
.small {
|
|
font-size: 0.8em;
|
|
} |