thoughtbot/neat

@charset "UTF-8";
/// `grid-media` allows you to change your layout based on a media query.
/// For example, an object can span 3 columns on small screens and 6 columns
/// on large screens.
///
/// You can take this a step further and set different grid attributes like
/// gutter size and total column count for each media query. So, for example,
/// you can have a `1rem` gutter on small screens, and a `2rem` gutter on large
/// screens.
///
/// @group features
///
/// @name Grid media
///
/// @argument {map} $grid
///   The grid or grids to be used within the scope of the block.
///   These grids should include the `media` property to determine the expression
///   for the media query.
///
/// @content
///   Grid media will temporarily override the default grid with the attributes
///   of the custom grids. When `grid-media` is given a custom grid, it will
///   apply that grid to any of other Neat mixins within the `grid-media` block
///   (`{…}`). Once the mixin block has ended the default grid will revert to
///   its original state as defined by `$neat-grid`. This allows for different
///   gutter width and column count based on screen size or other properties.
///
///   If multiple grids are passed in to `grid-media`, it will loop through the
///   contents of the block, quickly allowing you to apply multiple grids in a
///   single mixin.
///
/// @example scss
///   $custom-neat-grid: (
///     columns: 12,
///     gutter: 50px,
///     media: "screen and (max-width: 999px)",
///   );
///
///   $custom-neat-grid-2: (
///     columns: 12,
///     gutter: 70px,
///     media: 1000px,
///   );
///
///   .element {
///     @include grid-column(3);
///
///     @include grid-media($custom-neat-grid, $custom-neat-grid-2){
///       @include grid-column(6);
///     }
///   }
///
/// @example css
///   .element {
///     width: calc(25% - 25px);
///     float: left;
///     margin-left: 20px;
///   }
///
///   @media only screen and (max-width: 999px) {
///     .element {
///       width: calc(50% - 75px);
///       float: left;
///       margin-left: 50px;
///     }
///   }
///
///   @media only screen and (min-width: 1000px) {
///     .element {
///       width: calc(50% - 75px);
///       float: left;
///       margin-left: 70px;
///     }
///   }

@mixin grid-media($grids...) {
  @each $_grid in $grids {
    $_media: _retrieve-neat-setting($_grid, media);
    $_query: _neat-parse-media($_media);

    @media #{$_query} {
      $_default-neat-grid: $neat-grid;
      $neat-grid: map-merge($neat-grid, $_grid) !global;
      @content;
      $neat-grid: $_default-neat-grid !global;
    }
  }
}