From 2446917c891957ced0858a10dbc7cc7bbf760817 Mon Sep 17 00:00:00 2001 From: Tom Doughty Date: Mon, 28 Oct 2019 15:18:15 +0000 Subject: [PATCH 1/6] Phase 2 UI --- src/_cookie-banner.scss | 103 +++++++++++++++++++++++++++++++++++----- src/banner.html | 23 ++++----- src/style.scss | 2 - 3 files changed, 101 insertions(+), 27 deletions(-) diff --git a/src/_cookie-banner.scss b/src/_cookie-banner.scss index a486afc..21824ca 100644 --- a/src/_cookie-banner.scss +++ b/src/_cookie-banner.scss @@ -2,24 +2,103 @@ background: white; position: relative; box-shadow: 0 0 4px 0 $color_nhsuk-black; - padding: 24px 0 24px 0; + padding: 24px 0 19px; width: 100%; z-index: 1; +} + +h4 { + @include nhsuk-typography-responsive(22); + display: block; + font-weight: $nhsuk-font-bold; + margin-top: 0; + @include nhsuk-responsive-margin(4, 'bottom'); +} + +p { + @include nhsuk-typography-responsive(19); + display: block; + margin-top: 0; + @include nhsuk-responsive-margin(4, 'bottom'); + color: inherit; +} + +$button-shadow-size: 4px; + +button { + @include nhsuk-font(19); + @include nhsuk-focusable; + @include nhsuk-responsive-margin(2, 'bottom', $adjustment: $button-shadow-size); // s1 + + -webkit-appearance: none; + background-color: $nhsuk-button-colour; + border: $nhsuk-border-width-form-element solid transparent; + border-radius: 4px; + box-shadow: 0 $button-shadow-size 0 $nhsuk-button-shadow-colour; // s0 + box-sizing: border-box; + color: $nhsuk-button-text-colour; + cursor: pointer; + display: inline-block; + font-weight: 600; + margin-top: 0; + padding: 12px nhsuk-spacing(3); // s2 + position: relative; + text-align: center; + vertical-align: top; + width: auto; + font-family: inherit; + + @include mq($until: tablet) { + padding: nhsuk-spacing(2) nhsuk-spacing(3); // s2 + } - ul { - list-style: none; + /* 2 */ + &:link, + &:visited, + &:active, + &:hover { + color: $nhsuk-button-text-colour; + text-decoration: none; + } + + /* 3 */ + &::-moz-focus-inner { + border: 0; padding: 0; - margin: 8px 0 0 0; + } + + &:hover, + &:focus { + background-color: $nhsuk-button-hover-colour; + } - li { - display: block; - } + &:active { + box-shadow: none; + top: $button-shadow-size; } - @include mq($from: desktop) { - ul li { - display: inline; - margin-right: 20px; - } + /* 4 */ + &::before { + background: transparent; + bottom: -($nhsuk-border-width-form-element + $button-shadow-size); + content: ''; + display: block; + left: -$nhsuk-border-width-form-element; + position: absolute; + right: -$nhsuk-border-width-form-element; + top: -$nhsuk-border-width-form-element; + } +} + +ul, li { + list-style: none; + padding: 0; + margin: 0; +} + +@include mq($from: desktop) { + li { + display: inline; + margin-right: 20px; } } diff --git a/src/banner.html b/src/banner.html index d18906a..70efde7 100644 --- a/src/banner.html +++ b/src/banner.html @@ -1,23 +1,20 @@