SU-SWS/decanter

View on GitHub
core/src/scss/utilities/mixins/breakpoint/_grid-media-between.scss

Summary

Maintainability
Test Coverage

///
/// Media query that spans multiple breakpoint widths (between the min and max breakpoints).
///
/// @name su-grid-media-between
///
/// @param {key code} $lower - The lower breakpoint key code eg: 'sm'
/// @param {key code} $upper - The upper breakpoint key code eg: 'xl'
/// @param {map} $breakpoints - A map of each of the screen breakpoint sizes.
///
/// @group mixin
@mixin grid-media-between($lower: 'xs', $upper: 'sm', $breakpoints: $su-grid-screens) {
  $min: breakpoint-min($lower, $breakpoints);
  $max: breakpoint-max($upper, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  }
  @else if $max == null {
    @include grid-media-min($lower, $breakpoints) {
      @content;
    }
  }
  @else if $min == null {
    @include grid-media-max($upper, $breakpoints) {
      @content;
    }
  }
}