diff --git a/modules/primer-utilities/lib/margin.scss b/modules/primer-utilities/lib/margin.scss index fa0f909775..cde32e4909 100644 --- a/modules/primer-utilities/lib/margin.scss +++ b/modules/primer-utilities/lib/margin.scss @@ -6,41 +6,41 @@ @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 + $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#{$variant}-#{$scale} { margin: #{$size} !important; } + .m#{$variant}-#{$scale} { margin: $size !important; } /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */ - .mt#{$variant}-#{$scale} { margin-top: #{$size} !important; } + .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; } + .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; } + .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; } + .ml#{$variant}-#{$scale} { margin-left: $size !important; } - @if $size != 0 { + @if ($size != 0) { /* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */ - .mt#{$variant}-n#{$scale} { margin-top : -#{$size} !important; } + .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; } + .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; } + .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; } + .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; + 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; + margin-top: $size !important; + margin-bottom: $size !important; } } }