From: Martijn Cuppens Date: Sat, 18 Apr 2020 11:02:26 +0000 (+0200) Subject: Change breakpoint-max implementation X-Git-Tag: v5.0.0-alpha1~27 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7e28764e67c7873bc1de043cda4e412d85571d84;p=thirdparty%2Fbootstrap.git 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. --- diff --git a/scss/_modal.scss b/scss/_modal.scss index 49f27d304a..44519724e5 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 1250a36c18..5ae45ffe8e 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 81f8ffb281..66a0050c1b 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) { diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 4e744895fd..f238fdf727 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -29,7 +29,7 @@ margin-bottom: 1.5rem; @include font-size(.875rem); - @include media-breakpoint-down(md) { + @include media-breakpoint-down(lg) { display: block; overflow-x: auto; diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 54d0c425c7..1ba779f937 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -2,7 +2,7 @@ padding: .625rem 0; background-color: $bd-purple-bright; - @include media-breakpoint-down(md) { + @include media-breakpoint-down(lg) { .navbar-nav-scroll { width: 100%; diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index e3ce8ba14c..89c14b3821 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -26,7 +26,7 @@ } .bd-search { - @include media-breakpoint-down(sm) { + @include media-breakpoint-down(md) { width: 100%; } diff --git a/site/content/docs/5.0/layout/breakpoints.md b/site/content/docs/5.0/layout/breakpoints.md index 3fa3513ef5..3d61ad67cd 100644 --- a/site/content/docs/5.0/layout/breakpoints.md +++ b/site/content/docs/5.0/layout/breakpoints.md @@ -127,12 +127,12 @@ These Sass mixins translate in our compiled CSS using the values declared in our We occasionally use media queries that go in the other direction (the given screen size *or smaller*): {{< highlight scss >}} -@include media-breakpoint-down(xs) { ... } +// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }` @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } @include media-breakpoint-down(xl) { ... } -// No media query necessary for xxl breakpoint as it has no upper bound on its width +@include media-breakpoint-down(xxl) { ... } // Example: Style from medium breakpoint and down @include media-breakpoint-down(md) { @@ -181,18 +181,25 @@ There are also media queries and mixins for targeting a single segment of screen @include media-breakpoint-only(xxl) { ... } {{< /highlight >}} -Similarly, media queries may span multiple breakpoint widths: +For example the `@include media-breakpoint-only(md) { ... }` will result in : {{< highlight scss >}} -// Example -// Apply styles starting from medium devices and up to extra large devices -@media (min-width: 768px) and (max-width: 1199.98px) { ... } +@media (min-width: 768px) and (max-width: 991.98px) { ... } {{< /highlight >}} ### Between breakpoints -The Sass mixin for targeting the same screen size range would be: +Similarly, media queries may span multiple breakpoint widths: {{< highlight scss >}} @include media-breakpoint-between(md, xl) { ... } {{< /highlight >}} + +Which results in: + +{{< highlight scss >}} +// Example +// Apply styles starting from medium devices and up to extra large devices +@media (min-width: 768px) and (max-width: 1199.98px) { ... } +{{< /highlight >}} + diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 998dd9974e..dbb649bb11 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -48,6 +48,8 @@ Changes to our source Sass files and compiled CSS. - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`. - Linear gradients are simplified when gradients are enabled and therefore, `gradient-bg()` now only accepts an optional `$color` parameter. - The `bg-gradient-variant()` mixin is removed since the `.bg-gradient` class can now be used to add gradients to elements instead of the `.bg-gradient-*` classes. +- 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. ## JavaScript