diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 6fd2e8e1e8..904b60f7ad 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: 576px, md: 768px) +// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,9 +10,9 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px)) +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // md -// >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); @@ -21,7 +21,7 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px)) +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @@ -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: 576px, md: 768px)) +// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 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: 576px, md: 768px)) +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // "" (Returns a blank string) -// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px)) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // "-sm" @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");