primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-28 13:12:16 +03:00
Code Issues Projects Releases Wiki Activity

use $responsive-variants for margin utils

Browse Source
This commit is contained in:
Shawn Allen 2018-07-17 23:26:07 -07:00
parent cff39b5316
commit 6bf88cefc6
1 changed files with 40 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
modules/primer-utilities/lib/margin.scss
View File

@ -1,38 +1,48 @@
// Margin spacer utilities
// 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($spacers) {
$size: #{nth($spacers, $i)};
$scale: #{$i - 1};
/* Set a #{$size} margin to all sides */
.m-#{$scale} { margin : #{$size} !important; }
/* Set a #{$size} margin on the top */
.mt-#{$scale} { margin-top : #{$size} !important; }
/* Set a #{$size} margin on the right */
.mr-#{$scale} { margin-right : #{$size} !important; }
/* Set a #{$size} margin on the bottom */
.mb-#{$scale} { margin-bottom: #{$size} !important; }
/* Set a #{$size} margin on the left */
.ml-#{$scale} { margin-left : #{$size} !important; }
/* Set a negative #{$size} margin on top */
.mt-n#{$scale} { margin-top : -#{$size} !important; }
/* Set a negative #{$size} margin on the right */
.mr-n#{$scale} { margin-right : -#{$size} !important; }
/* Set a negative #{$size} margin on the bottom */
.mb-n#{$scale} { margin-bottom: -#{$size} !important; }
/* Set a negative #{$size} margin on the left */
.ml-n#{$scale} { margin-left : -#{$size} !important; }
// Loop through the breakpoint values
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
$size: #{nth($spacers, $i)}; // sm, md, lg, xl
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
/* Set a #{$size} margin on the left & right */
.mx-#{$scale} {
margin-right: #{$size} !important;
margin-left : #{$size} !important;
}
/* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
.m#{$variant}-#{$scale} { margin: #{$size} !important; }
/* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
.mt#{$variant}-#{$scale} { margin-top: #{$size} !important; }
/* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
.mr#{$variant}-#{$scale} { margin-right: #{$size} !important; }
/* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
.mb#{$variant}-#{$scale} { margin-bottom: #{$size} !important; }
/* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */
.ml#{$variant}-#{$scale} { margin-left: #{$size} !important; }
/* Set a #{$size} margin on the top & bottom */
.my-#{$scale} {
margin-top : #{$size} !important;
margin-bottom: #{$size} !important;
@if $size != 0 {
/* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */
.mt#{$variant}-n#{$scale} { margin-top : -#{$size} !important; }
/* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */
.mr#{$variant}-n#{$scale} { margin-right : -#{$size} !important; }
/* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
.mb#{$variant}-n#{$scale} { margin-bottom: -#{$size} !important; }
/* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */
.ml#{$variant}-n#{$scale} { margin-left : -#{$size} !important; }
}
/* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */
.mx#{$variant}-#{$scale} {
margin-right: #{$size} !important;
margin-left: #{$size} !important;
}
/* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
.my#{$variant}-#{$scale} {
margin-top: #{$size} !important;
margin-bottom: #{$size} !important;
}
}
}
}
@ -41,46 +51,3 @@
margin-right: auto !important;
margin-left: auto !important;
}
// Loop through the breakpoint values
@each $breakpoint in map-keys($breakpoints) {
// Loop through the spacer values
@for $i from 1 through length($spacers) {
@include breakpoint($breakpoint) {
$size: #{nth($spacers, $i)}; // sm, md, lg, xl
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
/* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
.m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; }
/* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
.mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
/* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
.mr-#{$breakpoint}-#{$scale} { margin-right: #{$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 left at the breakpoint #{$breakpoint} */
.ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
/* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */
.mt-#{$breakpoint}-n#{$scale} { margin-top : -#{$size} !important; }
/* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */
.mr-#{$breakpoint}-n#{$scale} { margin-right : -#{$size} !important; }
/* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
.mb-#{$breakpoint}-n#{$scale} { margin-bottom: -#{$size} !important; }
/* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */
.ml-#{$breakpoint}-n#{$scale} { margin-left : -#{$size} !important; }
/* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */
.mx-#{$breakpoint}-#{$scale} {
margin-right: #{$size} !important;
margin-left: #{$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;
}
}
}
}