Sha256: a34ec49980e9947f50ca08e36238936eb2c22532b306bf24f29b72437616f63b
Contents?: true
Size: 1.88 KB
Versions: 10
Compression:
Stored size: 1.88 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
10 entries across 8 versions & 2 rubygems