codekingpro/portable-devtools

1// stylelint-disable declaration-no-important2 3// Margin and Padding4 5@each $breakpoint in map-keys($grid-breakpoints) {6  @include media-breakpoint-up($breakpoint) {7    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);8 9    @each $prop, $abbrev in (margin: m, padding: p) {10      @each $size, $length in $spacers {11        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }12        .#{$abbrev}t#{$infix}-#{$size},13        .#{$abbrev}y#{$infix}-#{$size} {14          #{$prop}-top: $length !important;15        }16        .#{$abbrev}r#{$infix}-#{$size},17        .#{$abbrev}x#{$infix}-#{$size} {18          #{$prop}-right: $length !important;19        }20        .#{$abbrev}b#{$infix}-#{$size},21        .#{$abbrev}y#{$infix}-#{$size} {22          #{$prop}-bottom: $length !important;23        }24        .#{$abbrev}l#{$infix}-#{$size},25        .#{$abbrev}x#{$infix}-#{$size} {26          #{$prop}-left: $length !important;27        }28      }29    }30 31    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)32    @each $size, $length in $spacers {33      @if "#{$size}" != "0" {34        .m#{$infix}-n#{$size} { margin: -$length !important; }35        .mt#{$infix}-n#{$size},36        .my#{$infix}-n#{$size} {37          margin-top: -$length !important;38        }39        .mr#{$infix}-n#{$size},40        .mx#{$infix}-n#{$size} {41          margin-right: -$length !important;42        }43        .mb#{$infix}-n#{$size},44        .my#{$infix}-n#{$size} {45          margin-bottom: -$length !important;46        }47        .ml#{$infix}-n#{$size},48        .mx#{$infix}-n#{$size} {49          margin-left: -$length !important;50        }51      }52    }53 54    // Some special margin utils55    .m#{$infix}-auto { margin: auto !important; }56    .mt#{$infix}-auto,57    .my#{$infix}-auto {58      margin-top: auto !important;59    }60    .mr#{$infix}-auto,61    .mx#{$infix}-auto {62      margin-right: auto !important;63    }64    .mb#{$infix}-auto,65    .my#{$infix}-auto {66      margin-bottom: auto !important;67    }68    .ml#{$infix}-auto,69    .mx#{$infix}-auto {70      margin-left: auto !important;71    }72  }73}74