git.roojs.org Git - roojs1/blob - scss/bootstrap/utilities/_spacing.scss

   1 // stylelint-disable declaration-no-important
   2
   3 // Margin and Padding
   4
   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 utils
  55     .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 }