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) • 2.75 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/skip-link/_index.scss"],"names":[],"mappings":"AAAA,kBAAkB;;AAElB,oBAAoB;;AAEpB;EACE;IACE,wCAAwC;IACxC,8BAA8B;IAC9B,8BAA8B;IAC9B,8BAA8B;;IAE9B,cAAc;IACd,0CAA0C;;IAE1C,yEAAyE;IACzE;MACE,gFAAgF;MAChF,8EAA8E;;MAE9E,8DAA8D;MAC9D,gDAAgD;MAChD,sFAAsF;MACtF,oFAAoF;IACtF;;IAEA;MACE,iCAAiC;MACjC,6CAA6C;MAC7C,iBAAiB;MACjB,gDAAgD;;MAEhD;QACE,wCAAwC;MAC1C;;MAEA,sDAAsD;MACtD;QACE,8BAA8B;QAC9B,gBAAgB;MAClB;IACF;EACF;;EAEA;IACE;MACE,+DAA+D;MAC/D,2BAA2B;MAC3B,CAAC;MACD,oEAAoE;MACpE,mEAAmE;MACnE,wEAAwE;MACxE,0DAA0D;MAC1D,CAAC;MACD,+DAA+D;MAC/D,aAAa;IACf;EACF;AACF","file":"_index.scss","sourcesContent":["@use \"sass:string\";\n\n@import \"../../base\";\n\n@include govuk-exports(\"govuk/component/skip-link\") {\n .govuk-skip-link {\n @include govuk-visually-hidden-focusable;\n @include govuk-link-decoration;\n @include govuk-link-style-text;\n @include govuk-font($size: 16);\n\n display: block;\n padding: govuk-spacing(2) govuk-spacing(3);\n\n // Respect 'display cutout' safe area (avoids notches and rounded corners)\n @supports (padding: string.unquote(\"max(calc(0px))\")) {\n $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));\n $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));\n\n // Use max() to pick largest padding, default or with safe area\n // Escaped due to Sass max() vs. CSS native max()\n padding-right: string.unquote(\"max(#{govuk-spacing(3)}, #{$padding-safe-area-right})\");\n padding-left: string.unquote(\"max(#{govuk-spacing(3)}, #{$padding-safe-area-left})\");\n }\n\n &:focus {\n outline: $govuk-focus-width solid;\n outline-color: govuk-functional-colour(focus);\n outline-offset: 0;\n background-color: govuk-functional-colour(focus);\n\n @media (forced-colors: active) {\n outline-offset: (0 - $govuk-focus-width);\n }\n\n // Undo unwanted changes when global styles are enabled\n @if $govuk-global-styles {\n @include govuk-link-decoration;\n box-shadow: none;\n }\n }\n }\n\n .govuk-skip-link-focused-element {\n &:focus {\n // Remove the native visible focus indicator when the element is\n // programmatically focused.\n //\n // We set the focus on the linked element (this is usually the <main>\n // element) when the skip link is activated to improve screen reader\n // announcements. However, we remove the visible focus indicator from the\n // linked element because the user cannot interact with it.\n //\n // A related discussion: https://github.com/w3c/wcag/issues/1001\n outline: none;\n }\n }\n}\n"]}