mirror of
https://github.com/thangisme/notes.git
synced 2024-11-16 05:16:44 -05:00
122 lines
3.5 KiB
SCSS
122 lines
3.5 KiB
SCSS
//
|
|
// Utility classes for margins and padding
|
|
//
|
|
|
|
// scss-lint:disable SpaceAfterPropertyName
|
|
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
|
|
|
// Margin spacer utilities
|
|
|
|
@for $i from 1 through length($spacers) {
|
|
$size: #{map-get($spacers, sp-#{$i - 1})};
|
|
$scale: #{$i - 1};
|
|
|
|
// .m-0, .m-1, .m-2...
|
|
.m-#{$scale} { margin: #{$size} !important; }
|
|
.mt-#{$scale} { margin-top: #{$size} !important; }
|
|
.mr-#{$scale} { margin-right: #{$size} !important; }
|
|
.mb-#{$scale} { margin-bottom: #{$size} !important; }
|
|
.ml-#{$scale} { margin-left: #{$size} !important; }
|
|
|
|
.mx-#{$scale} {
|
|
margin-right: #{$size} !important;
|
|
margin-left: #{$size} !important;
|
|
}
|
|
|
|
.my-#{$scale} {
|
|
margin-top: #{$size} !important;
|
|
margin-bottom: #{$size} !important;
|
|
}
|
|
|
|
.mxn-#{$scale} {
|
|
margin-right: -#{$size} !important;
|
|
margin-left: -#{$size} !important;
|
|
}
|
|
}
|
|
|
|
.mx-auto {
|
|
margin-right: auto !important;
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
@each $media-query in map-keys($media-queries) {
|
|
@for $i from 1 through length($spacers) {
|
|
@include mq($media-query) {
|
|
$size: #{map-get($spacers, sp-#{$i - 1})};
|
|
$scale: #{$i - 1};
|
|
|
|
// .m-sm-0, .m-md-1, .m-lg-2...
|
|
.m-#{$media-query}-#{$scale} { margin: #{$size} !important; }
|
|
.mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
|
|
.mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
|
|
.mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
|
|
.ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
|
|
|
|
.mx-#{$media-query}-#{$scale} {
|
|
margin-right: #{$size} !important;
|
|
margin-left: #{$size} !important;
|
|
}
|
|
|
|
.my-#{$media-query}-#{$scale} {
|
|
margin-top: #{$size} !important;
|
|
margin-bottom: #{$size} !important;
|
|
}
|
|
|
|
.mxn-#{$media-query}-#{$scale} {
|
|
margin-right: -#{$size} !important;
|
|
margin-left: -#{$size} !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Padding spacer utilities
|
|
|
|
@for $i from 1 through length($spacers) {
|
|
$size: #{map-get($spacers, sp-#{$i - 1})};
|
|
$scale: #{$i - 1};
|
|
|
|
// .p-0, .p-1, .p-2...
|
|
.p-#{$scale} { padding: #{$size} !important; }
|
|
.pt-#{$scale} { padding-top: #{$size} !important; }
|
|
.pr-#{$scale} { padding-right: #{$size} !important; }
|
|
.pb-#{$scale} { padding-bottom: #{$size} !important; }
|
|
.pl-#{$scale} { padding-left: #{$size} !important; }
|
|
|
|
.px-#{$scale} {
|
|
padding-right: #{$size} !important;
|
|
padding-left: #{$size} !important;
|
|
}
|
|
|
|
.py-#{$scale} {
|
|
padding-top: #{$size} !important;
|
|
padding-bottom: #{$size} !important;
|
|
}
|
|
}
|
|
|
|
@each $media-query in map-keys($media-queries) {
|
|
@include mq($media-query) {
|
|
@for $i from 1 through length($spacers) {
|
|
$size: #{map-get($spacers, sp-#{$i - 1})};
|
|
$scale: #{$i - 1};
|
|
|
|
// .p-sm-0, .p-md-1, .p-lg-2...
|
|
.p-#{$media-query}-#{$scale} { padding: #{$size} !important; }
|
|
.pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
|
|
.pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
|
|
.pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
|
|
.pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
|
|
|
|
.px-#{$media-query}-#{$scale} {
|
|
padding-right: #{$size} !important;
|
|
padding-left: #{$size} !important;
|
|
}
|
|
|
|
.py-#{$media-query}-#{$scale} {
|
|
padding-top: #{$size} !important;
|
|
padding-bottom: #{$size} !important;
|
|
}
|
|
}
|
|
}
|
|
}
|