darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-10 19:34:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Change size and layout of cookie banner buttons

Browse Source
This commit is contained in:
Tom Byers
2020-01-09 16:21:12 +00:00
parent f8a51f0b3e
commit 24b65cf648
3 changed files with 27 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/stylesheets/components/cookie-message.scss
View File

@@ -31,36 +31,48 @@
}
.notify-cookie-banner__buttons {
@include govuk-clearfix;
display: flex;
flex-wrap: wrap;
@include govuk-media-query($from: tablet) {
display: inline-block;
flex-wrap: nowrap;
}
}
.notify-cookie-banner__button,
.notify-cookie-banner__link {
vertical-align: baseline;
}
.notify-cookie-banner__button {
float: left;
width: 50%;
box-sizing: border-box;
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) {
display: inline-block;
float: none;
width: auto;
flex: 0 0 150px;
padding-left: govuk-spacing(2);
padding-right: govuk-spacing(2);
margin-bottom: govuk-spacing(1);
}
}
.notify-cookie-banner__button-accept {
padding-right: govuk-spacing(4);
margin-right: govuk-spacing(4);
}
.notify-cookie-banner__link {
@include govuk-font(19);
line-height: 1;
display: block;
clear: both;
width: 100%;
padding: 9px 0px 6px;
@include govuk-media-query($from: tablet) {
display: inline-block;
display: inline;
width: auto;
margin-left: govuk-spacing(6);
}
}

9
app/assets/stylesheets/govuk-frontend/extensions.scss
View File

@@ -8,12 +8,3 @@
}
}
// Class to extend govuk-button to allow it to sit alongside other inline content
.govuk-button__inline {
vertical-align: top;
margin-bottom: 0;
@include govuk-media-query($from: tablet) {
vertical-align: baseline;
}
}

12
app/templates/components/cookie-banner.html
View File

@@ -5,16 +5,12 @@
<h2 class="notify-cookie-banner__heading govuk-heading-m" id="notify-cookie-banner__heading">Can we store analytics cookies on your device?</h2>
<p class="govuk-body">Analytics cookies help us understand how our website is being used.</p>
<div class="notify-cookie-banner__buttons">
<div class="notify-cookie-banner__button notify-cookie-banner__button-accept">
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">
<button class="govuk-button notify-cookie-banner__button notify-cookie-banner__button-accept" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">
Yes<span class="govuk-visually-hidden">, Notify can store analytics cookies on your device</span>
</button>
</div>
<div class="notify-cookie-banner__button notify-cookie-banner__button-reject">
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">
</button>
<button class="govuk-button notify-cookie-banner__button notify-cookie-banner__button-reject" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">
No<span class="govuk-visually-hidden">, Notify cannot store analytics cookies on your device</span>
</button>
</div>
</button>
<a class="govuk-link notify-cookie-banner__link" href="/cookies">How Notify uses cookies</a>
</div>
</div>