Sha256: c92e744eeffee63585ca1b50cfffa4fde58b1dbf7b8109e98ed6e56dd5617d3c
Contents?: true
Size: 1.87 KB
Versions: 150
Compression:
Stored size: 1.87 KB
Contents
@import "govuk/components/cookie-banner/cookie-banner";
$govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
.js-enabled {
.gem-c-cookie-banner {
display: none; // shown with JS, always on for non-JS
}
}
.gem-c-cookie-banner {
background-color: $govuk-cookie-banner-background;
}
// can't be used without js so implement there
.gem-c-cookie-banner .gem-c-button {
display: none;
}
.gem-c-cookie-banner__confirmation {
display: none;
position: relative;
padding: govuk-spacing(1);
// This element is focused using JavaScript so that it's being read out by screen readers
// for this reason we don't want to show the default outline or emphasise it visually using `govuk-focused-text`
&:focus {
outline: none;
}
}
.gem-c-cookie-banner__confirmation-message,
.gem-c-cookie-banner__hide-button {
display: block;
@include govuk-media-query($from: desktop) {
display: inline-block;
}
}
.gem-c-cookie-banner__confirmation-message {
margin-right: govuk-spacing(4);
@include govuk-media-query($from: desktop) {
max-width: 90%;
margin-bottom: 0;
}
}
// Override style from design system so we can have consistent
// padding on the the banner and the confirmation
.govuk-cookie-banner {
padding-top: 0;
}
// Override the styles from govuk_template
// stylelint-disable selector-max-id
.gem-c-cookie-banner#global-cookie-message {
background-color: $govuk-cookie-banner-background;
padding: govuk-spacing(3) 0 0 0;
box-sizing: border-box;
.gem-c-cookie-banner__message,
.gem-c-cookie-banner__buttons,
.gem-c-cookie-banner__confirmation,
.gem-c-cookie-banner__confirmation-message {
@include govuk-font($size: 19);
}
p {
@include govuk-font($size: 19);
margin: 0 0 govuk-spacing(2) 0;
}
.gem-c-cookie-banner__message,
.gem-c-cookie-banner__confirmation {
margin-bottom: - govuk-spacing(2);
}
}
Version data entries
150 entries across 150 versions & 1 rubygems