diff options
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) { |