mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Merge pull request #18185 from twbs/fix-18129
Refactor _utilities-spacing.scss
This commit is contained in:
Chris Rebert
commit
6faa260f84
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user