//// /// @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; }; }