Skip to content

Instantly share code, notes, and snippets.

@charge-valtech
Created Mar 9, 2019
Embed
What would you like to do?
Some styles for the feedback page
.guidance-layout {
.govuk-back-link {
margin-bottom: 0;
}
}
.guidance-container {
background: govuk-colour(blue);
color: govuk-colour(white);
padding: govuk-spacing(6);
h1, h2, h3, p, ul, legend, label {
color: govuk-colour(white);
max-width: 40rem;
.wide-screen-true & {
max-width: 50rem;
}
}
a, a:visited, a:link {
color: white;
&:hover {
color: darken(white, 10%);
}
}
p.govuk-body, label, li {
@include govuk-font(24);
}
.middle-start-page {
p.govuk-body, label, li {
@include govuk-font(19);
}
}
a.govuk-button, .govuk-button {
background-color: govuk-colour(white);
color: govuk-colour(blue);
box-shadow: darken(govuk-colour(blue), 20%) 0px 2px 0px 0px;
&:focus, &:hover {
background-color: darken(govuk-colour(white), 5%);
color: govuk-colour(blue);
}
}
img {
@include mq($until: tablet) {
margin-bottom: govuk-spacing(6);
}
}
.image-with-margin {
margin-bottom: govuk-spacing(6);
}
.guidance-pull-button {
@include mq($from: tablet) {
margin-top: -45px;
}
}
.svg-container {
margin-bottom: govuk-spacing(3);
@include mq($from: tablet) {
margin-bottom: 0;
}
}
}
.guidance-numbered-steps {
@include govuk-font(24);
li {
margin-bottom: govuk-spacing(2);
}
}
.guidance-titles-wrapper {
@include govuk-clearfix;
}
.guidance-page-title-wrapper {
@include mq($from: tablet) {
float: left;
width: 60%;
}
}
.guidance-title-wrapper {
@include mq($from: tablet) {
float: right;
text-align: right;
width: 40%;
}
margin-bottom: govuk-spacing(6);
}
.guidance-title {
@include govuk-font(19, $weight: bold);
margin-bottom: 0;
}
.guidance-step-count {
@include govuk-font(19);
display: block;
}
.photo-guidance-images-with-results {
list-style: none;
margin: 0; padding: 0;
margin-bottom: govuk-spacing(6);
img {
margin: 0;
}
li {
display: inline-block;
margin-right: 5px;
position: relative;
.result {
background: govuk-colour(white);
bottom: 0;
color: govuk-colour(black);
position: absolute;
width: 100%;
p {
@include govuk-font(16);
color: govuk-colour(black);
}
}
}
.result {
.failed, .approved {
margin: 0;
padding: 8px 28px 5px 8px;
background-repeat: no-repeat;
background-position: right 7px center;
background-size: 18px;
@include mq($from: tablet) {
padding-top: 11px;
padding-right: 34px;
padding-bottom: 8px;
background-size: 22px;
}
}
.approved {
background-image: url(../images/icon-thick-tick.svg);
}
.failed {
background-image: url(../images/icon-thick-cross.svg);
}
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spinner-container {
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
width: 40px;
height: 40px;
}
.loading-container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 150px;
margin-top: 50px;
svg {
width: 40px;
height: 40px;
path {
fill: white;
}
}
}
.feedback-countdown-container {
display: flex;
justify-content: space-between;
p {
margin-bottom: 0;
}
.countdown-container {
display: flex;
justify-content: center;
}
.countdown-visual {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
width: 40px;
}
.pause-button, .play-button {
margin-right: 15px;
svg {
width: 30px;
height: 30px;
}
path {
fill: white;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment