aboutsummaryrefslogtreecommitdiffstats
path: root/src/assets/fonts/Inter
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-30 12:44:11 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:15:27 +0100
commit0e52a59917406ad03c174e030c6c1c92ab23449d (patch)
tree693bbcc5edbe78ebd2f0050fddbc45c706e0ba61 /src/assets/fonts/Inter
parent84a679b0e48ed76eee2fa44d3caac83591aa3c8c (diff)
refactor(components): extract SettingsForm component form SettingsModal
We could use an array of items and map over it instead of repeating the Switch component for each settings but with translations, it becomes quickly unreadable. So I prefer to keep separate components.
Diffstat (limited to 'src/assets/fonts/Inter')
0 files changed, 0 insertions, 0 deletions
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-14 06:07:18 +0000
f='#n94'>94 95 96 97 
@use "../variables" as var;
@use "sass:map";

/// Media query: media type
/// @param {String} $type - Media type: all, screen, print, retina.
/// @example scss - `@media only screen` equivalent is:
/// @include media("screen");
@mixin media($type) {
  @if $type == "retina" {
    $type: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
  } @else if $type == "screen" or $type == "print" {
    $type: "only #{$type}";
  }

  @media #{$type} {
    @content;
  }
}

/// Media query: min-width / max-width or min-height / max-height
/// @param {String} $from - min size breakpoint.
/// @param {String} $until - max size breakpoint.
/// @param {String} $kind - width or height. Default: width.
/// @example scss - `@media (min-width: "md")` equivalent is:
/// @include dimensions("md");
@mixin dimensions($from: null, $until: null, $kind: "width") {
  $query: "";

  @if $from {
    @if type-of($from) == "string" {
      $size: map.get(var.$breakpoints, $from);

      @if $kind == "width" {
        $query: "(min-width: #{$size})";
      } @else if $kind == "height" {
        $query: "(min-height: #{$size})";
      } @else {
        @error "`$kind` must be either width or height.";
      }
    } @else {
      @error "`$from` must be a string.";
    }
  }

  @if $from and $until {
    $query: $query + " and ";
  }

  @if $until {
    @if type-of($until) == "string" {
      $size: map.get(var.$breakpoints, $until);
      $size: calc(#{$size} - 1px);

      @if $kind == "width" {
        $query: $query + "(max-width: #{$size})";
      } @else if $kind == "height" {
        $query: $query + "(max-height: #{$size})";
      } @else {
        @error "`$kind` must be either width or height.";
      }
    } @else {
      @error "`$until` must be a string.";
    }
  }

  @media #{$query} {
    @content;
  }
}

/// Media query: prefers-reduced-motion
/// @param {String} $value - Media query value: `no-preference` or `reduce`.
/// @example scss - @media (prefers-reduced-motion: "reduce") equivalent is:
/// @include motion("reduce");
@mixin motion($value) {
  @if $value == "no-preference" or $value == "reduce" {
    @media (prefers-reduced-motion: #{$value}) {
      @content;
    }
  } @else {
    @error "Allowed values are `no-preference` and `reduce`.";
  }
}

/// Media query: any-pointer
/// @param {String} $value - Media query value: `fine`, `coarse` or `none`.
/// @example scss - @media (any-pointer: "fine") equivalent is:
/// @include pointer("fine");
@mixin pointer($value) {
  @if $value == "fine" or $value == "coarse" or $value == "none" {
    @media (any-pointer: #{$value}) {
      @content;
    }
  } @else {
    @error "Allowed values are `fine`, `coarse` and `none`.";
  }
}