diff options
| author | Martijn Cuppens <[email protected]> | 2020-04-18 13:02:26 +0200 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2020-06-14 14:50:47 -0700 |
| commit | 7e28764e67c7873bc1de043cda4e412d85571d84 (patch) | |
| tree | 0085b7171ae6625299ffd599eba65c1112cac645 /scss | |
| parent | aee711bfa944b592facbe5df1eb9114f3c4e37e0 (diff) | |
| download | bootstrap-7e28764e67c7873bc1de043cda4e412d85571d84.tar.xz bootstrap-7e28764e67c7873bc1de043cda4e412d85571d84.zip | |
Change breakpoint-max implementation
- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_modal.scss | 4 | ||||
| -rw-r--r-- | scss/_tables.scss | 3 | ||||
| -rw-r--r-- | scss/mixins/_breakpoints.scss | 14 |
3 files changed, 10 insertions, 11 deletions
diff --git a/scss/_modal.scss b/scss/_modal.scss index 49f27d304..44519724e 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -203,8 +203,8 @@ } @each $breakpoint in map-keys($grid-breakpoints) { - $next-breakpoint: breakpoint-next($breakpoint); - $postfix: if(breakpoint-max($breakpoint, $grid-breakpoints) == null, "", "-#{$next-breakpoint}-down"); + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $postfix: if($infix != "", $infix + "-down", ""); @include media-breakpoint-down($breakpoint) { .modal-fullscreen#{$postfix} { diff --git a/scss/_tables.scss b/scss/_tables.scss index 1250a36c1..5ae45ffe8 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -140,8 +140,7 @@ // size of where your table will overflow. @each $breakpoint in map-keys($grid-breakpoints) { - $next: breakpoint-next($breakpoint, $grid-breakpoints); - $infix: breakpoint-infix($next, $grid-breakpoints); + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); @include media-breakpoint-down($breakpoint) { .table-responsive#{$infix} { diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 81f8ffb28..66a0050c1 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -31,18 +31,18 @@ @return if($min != 0, $min, null); } -// Maximum breakpoint width. Null for the largest (last) breakpoint. -// The maximum value is calculated as the minimum of the next one less 0.02px -// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. +// Maximum breakpoint width. +// The maximum value is reduced by 0.02px to work around the limitations of +// `min-` and `max-` prefixes and viewports with fractional widths. // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // See https://bugs.webkit.org/show_bug.cgi?id=178261 // -// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { - $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - .02, null); + $max: map-get($breakpoints, $name); + @return if($max and $max > 0, $max - .02, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. @@ -108,7 +108,7 @@ // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); - $max: breakpoint-max($name, $breakpoints); + $max: breakpoint-max(breakpoint-next($name, $breakpoints)); @if $min != null and $max != null { @media (min-width: $min) and (max-width: $max) { |