- 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.
}
@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} {
// 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} {
@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.
// 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) {
margin-bottom: 1.5rem;
@include font-size(.875rem);
- @include media-breakpoint-down(md) {
+ @include media-breakpoint-down(lg) {
display: block;
overflow-x: auto;
padding: .625rem 0;
background-color: $bd-purple-bright;
- @include media-breakpoint-down(md) {
+ @include media-breakpoint-down(lg) {
.navbar-nav-scroll {
width: 100%;
}
.bd-search {
- @include media-breakpoint-down(sm) {
+ @include media-breakpoint-down(md) {
width: 100%;
}
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) {
@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 >}}
+
- `$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
projects / thirdparty / bootstrap.git / commitdiff
