- write bundle to `/build` - add support for SASS - improve options view as a proof o concept for styling
64 lines
1.1 KiB
SCSS
64 lines
1.1 KiB
SCSS
$spacer: 1rem !default;
|
|
$spacers: (
|
|
0: 0,
|
|
1: (
|
|
$spacer * 0.25
|
|
),
|
|
2: (
|
|
$spacer * 0.5
|
|
),
|
|
3: $spacer,
|
|
4: (
|
|
$spacer * 1.5
|
|
),
|
|
5: (
|
|
$spacer * 3
|
|
)
|
|
);
|
|
|
|
@each $prop, $abbrev in (margin: m, padding: p) {
|
|
@each $size, $length in $spacers {
|
|
.#{$abbrev}-#{$size} {
|
|
#{$prop}: $length !important;
|
|
}
|
|
.#{$abbrev}t-#{$size},
|
|
.#{$abbrev}y-#{$size} {
|
|
#{$prop}-top: $length !important;
|
|
}
|
|
.#{$abbrev}r-#{$size},
|
|
.#{$abbrev}x-#{$size} {
|
|
#{$prop}-right: $length !important;
|
|
}
|
|
.#{$abbrev}b-#{$size},
|
|
.#{$abbrev}y-#{$size} {
|
|
#{$prop}-bottom: $length !important;
|
|
}
|
|
.#{$abbrev}l-#{$size},
|
|
.#{$abbrev}x-#{$size} {
|
|
#{$prop}-left: $length !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $size, $length in $spacers {
|
|
.m-auto {
|
|
margin: auto !important;
|
|
}
|
|
.mt-auto,
|
|
.my-auto {
|
|
margin-top: auto !important;
|
|
}
|
|
.mr-auto,
|
|
.mx-auto {
|
|
margin-right: auto !important;
|
|
}
|
|
.mb-auto,
|
|
.my-auto {
|
|
margin-bottom: auto !important;
|
|
}
|
|
.ml-auto,
|
|
.mx-auto {
|
|
margin-left: auto !important;
|
|
}
|
|
}
|