/* Copyright: Ankitects Pty Ltd and contributors * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ @use "sass:list"; @use "sass:map"; $bps: ( "xs", "sm", "md", "lg", "xl", "xxl", ); $breakpoints: ( list.nth($bps, 2): 576px, list.nth($bps, 3): 768px, list.nth($bps, 4): 992px, list.nth($bps, 5): 1200px, list.nth($bps, 6): 1400px, ); @mixin with-breakpoint($bp) { @if map.get($breakpoints, $bp) { @media (min-width: map.get($breakpoints, $bp)) { @content; } } @else { @content; } }; @mixin with-breakpoints($prefix, $dict) { @each $property, $values in $dict { @each $bp, $value in $values { @if map.get($breakpoints, $bp) { @media (min-width: map.get($breakpoints, $bp)) { .#{$prefix}-#{$bp} { #{$property}: $value; } } } @else { .#{$prefix}-#{$bp} { #{$property}: $value; } } } } }; @function breakpoints-upto($upto) { $result: (); @each $bp in $bps { $result: list.append($result, $bp); @if $bp == $upto { @return $result; } } @return $result; } @function breakpoint-selector-upto($prefix, $upto) { $result: (); @each $bp in breakpoints-upto($upto) { $result: list.append($result, ".#{$prefix}-#{$bp}", $separator: comma) } @return $result; } @mixin with-breakpoints-upto($prefix, $dict) { @each $property, $values in $dict { @each $bp, $value in $values { $selector: breakpoint-selector-upto($prefix, $bp); @if map.get($breakpoints, $bp) { @media (min-width: map.get($breakpoints, $bp)) { #{$selector} { #{$property}: $value; } } } @else { #{$selector} { #{$property}: $value; } } } } };