diff --git a/.changeset/wise-hornets-happen.md b/.changeset/wise-hornets-happen.md new file mode 100644 index 0000000000..432257b2c3 --- /dev/null +++ b/.changeset/wise-hornets-happen.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': patch +'@swisspost/design-system-styles': patch +--- + +Added breakpoint mixin "only" and updated documentation to reflect new breakpoint mixin naming. diff --git a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-between.sample.scss b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-between.sample.scss index f1d8a8c71a..1c9d6b51e3 100644 --- a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-between.sample.scss +++ b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-between.sample.scss @@ -1,6 +1,6 @@ @use '@swisspost/design-system-styles/core' as post; -@include post.media-breakpoint-between(sm, lg) { +@include post.between(sm, lg) { .custom-class { display: block; } diff --git a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-max-width.sample.scss b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-max-width.sample.scss index 5db268f38a..0e69b5731a 100644 --- a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-max-width.sample.scss +++ b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-max-width.sample.scss @@ -1,7 +1,7 @@ @use '@swisspost/design-system-styles/core' as post; // No media query necessary for xs breakpoint as it's effectively @media (max-width: 0) { ... } -@include post.media-breakpoint-down(lg) { +@include post.max(lg) { .custom-class { display: none; } diff --git a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-min-width.sample.scss b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-min-width.sample.scss index 20603a62c9..fd3e4d2e1d 100644 --- a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-min-width.sample.scss +++ b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-min-width.sample.scss @@ -5,7 +5,7 @@ display: none; } -@include post.media-breakpoint-up(lg) { +@include post.min(lg) { .custom-class { display: block; } diff --git a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-single.sample.scss b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-single.sample.scss index 6cce81517c..cb5cac8fe0 100644 --- a/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-single.sample.scss +++ b/packages/documentation/src/stories/foundations/layout/breakpoints/breakpoints-single.sample.scss @@ -1,6 +1,6 @@ @use '@swisspost/design-system-styles/core' as post; -@include post.media-breakpoint-only(xs) { +@include post.only(xs) { .custom-class { display: block; } diff --git a/packages/styles/src/functions/_breakpoint.scss b/packages/styles/src/functions/_breakpoint.scss index 0d409c7872..fa09d2184a 100644 --- a/packages/styles/src/functions/_breakpoint.scss +++ b/packages/styles/src/functions/_breakpoint.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:list'; @use '../variables/breakpoints'; /** @@ -14,3 +15,12 @@ @function infix($key) { @return if(min-width($key) == 0, '', '-#{$key}'); } + +/** +* Gets the next breakpoint key +*/ +@function next($key) { + $breakpoint-names: map.keys(breakpoints.$grid-breakpoints); + $n: list.index($breakpoint-names, $key); + @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null); +} diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss index 475321853b..3e8d497696 100644 --- a/packages/styles/src/mixins/_media.scss +++ b/packages/styles/src/mixins/_media.scss @@ -53,3 +53,25 @@ $offset: 0.01; @content; } } + +/** + Creates a breakpoint with only the given value + @param $size A key for the breakpoint to target +*/ +@mixin only($size) { + @if (meta.type-of($size) == 'string') { + $min-size: breakpoint.min-width($size); + $next: breakpoint.next($size); + $max-size: breakpoint.min-width($next); + + @if $max-size != null { + @media screen and (min-width: $min-size) and (max-width: ($max-size - $offset)) { + @content; + } + } @else if $max-size == null { + @media screen and (min-width: $min-size) { + @content; + } + } + } +}