RubyGems - govuk_publishing_components - Versions diffs - 68.2.0 → 69.0.0 - Mend

govuk_publishing_components 68.2.0 → 69.0.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 (357) hide show

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

@@ -224,13 +224,13 @@
 @mixin govuk-link-style-text {
   &:link,
-  &:visited {
-    @include govuk-text-colour;
+  &:visited,
+  &:active {
+    color: govuk-functional-colour(text);
   }
-  &:active,
   &:focus {
-    @include govuk-text-colour;
+    color: govuk-functional-colour(focus-text);
   }
 }

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":"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,oCAAoC;EACtC;;EAEA;IACE,4CAA4C;EAC9C;;EAEA;IACE,0CAA0C;EAC5C;;EAEA;IACE,2CAA2C;EAC7C;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,0CAA0C;EAC5C;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,qCAAqC;EACvC;;EAEA;IACE,gDAAgD;EAClD;;EAEA;IACE,qCAAqC;EACvC;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,0CAA0C;EAC5C;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,uCAAuC;EACzC;;EAEA;IACE,kDAAkD;EACpD;;EAEA;IACE,uCAAuC;EACzC;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,0CAA0C;EAC5C;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,8CAA8C;EAChD;;EAEA;;IAEE,oCAAoC;EACtC;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,0CAA0C;EAC5C;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;;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;IACE,0CAA0C;EAC5C;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,oCAAoC;EACtC;;EAEA;IACE,oCAAoC;EACtC;;EAEA;IACE,0CAA0C;EAC5C;;EAEA;IACE,2CAA2C;EAC7C;;EAEA,yEAAyE;EACzE,8BAA8B;EAC9B;IACE,0CAA0C;EAC5C;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;;;MAGE;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-functional-colour(link);\n }\n\n &:visited {\n color: govuk-functional-colour(link-visited);\n }\n\n &:hover {\n color: govuk-functional-colour(link-hover);\n }\n\n &:active {\n color: govuk-functional-colour(link-active);\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-functional-colour(focus-text);\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-functional-colour(error);\n }\n\n &:hover {\n color: govuk-colour(\"red\", $variant: \"shade-50\");\n }\n\n &:active {\n color: govuk-functional-colour(error);\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-functional-colour(focus-text);\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-functional-colour(success);\n }\n\n &:hover {\n color: govuk-colour(\"green\", $variant: \"shade-50\");\n }\n\n &:active {\n color: govuk-functional-colour(success);\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-functional-colour(focus-text);\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-functional-colour(secondary-text);\n }\n\n &:hover,\n &:active {\n color: govuk-functional-colour(text);\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-functional-colour(focus-text);\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 &: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 &:focus {\n color: govuk-functional-colour(focus-text);\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-functional-colour(link);\n }\n\n &:visited {\n color: govuk-functional-colour(link);\n }\n\n &:hover {\n color: govuk-functional-colour(link-hover);\n }\n\n &:active {\n color: govuk-functional-colour(link-active);\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-functional-colour(focus-text);\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 &::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":"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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-functional-colour(link);\n }\n\n &:visited {\n color: govuk-functional-colour(link-visited);\n }\n\n &:hover {\n color: govuk-functional-colour(link-hover);\n }\n\n &:active {\n color: govuk-functional-colour(link-active);\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-functional-colour(focus-text);\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-functional-colour(error);\n }\n\n &:hover {\n color: govuk-colour(\"red\", $variant: \"shade-50\");\n }\n\n &:active {\n color: govuk-functional-colour(error);\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-functional-colour(focus-text);\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-functional-colour(success);\n }\n\n &:hover {\n color: govuk-colour(\"green\", $variant: \"shade-50\");\n }\n\n &:active {\n color: govuk-functional-colour(success);\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-functional-colour(focus-text);\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-functional-colour(secondary-text);\n }\n\n &:hover,\n &:active {\n color: govuk-functional-colour(text);\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-functional-colour(focus-text);\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 &:active {\n color: govuk-functional-colour(text);\n }\n\n &:focus {\n color: govuk-functional-colour(focus-text);\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 &:focus {\n color: govuk-functional-colour(focus-text);\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-functional-colour(link);\n }\n\n &:visited {\n color: govuk-functional-colour(link);\n }\n\n &:hover {\n color: govuk-functional-colour(link-hover);\n }\n\n &:active {\n color: govuk-functional-colour(link-active);\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-functional-colour(focus-text);\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 &::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

@@ -1,6 +1,10 @@
 ////
 /// @group helpers/layout
 ////
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
 @import "../settings/media-queries";
 @import "../tools/px-to-em";
@@ -41,9 +45,9 @@
 @function govuk-breakpoint-value($value, $breakpoints: $govuk-breakpoints) {
   // If $value is a number
-  @if type-of($value) == "number" {
+  @if meta.type-of($value) == "number" {
     // If the number is unitless, coerce it into a pixel value
-    @if unitless($value) {
+    @if math.is-unitless($value) {
       $value: $value * 1px;
     }
@@ -52,8 +56,8 @@
   // 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 meta.type-of($value) == "string" and map.has-key($breakpoints, $value) {
+    @return map.get($breakpoints, $value);
   }
   // If we get this far, we can't use the value, so return an error
@@ -97,7 +101,7 @@
 @function govuk-from-breakpoint($from, $breakpoints: $govuk-breakpoints) {
   $value: govuk-breakpoint-value($from, $breakpoints);
-  @if type-of($value) == "number" and unit($value) == "px" {
+  @if meta.type-of($value) == "number" and math.unit($value) == "px" {
     $value: govuk-em($value);
   }
@@ -142,13 +146,13 @@
 @function govuk-until-breakpoint($until, $breakpoints: $govuk-breakpoints) {
   $value: govuk-breakpoint-value($until, $breakpoints);
-  @if type-of($value) == "number" and unit($value) == "px" {
+  @if meta.type-of($value) == "number" and math.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" {
+  @if meta.type-of($until) != "number" and math.unit($value) == "em" {
     $value: $value - 0.01em;
   }
@@ -191,26 +195,24 @@
 @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 $from {
+    $media-query: "#{$media-query} and #{govuk-from-breakpoint($from, $breakpoints)}";
   }
-  @if $max-width {
-    $media-query: "#{$media-query} and #{$max-width}";
+  @if $until {
+    $media-query: "#{$media-query} and #{govuk-until-breakpoint($until, $breakpoints)}";
   }
   @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);
+  @if string.index($media-query, " and ") == 1 {
+    $media-query: string.slice($media-query, 6);
   }
   @media #{$media-query} {

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~~,mCAAmC;AACnC,2BAA2B;;AAE3B,2DAA2D;AAC3D,SAAS;AACT,2DAA2D;;AAE3D,yCAAyC;AACzC,EAAE;AACF,0EAA0E;AAC1E,4EAA4E;AAC5E,2DAA2D;AAC3D,+EAA+E;AAC/E,gEAAgE;AAChE,EAAE;AACF,gBAAgB;AAChB,cAAc;AACd,4CAA4C;AAC5C,8DAA8D;AAC9D,mBAAmB;AACnB,OAAO;AACP,4DAA4D;AAC5D,qBAAqB;AACrB,OAAO;AACP,+BAA+B;AAC/B,qBAAqB;AACrB,sBAAsB;AACtB,sBAAsB;AACtB,2BAA2B;AAC3B,QAAQ;AACR,uHAAuH;AACvH,oBAAoB;AACpB,OAAO;AACP,KAAK;AACL,EAAE;AACF,iBAAiB;;AAEjB;EACE,uBAAuB;EACvB;IACE,yDAAyD;IACzD;MACE,oBAAoB;IACtB;;IAEA,cAAc;EAChB;;EAEA,+DAA+D;EAC/D,iCAAiC;EACjC;IACE,qCAAqC;EACvC;;EAEA,gEAAgE;EAChE,uDAAuD;AACzD;;AAEA,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,qEAAqE;AACrE,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,8EAA8E;AAC9E,wDAAwD;AACxD,EAAE;AACF,gBAAgB;AAChB,cAAc;AACd,+CAA+C;AAC/C,mBAAmB;AACnB,OAAO;AACP,6CAA6C;AAC7C,qBAAqB;AACrB,OAAO;AACP,4EAA4E;AAC5E,oBAAoB;AACpB,OAAO;AACP,+BAA+B;AAC/B,qBAAqB;AACrB,sBAAsB;AACtB,sBAAsB;AACtB,2BAA2B;AAC3B,QAAQ;AACR,4EAA4E;AAC5E,oBAAoB;AACpB,OAAO;AACP,KAAK;AACL,EAAE;AACF,iBAAiB;;AAEjB;EACE,mDAAmD;;EAEnD;IACE,wBAAwB;EAC1B;;EAEA,gCAAgC;AAClC;;AAEA,2EAA2E;AAC3E,EAAE;AACF,4EAA4E;AAC5E,2EAA2E;AAC3E,wEAAwE;AACxE,EAAE;AACF,uEAAuE;AACvE,sEAAsE;AACtE,+EAA+E;AAC/E,wDAAwD;AACxD,EAAE;AACF,gBAAgB;AAChB,cAAc;AACd,iDAAiD;AACjD,mBAAmB;AACnB,OAAO;AACP,8CAA8C;AAC9C,qBAAqB;AACrB,OAAO;AACP,6EAA6E;AAC7E,oBAAoB;AACpB,OAAO;AACP,+BAA+B;AAC/B,qBAAqB;AACrB,sBAAsB;AACtB,sBAAsB;AACtB,2BAA2B;AAC3B,QAAQ;AACR,6EAA6E;AAC7E,oBAAoB;AACpB,OAAO;AACP,KAAK;AACL,EAAE;AACF,iBAAiB;;AAEjB;EACE,oDAAoD;;EAEpD;IACE,2CAA2C;IAC3C,wBAAwB;EAC1B;;EAEA,wEAAwE;EACxE;IACE,uBAAuB;EACzB;;EAEA,gCAAgC;AAClC;;AAEA,cAAc;AACd,EAAE;AACF,gEAAgE;AAChE,iEAAiE;AACjE,6EAA6E;AAC7E,0EAA0E;AAC1E,6EAA6E;AAC7E,EAAE;AACF,gEAAgE;AAChE,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,6BAA6B;AAC7B,OAAO;AACP,KAAK;AACL,EAAE;AACF,iBAAiB;;AAEjB;EACE,gBAAgB~~;EAChB,uEAAuE;EACvE,0EAA0E~~;;~~EAE1E~~,iCAAiC;EACjC;IACE,8BAA8B;EAChC;EACA;IACE,~~iDAAiD~~;~~EACnD~~;EACA;IACE,~~iDAAiD~~;~~EACnD~~;EACA;IACE,2CAA2C;EAC7C;;EAEA,uEAAuE;EACvE;IACE,~~wCAAwC~~;~~EAC1C~~;;EAEA;IACE,QAAQ;EACV;AACF","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"]}
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@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"]}

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

@@ -14,7 +14,7 @@
 @function _govuk-equilateral-height($base) {
   $square-root-of-three: 1.732;
-  @return ($base / 2) * $square-root-of-three;
+  @return ($base * 0.5) * $square-root-of-three;
 }
 /// Arrow mixin
@@ -44,7 +44,7 @@
   border-style: solid;
   border-color: transparent; // 1
-  $perpendicular: $base / 2;
+  $perpendicular: $base * 0.5;
   @if not $height {
     $height: _govuk-equilateral-height($base);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/govuk/helpers/_shape-arrow.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;;AAEH,kDAAkD;AAClD,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,EAAE;AACF,6DAA6D;AAC7D,qDAAqD;AACrD,kBAAkB;;AAElB;EACE,4BAA4B;;EAE5B,~~2CAA2C~~;~~AAC7C~~;;AAEA,cAAc;AACd,EAAE;AACF,6EAA6E;AAC7E,4EAA4E;AAC5E,EAAE;AACF,8EAA8E;AAC9E,sEAAsE;AACtE,0DAA0D;AAC1D,EAAE;AACF,gEAAgE;AAChE,EAAE;AACF,2EAA2E;AAC3E,6DAA6D;AAC7D,6EAA6E;AAC7E,uEAAuE;AACvE,EAAE;AACF,iBAAiB;;AAEjB;EACE,iBAAiB;;EAEjB,QAAQ;EACR,SAAS;;EAET,mBAAmB;EACnB,yBAAyB,EAAE,GAAG;;EAE9B,~~yBAAyB~~;;~~EAEzB~~;IACE,yCAAyC;EAC3C;;EAEA;IACE,sDAA8C;YAA9C,8CAA8C,EAAE,GAAG;;IAEnD,sCAAsC;IACtC,4BAA4B,EAAE,GAAG;EACnC,EAAE;IACA,oDAA4C;YAA5C,4CAA4C,EAAE,GAAG;;IAEjD,qDAAqD;IACrD,0BAA0B,EAAE,GAAG;EACjC,EAAE;IACA,oDAA4C;YAA5C,4CAA4C,EAAE,GAAG;;IAEjD,qDAAqD;IACrD,yBAAyB,EAAE,GAAG;EAChC,EAAE;IACA,sDAA8C;YAA9C,8CAA8C,EAAE,GAAG;;IAEnD,qDAAqD;IACrD,2BAA2B,EAAE,GAAG;EAClC,EAAE;IACA,+FAA+F;EACjG;AACF","file":"_shape-arrow.scss","sourcesContent":["////\n/// @group helpers/shapes\n////\n\n/// Calculate the height of an equilateral triangle\n///\n/// Multiplying half the length of the base of an equilateral triangle by the\n/// square root of three gives us its height. We use 1.732 as an approximation.\n///\n/// @param {Number} $base - Length of the base of the triangle\n/// @return {Number} Calculated height of the triangle\n/// @access private\n\n@function _govuk-equilateral-height($base) {\n $square-root-of-three: 1.732;\n\n @return ($base / 2) * $square-root-of-three;\n}\n\n/// Arrow mixin\n///\n/// Generate Arrows (triangles) by using a mix of transparent (1) and coloured\n/// borders. The coloured borders inherit the text colour of the element (2).\n///\n/// Ensure the arrow is rendered correctly if browser colours are overridden by\n/// providing a clip path (3). Without this the transparent borders are\n/// overridden to become visible which results in a square.\n///\n/// We need both because older browsers do not support clip-path.\n///\n/// @param {String} $direction - Direction for arrow: up, right, down, left.\n/// @param {Number} $base - Length of the triangle 'base' side\n/// @param {Number} $height [null] - Height of triangle. Omit for equilateral.\n/// @param {String} $display [block] - CSS display property of the arrow\n///\n/// @access public\n\n@mixin govuk-shape-arrow($direction, $base, $height: null, $display: block) {\n display: $display;\n\n width: 0;\n height: 0;\n\n border-style: solid;\n border-color: transparent; // 1\n\n $perpendicular: $base / 2;\n\n @if not $height {\n $height: _govuk-equilateral-height($base);\n }\n\n @if $direction == \"up\" {\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3\n\n border-width: 0 $perpendicular $height;\n border-bottom-color: inherit; // 2\n } @else if $direction == \"right\" {\n clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3\n\n border-width: $perpendicular 0 $perpendicular $height;\n border-left-color: inherit; // 2\n } @else if $direction == \"down\" {\n clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3\n\n border-width: $height $perpendicular 0 $perpendicular;\n border-top-color: inherit; // 2\n } @else if $direction == \"left\" {\n clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3\n\n border-width: $perpendicular $height $perpendicular 0;\n border-right-color: inherit; // 2\n } @else {\n @error \"Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`\";\n }\n}\n"]}
1	+ {"version":3,"sources":["../../../src/govuk/helpers/_shape-arrow.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,wBAAwB;AACxB,GAAG;;AAEH,kDAAkD;AAClD,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,EAAE;AACF,6DAA6D;AAC7D,qDAAqD;AACrD,kBAAkB;;AAElB;EACE,4BAA4B;;EAE5B,6CAA6C;AAC/C;;AAEA,cAAc;AACd,EAAE;AACF,6EAA6E;AAC7E,4EAA4E;AAC5E,EAAE;AACF,8EAA8E;AAC9E,sEAAsE;AACtE,0DAA0D;AAC1D,EAAE;AACF,gEAAgE;AAChE,EAAE;AACF,2EAA2E;AAC3E,6DAA6D;AAC7D,6EAA6E;AAC7E,uEAAuE;AACvE,EAAE;AACF,iBAAiB;;AAEjB;EACE,iBAAiB;;EAEjB,QAAQ;EACR,SAAS;;EAET,mBAAmB;EACnB,yBAAyB,EAAE,GAAG;;EAE9B,2BAA2B;;EAE3B;IACE,yCAAyC;EAC3C;;EAEA;IACE,sDAA8C;YAA9C,8CAA8C,EAAE,GAAG;;IAEnD,sCAAsC;IACtC,4BAA4B,EAAE,GAAG;EACnC,EAAE;IACA,oDAA4C;YAA5C,4CAA4C,EAAE,GAAG;;IAEjD,qDAAqD;IACrD,0BAA0B,EAAE,GAAG;EACjC,EAAE;IACA,oDAA4C;YAA5C,4CAA4C,EAAE,GAAG;;IAEjD,qDAAqD;IACrD,yBAAyB,EAAE,GAAG;EAChC,EAAE;IACA,sDAA8C;YAA9C,8CAA8C,EAAE,GAAG;;IAEnD,qDAAqD;IACrD,2BAA2B,EAAE,GAAG;EAClC,EAAE;IACA,+FAA+F;EACjG;AACF","file":"_shape-arrow.scss","sourcesContent":["////\n/// @group helpers/shapes\n////\n\n/// Calculate the height of an equilateral triangle\n///\n/// Multiplying half the length of the base of an equilateral triangle by the\n/// square root of three gives us its height. We use 1.732 as an approximation.\n///\n/// @param {Number} $base - Length of the base of the triangle\n/// @return {Number} Calculated height of the triangle\n/// @access private\n\n@function _govuk-equilateral-height($base) {\n $square-root-of-three: 1.732;\n\n @return ($base * 0.5) * $square-root-of-three;\n}\n\n/// Arrow mixin\n///\n/// Generate Arrows (triangles) by using a mix of transparent (1) and coloured\n/// borders. The coloured borders inherit the text colour of the element (2).\n///\n/// Ensure the arrow is rendered correctly if browser colours are overridden by\n/// providing a clip path (3). Without this the transparent borders are\n/// overridden to become visible which results in a square.\n///\n/// We need both because older browsers do not support clip-path.\n///\n/// @param {String} $direction - Direction for arrow: up, right, down, left.\n/// @param {Number} $base - Length of the triangle 'base' side\n/// @param {Number} $height [null] - Height of triangle. Omit for equilateral.\n/// @param {String} $display [block] - CSS display property of the arrow\n///\n/// @access public\n\n@mixin govuk-shape-arrow($direction, $base, $height: null, $display: block) {\n display: $display;\n\n width: 0;\n height: 0;\n\n border-style: solid;\n border-color: transparent; // 1\n\n $perpendicular: $base * 0.5;\n\n @if not $height {\n $height: _govuk-equilateral-height($base);\n }\n\n @if $direction == \"up\" {\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3\n\n border-width: 0 $perpendicular $height;\n border-bottom-color: inherit; // 2\n } @else if $direction == \"right\" {\n clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3\n\n border-width: $perpendicular 0 $perpendicular $height;\n border-left-color: inherit; // 2\n } @else if $direction == \"down\" {\n clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3\n\n border-width: $height $perpendicular 0 $perpendicular;\n border-top-color: inherit; // 2\n } @else if $direction == \"left\" {\n clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3\n\n border-width: $perpendicular $height $perpendicular 0;\n border-right-color: inherit; // 2\n } @else {\n @error \"Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`\";\n }\n}\n"]}

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

@@ -1,6 +1,12 @@
 ////
 /// @group helpers/spacing
 ////
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@import "../tools/if";
+@import "../helpers/media-queries";
 /// Single point spacing
 ///
@@ -29,7 +35,7 @@
 /// @access public
 @function govuk-spacing($spacing-point) {
-  $actual-input-type: type-of($spacing-point);
+  $actual-input-type: meta.type-of($spacing-point);
   @if $actual-input-type != "number" {
     @error "Expected a number (integer), but got a "
       + "#{$actual-input-type}.";
@@ -38,15 +44,15 @@
   $is-negative: false;
   @if $spacing-point < 0 {
     $is-negative: true;
-    $spacing-point: abs($spacing-point);
+    $spacing-point: math.abs($spacing-point);
   }
-  @if not map-has-key($govuk-spacing-points, $spacing-point) {
+  @if not map.has-key($govuk-spacing-points, $spacing-point) {
     @error "Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.";
   }
-  $value: map-get($govuk-spacing-points, $spacing-point);
-  @return if($is-negative, $value * -1, $value);
+  $value: map.get($govuk-spacing-points, $spacing-point);
+  @return govuk-if($is-negative, $value * -1, $value);
 }
 /// Responsive spacing
@@ -75,19 +81,19 @@
   $important: false,
   $adjustment: false
 ) {
-  $actual-input-type: type-of($responsive-spacing-point);
+  $actual-input-type: meta.type-of($responsive-spacing-point);
   @if $actual-input-type != "number" {
     @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
   }
-  @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
+  @if not map.has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
     @error "Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the "
       + "responsive spacing scale in `_settings/spacing.scss`.";
   }
   // Make sure that the return value from `_settings/spacing.scss` is a map.
-  $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);
-  $actual-map-type: type-of($scale-map);
+  $scale-map: map.get($govuk-spacing-responsive-scale, $responsive-spacing-point);
+  $actual-map-type: meta.type-of($scale-map);
   @if $actual-map-type != "map" {
     @error "Expected a number (integer), but got a "
       + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)";
@@ -102,16 +108,16 @@
     // The 'null' breakpoint is for mobile.
     @if not $breakpoint {
       @if $direction == all {
-        #{$property}: $breakpoint-value if($important, !important, null);
+        #{$property}: $breakpoint-value govuk-if($important, !important);
       } @else {
-        #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+        #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);
       }
     } @else {
       @media #{govuk-from-breakpoint($breakpoint)} {
         @if $direction == all {
-          #{$property}: $breakpoint-value if($important, !important, null);
+          #{$property}: $breakpoint-value govuk-if($important, !important);
         } @else {
-          #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+          #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);
         }
       }
     }

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 @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"]}
1	+ {"version":3,"sources":["../../../src/govuk/helpers/_spacing.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,yBAAyB;AACzB,GAAG;AACH,eAAe;AACf,gBAAgB;AAChB,gBAAgB;;AAEhB,qBAAqB;AACrB,kCAAkC;;AAElC,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,gDAAgD;EAChD;IACE;gCAC4B;EAC9B;;EAEA,mBAAmB;EACnB;IACE,kBAAkB;IAClB,wCAAwC;EAC1C;;EAEA;IACE,0IAA0I;EAC5I;;EAEA,sDAAsD;EACtD,mDAAmD;AACrD;;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,2DAA2D;EAC3D;IACE,2EAA2E;EAC7E;;EAEA;IACE;+DAC2D;EAC7D;;EAEA,yEAAyE;EACzE,+EAA+E;EAC/E,0CAA0C;EAC1C;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@use \"sass:map\";\n@use \"sass:math\";\n@use \"sass:meta\";\n\n@import \"../tools/if\";\n@import \"../helpers/media-queries\";\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: meta.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: math.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 govuk-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: meta.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: meta.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 govuk-if($important, !important);\n } @else {\n #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);\n }\n } @else {\n @media #{govuk-from-breakpoint($breakpoint)} {\n @if $direction == all {\n #{$property}: $breakpoint-value govuk-if($important, !important);\n } @else {\n #{$property}-#{$direction}: $breakpoint-value govuk-if($important, !important);\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

@@ -1,8 +1,21 @@
 ////
 /// @group helpers/typography
 ////
+@use "sass:map";
+@use "sass:math";
+@use "sass:string";
+@import "../settings/assets";
+@import "../settings/colours-functional";
+@import "../settings/spacing";
+@import "../settings/typography-font";
+@import "../settings/warnings";
+@import "../tools/font-url";
 @import "../tools/px-to-rem";
+@import "../tools/if";
+@import "font-faces";
+@import "media-queries";
+@import "spacing";
 /// 'Common typography' helper
 ///
@@ -32,14 +45,16 @@
 ///
 /// Sets the text colour, including a suitable override for print.
 ///
+/// @deprecated
 /// @access public
 @mixin govuk-text-colour {
-  color: govuk-functional-colour(text);
+  @include _warning(
+    "govuk-text-colour",
+    "The `govuk-text-colour` mixin is deprecated. Use `color: govuk-colour(text)` instead."
+  );
-  @media print {
-    color: govuk-functional-colour(print-text);
-  }
+  color: govuk-functional-colour(text);
 }
 /// Regular font weight helper
@@ -49,7 +64,7 @@
 /// @access public
 @mixin govuk-typography-weight-regular($important: false) {
-  font-weight: $govuk-font-weight-regular if($important, !important, null);
+  font-weight: $govuk-font-weight-regular govuk-if($important, !important);
 }
 /// Bold font weight helper
@@ -59,7 +74,7 @@
 /// @access public
 @mixin govuk-typography-weight-bold($important: false) {
-  font-weight: $govuk-font-weight-bold if($important, !important, null);
+  font-weight: $govuk-font-weight-bold govuk-if($important, !important);
 }
 /// Tabular number helper
@@ -76,7 +91,7 @@
 /// @access public
 @mixin govuk-font-tabular-numbers($important: false) {
-  font-variant-numeric: tabular-nums if($important, !important, null);
+  font-variant-numeric: tabular-nums govuk-if($important, !important);
 }
 /// Word break helper
@@ -90,10 +105,10 @@
 @mixin govuk-text-break-word($important: false) {
   // IE 11 and Edge 16–17 only support the non-standard `word-wrap` property
-  word-wrap: break-word if($important, !important, null);
+  word-wrap: break-word govuk-if($important, !important);
   // All other browsers support `overflow-wrap`
-  overflow-wrap: break-word if($important, !important, null);
+  overflow-wrap: break-word govuk-if($important, !important);
 }
 /// Convert line-heights specified in pixels into a relative value, unless
@@ -107,8 +122,8 @@
 /// @access private
 @function _govuk-line-height($line-height, $font-size) {
-  @if not unitless($line-height) and unit($line-height) == unit($font-size) {
-    $line-height: $line-height / $font-size;
+  @if not math.is-unitless($line-height) and math.unit($line-height) == math.unit($font-size) {
+    $line-height: math.div($line-height, $font-size);
   }
   @return $line-height;
@@ -153,21 +168,21 @@
 @mixin govuk-font-size($size, $line-height: false, $important: false) {
   // Flag font sizes that start with underscores so we can suppress warnings on
   // deprecated sizes used internally, for example `govuk-font($size: "_14")`
-  $size-internal-use-only: str-slice(#{$size}, 1, 1) == "_";
+  $size-internal-use-only: string.slice(#{$size}, 1, 1) == "_";
   // Remove underscore from font sizes flagged for internal use
   @if $size-internal-use-only {
-    $size: str-slice(#{$size}, 2);
+    $size: string.slice(#{$size}, 2);
   }
   // Check for a font map exactly matching the given size
-  $font-map: map-get($govuk-typography-scale, $size);
+  $font-map: map.get($govuk-typography-scale, $size);
   // No match? Try with string type (e.g. $size: "16" not 16)
   @if not $font-map {
-    @each $font-size in map-keys($govuk-typography-scale) {
+    @each $font-size in map.keys($govuk-typography-scale) {
       @if not $font-map and "#{$font-size}" == "#{$size}" {
-        $font-map: map-get($govuk-typography-scale, $font-size);
+        $font-map: map.get($govuk-typography-scale, $font-size);
       }
     }
   }
@@ -178,39 +193,46 @@
   }
   // Check for a deprecation within the type scale
-  $deprecation: map-get($font-map, "deprecation");
+  $deprecation: map.get($font-map, "deprecation");
   @if $deprecation {
     // Warn on deprecated font sizes unless flagged for internal use
     @if not $size-internal-use-only {
-      @include _warning(map-get($deprecation, "key"), map-get($deprecation, "message"));
+      @include _warning(map.get($deprecation, "key"), map.get($deprecation, "message"));
     }
     // remove the deprecation map keys so they do not break the breakpoint loop
-    $font-map: map-remove($font-map, "deprecation");
+    $font-map: map.remove($font-map, "deprecation");
   }
   @each $breakpoint, $breakpoint-map in $font-map {
-    $font-size: map-get($breakpoint-map, "font-size");
+    $font-size: map.get($breakpoint-map, "font-size");
     $font-size-rem: govuk-px-to-rem($font-size);
     // $calculated-line-height is a separate variable from $line-height,
     // as otherwise the value would get redefined with each loop and
     // eventually break _govuk-line-height.
-    //
+    // 1. See if the function was called with a specific line-height
+    $calculated-line-height: $line-height;
+    // 2. Default to the breakpoint-map if no specific value was given
+    @if not $calculated-line-height {
+      $calculated-line-height: map.get($breakpoint-map, "line-height");
+    }
+    // 3. Turn the value into a unitless line-height if possible
     // We continue to call the param $line-height to stay consistent with the
     // naming with govuk-font.
     $calculated-line-height: _govuk-line-height(
-      $line-height: if($line-height, $line-height, map-get($breakpoint-map, "line-height")),
+      $line-height: $calculated-line-height,
       $font-size: $font-size
     );
     // Mark rules as !important if $important is true - this will result in
     // these variables becoming strings, so this needs to happen *after* they
     // are used in calculations
-    $font-size: $font-size if($important, !important, null);
-    $font-size-rem: $font-size-rem if($important, !important, null);
-    $calculated-line-height: $calculated-line-height if($important, !important, null);
+    $font-size: $font-size govuk-if($important, !important);
+    $font-size-rem: $font-size-rem govuk-if($important, !important);
+    $calculated-line-height: $calculated-line-height govuk-if($important, !important);
     @if not $breakpoint {
       font-size: $font-size-rem;