From 5871be0ce6a895375b63aab136abee8e073484a6 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 5 Nov 2015 22:17:34 -0800 Subject: [PATCH 1/2] Refactor _utilities-spacing.scss; fixes #18129 --- scss/_utilities-spacing.scss | 89 ++++++++++-------------------------- scss/_variables.scss | 18 ++++++++ 2 files changed, 43 insertions(+), 64 deletions(-) diff --git a/scss/_utilities-spacing.scss b/scss/_utilities-spacing.scss index 1c2cca468b..cd543c8c90 100644 --- a/scss/_utilities-spacing.scss +++ b/scss/_utilities-spacing.scss @@ -1,71 +1,32 @@ -// Margin +// Margin and Padding -.m-a-0 { margin: 0 !important; } -.m-t-0 { margin-top: 0 !important; } -.m-r-0 { margin-right: 0 !important; } -.m-b-0 { margin-bottom: 0 !important; } -.m-l-0 { margin-left: 0 !important; } -.m-x-0 { margin-right: 0 !important; margin-left: 0 !important; } -.m-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; } +.m-x-auto { + margin-right: auto !important; + margin-left: auto !important; +} -.m-a { margin: $spacer !important; } -.m-t { margin-top: $spacer-y !important; } -.m-r { margin-right: $spacer-x !important; } -.m-b { margin-bottom: $spacer-y !important; } -.m-l { margin-left: $spacer-x !important; } -.m-x { margin-right: $spacer-x !important; margin-left: $spacer-x !important; } -.m-y { margin-top: $spacer-y !important; margin-bottom: $spacer-y !important; } -.m-x-auto { margin-right: auto !important; margin-left: auto !important; } +@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); -.m-a-md { margin: ($spacer * 1.5) !important; } -.m-t-md { margin-top: ($spacer-y * 1.5) !important; } -.m-r-md { margin-right: ($spacer-y * 1.5) !important; } -.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; } -.m-l-md { margin-left: ($spacer-y * 1.5) !important; } -.m-x-md { margin-right: ($spacer-x * 1.5) !important; margin-left: ($spacer-x * 1.5) !important; } -.m-y-md { margin-top: ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; } + .#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides + .#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; } + .#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; } + .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; } + .#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; } -.m-a-lg { margin: ($spacer * 3) !important; } -.m-t-lg { margin-top: ($spacer-y * 3) !important; } -.m-r-lg { margin-right: ($spacer-y * 3) !important; } -.m-b-lg { margin-bottom: ($spacer-y * 3) !important; } -.m-l-lg { margin-left: ($spacer-y * 3) !important; } -.m-x-lg { margin-right: ($spacer-x * 3) !important; margin-left: ($spacer-x * 3) !important; } -.m-y-lg { margin-top: ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; } - -// Padding - -.p-a-0 { padding: 0 !important; } -.p-t-0 { padding-top: 0 !important; } -.p-r-0 { padding-right: 0 !important; } -.p-b-0 { padding-bottom: 0 !important; } -.p-l-0 { padding-left: 0 !important; } -.p-x-0 { padding-right: 0 !important; padding-left: 0 !important; } -.p-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; } - -.p-a { padding: $spacer !important; } -.p-t { padding-top: $spacer-y !important; } -.p-r { padding-right: $spacer-x !important; } -.p-b { padding-bottom: $spacer-y !important; } -.p-l { padding-left: $spacer-x !important; } -.p-x { padding-right: $spacer-x !important; padding-left: $spacer-x !important; } -.p-y { padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; } - -.p-a-md { padding: ($spacer * 1.5) !important; } -.p-t-md { padding-top: ($spacer-y * 1.5) !important; } -.p-r-md { padding-right: ($spacer-y * 1.5) !important; } -.p-b-md { padding-bottom: ($spacer-y * 1.5) !important; } -.p-l-md { padding-left: ($spacer-y * 1.5) !important; } -.p-x-md { padding-right: ($spacer-x * 1.5) !important; padding-left: ($spacer-x * 1.5) !important; } -.p-y-md { padding-top: ($spacer-y * 1.5) !important; padding-bottom: ($spacer-y * 1.5) !important; } - -.p-a-lg { padding: ($spacer * 3) !important; } -.p-t-lg { padding-top: ($spacer-y * 3) !important; } -.p-r-lg { padding-right: ($spacer-y * 3) !important; } -.p-b-lg { padding-bottom: ($spacer-y * 3) !important; } -.p-l-lg { padding-left: ($spacer-y * 3) !important; } -.p-x-lg { padding-right: ($spacer-x * 3) !important; padding-left: ($spacer-x * 3) !important; } -.p-y-lg { padding-top: ($spacer-y * 3) !important; padding-bottom: ($spacer-y * 3) !important; } + // Axes + .#{$abbrev}-x-#{$size} { + #{$prop}-right: $length-x !important; + #{$prop}-left: $length-x !important; + } + .#{$abbrev}-y-#{$size} { + #{$prop}-top: $length-y !important; + #{$prop}-bottom: $length-y !important; + } + } +} // Positioning diff --git a/scss/_variables.scss b/scss/_variables.scss index c63af84904..44cc3cb1b5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -60,6 +60,24 @@ $enable-grid-classes: true !default; $spacer: 1rem !default; $spacer-x: $spacer !default; $spacer-y: $spacer !default; +$spacers: ( + 0: ( + x: 0, + y: 0 + ), + 1: ( + x: $spacer-x, + y: $spacer-y + ), + 2: ( + x: ($spacer-x * 1.5), + y: ($spacer-y * 1.5) + ), + 3: ( + x: ($spacer-x * 3), + y: ($spacer-y * 3) + ) +) !default; $border-width: 1px !default; From c7851ed20c5a2ece36ccec54324cfc24fa80314d Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 5 Nov 2015 22:23:45 -0800 Subject: [PATCH 2/2] Regenerate dist/css/bootstrap.css for diffing purposes [skip validator] [skip sauce] --- dist/css/bootstrap.css | 110 ++++++++++++++++++++--------------------- 1 file changed, 55 insertions(+), 55 deletions(-) diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 93480e990e..377209012a 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -5864,8 +5864,13 @@ a.bg-danger:focus, a.bg-danger:hover { background-color: #c9302c; } +.m-x-auto { + margin-right: auto !important; + margin-left: auto !important; +} + .m-a-0 { - margin: 0 !important; + margin: 0 0 !important; } .m-t-0 { @@ -5894,103 +5899,98 @@ a.bg-danger:focus, a.bg-danger:hover { margin-bottom: 0 !important; } -.m-a { - margin: 1rem !important; +.m-a-1 { + margin: 1rem 1rem !important; } -.m-t { +.m-t-1 { margin-top: 1rem !important; } -.m-r { +.m-r-1 { margin-right: 1rem !important; } -.m-b { +.m-b-1 { margin-bottom: 1rem !important; } -.m-l { +.m-l-1 { margin-left: 1rem !important; } -.m-x { +.m-x-1 { margin-right: 1rem !important; margin-left: 1rem !important; } -.m-y { +.m-y-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; } -.m-x-auto { - margin-right: auto !important; - margin-left: auto !important; +.m-a-2 { + margin: 1.5rem 1.5rem !important; } -.m-a-md { - margin: 1.5rem !important; -} - -.m-t-md { +.m-t-2 { margin-top: 1.5rem !important; } -.m-r-md { +.m-r-2 { margin-right: 1.5rem !important; } -.m-b-md { +.m-b-2 { margin-bottom: 1.5rem !important; } -.m-l-md { +.m-l-2 { margin-left: 1.5rem !important; } -.m-x-md { +.m-x-2 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; } -.m-y-md { +.m-y-2 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } -.m-a-lg { - margin: 3rem !important; +.m-a-3 { + margin: 3rem 3rem !important; } -.m-t-lg { +.m-t-3 { margin-top: 3rem !important; } -.m-r-lg { +.m-r-3 { margin-right: 3rem !important; } -.m-b-lg { +.m-b-3 { margin-bottom: 3rem !important; } -.m-l-lg { +.m-l-3 { margin-left: 3rem !important; } -.m-x-lg { +.m-x-3 { margin-right: 3rem !important; margin-left: 3rem !important; } -.m-y-lg { +.m-y-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .p-a-0 { - padding: 0 !important; + padding: 0 0 !important; } .p-t-0 { @@ -6019,92 +6019,92 @@ a.bg-danger:focus, a.bg-danger:hover { padding-bottom: 0 !important; } -.p-a { - padding: 1rem !important; +.p-a-1 { + padding: 1rem 1rem !important; } -.p-t { +.p-t-1 { padding-top: 1rem !important; } -.p-r { +.p-r-1 { padding-right: 1rem !important; } -.p-b { +.p-b-1 { padding-bottom: 1rem !important; } -.p-l { +.p-l-1 { padding-left: 1rem !important; } -.p-x { +.p-x-1 { padding-right: 1rem !important; padding-left: 1rem !important; } -.p-y { +.p-y-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; } -.p-a-md { - padding: 1.5rem !important; +.p-a-2 { + padding: 1.5rem 1.5rem !important; } -.p-t-md { +.p-t-2 { padding-top: 1.5rem !important; } -.p-r-md { +.p-r-2 { padding-right: 1.5rem !important; } -.p-b-md { +.p-b-2 { padding-bottom: 1.5rem !important; } -.p-l-md { +.p-l-2 { padding-left: 1.5rem !important; } -.p-x-md { +.p-x-2 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } -.p-y-md { +.p-y-2 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } -.p-a-lg { - padding: 3rem !important; +.p-a-3 { + padding: 3rem 3rem !important; } -.p-t-lg { +.p-t-3 { padding-top: 3rem !important; } -.p-r-lg { +.p-r-3 { padding-right: 3rem !important; } -.p-b-lg { +.p-b-3 { padding-bottom: 3rem !important; } -.p-l-lg { +.p-l-3 { padding-left: 3rem !important; } -.p-x-lg { +.p-x-3 { padding-right: 3rem !important; padding-left: 3rem !important; } -.p-y-lg { +.p-y-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; }