mirror of
https://github.com/primer/css.git
synced 2025-01-05 12:57:32 +03:00
42 lines
1.6 KiB
SCSS
42 lines
1.6 KiB
SCSS
// Margin spacer utilities for marketing
|
|
// Utilities only added for y-direction margin (i.e. top & bottom)
|
|
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
|
|
@for $i from 1 through length($marketingSpacers) {
|
|
$size: #{nth($marketingSpacers, $i)};
|
|
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
|
|
|
/* Set a #{$size} margin on the top */
|
|
.mt-#{$scale} { margin-top : #{$size} !important; }
|
|
/* Set a #{$size} margin on the bottom */
|
|
.mb-#{$scale} { margin-bottom: #{$size} !important; }
|
|
|
|
/* Set a #{$size} margin on the top & bottom */
|
|
.my-#{$scale} {
|
|
margin-top : #{$size} !important;
|
|
margin-bottom: #{$size} !important;
|
|
}
|
|
}
|
|
|
|
// Loop through the breakpoint values
|
|
@each $breakpoint in map-keys($breakpoints) {
|
|
|
|
// Loop through the spacer values
|
|
@for $i from 1 through length($marketingSpacers) {
|
|
@include breakpoint($breakpoint) {
|
|
$size: #{nth($marketingSpacers, $i)}; // sm, md, lg, xl
|
|
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
|
|
|
|
/* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
|
|
.mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
|
|
/* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
|
|
.mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
|
|
|
|
/* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
|
|
.my-#{$breakpoint}-#{$scale} {
|
|
margin-top: #{$size} !important;
|
|
margin-bottom: #{$size} !important;
|
|
}
|
|
}
|
|
}
|
|
}
|