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.52 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/govuk/components/skip-link/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,wCAAwC;IACxC,gCAAgC;IAChC,8BAA8B;IAC9B,8BAA8B;IAC9B,mCAAmC;;IAEnC,cAAc;IACd,0CAA0C;;IAE1C,yEAAyE;IACzE;MACE,gFAAgF;MAChF,8EAA8E;;MAE9E,8DAA8D;MAC9D,gDAAgD;MAChD,+EAA+E;MAC/E,6EAA6E;IAC/E;;IAEA;MACE,qDAAqD;MACrD,iBAAiB;MACjB,qCAAqC;;MAErC,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":["@include govuk-exports(\"govuk/component/skip-link\") {\n .govuk-skip-link {\n @include govuk-visually-hidden-focusable;\n @include govuk-typography-common;\n @include govuk-link-decoration;\n @include govuk-link-style-text;\n @include govuk-font-size($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: 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: unquote(\"max(#{govuk-spacing(3)}, #{$padding-safe-area-right})\");\n padding-left: unquote(\"max(#{govuk-spacing(3)}, #{$padding-safe-area-left})\");\n }\n\n &:focus {\n outline: $govuk-focus-width solid $govuk-focus-colour;\n outline-offset: 0;\n background-color: $govuk-focus-colour;\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"]}