Skip to content

Commit

Permalink
Fixes in breakpoints.scss
Browse files Browse the repository at this point in the history
  • Loading branch information
julien-deramond committed Oct 23, 2024
1 parent 759e765 commit e91878d
Showing 1 changed file with 9 additions and 7 deletions.
16 changes: 9 additions & 7 deletions scss/mixins/_breakpoints.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px)
// (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1320px, 2xl: 1640px, 3xl: 1880px)
//
// 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, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// >> breakpoint-next(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1320px, 2xl: 1640px, 3xl: 1880px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (2xs sm md lg xl 2xl 3xl))
// >> breakpoint-next(sm, $breakpoint-names: (2xs xs sm md lg xl 2xl 3xl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
Expand All @@ -24,7 +24,7 @@

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// >> breakpoint-min(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1320px, 2xl: 1640px, 3xl: 1880px))
// 736px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
Expand All @@ -38,7 +38,7 @@
// 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(md, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// >> breakpoint-max(md, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1320px, 2xl: 1640px, 3xl: 1880px))
// 735.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name);
Expand All @@ -48,9 +48,9 @@
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
// >> breakpoint-infix(2xs, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// >> breakpoint-infix(2xs, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1320px, 2xl: 1640px, 3xl: 1880px))
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1280px, 2xl: 1640px, 3xl: 1880px))
// >> breakpoint-infix(sm, (2xs: 0, xs: 390px, sm: 480px, md: 736px, lg: 1024px, xl: 1320px, 2xl: 1640px, 3xl: 1880px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
Expand Down Expand Up @@ -126,6 +126,7 @@
}
}

// OUDS mod
// Get the breakpoint infix corresponding to a given width
@function get-breakpoint-from-width($width: $ouds-grid-max-width, $breakpoints: $grid-breakpoints) {
$breakpoint-infix: "";
Expand All @@ -136,3 +137,4 @@
}
@return $breakpoint-infix;
}
// End mod

0 comments on commit e91878d

Please sign in to comment.