_media-queries.scss

////
/// @group helpers/layout
////

// =========================================================
// Wrangle sass-mq config...
// =========================================================

// Pass our breakpoints and static breakpoint definitions through to sass-mq.
$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
$mq-static-breakpoint: if(variable-exists(govuk-ie8-breakpoint), $govuk-ie8-breakpoint, desktop);

$mq-show-breakpoints: ();

@if variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints {
  $mq-show-breakpoints: map-keys($govuk-breakpoints);
}

// When building a stylesheet for IE8, set $mq-responsive to false in order to
// 'rasterize' any media queries.

$mq-responsive: true;
@if variable-exists(govuk-is-ie8) and $govuk-is-ie8 {
  $mq-responsive: false;
}

// This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
// the current breakpoint from being included multiple times.
//
// We can't use the `exports` mixin for this because import directives cannot be
// used within control directives 😠
$sass-mq-already-included: false !default;

@if $sass-mq-already-included {
  $mq-show-breakpoints: ();
}

@import "../vendor/sass-mq";

$sass-mq-already-included: true;

// =========================================================
// Helpers
// =========================================================

/// Media Query
///
/// This is a currently a wrapper for sass-mq - abstracted so that we can
/// replace it in the future if we so choose.
///
/// @param {String | Boolean} $from [false] - One of $govuk-breakpoints
/// @param {String | Boolean} $until [false] - One of $govuk-breakpoints
/// @param {String | Boolean} $and [false] - Additional media query parameters
/// @param {String} $media-type [all] - Media type: screen, print…
///
/// @ignore Undocumented mq API, for advanced use only:
/// @ignore @param {Map} $breakpoints [$govuk-breakpoints]
/// @ignore @param {String} $static-breakpoint [$govuk-ie8-breakpoint]
/// @ignore @param {Boolean} $responsive [$govuk-is-ie8]
///
/// @content styling rules, wrapped into a @media query when $responsive is true
///
/// @example scss
///  .element {
///    @include govuk-media-query($from: mobile) {
///      color: red;
///    }
///    @include govuk-media-query($until: tablet) {
///      color: blue;
///    }
///    @include govuk-media-query(mobile, tablet) {
///      color: green;
///    }
///    @include govuk-media-query($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include govuk-media-query(950px) {
///      color: hotpink;
///    }
///    @include govuk-media-query(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///  }
///
/// @access public

@mixin govuk-media-query($args...) {
  @include mq($args...) {
    @content;
  }
}