|
0
|
1 // Margin and Padding
|
|
|
2
|
|
|
3 @each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
4 @include media-breakpoint-up($breakpoint) {
|
|
|
5 $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
6
|
|
|
7 @each $prop, $abbrev in (margin: m, padding: p) {
|
|
|
8 @each $size, $length in $spacers {
|
|
|
9
|
|
|
10 .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
|
|
|
11 .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length !important; }
|
|
|
12 .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length !important; }
|
|
|
13 .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
|
|
|
14 .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length !important; }
|
|
|
15 .#{$abbrev}x#{$infix}-#{$size} {
|
|
|
16 #{$prop}-right: $length !important;
|
|
|
17 #{$prop}-left: $length !important;
|
|
|
18 }
|
|
|
19 .#{$abbrev}y#{$infix}-#{$size} {
|
|
|
20 #{$prop}-top: $length !important;
|
|
|
21 #{$prop}-bottom: $length !important;
|
|
|
22 }
|
|
|
23 }
|
|
|
24 }
|
|
|
25
|
|
|
26 // Some special margin utils
|
|
|
27 .m#{$infix}-auto { margin: auto !important; }
|
|
|
28 .mt#{$infix}-auto { margin-top: auto !important; }
|
|
|
29 .mr#{$infix}-auto { margin-right: auto !important; }
|
|
|
30 .mb#{$infix}-auto { margin-bottom: auto !important; }
|
|
|
31 .ml#{$infix}-auto { margin-left: auto !important; }
|
|
|
32 .mx#{$infix}-auto {
|
|
|
33 margin-right: auto !important;
|
|
|
34 margin-left: auto !important;
|
|
|
35 }
|
|
|
36 .my#{$infix}-auto {
|
|
|
37 margin-top: auto !important;
|
|
|
38 margin-bottom: auto !important;
|
|
|
39 }
|
|
|
40 }
|
|
|
41 }
|
