mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-05 14:00:51 -04:00
0560066638
We write our Sass to be mobile-first, meaning we
declare the value for a property (for mobile) and
then add all other variations (for other
viewports) afterwards.
Because of this, we need mixins that produce media
queries to be able to follow declarations.
This extension to the rule is also hinted at as
good practice in the docs:
7847511b61/docs/rules/mixins-before-declarations.md
123 lines
2.8 KiB
SCSS
123 lines
2.8 KiB
SCSS
// GOV.UK Publishing components cookie banner styles
|
|
// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
|
|
|
|
// component uses .govuk-body and .govuk-button classes from govuk-frontend
|
|
@import 'core/typography';
|
|
@import 'components/button/_button';
|
|
|
|
.notify-cookie-banner__wrapper {
|
|
@include govuk-responsive-padding(4, "top");
|
|
@include govuk-responsive-padding(5, "bottom");
|
|
}
|
|
|
|
// component should only be shown if JS is available, by the cookieMessage JS, so hide by default
|
|
.notify-cookie-banner {
|
|
display: none;
|
|
}
|
|
|
|
.notify-cookie-banner__buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
|
|
.notify-cookie-banner__button,
|
|
.notify-cookie-banner__link {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.notify-cookie-banner__button {
|
|
display: inline-block;
|
|
flex: 1 0;
|
|
padding-left: govuk-spacing(9);
|
|
padding-right: govuk-spacing(9);
|
|
margin-bottom: govuk-spacing(2);
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
flex: 0 0 150px;
|
|
padding-left: govuk-spacing(2);
|
|
padding-right: govuk-spacing(2);
|
|
margin-bottom: govuk-spacing(1);
|
|
}
|
|
}
|
|
|
|
.notify-cookie-banner__button-accept {
|
|
margin-right: govuk-spacing(4);
|
|
}
|
|
|
|
.notify-cookie-banner__link {
|
|
@include govuk-font(19);
|
|
line-height: 1;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 9px 0px 6px;
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
display: inline;
|
|
width: auto;
|
|
margin-left: govuk-spacing(6);
|
|
}
|
|
}
|
|
|
|
.notify-cookie-banner__confirmation {
|
|
display: none;
|
|
position: relative;
|
|
padding: govuk-spacing(4) 0;
|
|
|
|
@include govuk-media-query($from: desktop) {
|
|
padding: govuk-spacing(4);
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
.notify-cookie-banner__confirmation-message,
|
|
.notify-cookie-banner__hide-button {
|
|
display: block;
|
|
|
|
@include govuk-media-query($from: desktop) {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.notify-cookie-banner__confirmation-message {
|
|
margin-right: govuk-spacing(4);
|
|
|
|
@include govuk-media-query($from: desktop) {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
.notify-cookie-banner__hide-button {
|
|
@include govuk-font($size: 19);
|
|
color: $govuk-link-colour;
|
|
outline: 0;
|
|
border: 0;
|
|
background: none;
|
|
text-decoration: underline;
|
|
padding: govuk-spacing(0);
|
|
margin-top: govuk-spacing(2);
|
|
right: govuk-spacing(3);
|
|
cursor: pointer;
|
|
|
|
@include govuk-media-query($from: desktop) {
|
|
margin-top: govuk-spacing(0);
|
|
position: absolute;
|
|
right: govuk-spacing(4);
|
|
}
|
|
}
|
|
|
|
// Additions
|
|
|
|
// Override margin-bottom, inherited from using .govuk-body class
|
|
.notify-cookie-banner__confirmation-message {
|
|
margin-bottom: 0;
|
|
}
|