diff options
| -rw-r--r-- | docs/utilities/spacing.md | 12 | ||||
| -rw-r--r-- | scss/_variables.scss | 30 | ||||
| -rw-r--r-- | scss/utilities/_spacing.scss | 22 |
3 files changed, 22 insertions, 42 deletions
diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 0978e195d..fa8a0d76c 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -35,11 +35,11 @@ Where *sides* is one of: Where *size* is one of: * `0` - for classes that eliminate the `margin` or `padding` by setting it to `0` -* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25` or `$spacer * .25` -* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5` or `$spacer * .5` -* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer` or `$spacer` -* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5` or `$spacer * 1.5` -* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3` or `$spacer * 3` +* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25` +* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5` +* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer` +* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5` +* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3` (You can add more sizes by adding entries to the `$spacers` Sass map variable.) @@ -62,7 +62,7 @@ Here are some representative examples of these classes: } .p-3 { - padding: $spacer $spacer !important; + padding: $spacer !important; } {% endhighlight %} diff --git a/scss/_variables.scss b/scss/_variables.scss index 9a95602b7..4d7cd9dc9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -140,30 +140,12 @@ $enable-print-styles: true !default; $spacer: 1rem !default; $spacers: ( - 0: ( - x: 0, - y: 0 - ), - 1: ( - x: ($spacer * .25), - y: ($spacer * .25) - ), - 2: ( - x: ($spacer * .5), - y: ($spacer * .5) - ), - 3: ( - x: $spacer, - y: $spacer - ), - 4: ( - x: ($spacer * 1.5), - y: ($spacer * 1.5) - ), - 5: ( - x: ($spacer * 3), - y: ($spacer * 3) - ) + 0: 0, + 1: ($spacer * .25), + 2: ($spacer * .5), + 3: $spacer, + 4: ($spacer * 1.5), + 5: ($spacer * 3) ) !default; // This variable affects the `.h-*` and `.w-*` classes. diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 6056e2b7e..c89816b5e 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -5,22 +5,20 @@ $infix: breakpoint-infix($breakpoint, $grid-breakpoints); @each $prop, $abbrev in (margin: m, padding: p) { - @each $size, $lengths in $spacers { - $length-x: map-get($lengths, x); - $length-y: map-get($lengths, y); + @each $size, $length in $spacers { - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length-y $length-x !important; } - .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length-x !important; } + .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length !important; } + .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length !important; } + .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; } + .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length !important; } .#{$abbrev}x#{$infix}-#{$size} { - #{$prop}-right: $length-x !important; - #{$prop}-left: $length-x !important; + #{$prop}-right: $length !important; + #{$prop}-left: $length !important; } .#{$abbrev}y#{$infix}-#{$size} { - #{$prop}-top: $length-y !important; - #{$prop}-bottom: $length-y !important; + #{$prop}-top: $length !important; + #{$prop}-bottom: $length !important; } } } |