Sha256: b5b57d5a89bd281fbc80c6f2193072438c0f793d15c783aecf089f9f9aa1a132
Contents?: true
Size: 1.96 KB
Versions: 22
Compression:
Stored size: 1.96 KB
Contents
@include govuk-exports("govuk/component/skip-link") {
.govuk-skip-link {
@include govuk-visually-hidden-focusable;
@include govuk-typography-common;
@include govuk-link-decoration;
@include govuk-link-style-text;
@include govuk-typography-responsive($size: 16);
display: block;
padding: govuk-spacing(2) govuk-spacing(3);
// Respect 'display cutout' safe area (avoids notches and rounded corners)
@supports (padding: unquote("max(calc(0px))")) {
$padding-safe-area-right: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
$padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
$padding-safe-area-left: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
$padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
// Use max() to pick largest padding, default or with safe area
// Escaped due to Sass max() vs. CSS native max()
padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
}
&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: 0;
background-color: $govuk-focus-colour;
// Undo unwanted changes when global styles are enabled
@if ($govuk-global-styles) {
box-shadow: none;
}
}
}
.govuk-skip-link-focused-element {
&:focus {
// Remove the native visible focus indicator when the element is programmatically focused.
//
// We set the focus on the linked element (this is usually the <main> element) when the skip
// link is activated to improve screen reader announcements. However, we remove the visible
// focus indicator from the linked element because the user cannot interact with it.
//
// A related discussion: https://github.com/w3c/wcag/issues/1001
outline: none;
}
}
}
Version data entries
22 entries across 22 versions & 3 rubygems