darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-19 14:09:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improvements based on frontend feedback

Browse Source 
Paired with @aliuk2012 on the implementation and
with a view to making the component generic enough
to be used on digital marketplace apps as well.
These changes came from that session.

They include:
- removal of an unused `data-accept-cookies`
  attribute
- removal of `govuk-!-padding-top-4` class and
  moving of associated styles into component CSS
- swapping out the `aria-label` on the parent
  element for an `aria-describedby` linked to the
  h2 to have one thing labelling the banner region
- removal of unused CSS and any already provided
  by the govuk-button class
- inclusion of @import's for styles attached to
  govuk-body and govuk-button classes
This commit is contained in:
Tom Byers
2020-01-06 16:52:03 +00:00
parent 9a0d522964
commit 3e8ed578d0
2 changed files with 16 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,12 +2,13 @@
// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
// sass-lint:disable mixins-before-declarations
.notify-cookie-banner__with-js {
display: none;
}
// component uses .govuk-body and .govuk-button classes from govuk-frontend
@import 'core/typography';
@import 'components/button/_button';
.notify-cookie-banner__no-js {
display: block;
.notify-cookie-banner__wrapper {
@include govuk-responsive-padding(4, "top");
@include govuk-responsive-padding(4, "bottom");
}
.notify-cookie-banner__with-js {
@@ -125,29 +126,16 @@
// GOV.UK Publishing components button styles (inherits from GOV.UK Frontend button)
// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_button.scss
.notify-cookie-banner-button--inline {
display: block;
width: 100%;
.notify-cookie-banner-button {
margin-bottom: govuk-spacing(1);
vertical-align: top;
@include govuk-media-query($from: desktop) {
display: inline-block;
width: auto;
vertical-align: baseline;
margin-right: govuk-spacing(2);
}
}
.notify-cookie-banner-button--secondary {
padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2); // s1
box-shadow: none;
&:before {
content: none;
}
}
// Additions
// Override margin-bottom, inherited from using .govuk-body class