Contents

@charset "UTF-8";
/// Creates a media query in which custom grid properties can be defined.
/// Add the `media` property to your custom grid settings map and add the media
/// you would like to scope to. If  only a number is defined, it is assumed this
/// is a `min-with` value. Your custom grid can then be passed to the mixin.
///
/// @group features
///
/// @name Grid media
///
/// @argument {map} $grid
///   The grid used to generate the column.
///
/// @example scss
///   $custom-neat-grid: (
///     columns: 12,
///     gutter: 50px,
///     media: 1000px,
///   );
///
///   .element {
///     @include grid-column(3);
///
///     @include grid-media($custom-neat-grid){
///       @include grid-column(6);
///     }
///   }
///
/// @example css
///   .element {
///     width: calc(25% - 25px);
///     float: left;
///     margin-left: 20px;
///   }
///
///   @media only screen and (min-width: 1000px) {
///     .element {
///       width: calc(50% - 75px);
///       float: left;
///       margin-left: 50px;
///     }
///   }

@mixin grid-media($grid) {
  $_media: _retrieve-neat-setting($grid, media);
  $_query: _neat-parse-media($_media);

  @media #{$_query} {
    $_default-neat-grid: $neat-grid;
    $neat-grid: $grid !global;
    @content;
    $neat-grid: $_default-neat-grid !global;
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
neat-2.0.0.beta.2	core/neat/mixins/_grid-media.scss
neat-2.0.0.beta.1	core/neat/mixins/_grid-media.scss