Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update bootstrap/scss/mixins/_breakpoints.scss #21285

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 7 additions & 7 deletions scss/mixins/_breakpoints.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
//
// 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.

// Name of the next breakpoint, or null for the last breakpoint.
//
// >> 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
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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}");
Expand Down