aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/mixins/_grid.scss
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins/_grid.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_grid.scss39
1 files changed, 29 insertions, 10 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid.scss b/vendor/twbs/bootstrap/scss/mixins/_grid.scss
index ff6941c46..aea51abaf 100644
--- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss
+++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss
@@ -7,9 +7,10 @@
--#{$variable-prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
- margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
- margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
- margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
+ // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
+ margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
+ margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+ margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -66,8 +67,8 @@
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
- // .row-cols defaults must all appear before .col overrides so they can be overridden.
$infix: breakpoint-infix($breakpoint, $breakpoints);
+
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} {
@@ -85,13 +86,7 @@
}
}
}
- }
- }
-
- @each $breakpoint in map-keys($breakpoints) {
- $infix: breakpoint-infix($breakpoint, $breakpoints);
- @include media-breakpoint-up($breakpoint, $breakpoints) {
.col#{$infix}-auto {
@include make-col-auto();
}
@@ -130,3 +125,27 @@
}
}
}
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+ @each $breakpoint in map-keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ @if $columns > 0 {
+ @for $i from 1 through $columns {
+ .g-col#{$infix}-#{$i} {
+ grid-column: auto / span $i;
+ }
+ }
+
+ // Start with `1` because `0` is and invalid value.
+ // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+ @for $i from 1 through ($columns - 1) {
+ .g-start#{$infix}-#{$i} {
+ grid-column-start: $i;
+ }
+ }
+ }
+ }
+ }
+}