website/assets/sass/libs/_breakpoints.scss

// breakpoints.scss v1.0 | @ajlkn | MIT licensed */

// Vars.

/// Breakpoints.
/// @var {list}
$breakpoints: ();

// Mixins.

/// Sets breakpoints.
/// @param {map} $x Breakpoints.
@mixin breakpoints($x: ()) {
  $breakpoints: $x !global;
}

/// Wraps @content in a @media block targeting a specific orientation.
/// @param {string} $orientation Orientation.
@mixin orientation($orientation) {
  @media screen and (orientation: #{$orientation}) {
    @content;
  }
}

/// Wraps @content in a @media block using a given query.
/// @param {string} $query Query.
@mixin breakpoint($query: null) {
  $breakpoint: null;
  $op: null;
  $media: null;

  // Determine operator, breakpoint.

  // Greater than or equal.
  @if (str-slice($query, 0, 2) == ">=") {
    $op: "gte";
    $breakpoint: str-slice($query, 3);
  }

  // Less than or equal.
  @else if (str-slice($query, 0, 2) == "<=") {
    $op: "lte";
    $breakpoint: str-slice($query, 3);
  }

  // Greater than.
  @else if (str-slice($query, 0, 1) == ">") {
    $op: "gt";
    $breakpoint: str-slice($query, 2);
  }

  // Less than.
  @else if (str-slice($query, 0, 1) == "<") {
    $op: "lt";
    $breakpoint: str-slice($query, 2);
  }

  // Not.
  @else if (str-slice($query, 0, 1) == "!") {
    $op: "not";
    $breakpoint: str-slice($query, 2);
  }

  // Equal.
  @else {
    $op: "eq";
    $breakpoint: $query;
  }

  // Build media.
  @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
    $a: map-get($breakpoints, $breakpoint);

    // Range.
    @if (type-of($a) == "list") {
      $x: nth($a, 1);
      $y: nth($a, 2);

      // Max only.
      @if ($x == null) {
        // Greater than or equal (>= 0 / anything)
        @if ($op == "gte") {
          $media: "screen";
        }

        // Less than or equal (<= y)
        @else if ($op == "lte") {
          $media: "screen and (max-width: " + $y + ")";
        }

        // Greater than (> y)
        @else if ($op == "gt") {
          $media: "screen and (min-width: " + ($y + 1) + ")";
        }

        // Less than (< 0 / invalid)
        @else if ($op == "lt") {
          $media: "screen and (max-width: -1px)";
        }

        // Not (> y)
        @else if ($op == "not") {
          $media: "screen and (min-width: " + ($y + 1) + ")";
        }

        // Equal (<= y)
        @else {
          $media: "screen and (max-width: " + $y + ")";
        }
      }

      // Min only.
      @else if ($y == null) {
        // Greater than or equal (>= x)
        @if ($op == "gte") {
          $media: "screen and (min-width: " + $x + ")";
        }

        // Less than or equal (<= inf / anything)
        @else if ($op == "lte") {
          $media: "screen";
        }

        // Greater than (> inf / invalid)
        @else if ($op == "gt") {
          $media: "screen and (max-width: -1px)";
        }

        // Less than (< x)
        @else if ($op == "lt") {
          $media: "screen and (max-width: " + ($x - 1) + ")";
        }

        // Not (< x)
        @else if ($op == "not") {
          $media: "screen and (max-width: " + ($x - 1) + ")";
        }

        // Equal (>= x)
        @else {
          $media: "screen and (min-width: " + $x + ")";
        }
      }

      // Min and max.
      @else {
        // Greater than or equal (>= x)
        @if ($op == "gte") {
          $media: "screen and (min-width: " + $x + ")";
        }

        // Less than or equal (<= y)
        @else if ($op == "lte") {
          $media: "screen and (max-width: " + $y + ")";
        }

        // Greater than (> y)
        @else if ($op == "gt") {
          $media: "screen and (min-width: " + ($y + 1) + ")";
        }

        // Less than (< x)
        @else if ($op == "lt") {
          $media: "screen and (max-width: " + ($x - 1) + ")";
        }

        // Not (< x and > y)
        @else if ($op == "not") {
          $media: "screen and (max-width: " +
            ($x - 1) +
            "), screen and (min-width: " +
            ($y + 1) +
            ")";
        }

        // Equal (>= x and <= y)
        @else {
          $media: "screen and (min-width: " +
            $x +
            ") and (max-width: " +
            $y +
            ")";
        }
      }
    }

    // String.
    @else {
      // Missing a media type? Prefix with "screen".
      @if (str-slice($a, 0, 1) == "(") {
        $media: "screen and " + $a;
      }

      // Otherwise, use as-is.
      @else {
        $media: $a;
      }
    }
  }

  // Output.
  @media #{$media} {
    @content;
  }
}