RubyGems - govuk_publishing_components - Versions diffs - 62.0.0 → 62.1.0 - Mend

govuk_publishing_components 62.0.0 → 62.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

data/node_modules/govuk-frontend/dist/govuk/helpers/_focused.scss CHANGED Viewed

@@ -7,6 +7,11 @@
 /// Provides an outline to clearly indicate when the target element is focused.
 /// Used for interactive text-based elements.
 ///
+/// @example scss - Styling the focus state for a link
+///   .govuk-link:focus {
+///     @include govuk-focused-text;
+///   }
+///
 /// @access public
 @mixin govuk-focused-text {
@@ -47,6 +52,11 @@
 /// govuk-focused-box draws an outline around all sides of the element.
 /// Best used for non-text content contained within links.
 ///
+/// @example scss - Styling the focus state for a linked image
+///   .govuk-link-image:focus {
+///     @include govuk-focused-box;
+///   }
+///
 /// @access public
 @mixin govuk-focused-box {
@@ -56,4 +66,28 @@
     0 0 0 8px $govuk-focus-text-colour;
 }
+/// Focused form input
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Used for form inputs.
+///
+/// @example scss - Styling the focus state for a form input
+///   .govuk-input:focus {
+///     @include govuk-focused-form-input;
+///   }
+///
+/// @access public
+@mixin govuk-focused-form-input {
+  outline: $govuk-focus-width solid $govuk-focus-colour;
+  // Ensure outline appears outside of the element
+  outline-offset: 0;
+  // Double the border by adding its width again. Use `box-shadow` for this
+  // instead of changing `border-width` - this is for consistency with
+  // components such as textarea where we avoid changing `border-width` as
+  // it will change the element size. Also, `outline` cannot be utilised
+  // here as it is already used for the yellow focus state.
+  box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+}
 /*# sourceMappingURL=_focused.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_focused.scss.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/govuk/helpers/_focused.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,+BAA+B;AAC/B,GAAG;;AAEH,eAAe;AACf,EAAE;AACF,8EAA8E;AAC9E,4CAA4C;AAC5C,EAAE;AACF,iBAAiB;;AAEjB;EACE,uEAAuE;EACvE,uEAAuE;EACvE,4DAA4D;;EAE5D,6CAA6C;EAC7C,+BAA+B;EAC/B,qCAAqC;EACrC;;kCAEgC;EAChC,6DAA6D;EAC7D,iCAAiC;EACjC,qBAAqB;;EAErB,4EAA4E;EAC5E,0DAA0D;EAC1D,CAAC;EACD,4EAA4E;EAC5E,yEAAyE;EACzE,uEAAuE;EACvE,2BAA2B;EAC3B,CAAC;EACD,gCAAgC;EAChC,6DAA6D;EAC7D;IACE,mCAA2B;YAA3B,2BAA2B;EAC7B;AACF;;AAEA,cAAc;AACd,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,sEAAsE;AACtE,yDAAyD;AACzD,EAAE;AACF,iBAAiB;;AAEjB;EACE,6CAA6C;EAC7C;;sCAEoC;AACtC","file":"_focused.scss","sourcesContent":["////\n/// @group helpers/accessibility\n////\n\n/// Focused text\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for interactive text-based elements.\n///\n/// @access public\n\n@mixin govuk-focused-text {\n // When colours are overridden, for example when users have a dark mode,\n // backgrounds and box-shadows disappear, so we need to ensure there's a\n // transparent outline which will be set to a visible colour.\n\n outline: $govuk-focus-width solid transparent;\n color: $govuk-focus-text-colour;\n background-color: $govuk-focus-colour;\n box-shadow:\n 0 -2px $govuk-focus-colour,\n 0 4px $govuk-focus-text-colour;\n // When link is focussed, hide the default underline since the\n // box shadow adds the \"underline\"\n text-decoration: none;\n\n // Fixes an issue in Chromium 108–111 where the box-shadow on the focus state\n // is missing on links that wrap across multiple lines [1].\n //\n // However, text-wrap: balance doesn't play nicely with box-decoration-break:\n // clone, causing links to re-flow when focused [2]. As text-wrap: balance\n // wasn't introduced until Chromium 114 we can use it as a way to target\n // this fix to just 108–111.\n //\n // [1]: http://crbug.com/40884971\n // [2]: https://github.com/alphagov/govuk-frontend/issues/5878\n @supports not (text-wrap: balance) {\n box-decoration-break: clone;\n }\n}\n\n/// Focused box\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Unlike govuk-focused-text, which only draws an underline below the element,\n/// govuk-focused-box draws an outline around all sides of the element.\n/// Best used for non-text content contained within links.\n///\n/// @access public\n\n@mixin govuk-focused-box {\n outline: $govuk-focus-width solid transparent;\n box-shadow:\n 0 0 0 4px $govuk-focus-colour,\n 0 0 0 8px $govuk-focus-text-colour;\n}\n"]}
1	+ {"version":3,"sources":["../../../src/govuk/helpers/_focused.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,+BAA+B;AAC/B,GAAG;;AAEH,eAAe;AACf,EAAE;AACF,8EAA8E;AAC9E,4CAA4C;AAC5C,EAAE;AACF,qDAAqD;AACrD,wBAAwB;AACxB,mCAAmC;AACnC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,uEAAuE;EACvE,uEAAuE;EACvE,4DAA4D;;EAE5D,6CAA6C;EAC7C,+BAA+B;EAC/B,qCAAqC;EACrC;;kCAEgC;EAChC,6DAA6D;EAC7D,iCAAiC;EACjC,qBAAqB;;EAErB,4EAA4E;EAC5E,0DAA0D;EAC1D,CAAC;EACD,4EAA4E;EAC5E,yEAAyE;EACzE,uEAAuE;EACvE,2BAA2B;EAC3B,CAAC;EACD,gCAAgC;EAChC,6DAA6D;EAC7D;IACE,mCAA2B;YAA3B,2BAA2B;EAC7B;AACF;;AAEA,cAAc;AACd,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,sEAAsE;AACtE,yDAAyD;AACzD,EAAE;AACF,6DAA6D;AAC7D,8BAA8B;AAC9B,kCAAkC;AAClC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,6CAA6C;EAC7C;;sCAEoC;AACtC;;AAEA,qBAAqB;AACrB,EAAE;AACF,8EAA8E;AAC9E,wBAAwB;AACxB,EAAE;AACF,2DAA2D;AAC3D,yBAAyB;AACzB,yCAAyC;AACzC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,qDAAqD;EACrD,+CAA+C;EAC/C,iBAAiB;EACjB,wEAAwE;EACxE,mEAAmE;EACnE,uEAAuE;EACvE,qEAAqE;EACrE,wDAAwD;EACxD,wDAAwD;AAC1D","file":"_focused.scss","sourcesContent":["////\n/// @group helpers/accessibility\n////\n\n/// Focused text\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for interactive text-based elements.\n///\n/// @example scss - Styling the focus state for a link\n/// .govuk-link:focus {\n/// @include govuk-focused-text;\n/// }\n///\n/// @access public\n\n@mixin govuk-focused-text {\n // When colours are overridden, for example when users have a dark mode,\n // backgrounds and box-shadows disappear, so we need to ensure there's a\n // transparent outline which will be set to a visible colour.\n\n outline: $govuk-focus-width solid transparent;\n color: $govuk-focus-text-colour;\n background-color: $govuk-focus-colour;\n box-shadow:\n 0 -2px $govuk-focus-colour,\n 0 4px $govuk-focus-text-colour;\n // When link is focussed, hide the default underline since the\n // box shadow adds the \"underline\"\n text-decoration: none;\n\n // Fixes an issue in Chromium 108–111 where the box-shadow on the focus state\n // is missing on links that wrap across multiple lines [1].\n //\n // However, text-wrap: balance doesn't play nicely with box-decoration-break:\n // clone, causing links to re-flow when focused [2]. As text-wrap: balance\n // wasn't introduced until Chromium 114 we can use it as a way to target\n // this fix to just 108–111.\n //\n // [1]: http://crbug.com/40884971\n // [2]: https://github.com/alphagov/govuk-frontend/issues/5878\n @supports not (text-wrap: balance) {\n box-decoration-break: clone;\n }\n}\n\n/// Focused box\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Unlike govuk-focused-text, which only draws an underline below the element,\n/// govuk-focused-box draws an outline around all sides of the element.\n/// Best used for non-text content contained within links.\n///\n/// @example scss - Styling the focus state for a linked image\n/// .govuk-link-image:focus {\n/// @include govuk-focused-box;\n/// }\n///\n/// @access public\n\n@mixin govuk-focused-box {\n outline: $govuk-focus-width solid transparent;\n box-shadow:\n 0 0 0 4px $govuk-focus-colour,\n 0 0 0 8px $govuk-focus-text-colour;\n}\n\n/// Focused form input\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for form inputs.\n///\n/// @example scss - Styling the focus state for a form input\n/// .govuk-input:focus {\n/// @include govuk-focused-form-input;\n/// }\n///\n/// @access public\n\n@mixin govuk-focused-form-input {\n outline: $govuk-focus-width solid $govuk-focus-colour;\n // Ensure outline appears outside of the element\n outline-offset: 0;\n // Double the border by adding its width again. Use `box-shadow` for this\n // instead of changing `border-width` - this is for consistency with\n // components such as textarea where we avoid changing `border-width` as\n // it will change the element size. Also, `outline` cannot be utilised\n // here as it is already used for the yellow focus state.\n box-shadow: inset 0 0 0 $govuk-border-width-form-element;\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss CHANGED Viewed

@@ -54,7 +54,7 @@
     width: 100%;
   }
   padding: 0 $govuk-gutter-half;
-  @include govuk-media-query($from: $at) {
+  @media #{govuk-from-breakpoint($at)} {
     width: govuk-grid-width($width);
     float: $float;
   }

data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/govuk/helpers/_grid.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;;AAEH,wBAAwB;AACxB,EAAE;AACF,8DAA8D;AAC9D,oCAAoC;AACpC,6CAA6C;AAC7C,iBAAiB;;AAEjB;EACE;IACE,yCAAyC;EAC3C;;EAEA,qCAAqC;AACvC;;AAEA,8BAA8B;AAC9B,EAAE;AACF,kEAAkE;AAClE,EAAE;AACF,2DAA2D;AAC3D,EAAE;AACF,0EAA0E;AAC1E,8EAA8E;AAC9E,aAAa;AACb,EAAE;AACF,6EAA6E;AAC7E,6CAA6C;AAC7C,mFAAmF;AACnF,EAAE;AACF,0BAA0B;AAC1B,oCAAoC;AACpC,6CAA6C;AAC7C,MAAM;AACN,EAAE;AACF,+EAA+E;AAC/E,+CAA+C;AAC/C,0DAA0D;AAC1D,MAAM;AACN,EAAE;AACF,kDAAkD;AAClD,wCAAwC;AACxC,6DAA6D;AAC7D,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,sBAAsB;EACtB;IACE,WAAW;EACb;EACA,6BAA6B;EAC7B;IACE,+BAA+B;IAC/B,aAAa;EACf;AACF","file":"_grid.scss","sourcesContent":["////\n/// @group helpers/layout\n////\n\n/// Grid width percentage\n///\n/// @param {String} $key - Name of grid width (e.g. two-thirds)\n/// @return {Number} Percentage width\n/// @throw if `$key` is not a valid grid width\n/// @access public\n\n@function govuk-grid-width($key) {\n @if map-has-key($govuk-grid-widths, $key) {\n @return map-get($govuk-grid-widths, $key);\n }\n\n @error \"Unknown grid width `#{$key}`\";\n}\n\n/// Generate grid column styles\n///\n/// Creates a grid column with standard gutter between the columns.\n///\n/// Grid widths are defined in the `$govuk-grid-widths` map.\n///\n/// By default the column width changes from 100% to specified width at the\n/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`\n/// parameter.\n///\n/// @param {String} $width [full] name of a grid width from $govuk-grid-widths\n/// @param {String} $float [left] left \| right\n/// @param {String} $at [tablet] - mobile \| tablet \| desktop \| any custom breakpoint\n///\n/// @example scss - Default\n/// .govuk-grid-column-two-thirds {\n/// @include govuk-grid-column(two-thirds)\n/// }\n///\n/// @example scss - Customising the breakpoint where width percentage is applied\n/// .govuk-grid-column-one-half-from-desktop {\n/// @include govuk-grid-column(one-half, $at: desktop);\n/// }\n///\n/// @example scss - Customising the float direction\n/// .govuk-grid-column-one-half-right {\n/// @include govuk-grid-column(two-thirds, $float: right);\n/// }\n///\n/// @access public\n\n@mixin govuk-grid-column($width: full, $float: left, $at: tablet) {\n box-sizing: border-box;\n @if $at != desktop {\n width: 100%;\n }\n padding: 0 $govuk-gutter-half;\n @~~include~~ govuk-~~media~~-~~query~~($~~from: $~~at) {\n width: govuk-grid-width($width);\n float: $float;\n }\n}\n"]}
1	+ {"version":3,"sources":["../../../src/govuk/helpers/_grid.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;;AAEH,wBAAwB;AACxB,EAAE;AACF,8DAA8D;AAC9D,oCAAoC;AACpC,6CAA6C;AAC7C,iBAAiB;;AAEjB;EACE;IACE,yCAAyC;EAC3C;;EAEA,qCAAqC;AACvC;;AAEA,8BAA8B;AAC9B,EAAE;AACF,kEAAkE;AAClE,EAAE;AACF,2DAA2D;AAC3D,EAAE;AACF,0EAA0E;AAC1E,8EAA8E;AAC9E,aAAa;AACb,EAAE;AACF,6EAA6E;AAC7E,6CAA6C;AAC7C,mFAAmF;AACnF,EAAE;AACF,0BAA0B;AAC1B,oCAAoC;AACpC,6CAA6C;AAC7C,MAAM;AACN,EAAE;AACF,+EAA+E;AAC/E,+CAA+C;AAC/C,0DAA0D;AAC1D,MAAM;AACN,EAAE;AACF,kDAAkD;AAClD,wCAAwC;AACxC,6DAA6D;AAC7D,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,sBAAsB;EACtB;IACE,WAAW;EACb;EACA,6BAA6B;EAC7B;IACE,+BAA+B;IAC/B,aAAa;EACf;AACF","file":"_grid.scss","sourcesContent":["////\n/// @group helpers/layout\n////\n\n/// Grid width percentage\n///\n/// @param {String} $key - Name of grid width (e.g. two-thirds)\n/// @return {Number} Percentage width\n/// @throw if `$key` is not a valid grid width\n/// @access public\n\n@function govuk-grid-width($key) {\n @if map-has-key($govuk-grid-widths, $key) {\n @return map-get($govuk-grid-widths, $key);\n }\n\n @error \"Unknown grid width `#{$key}`\";\n}\n\n/// Generate grid column styles\n///\n/// Creates a grid column with standard gutter between the columns.\n///\n/// Grid widths are defined in the `$govuk-grid-widths` map.\n///\n/// By default the column width changes from 100% to specified width at the\n/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`\n/// parameter.\n///\n/// @param {String} $width [full] name of a grid width from $govuk-grid-widths\n/// @param {String} $float [left] left \| right\n/// @param {String} $at [tablet] - mobile \| tablet \| desktop \| any custom breakpoint\n///\n/// @example scss - Default\n/// .govuk-grid-column-two-thirds {\n/// @include govuk-grid-column(two-thirds)\n/// }\n///\n/// @example scss - Customising the breakpoint where width percentage is applied\n/// .govuk-grid-column-one-half-from-desktop {\n/// @include govuk-grid-column(one-half, $at: desktop);\n/// }\n///\n/// @example scss - Customising the float direction\n/// .govuk-grid-column-one-half-right {\n/// @include govuk-grid-column(two-thirds, $float: right);\n/// }\n///\n/// @access public\n\n@mixin govuk-grid-column($width: full, $float: left, $at: tablet) {\n box-sizing: border-box;\n @if $at != desktop {\n width: 100%;\n }\n padding: 0 $govuk-gutter-half;\n @media #{govuk-from-breakpoint($at)} {\n width: govuk-grid-width($width);\n float: $float;\n }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss CHANGED Viewed

@@ -348,7 +348,7 @@
 /// @access public
 @mixin govuk-link-print-friendly {
-  @include govuk-media-query($media-type: print) {
+  @media print {
     &[href^="/"],
     &[href^="http://"],
     &[href^="https://"]

data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/govuk/helpers/_links.scss"],"names":[],"mappings":"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","file":"_links.scss","sourcesContent":["////\n/// @group helpers/links\n////\n\n/// Common link styles\n///\n/// Provides the typography and focus state, regardless of link style.\n///\n/// @access public\n\n@mixin govuk-link-common {\n @include govuk-typography-common;\n @include govuk-link-decoration;\n\n &:hover {\n @include govuk-link-hover-decoration;\n }\n\n &:focus {\n @include govuk-focused-text;\n }\n}\n\n/// Link decoration\n///\n/// Provides the text decoration for links, including thickness and underline\n/// offset. Use this mixin only if you cannot use the `govuk-link-common` mixin.\n///\n/// @access public\n@mixin govuk-link-decoration {\n text-decoration: underline;\n\n @if $govuk-link-underline-thickness {\n text-decoration-thickness: $govuk-link-underline-thickness;\n }\n\n @if $govuk-link-underline-offset {\n text-underline-offset: $govuk-link-underline-offset;\n }\n}\n\n/// Link hover decoration\n///\n/// Provides the text decoration for links in their hover state, for you to use\n/// within a `:hover` pseudo-selector. Use this mixin only if you cannot use the\n/// `govuk-link-common` mixin.\n///\n/// @access public\n\n@mixin govuk-link-hover-decoration {\n @if $govuk-link-hover-underline-thickness {\n text-decoration-thickness: $govuk-link-hover-underline-thickness;\n // Disable ink skipping on underlines on hover. Browsers haven't\n // standardised on this part of the spec yet, so set both properties\n text-decoration-skip-ink: none; // Chromium, Firefox\n text-decoration-skip: none; // Safari\n }\n}\n\n/// Default link styles\n///\n/// Makes links use the default unvisited, visited, hover and active colours.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-default;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-default {\n &:link {\n color: $govuk-link-colour;\n }\n\n &:visited {\n color: $govuk-link-visited-colour;\n }\n\n &:hover {\n color: $govuk-link-hover-colour;\n }\n\n &:active {\n color: $govuk-link-active-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Error link styles\n///\n/// Makes links use the error colour. The link will darken if it's active or a\n/// user hovers their cursor over it.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-error;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-error {\n &:link,\n &:visited {\n color: $govuk-error-colour;\n }\n\n &:hover {\n color: scale-color($govuk-error-colour, $lightness: -30%);\n }\n\n &:active {\n color: $govuk-error-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Success link styles\n///\n/// Makes links use the success colour. The link will darken if it's active or a\n/// user hovers their cursor over it.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-success;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-success {\n &:link,\n &:visited {\n color: $govuk-success-colour;\n }\n\n &:hover {\n color: scale-color($govuk-success-colour, $lightness: -30%);\n }\n\n &:active {\n color: $govuk-success-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Muted link styles\n///\n/// Makes links use the secondary text colour. The link will darken if it's\n/// active or a user hovers their cursor over it.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-muted;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-muted {\n &:link,\n &:visited {\n color: $govuk-secondary-text-colour;\n }\n\n &:hover,\n &:active {\n color: $govuk-text-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Text link styles\n///\n/// Makes links use the primary text colour, in all states. Use this mixin for\n/// navigation components, such as breadcrumbs or the back link.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-text;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-text {\n &:link,\n &:visited {\n @include govuk-text-colour;\n }\n\n // Force a colour change on hover to work around a bug in Safari\n // https://webkit.org/b/224483\n &:hover {\n @if type-of($govuk-text-colour) == color {\n color: rgba($govuk-text-colour, 0.99);\n }\n }\n\n &:active,\n &:focus {\n @include govuk-text-colour;\n }\n}\n\n/// Inverse link styles\n///\n/// Makes links white, in all states. Use this mixin if you're displaying links\n/// against a dark background.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-inverse;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-inverse {\n &:link,\n &:visited {\n color: govuk-colour(\"white\");\n }\n\n // Force a colour change on hover to work around a bug in Safari\n // https://webkit.org/b/224483\n &:hover,\n &:active {\n color: rgba(govuk-colour(\"white\"), 0.99);\n }\n\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Default link styles, without a visited state\n///\n/// Makes links use the default unvisited, hover and active colours, with no\n/// distinct visited state.\n///\n/// Use this mixin when it's not helpful to distinguish between visited and\n/// non-visited links. For example, when you link to pages with\n/// frequently-changing content, such as the dashboard for an admin interface.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-no-visited-state;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-no-visited-state {\n &:link {\n color: $govuk-link-colour;\n }\n\n &:visited {\n color: $govuk-link-colour;\n }\n\n &:hover {\n color: $govuk-link-hover-colour;\n }\n\n &:active {\n color: $govuk-link-active-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Remove underline from links\n///\n/// Remove underlines from links unless the link is active or a user hovers\n/// their cursor over it.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-default;\n/// @include govuk-link-style-no-underline;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-no-underline {\n &:not(:hover):not(:active) {\n text-decoration: none;\n }\n}\n\n/// Include link destination when printing the page\n///\n/// If the user prints the page, add the destination URL after the link text, if\n/// the URL starts with `/`, `http://` or `https://`.\n///\n/// @access public\n\n@mixin govuk-link-print-friendly {\n @include govuk-media-query($media-type: print) {\n &[href^=\"/\"],\n &[href^=\"http://\"],\n &[href^=\"https://\"]\n {\n &::after {\n content: \" (\" attr(href) \")\";\n font-size: 90%;\n\n // Because the URLs may be very long, ensure that they may be broken\n // at arbitrary points if there are no otherwise acceptable break\n // points in the line\n word-wrap: break-word;\n }\n }\n }\n}\n\n/// Image link styles\n///\n/// Prepares and provides the focus state for links that only contain images\n/// with no accompanying text.\n///\n/// @access public\n\n@mixin govuk-link-image {\n // Needed to draw the focus around the entire image\n display: inline-block;\n\n // Remove extra space at the bottom of the image that's added by line-height\n line-height: 0;\n\n // Don't render an underline\n text-decoration: none;\n\n &:focus {\n @include govuk-focused-box;\n }\n}\n"]}
1	+ {"version":3,"sources":["../../../src/govuk/helpers/_links.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,uBAAuB;AACvB,GAAG;;AAEH,qBAAqB;AACrB,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,iBAAiB;;AAEjB;EACE,gCAAgC;EAChC,8BAA8B;;EAE9B;IACE,oCAAoC;EACtC;;EAEA;IACE,2BAA2B;EAC7B;AACF;;AAEA,kBAAkB;AAClB,EAAE;AACF,4EAA4E;AAC5E,+EAA+E;AAC/E,EAAE;AACF,iBAAiB;AACjB;EACE,0BAA0B;;EAE1B;IACE,0DAA0D;EAC5D;;EAEA;IACE,mDAAmD;EACrD;AACF;;AAEA,wBAAwB;AACxB,EAAE;AACF,8EAA8E;AAC9E,+EAA+E;AAC/E,6BAA6B;AAC7B,EAAE;AACF,iBAAiB;;AAEjB;EACE;IACE,gEAAgE;IAChE,+DAA+D;IAC/D,mEAAmE;IACnE,sCAA8B;YAA9B,8BAA8B,EAAE,mBAAmB;IACnD,kCAA0B;YAA1B,0BAA0B,EAAE,QAAQ;EACtC;AACF;;AAEA,sBAAsB;AACtB,EAAE;AACF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,uEAAuE;AACvE,EAAE;AACF,gBAAgB;AAChB,6BAA6B;AAC7B,kCAAkC;AAClC,yCAAyC;AACzC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE;IACE,yBAAyB;EAC3B;;EAEA;IACE,iCAAiC;EACnC;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE,gCAAgC;EAClC;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,+BAA+B;EACjC;AACF;;AAEA,oBAAoB;AACpB,EAAE;AACF,6EAA6E;AAC7E,oCAAoC;AACpC,EAAE;AACF,kEAAkE;AAClE,uEAAuE;AACvE,EAAE;AACF,gBAAgB;AAChB,6BAA6B;AAC7B,kCAAkC;AAClC,uCAAuC;AACvC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE;;IAEE,0BAA0B;EAC5B;;EAEA;IACE,yDAAyD;EAC3D;;EAEA;IACE,0BAA0B;EAC5B;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,+BAA+B;EACjC;AACF;;AAEA,sBAAsB;AACtB,EAAE;AACF,+EAA+E;AAC/E,oCAAoC;AACpC,EAAE;AACF,kEAAkE;AAClE,uEAAuE;AACvE,EAAE;AACF,gBAAgB;AAChB,6BAA6B;AAC7B,kCAAkC;AAClC,yCAAyC;AACzC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE;;IAEE,4BAA4B;EAC9B;;EAEA;IACE,2DAA2D;EAC7D;;EAEA;IACE,4BAA4B;EAC9B;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,+BAA+B;EACjC;AACF;;AAEA,oBAAoB;AACpB,EAAE;AACF,0EAA0E;AAC1E,gDAAgD;AAChD,EAAE;AACF,kEAAkE;AAClE,uEAAuE;AACvE,EAAE;AACF,gBAAgB;AAChB,6BAA6B;AAC7B,kCAAkC;AAClC,uCAAuC;AACvC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE;;IAEE,mCAAmC;EACrC;;EAEA;;IAEE,yBAAyB;EAC3B;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,+BAA+B;EACjC;AACF;;AAEA,mBAAmB;AACnB,EAAE;AACF,6EAA6E;AAC7E,+DAA+D;AAC/D,EAAE;AACF,kEAAkE;AAClE,uEAAuE;AACvE,EAAE;AACF,gBAAgB;AAChB,6BAA6B;AAC7B,kCAAkC;AAClC,sCAAsC;AACtC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE;;IAEE,0BAA0B;EAC5B;;EAEA,+DAA+D;EAC/D,6BAA6B;EAC7B;IACE;MACE,qCAAqC;IACvC;EACF;;EAEA;;IAEE,0BAA0B;EAC5B;AACF;;AAEA,sBAAsB;AACtB,EAAE;AACF,8EAA8E;AAC9E,6BAA6B;AAC7B,EAAE;AACF,kEAAkE;AAClE,uEAAuE;AACvE,EAAE;AACF,gBAAgB;AAChB,6BAA6B;AAC7B,kCAAkC;AAClC,yCAAyC;AACzC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE;;IAEE,4BAA4B;EAC9B;;EAEA,+DAA+D;EAC/D,6BAA6B;EAC7B;;IAEE,wCAAwC;EAC1C;;EAEA;IACE,+BAA+B;EACjC;AACF;;AAEA,+CAA+C;AAC/C,EAAE;AACF,2EAA2E;AAC3E,0BAA0B;AAC1B,EAAE;AACF,0EAA0E;AAC1E,8DAA8D;AAC9D,6EAA6E;AAC7E,EAAE;AACF,kEAAkE;AAClE,uEAAuE;AACvE,EAAE;AACF,gBAAgB;AAChB,6BAA6B;AAC7B,kCAAkC;AAClC,kDAAkD;AAClD,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE;IACE,yBAAyB;EAC3B;;EAEA;IACE,yBAAyB;EAC3B;;EAEA;IACE,+BAA+B;EACjC;;EAEA;IACE,gCAAgC;EAClC;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,+BAA+B;EACjC;AACF;;AAEA,8BAA8B;AAC9B,EAAE;AACF,0EAA0E;AAC1E,wBAAwB;AACxB,EAAE;AACF,gBAAgB;AAChB,6BAA6B;AAC7B,kCAAkC;AAClC,yCAAyC;AACzC,8CAA8C;AAC9C,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE;IACE,qBAAqB;EACvB;AACF;;AAEA,kDAAkD;AAClD,EAAE;AACF,+EAA+E;AAC/E,oDAAoD;AACpD,EAAE;AACF,iBAAiB;;AAEjB;EACE;IACE;;;;MAIE;QACE,4BAA4B;QAC5B,cAAc;;QAEd,mEAAmE;QACnE,gEAAgE;QAChE,oBAAoB;QACpB,qBAAqB;MACvB;IACF;EACF;AACF;;AAEA,oBAAoB;AACpB,EAAE;AACF,2EAA2E;AAC3E,6BAA6B;AAC7B,EAAE;AACF,iBAAiB;;AAEjB;EACE,kDAAkD;EAClD,qBAAqB;;EAErB,2EAA2E;EAC3E,cAAc;;EAEd,2BAA2B;EAC3B,qBAAqB;;EAErB;IACE,0BAA0B;EAC5B;AACF","file":"_links.scss","sourcesContent":["////\n/// @group helpers/links\n////\n\n/// Common link styles\n///\n/// Provides the typography and focus state, regardless of link style.\n///\n/// @access public\n\n@mixin govuk-link-common {\n @include govuk-typography-common;\n @include govuk-link-decoration;\n\n &:hover {\n @include govuk-link-hover-decoration;\n }\n\n &:focus {\n @include govuk-focused-text;\n }\n}\n\n/// Link decoration\n///\n/// Provides the text decoration for links, including thickness and underline\n/// offset. Use this mixin only if you cannot use the `govuk-link-common` mixin.\n///\n/// @access public\n@mixin govuk-link-decoration {\n text-decoration: underline;\n\n @if $govuk-link-underline-thickness {\n text-decoration-thickness: $govuk-link-underline-thickness;\n }\n\n @if $govuk-link-underline-offset {\n text-underline-offset: $govuk-link-underline-offset;\n }\n}\n\n/// Link hover decoration\n///\n/// Provides the text decoration for links in their hover state, for you to use\n/// within a `:hover` pseudo-selector. Use this mixin only if you cannot use the\n/// `govuk-link-common` mixin.\n///\n/// @access public\n\n@mixin govuk-link-hover-decoration {\n @if $govuk-link-hover-underline-thickness {\n text-decoration-thickness: $govuk-link-hover-underline-thickness;\n // Disable ink skipping on underlines on hover. Browsers haven't\n // standardised on this part of the spec yet, so set both properties\n text-decoration-skip-ink: none; // Chromium, Firefox\n text-decoration-skip: none; // Safari\n }\n}\n\n/// Default link styles\n///\n/// Makes links use the default unvisited, visited, hover and active colours.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-default;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-default {\n &:link {\n color: $govuk-link-colour;\n }\n\n &:visited {\n color: $govuk-link-visited-colour;\n }\n\n &:hover {\n color: $govuk-link-hover-colour;\n }\n\n &:active {\n color: $govuk-link-active-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Error link styles\n///\n/// Makes links use the error colour. The link will darken if it's active or a\n/// user hovers their cursor over it.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-error;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-error {\n &:link,\n &:visited {\n color: $govuk-error-colour;\n }\n\n &:hover {\n color: scale-color($govuk-error-colour, $lightness: -30%);\n }\n\n &:active {\n color: $govuk-error-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Success link styles\n///\n/// Makes links use the success colour. The link will darken if it's active or a\n/// user hovers their cursor over it.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-success;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-success {\n &:link,\n &:visited {\n color: $govuk-success-colour;\n }\n\n &:hover {\n color: scale-color($govuk-success-colour, $lightness: -30%);\n }\n\n &:active {\n color: $govuk-success-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Muted link styles\n///\n/// Makes links use the secondary text colour. The link will darken if it's\n/// active or a user hovers their cursor over it.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-muted;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-muted {\n &:link,\n &:visited {\n color: $govuk-secondary-text-colour;\n }\n\n &:hover,\n &:active {\n color: $govuk-text-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Text link styles\n///\n/// Makes links use the primary text colour, in all states. Use this mixin for\n/// navigation components, such as breadcrumbs or the back link.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-text;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-text {\n &:link,\n &:visited {\n @include govuk-text-colour;\n }\n\n // Force a colour change on hover to work around a bug in Safari\n // https://webkit.org/b/224483\n &:hover {\n @if type-of($govuk-text-colour) == color {\n color: rgba($govuk-text-colour, 0.99);\n }\n }\n\n &:active,\n &:focus {\n @include govuk-text-colour;\n }\n}\n\n/// Inverse link styles\n///\n/// Makes links white, in all states. Use this mixin if you're displaying links\n/// against a dark background.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-inverse;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-inverse {\n &:link,\n &:visited {\n color: govuk-colour(\"white\");\n }\n\n // Force a colour change on hover to work around a bug in Safari\n // https://webkit.org/b/224483\n &:hover,\n &:active {\n color: rgba(govuk-colour(\"white\"), 0.99);\n }\n\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Default link styles, without a visited state\n///\n/// Makes links use the default unvisited, hover and active colours, with no\n/// distinct visited state.\n///\n/// Use this mixin when it's not helpful to distinguish between visited and\n/// non-visited links. For example, when you link to pages with\n/// frequently-changing content, such as the dashboard for an admin interface.\n///\n/// If you use this mixin in a component, you must also include the\n/// `govuk-link-common` mixin to get the correct focus and hover states.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-no-visited-state;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-no-visited-state {\n &:link {\n color: $govuk-link-colour;\n }\n\n &:visited {\n color: $govuk-link-colour;\n }\n\n &:hover {\n color: $govuk-link-hover-colour;\n }\n\n &:active {\n color: $govuk-link-active-colour;\n }\n\n // When focussed, the text colour needs to be darker to ensure that colour\n // contrast is still acceptable\n &:focus {\n color: $govuk-focus-text-colour;\n }\n}\n\n/// Remove underline from links\n///\n/// Remove underlines from links unless the link is active or a user hovers\n/// their cursor over it.\n///\n/// @example scss\n/// .govuk-component__link {\n/// @include govuk-link-common;\n/// @include govuk-link-style-default;\n/// @include govuk-link-style-no-underline;\n/// }\n///\n/// @access public\n\n@mixin govuk-link-style-no-underline {\n &:not(:hover):not(:active) {\n text-decoration: none;\n }\n}\n\n/// Include link destination when printing the page\n///\n/// If the user prints the page, add the destination URL after the link text, if\n/// the URL starts with `/`, `http://` or `https://`.\n///\n/// @access public\n\n@mixin govuk-link-print-friendly {\n @media print {\n &[href^=\"/\"],\n &[href^=\"http://\"],\n &[href^=\"https://\"]\n {\n &::after {\n content: \" (\" attr(href) \")\";\n font-size: 90%;\n\n // Because the URLs may be very long, ensure that they may be broken\n // at arbitrary points if there are no otherwise acceptable break\n // points in the line\n word-wrap: break-word;\n }\n }\n }\n}\n\n/// Image link styles\n///\n/// Prepares and provides the focus state for links that only contain images\n/// with no accompanying text.\n///\n/// @access public\n\n@mixin govuk-link-image {\n // Needed to draw the focus around the entire image\n display: inline-block;\n\n // Remove extra space at the bottom of the image that's added by line-height\n line-height: 0;\n\n // Don't render an underline\n text-decoration: none;\n\n &:focus {\n @include govuk-focused-box;\n }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/helpers/_media-queries.scss CHANGED Viewed

@@ -2,52 +2,168 @@
 /// @group helpers/layout
 ////
+@import "../settings/media-queries";
+@import "../tools/px-to-em";
 // =========================================================
-// Wrangle sass-mq config...
+// Helpers
 // =========================================================
-// Pass our breakpoint definitions through to sass-mq.
-$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
+/// Get the value of a breakpoint by name.
+///
+/// @param {String | Number} $value - If a string, the name of a breakpoint
+///   in $breakpoints. If a number without units, it will convert to px. If a
+///   number with units, it will return the value unaltered.
+/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $value.
+/// @returns {Number} - The set (minimum) value of the breakpoint
+///
+/// @example scss
+///  .element {
+///    width: govuk-breakpoint-value(tablet);
+///    @media (min-width: #{govuk-breakpoint-value(desktop)}) {
+///      color: red;
+///    }
+///    @media (min-width: #{govuk-breakpoint-value(400px)}) {
+///      color: green;
+///    }
+///    $custom-breakpoint-map: (
+///      small: 350px,
+///      medium: 769px,
+///      large: 1100px,
+///      extra-large: 1600px
+///    );
+///    @media (orientation: landscape) and (min-width: #{govuk-breakpoint-value(extra-large, $custom-breakpoint-map)}) {
+///      color: blue;
+///    }
+///  }
+///
+/// @access public
-$mq-show-breakpoints: ();
+@function govuk-breakpoint-value($value, $breakpoints: $govuk-breakpoints) {
+  // If $value is a number
+  @if type-of($value) == "number" {
+    // If the number is unitless, coerce it into a pixel value
+    @if unitless($value) {
+      $value: $value * 1px;
+    }
-@if variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints {
-  $mq-show-breakpoints: map-keys($govuk-breakpoints);
-}
+    @return $value;
+  }
-// 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 $value is a string and exists as a key in in $breakpoints,
+  // look up and use the value of it
+  @if type-of($value) == "string" and map-has-key($breakpoints, $value) {
+    @return map-get($breakpoints, $value);
+  }
-@if $sass-mq-already-included {
-  $mq-show-breakpoints: ();
+  // If we get this far, we can't use the value, so return an error
+  @error "Could not find a breakpoint given `#{$value}`.";
 }
-@import "../vendor/sass-mq";
+/// Generate the `min-width` segment of a media query given a breakpoint key
+///
+/// Pixel values are converted to ems for backwards compatibility with
+/// sass-mq. Unlike sass-mq, non-px and em values can be used as well.
+///
+/// @param {String | Number} $from - If a string, expects the name of a
+///   breakpoint in $breakpoints. If a number, it will use that number.
+/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $from.
+/// @returns {String} - A `min-width` media query segment
+///
+/// @example scss
+///  .example {
+///    @media #{govuk-from-breakpoint(tablet)} {
+///      color: red;
+///    }
+///    @media #{govuk-from-breakpoint(30em)} {
+///      color: green;
+///    }
+///    @media #{govuk-from-breakpoint(tablet)} and (orientation: landscape) {
+///      color: blue;
+///    }
+///    $custom-breakpoint-map: (
+///      small: 350px,
+///      medium: 769px,
+///      large: 1100px,
+///      extra-large: 1600px
+///    );
+///    @media #{govuk-from-breakpoint(extra-large, $custom-breakpoint-map)} {
+///      color: cyan;
+///    }
+///  }
+///
+/// @access public
-$sass-mq-already-included: true;
+@function govuk-from-breakpoint($from, $breakpoints: $govuk-breakpoints) {
+  $value: govuk-breakpoint-value($from, $breakpoints);
-// =========================================================
-// Helpers
-// =========================================================
+  @if type-of($value) == "number" and unit($value) == "px" {
+    $value: govuk-em($value);
+  }
+  @return "(min-width: #{$value})";
+}
-/// Media Query
+/// Generate the `max-width` segment of a media query given a breakpoint key
 ///
-/// This is a currently a wrapper for sass-mq - abstracted so that we can
-/// replace it in the future if we so choose.
+/// sass-mq converted pixel values to ems, and only performed subtractions on
+/// named breakpoints. These have been retained for backwards compatibility,
+/// though unlike sass-mq, this also supports using non-px and em values.
 ///
-/// @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…
+/// @param {String | Number} $until - If a string, expects the name of a
+///   breakpoint in $breakpoints. If a number, it will use that number.
+/// @param {Map} $breakpoints [$govuk-breakpoints] - The map to look for $until.
+/// @returns {String} - A `max-width` media query segment
+///
+/// @example scss
+///  .example {
+///    @media #{govuk-until-breakpoint(desktop)} {
+///      color: red;
+///    }
+///    @media #{govuk-until-breakpoint(40em)} {
+///      color: green;
+///    }
+///    @media #{govuk-until-breakpoint(tablet)} and (orientation: landscape) {
+///      color: blue;
+///    }
+///    $custom-breakpoint-map: (
+///      small: 350px,
+///      medium: 769px,
+///      large: 1100px,
+///      extra-large: 1600px
+///    );
+///    @media #{govuk-until-breakpoint(extra-large, $custom-breakpoint-map)} {
+///      color: cyan;
+///    }
+///  }
+///
+/// @access public
+@function govuk-until-breakpoint($until, $breakpoints: $govuk-breakpoints) {
+  $value: govuk-breakpoint-value($until, $breakpoints);
+  @if type-of($value) == "number" and unit($value) == "px" {
+    // If it's a pixel value, convert it to ems.
+    $value: govuk-em($value);
+  }
+  // If $value derives from a named breakpoint, additionally subtract .01em
+  @if type-of($until) != "number" and unit($value) == "em" {
+    $value: $value - 0.01em;
+  }
+  @return "(max-width: #{$value})";
+}
+/// Media query
 ///
-/// @ignore Undocumented mq API, for advanced use only:
-/// @ignore @param {Map} $breakpoints [$govuk-breakpoints]
+/// @param {String | Boolean} $from [false] - One of $breakpoints
+/// @param {String | Boolean} $until [false] - One of $breakpoints
+/// @param {String | Boolean} $and [false] - Additional media query parameters
+/// @param {String} $media-type [all] - Override media type: screen, print…
+/// @param {Map} $breakpoints [$govuk-breakpoints] - Map of breakpoints to use
 ///
-/// @content styling rules, wrapped into a @media query when $responsive is true
+/// @content styling rules to use for the given media query range
 ///
 /// @example scss
 ///  .element {
@@ -67,14 +183,37 @@ $sass-mq-already-included: true;
 ///      color: hotpink;
 ///    }
 ///    @include govuk-media-query(tablet, $media-type: screen) {
-///      color: hotpink;
+///      color: rebeccapurple;
 ///    }
 ///  }
 ///
 /// @access public
-@mixin govuk-media-query($args...) {
-  @include mq($args...) {
+@mixin govuk-media-query($from: null, $until: null, $and: null, $media-type: "all", $breakpoints: $govuk-breakpoints) {
+  $media-query: "";
+  $min-width: if($from, govuk-from-breakpoint($from, $breakpoints), null);
+  $max-width: if($until, govuk-until-breakpoint($until, $breakpoints), null);
+  // Assemble the media query string
+  @if $media-type != "all" {
+    $media-query: "#{$media-type}";
+  }
+  @if $min-width {
+    $media-query: "#{$media-query} and #{$min-width}";
+  }
+  @if $max-width {
+    $media-query: "#{$media-query} and #{$max-width}";
+  }
+  @if $and {
+    $media-query: "#{$media-query} and #{$and}";
+  }
+  // If $media-query currently begins with an orphaned ' and ', remove it.
+  @if str-index($media-query, " and ") == 1 {
+    $media-query: str-slice($media-query, 6);
+  }
+  @media #{$media-query} {
     @content;
   }
 }

data/node_modules/govuk-frontend/dist/govuk/helpers/_media-queries.scss.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/govuk/helpers/_media-queries.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;;AAEH,2DAA2D;AAC3D,~~2BAA2B~~;~~AAC3B~~,2DAA2D;;AAE3D,~~qDAAqD~~;~~AACrD~~,+EAA+E~~;;AAE~~/E,~~wBAAwB;;AAExB~~;~~EACE~~,~~kDAAkD~~;~~AACpD;;AAEA~~,~~4EAA4E~~;~~AAC5E~~,4DAA4D;AAC5D,~~CAAC~~;~~AACD~~,+~~EAA~~+E;AAC/E,~~mCAAmC~~;~~AACnC~~,~~yCAAyC~~;;~~AAEzC~~;EACE,~~wBAAwB~~;~~AAC1B~~;;~~AAEA~~,~~2BAA2B~~;;~~AAE3B~~,+~~BAA~~+~~B;;AAE~~/B,~~2DAA2D~~;~~AAC3D~~,~~SAAS~~;~~AACT~~,~~2DAA2D~~;;~~AAE3D~~,~~cAAc~~;~~AACd~~,EAAE;AACF,~~wEAAwE~~;~~AACxE~~,~~4CAA4C~~;~~AAC5C~~,EAAE;AACF,sEAAsE;AACtE,~~uEAAuE~~;~~AACvE~~,~~6EAA6E~~;~~AAC7E~~,~~iEAAiE~~;~~AACjE~~,EAAE;AACF,~~sDAAsD~~;~~AACtD~~,~~yDAAyD~~;~~AACzD~~,EAAE;AACF,+EAA+E;AAC/E,EAAE;AACF,gBAAgB;AAChB,cAAc;AACd,iDAAiD;AACjD,mBAAmB;AACnB,OAAO;AACP,kDAAkD;AAClD,oBAAoB;AACpB,OAAO;AACP,kDAAkD;AAClD,qBAAqB;AACrB,OAAO;AACP,mFAAmF;AACnF,oBAAoB;AACpB,OAAO;AACP,yCAAyC;AACzC,uBAAuB;AACvB,OAAO;AACP,+DAA+D;AAC/D,~~uBAAuB~~;~~AACvB~~,OAAO;AACP,KAAK;AACL,EAAE;AACF,iBAAiB;;AAEjB;EACE;IACE,QAAQ;EACV;AACF","file":"_media-queries.scss","sourcesContent":["////\n/// @group helpers/layout\n////\n\n// =========================================================\n// ~~Wrangle sass-mq config...\~~n// =========================================================\n\n// ~~Pass~~ ~~our~~ breakpoint ~~definitions~~ ~~through~~ to ~~sass-mq~~.\n$mq-breakpoints: ~~if(variable~~-~~exists~~(govuk-~~breakpoints~~), $govuk-~~breakpoints,~~ ());\n\n$mq-~~show~~-~~breakpoints~~: ();\n\n@if ~~variable-exists~~(~~govuk-show-breakpoints~~) and $govuk-~~show~~-~~breakpoints~~ {\n ~~$mq~~-~~show~~-breakpoints: ~~map-keys(~~$govuk-breakpoints);\n}\n\n// ~~This~~ is a ~~horrible,~~ ~~horrible~~ ~~hack~~ to ~~prevent~~ ~~the~~ ~~'dev~~ ~~mode'~~ ~~CSS~~ to ~~display~~\n// ~~the~~ ~~current~~ ~~breakpoint~~ ~~from~~ ~~being~~ ~~included~~ ~~multiple~~ ~~times.\~~n~~//\~~n// We can't use the `~~exports~~` ~~mixin~~ for ~~this~~ ~~because~~ ~~import~~ ~~directives~~ ~~cannot~~ be\n// ~~used~~ ~~within~~ ~~control~~ ~~directives~~ 😠\n$~~sass~~-mq-~~already~~-~~included~~: ~~false~~ ~~!default~~;\n\n@if $~~sass~~-mq-~~already~~-~~included~~ {\n $mq-~~show~~-breakpoints: ();\n}\n\n@~~import~~ \"~~../vendor/sass~~-mq\";\n\n$sass-mq-~~already~~-~~included~~: ~~true~~;\n\n// ~~=========================================================\~~n// ~~Helpers~~\n// ~~=========================================================\~~n\n/// ~~Media~~ ~~Query~~\n~~///\~~n/// ~~This~~ is a ~~currently~~ a ~~wrapper~~ ~~for~~ ~~sass~~-mq - ~~abstracted~~ so ~~that~~ we ~~can~~\n~~///~~ ~~replace~~ it in ~~the~~ ~~future~~ if we so ~~choose~~.\n///\n/// @param {String \| Boolean} $from [false] - One of $~~govuk-~~breakpoints\n/// @param {String \| Boolean} $until [false] - One of $~~govuk-~~breakpoints\n/// @param {String \| Boolean} $and [false] - Additional media query parameters\n/// @param {String} $media-type [all] - ~~Media~~ type: screen, print…\n~~///\n~~/// @~~ignore Undocumented mq API, for advanced use only:\n/// @ignore @~~param {Map} $breakpoints [$govuk-breakpoints]\n///\n/// @content styling rules, ~~wrapped~~ ~~into~~ a @media query ~~when $responsive is true~~\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: ~~hotpink~~;\n/// }\n/// }\n///\n/// @access public\n\n@mixin govuk-media-query($~~args...~~) {\n @~~include~~ mq($~~args...~~) {\n @content;\n }\n}\n"]}
1	+ {"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\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 type-of($value) == \"number\" {\n // If the number is unitless, coerce it into a pixel value\n @if 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 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 type-of($value) == \"number\" and 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 type-of($value) == \"number\" and 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 type-of($until) != \"number\" and 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 $min-width: if($from, govuk-from-breakpoint($from, $breakpoints), null);\n $max-width: if($until, govuk-until-breakpoint($until, $breakpoints), null);\n\n // Assemble the media query string\n @if $media-type != \"all\" {\n $media-query: \"#{$media-type}\";\n }\n @if $min-width {\n $media-query: \"#{$media-query} and #{$min-width}\";\n }\n @if $max-width {\n $media-query: \"#{$media-query} and #{$max-width}\";\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 str-index($media-query, \" and \") == 1 {\n $media-query: str-slice($media-query, 6);\n }\n\n @media #{$media-query} {\n @content;\n }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/helpers/_spacing.scss CHANGED Viewed

@@ -107,7 +107,7 @@
         #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
       }
     } @else {
-      @include govuk-media-query($from: $breakpoint) {
+      @media #{govuk-from-breakpoint($breakpoint)} {
         @if $direction == all {
           #{$property}: $breakpoint-value if($important, !important, null);
         } @else {

data/node_modules/govuk-frontend/dist/govuk/helpers/_spacing.scss.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/govuk/helpers/_spacing.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,yBAAyB;AACzB,GAAG;;AAEH,uBAAuB;AACvB,EAAE;AACF,oEAAoE;AACpE,EAAE;AACF,8DAA8D;AAC9D,qCAAqC;AACrC,EAAE;AACF,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,eAAe;AACf,iCAAiC;AACjC,MAAM;AACN,EAAE;AACF,uCAAuC;AACvC,eAAe;AACf,qCAAqC;AACrC,MAAM;AACN,EAAE;AACF,0DAA0D;AAC1D,eAAe;AACf,+CAA+C;AAC/C,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,2CAA2C;EAC3C;IACE;gCAC4B;EAC9B;;EAEA,mBAAmB;EACnB;IACE,kBAAkB;IAClB,mCAAmC;EACrC;;EAEA;IACE,0IAA0I;EAC5I;;EAEA,sDAAsD;EACtD,6CAA6C;AAC/C;;AAEA,qBAAqB;AACrB,EAAE;AACF,+EAA+E;AAC/E,+EAA+E;AAC/E,qDAAqD;AACrD,EAAE;AACF,mEAAmE;AACnE,oCAAoC;AACpC,EAAE;AACF,8EAA8E;AAC9E,kEAAkE;AAClE,yEAAyE;AACzE,iEAAiE;AACjE,8CAA8C;AAC9C,wEAAwE;AACxE,oEAAoE;AACpE,EAAE;AACF,kBAAkB;;AAElB;;;;;;;EAOE,sDAAsD;EACtD;IACE,2EAA2E;EAC7E;;EAEA;IACE;+DAC2D;EAC7D;;EAEA,yEAAyE;EACzE,+EAA+E;EAC/E,qCAAqC;EACrC;IACE;uHACmH;EACrH;;EAEA,yCAAyC;EACzC;IACE;MACE,kDAAkD;IACpD;;IAEA,sCAAsC;IACtC;MACE;QACE,gEAAgE;MAClE,EAAE;QACA,8EAA8E;MAChF;IACF,EAAE;MACA;QACE;UACE,gEAAgE;QAClE,EAAE;UACA,8EAA8E;QAChF;MACF;IACF;EACF;AACF;;AAEA,oBAAoB;AACpB,EAAE;AACF,yEAAyE;AACzE,qEAAqE;AACrE,kEAAkE;AAClE,EAAE;AACF,yCAAyC;AACzC,EAAE;AACF,8EAA8E;AAC9E,gEAAgE;AAChE,iEAAiE;AACjE,8CAA8C;AAC9C,wEAAwE;AACxE,oEAAoE;AACpE,EAAE;AACF,gBAAgB;AAChB,eAAe;AACf,sEAAsE;AACtE,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,4GAA4G;AAC9G;;AAEA,qBAAqB;AACrB,EAAE;AACF,0EAA0E;AAC1E,qEAAqE;AACrE,kEAAkE;AAClE,EAAE;AACF,yCAAyC;AACzC,EAAE;AACF,8EAA8E;AAC9E,kEAAkE;AAClE,iEAAiE;AACjE,8CAA8C;AAC9C,wEAAwE;AACxE,iEAAiE;AACjE,EAAE;AACF,gBAAgB;AAChB,eAAe;AACf,uEAAuE;AACvE,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,6GAA6G;AAC/G","file":"_spacing.scss","sourcesContent":["////\n/// @group helpers/spacing\n////\n\n/// Single point spacing\n///\n/// Returns measurement corresponding to the spacing point requested.\n///\n/// @param {Number} $spacing-point - Point on the spacing scale\n/// (set in `settings/_spacing.scss`)\n///\n/// @returns {String} Spacing measurement eg. 10px\n///\n/// @example scss\n/// .element {\n/// padding: govuk-spacing(5);\n/// }\n///\n/// @example scss Using negative spacing\n/// .element {\n/// margin-top: govuk-spacing(-1);\n/// }\n///\n/// @example scss Marking spacing declarations as important\n/// .element {\n/// margin-top: govuk-spacing(1) !important;\n/// }\n///\n/// @access public\n\n@function govuk-spacing($spacing-point) {\n $actual-input-type: type-of($spacing-point);\n @if $actual-input-type != \"number\" {\n @error \"Expected a number (integer), but got a \"\n + \"#{$actual-input-type}.\";\n }\n\n $is-negative: false;\n @if $spacing-point < 0 {\n $is-negative: true;\n $spacing-point: abs($spacing-point);\n }\n\n @if not map-has-key($govuk-spacing-points, $spacing-point) {\n @error \"Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.\";\n }\n\n $value: map-get($govuk-spacing-points, $spacing-point);\n @return if($is-negative, $value * -1, $value);\n}\n\n/// Responsive spacing\n///\n/// Adds responsive spacing (either padding or margin, depending on `$property`)\n/// by fetching a 'spacing map' from the responsive spacing scale, which defines\n/// different spacing values at different breakpoints.\n///\n/// To generate responsive spacing, use 'govuk-responsive-margin' or\n/// 'govuk-responsive-padding' mixins\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $property - Property to add spacing to (e.g. 'margin')\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @access private\n\n@mixin _govuk-responsive-spacing(\n $responsive-spacing-point,\n $property,\n $direction: \"all\",\n $important: false,\n $adjustment: false\n) {\n $actual-input-type: type-of($responsive-spacing-point);\n @if $actual-input-type != \"number\" {\n @error \"Expected a number (integer), but got a \" + \"#{$actual-input-type}.\";\n }\n\n @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {\n @error \"Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the \"\n + \"responsive spacing scale in `_settings/spacing.scss`.\";\n }\n\n // Make sure that the return value from `_settings/spacing.scss` is a map.\n $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);\n $actual-map-type: type-of($scale-map);\n @if $actual-map-type != \"map\" {\n @error \"Expected a number (integer), but got a \"\n + \"#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)\";\n }\n\n // Loop through each breakpoint in the map\n @each $breakpoint, $breakpoint-value in $scale-map {\n @if $adjustment {\n $breakpoint-value: $breakpoint-value + $adjustment;\n }\n\n // The 'null' breakpoint is for mobile.\n @if not $breakpoint {\n @if $direction == all {\n #{$property}: $breakpoint-value if($important, !important, null);\n } @else {\n #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);\n }\n } @else {\n @~~include~~ govuk-~~media~~-~~query~~($~~from: $~~breakpoint) {\n @if $direction == all {\n #{$property}: $breakpoint-value if($important, !important, null);\n } @else {\n #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);\n }\n }\n }\n }\n}\n\n/// Responsive margin\n///\n/// Adds responsive margin by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.\n///\n/// @see {mixin} _govuk-responsive-spacing\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @example scss\n/// .element {\n/// @include govuk-responsive-margin(6, \"left\", $adjustment: 1px);\n/// }\n///\n/// @access public\n\n@mixin govuk-responsive-margin($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n @include _govuk-responsive-spacing($responsive-spacing-point, \"margin\", $direction, $important, $adjustment);\n}\n\n/// Responsive padding\n///\n/// Adds responsive padding by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.\n///\n/// @see {mixin} _govuk-responsive-spacing\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing\n///\n/// @example scss\n/// .element {\n/// @include govuk-responsive-padding(6, \"left\", $adjustment: 1px);\n/// }\n///\n/// @access public\n\n@mixin govuk-responsive-padding($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n @include _govuk-responsive-spacing($responsive-spacing-point, \"padding\", $direction, $important, $adjustment);\n}\n"]}
1	+ {"version":3,"sources":["../../../src/govuk/helpers/_spacing.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,yBAAyB;AACzB,GAAG;;AAEH,uBAAuB;AACvB,EAAE;AACF,oEAAoE;AACpE,EAAE;AACF,8DAA8D;AAC9D,qCAAqC;AACrC,EAAE;AACF,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,eAAe;AACf,iCAAiC;AACjC,MAAM;AACN,EAAE;AACF,uCAAuC;AACvC,eAAe;AACf,qCAAqC;AACrC,MAAM;AACN,EAAE;AACF,0DAA0D;AAC1D,eAAe;AACf,+CAA+C;AAC/C,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,2CAA2C;EAC3C;IACE;gCAC4B;EAC9B;;EAEA,mBAAmB;EACnB;IACE,kBAAkB;IAClB,mCAAmC;EACrC;;EAEA;IACE,0IAA0I;EAC5I;;EAEA,sDAAsD;EACtD,6CAA6C;AAC/C;;AAEA,qBAAqB;AACrB,EAAE;AACF,+EAA+E;AAC/E,+EAA+E;AAC/E,qDAAqD;AACrD,EAAE;AACF,mEAAmE;AACnE,oCAAoC;AACpC,EAAE;AACF,8EAA8E;AAC9E,kEAAkE;AAClE,yEAAyE;AACzE,iEAAiE;AACjE,8CAA8C;AAC9C,wEAAwE;AACxE,oEAAoE;AACpE,EAAE;AACF,kBAAkB;;AAElB;;;;;;;EAOE,sDAAsD;EACtD;IACE,2EAA2E;EAC7E;;EAEA;IACE;+DAC2D;EAC7D;;EAEA,yEAAyE;EACzE,+EAA+E;EAC/E,qCAAqC;EACrC;IACE;uHACmH;EACrH;;EAEA,yCAAyC;EACzC;IACE;MACE,kDAAkD;IACpD;;IAEA,sCAAsC;IACtC;MACE;QACE,gEAAgE;MAClE,EAAE;QACA,8EAA8E;MAChF;IACF,EAAE;MACA;QACE;UACE,gEAAgE;QAClE,EAAE;UACA,8EAA8E;QAChF;MACF;IACF;EACF;AACF;;AAEA,oBAAoB;AACpB,EAAE;AACF,yEAAyE;AACzE,qEAAqE;AACrE,kEAAkE;AAClE,EAAE;AACF,yCAAyC;AACzC,EAAE;AACF,8EAA8E;AAC9E,gEAAgE;AAChE,iEAAiE;AACjE,8CAA8C;AAC9C,wEAAwE;AACxE,oEAAoE;AACpE,EAAE;AACF,gBAAgB;AAChB,eAAe;AACf,sEAAsE;AACtE,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,4GAA4G;AAC9G;;AAEA,qBAAqB;AACrB,EAAE;AACF,0EAA0E;AAC1E,qEAAqE;AACrE,kEAAkE;AAClE,EAAE;AACF,yCAAyC;AACzC,EAAE;AACF,8EAA8E;AAC9E,kEAAkE;AAClE,iEAAiE;AACjE,8CAA8C;AAC9C,wEAAwE;AACxE,iEAAiE;AACjE,EAAE;AACF,gBAAgB;AAChB,eAAe;AACf,uEAAuE;AACvE,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,6GAA6G;AAC/G","file":"_spacing.scss","sourcesContent":["////\n/// @group helpers/spacing\n////\n\n/// Single point spacing\n///\n/// Returns measurement corresponding to the spacing point requested.\n///\n/// @param {Number} $spacing-point - Point on the spacing scale\n/// (set in `settings/_spacing.scss`)\n///\n/// @returns {String} Spacing measurement eg. 10px\n///\n/// @example scss\n/// .element {\n/// padding: govuk-spacing(5);\n/// }\n///\n/// @example scss Using negative spacing\n/// .element {\n/// margin-top: govuk-spacing(-1);\n/// }\n///\n/// @example scss Marking spacing declarations as important\n/// .element {\n/// margin-top: govuk-spacing(1) !important;\n/// }\n///\n/// @access public\n\n@function govuk-spacing($spacing-point) {\n $actual-input-type: type-of($spacing-point);\n @if $actual-input-type != \"number\" {\n @error \"Expected a number (integer), but got a \"\n + \"#{$actual-input-type}.\";\n }\n\n $is-negative: false;\n @if $spacing-point < 0 {\n $is-negative: true;\n $spacing-point: abs($spacing-point);\n }\n\n @if not map-has-key($govuk-spacing-points, $spacing-point) {\n @error \"Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.\";\n }\n\n $value: map-get($govuk-spacing-points, $spacing-point);\n @return if($is-negative, $value * -1, $value);\n}\n\n/// Responsive spacing\n///\n/// Adds responsive spacing (either padding or margin, depending on `$property`)\n/// by fetching a 'spacing map' from the responsive spacing scale, which defines\n/// different spacing values at different breakpoints.\n///\n/// To generate responsive spacing, use 'govuk-responsive-margin' or\n/// 'govuk-responsive-padding' mixins\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $property - Property to add spacing to (e.g. 'margin')\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @access private\n\n@mixin _govuk-responsive-spacing(\n $responsive-spacing-point,\n $property,\n $direction: \"all\",\n $important: false,\n $adjustment: false\n) {\n $actual-input-type: type-of($responsive-spacing-point);\n @if $actual-input-type != \"number\" {\n @error \"Expected a number (integer), but got a \" + \"#{$actual-input-type}.\";\n }\n\n @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {\n @error \"Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the \"\n + \"responsive spacing scale in `_settings/spacing.scss`.\";\n }\n\n // Make sure that the return value from `_settings/spacing.scss` is a map.\n $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);\n $actual-map-type: type-of($scale-map);\n @if $actual-map-type != \"map\" {\n @error \"Expected a number (integer), but got a \"\n + \"#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)\";\n }\n\n // Loop through each breakpoint in the map\n @each $breakpoint, $breakpoint-value in $scale-map {\n @if $adjustment {\n $breakpoint-value: $breakpoint-value + $adjustment;\n }\n\n // The 'null' breakpoint is for mobile.\n @if not $breakpoint {\n @if $direction == all {\n #{$property}: $breakpoint-value if($important, !important, null);\n } @else {\n #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);\n }\n } @else {\n @media #{govuk-from-breakpoint($breakpoint)} {\n @if $direction == all {\n #{$property}: $breakpoint-value if($important, !important, null);\n } @else {\n #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);\n }\n }\n }\n }\n}\n\n/// Responsive margin\n///\n/// Adds responsive margin by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.\n///\n/// @see {mixin} _govuk-responsive-spacing\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @example scss\n/// .element {\n/// @include govuk-responsive-margin(6, \"left\", $adjustment: 1px);\n/// }\n///\n/// @access public\n\n@mixin govuk-responsive-margin($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n @include _govuk-responsive-spacing($responsive-spacing-point, \"margin\", $direction, $important, $adjustment);\n}\n\n/// Responsive padding\n///\n/// Adds responsive padding by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.\n///\n/// @see {mixin} _govuk-responsive-spacing\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing\n///\n/// @example scss\n/// .element {\n/// @include govuk-responsive-padding(6, \"left\", $adjustment: 1px);\n/// }\n///\n/// @access public\n\n@mixin govuk-responsive-padding($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n @include _govuk-responsive-spacing($responsive-spacing-point, \"padding\", $direction, $important, $adjustment);\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss CHANGED Viewed

@@ -23,7 +23,7 @@
     @include _govuk-font-face-gds-transport;
   }
-  @include govuk-media-query($media-type: print) {
+  @media print {
     font-family: $govuk-font-family-print;
   }
 }
@@ -37,7 +37,7 @@
 @mixin govuk-text-colour {
   color: $govuk-text-colour;
-  @include govuk-media-query($media-type: print) {
+  @media print {
     color: $govuk-print-text-colour;
   }
 }
@@ -240,12 +240,12 @@
       font-size: $font-size-rem;
       line-height: $calculated-line-height;
     } @else if $breakpoint == "print" {
-      @include govuk-media-query($media-type: print) {
+      @media print {
         font-size: $font-size;
         line-height: $calculated-line-height;
       }
     } @else {
-      @include govuk-media-query($from: $breakpoint) {
+      @media #{govuk-from-breakpoint($breakpoint)} {
         font-size: $font-size-rem;
         line-height: $calculated-line-height;
       }