diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 178cfd5033..6fd2e8e1e8 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -2,7 +2,7 @@ // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // -// (xs: 0, sm: 544px, md: 768px) +// (xs: 0, sm: 576px, md: 768px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,7 +10,7 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px)) // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) // md @@ -21,8 +21,8 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px)) -// 544px +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px)) +// 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); @@ -31,7 +31,7 @@ // Maximum breakpoint width. Null for the largest (last) breakpoint. // The maximum value is calculated as the minimum of the next one less 0.1. // -// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px)) +// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px)) // 767px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); @@ -41,9 +41,9 @@ // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. // Useful for making responsive utilities. // -// >> breakpoint-infix(xs, (xs: 0, sm: 544px, md: 768px)) +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px)) // "" (Returns a blank string) -// >> breakpoint-infix(sm, (xs: 0, sm: 544px, md: 768px)) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px)) // "-sm" @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");