govuk-frontend/dist/govuk/helpers/_media-queries.scss.map

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

{"version":3,"sources":["../../../src/govuk/helpers/_media-queries.scss"],"names":[],"mappings":"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","file":"_media-queries.scss","sourcesContent":["////\n/// @group helpers/layout\n////\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n@use \"sass:string\";\n\n@import \"../settings/media-queries\";\n@import \"../tools/px-to-em\";\n\n// =========================================================\n// Helpers\n// =========================================================\n\n/// Get the value of a breakpoint by name.\n///\n/// @param {String | Number} $value - If a string, the name of a breakpoint\n///   in $breakpoints. If a number without units, it will convert to px. If a\n///   number with units, it will return the value unaltered.\n/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $value.\n/// @returns {Number} - The set (minimum) value of the breakpoint\n///\n/// @example scss\n///  .element {\n///    width: govuk-breakpoint-value(tablet);\n///    @media (min-width: #{govuk-breakpoint-value(desktop)}) {\n///      color: red;\n///    }\n///    @media (min-width: #{govuk-breakpoint-value(400px)}) {\n///      color: green;\n///    }\n///    $custom-breakpoint-map: (\n///      small: 350px,\n///      medium: 769px,\n///      large: 1100px,\n///      extra-large: 1600px\n///    );\n///    @media (orientation: landscape) and (min-width: #{govuk-breakpoint-value(extra-large, $custom-breakpoint-map)}) {\n///      color: blue;\n///    }\n///  }\n///\n/// @access public\n\n@function govuk-breakpoint-value($value, $breakpoints: $govuk-breakpoints) {\n  // If $value is a number\n  @if meta.type-of($value) == \"number\" {\n    // If the number is unitless, coerce it into a pixel value\n    @if math.is-unitless($value) {\n      $value: $value * 1px;\n    }\n\n    @return $value;\n  }\n\n  // If $value is a string and exists as a key in in $breakpoints,\n  // look up and use the value of it\n  @if meta.type-of($value) == \"string\" and map.has-key($breakpoints, $value) {\n    @return map.get($breakpoints, $value);\n  }\n\n  // If we get this far, we can't use the value, so return an error\n  @error \"Could not find a breakpoint given `#{$value}`.\";\n}\n\n/// Generate the `min-width` segment of a media query given a breakpoint key\n///\n/// Pixel values are converted to ems for backwards compatibility with\n/// sass-mq. Unlike sass-mq, non-px and em values can be used as well.\n///\n/// @param {String | Number} $from - If a string, expects the name of a\n///   breakpoint in $breakpoints. If a number, it will use that number.\n/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $from.\n/// @returns {String} - A `min-width` media query segment\n///\n/// @example scss\n///  .example {\n///    @media #{govuk-from-breakpoint(tablet)} {\n///      color: red;\n///    }\n///    @media #{govuk-from-breakpoint(30em)} {\n///      color: green;\n///    }\n///    @media #{govuk-from-breakpoint(tablet)} and (orientation: landscape) {\n///      color: blue;\n///    }\n///    $custom-breakpoint-map: (\n///      small: 350px,\n///      medium: 769px,\n///      large: 1100px,\n///      extra-large: 1600px\n///    );\n///    @media #{govuk-from-breakpoint(extra-large, $custom-breakpoint-map)} {\n///      color: cyan;\n///    }\n///  }\n///\n/// @access public\n\n@function govuk-from-breakpoint($from, $breakpoints: $govuk-breakpoints) {\n  $value: govuk-breakpoint-value($from, $breakpoints);\n\n  @if meta.type-of($value) == \"number\" and math.unit($value) == \"px\" {\n    $value: govuk-em($value);\n  }\n\n  @return \"(min-width: #{$value})\";\n}\n\n/// Generate the `max-width` segment of a media query given a breakpoint key\n///\n/// sass-mq converted pixel values to ems, and only performed subtractions on\n/// named breakpoints. These have been retained for backwards compatibility,\n/// though unlike sass-mq, this also supports using non-px and em values.\n///\n/// @param {String | Number} $until - If a string, expects the name of a\n///   breakpoint in $breakpoints. If a number, it will use that number.\n/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $until.\n/// @returns {String} - A `max-width` media query segment\n///\n/// @example scss\n///  .example {\n///    @media #{govuk-until-breakpoint(desktop)} {\n///      color: red;\n///    }\n///    @media #{govuk-until-breakpoint(40em)} {\n///      color: green;\n///    }\n///    @media #{govuk-until-breakpoint(tablet)} and (orientation: landscape) {\n///      color: blue;\n///    }\n///    $custom-breakpoint-map: (\n///      small: 350px,\n///      medium: 769px,\n///      large: 1100px,\n///      extra-large: 1600px\n///    );\n///    @media #{govuk-until-breakpoint(extra-large, $custom-breakpoint-map)} {\n///      color: cyan;\n///    }\n///  }\n///\n/// @access public\n\n@function govuk-until-breakpoint($until, $breakpoints: $govuk-breakpoints) {\n  $value: govuk-breakpoint-value($until, $breakpoints);\n\n  @if meta.type-of($value) == \"number\" and math.unit($value) == \"px\" {\n    // If it's a pixel value, convert it to ems.\n    $value: govuk-em($value);\n  }\n\n  // If $value derives from a named breakpoint, additionally subtract .01em\n  @if meta.type-of($until) != \"number\" and math.unit($value) == \"em\" {\n    $value: $value - 0.01em;\n  }\n\n  @return \"(max-width: #{$value})\";\n}\n\n/// Media query\n///\n/// @param {String | Boolean} $from [false] - One of $breakpoints\n/// @param {String | Boolean} $until [false] - One of $breakpoints\n/// @param {String | Boolean} $and [false] - Additional media query parameters\n/// @param {String} $media-type [all] - Override media type: screen, print…\n/// @param {Map} $breakpoints [$govuk-breakpoints] - Map of breakpoints to use\n///\n/// @content styling rules to use for the given media query range\n///\n/// @example scss\n///  .element {\n///    @include govuk-media-query($from: mobile) {\n///      color: red;\n///    }\n///    @include govuk-media-query($until: tablet) {\n///      color: blue;\n///    }\n///    @include govuk-media-query(mobile, tablet) {\n///      color: green;\n///    }\n///    @include govuk-media-query($from: tablet, $and: '(orientation: landscape)') {\n///      color: teal;\n///    }\n///    @include govuk-media-query(950px) {\n///      color: hotpink;\n///    }\n///    @include govuk-media-query(tablet, $media-type: screen) {\n///      color: rebeccapurple;\n///    }\n///  }\n///\n/// @access public\n\n@mixin govuk-media-query($from: null, $until: null, $and: null, $media-type: \"all\", $breakpoints: $govuk-breakpoints) {\n  $media-query: \"\";\n\n  // Assemble the media query string\n  @if $media-type != \"all\" {\n    $media-query: \"#{$media-type}\";\n  }\n  @if $from {\n    $media-query: \"#{$media-query} and #{govuk-from-breakpoint($from, $breakpoints)}\";\n  }\n  @if $until {\n    $media-query: \"#{$media-query} and #{govuk-until-breakpoint($until, $breakpoints)}\";\n  }\n  @if $and {\n    $media-query: \"#{$media-query} and #{$and}\";\n  }\n\n  // If $media-query currently begins with an orphaned ' and ', remove it.\n  @if string.index($media-query, \" and \") == 1 {\n    $media-query: string.slice($media-query, 6);\n  }\n\n  @media #{$media-query} {\n    @content;\n  }\n}\n"]}