diff --git a/app/frontend/styles/_feedback.scss b/app/frontend/styles/_feedback.scss new file mode 100644 index 000000000..7e1d75c8c --- /dev/null +++ b/app/frontend/styles/_feedback.scss @@ -0,0 +1,122 @@ +.gem-c-feedback { + background: govuk-colour("white"); + margin-top: govuk-spacing(6); + + @include govuk-media-query($from: desktop) { + margin-top: govuk-spacing(9); + } + + // New design has the box flush with edges of smaller screens + // We need to compensate for `govuk-width-container` margins: + @include govuk-media-query($until: tablet) { + margin-right: govuk-spacing(-3); + margin-left: govuk-spacing(-3); + } + @include govuk-media-query($from: tablet, $until: desktop) { + margin-right: govuk-spacing(-6); + margin-left: govuk-spacing(-6); + } + // Scoped to the feedback component temporarily + [hidden] { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } +} + +.gem-c-feedback__prompt { + background-color: govuk-colour("light-grey"); + color: govuk-colour("black"); + border-top: 1px solid $govuk-border-colour; + outline: 0; +} + +.gem-c-feedback__prompt-content { + display: flex; + flex-direction: column; + padding: 0 govuk-spacing(3); + @include govuk-media-query($from: tablet) { + flex-direction: row; + align-items: center; + justify-content: space-between; + } +} + +.gem-c-feedback__prompt-questions { + text-align: left; + padding: govuk-spacing(4) 0; + @include govuk-media-query($from: tablet) { + margin: 0 govuk-spacing(3); + } +} + +.gem-c-feedback__prompt-question-answer { + display: flex; + align-items: center; + @include govuk-media-query($until: mobile) { + justify-content: center; + flex-wrap: wrap; + } +} + +.gem-c-feedback__prompt-question { + @include govuk-font(19, $weight: bold); + @include govuk-media-query($from: tablet) { + @include govuk-font(16, $weight: bold); + } + + margin: 0; + padding-bottom: govuk-spacing(2); + + &:focus { + outline: 0; + } + @include govuk-media-query($from: mobile) { + padding-bottom: 0; + margin-right: govuk-spacing(2); + } +} + +.gem-c-feedback__prompt-link { + @include govuk-font(19); + background: transparent; + color: govuk-colour("black"); + box-shadow: 0 3px 0 govuk-colour("black"); + border: 1px govuk-colour("black") solid; + margin-bottom: 0; + width: 100%; + + &:hover { + // backup style for browsers that don't support rgba + background: govuk-colour("mid-grey"); + background: rgba(govuk-colour("black"), .2); + color: govuk-colour("black"); + } + + &:active:focus:not(:hover) { + background: govuk-colour("yellow"); + } + @include govuk-media-query($from: tablet) { + @include govuk-font(16); + } + + position: relative; + + &:focus:not(:active):not(:hover) { + border-color: govuk-colour("black"); + } + + &:focus, + &:active { + color: $govuk-focus-text-colour; + } +} + +.gem-c-feedback__prompt-link:link, +.gem-c-feedback__prompt-link:visited { + color: govuk-colour("black"); + + &:focus, + &:active { + color: $govuk-focus-text-colour; + } +} diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss index e862aec23..93d6dd99a 100644 --- a/app/frontend/styles/application.scss +++ b/app/frontend/styles/application.scss @@ -26,6 +26,7 @@ $govuk-breakpoints: ( @import "button"; @import "card"; @import "document-list"; +@import "feedback"; @import "filter"; @import "filter-layout"; @import "header"; @@ -68,3 +69,7 @@ $govuk-breakpoints: ( width: 100%; } } + +.govuk-footer { + border-top: govuk-spacing(2) solid $govuk-brand-colour; +} diff --git a/app/views/layouts/_feedback.html.erb b/app/views/layouts/_feedback.html.erb new file mode 100644 index 000000000..053414ced --- /dev/null +++ b/app/views/layouts/_feedback.html.erb @@ -0,0 +1,20 @@ +