anki/sass/breakpoints.scss

/* 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;
                }
            }
        }
    }
};