Sha256: d76bb16854efa7cd2f05e877f1e0a956274a4d42f1bbd4b50716e86eac5e9a11
Contents?: true
Size: 1.9 KB
Versions: 64
Compression:
Stored size: 1.9 KB
Contents
@include govuk-exports("govuk/component/cookie-banner") {
// This needs to be kept in sync with the header component's styles
$border-bottom-width: govuk-spacing(2);
.govuk-cookie-banner {
padding-top: govuk-spacing(4);
// The component does not set bottom spacing. The bottom spacing should be
// created by the items inside the component.
// Visually separate the cookie banner from content underneath when user
// changes colours in their browser.
border-bottom: $border-bottom-width solid transparent;
background-color: $govuk-canvas-background-colour;
}
// Support older browsers which don't hide elements with the `hidden` attribute
// when user hides the whole cookie banner with a 'Hide' button.
.govuk-cookie-banner[hidden] {
display: none;
}
.govuk-cookie-banner__message {
// Remove the extra height added by the separator border.
margin-bottom: -$border-bottom-width;
&[hidden] {
// Support older browsers which don't hide elements with the `hidden`
// attribute when the visibility of cookie and replacement messages is
// toggled.
display: none;
}
&:focus {
// Remove the native visible focus indicator when the element is
// programmatically focused.
//
// The focused cookie banner is the first element on the page and the last
// thing the user interacted with prior to it gaining focus. We therefore
// assume that moving focus to it is not going to surprise users, and that
// giving it a visible focus indicator could be more confusing than
// helpful, especially as the element is not normally keyboard operable.
//
// We have flagged this in the research section of the guidance as
// something to monitor.
//
// A related discussion: https://github.com/w3c/wcag/issues/1001
outline: none;
}
}
}
/*# sourceMappingURL=_index.scss.map */
Version data entries
64 entries across 64 versions & 3 rubygems