govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
2 lines (1 loc) • 4.34 kB
Source Map (JSON)
{"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,0CAA0C;EAC1C,gDAAgD;EAChD;;6CAE2C;EAC3C,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;;iDAE+C;AACjD;;AAEA,qBAAqB;AACrB,EAAE;AACF,8EAA8E;AAC9E,wBAAwB;AACxB,EAAE;AACF,2DAA2D;AAC3D,yBAAyB;AACzB,yCAAyC;AACzC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,iCAAiC;EACjC,6CAA6C;EAC7C,+CAA+C;EAC/C,iBAAiB;EACjB,wEAAwE;EACxE,mEAAmE;EACnE,uEAAuE;EACvE,qEAAqE;EACrE,wDAAwD;EACxD,8FAA8F;AAChG","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-functional-colour(focus-text);\n background-color: govuk-functional-colour(focus);\n box-shadow:\n 0 -2px govuk-functional-colour(focus),\n 0 4px govuk-functional-colour(focus-text);\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-functional-colour(focus),\n 0 0 0 8px govuk-functional-colour(focus-text);\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;\n outline-color: govuk-functional-colour(focus);\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 govuk-functional-colour(input-border);\n}\n"]}