mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-05 22:10:44 -04:00
8578e64cc9
We’ve shown the broadcast tour to a few users now. We’ve learned what concepts about broadcasting are and aren’t getting through. So what we’re emphasising here is: - the thing that appears on the phone (the ‘emergency alert’) not the technology (a ‘broadcast’) - how it’s different to other channels of messaging, eg text We’ve generally spent a lot more time on the content and illustrations this time around, so overall it’s should be clearer and shorter. This also expands the communication of training mode into the header, so it’s visible on every page (we can add another one for ‘live’ services later on).
217 lines
3.8 KiB
SCSS
217 lines
3.8 KiB
SCSS
%banner,
|
|
.banner,
|
|
.banner-default {
|
|
|
|
@include bold-19;
|
|
color: $button-colour;
|
|
display: block;
|
|
padding: govuk-spacing(3);
|
|
margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
|
|
text-align: left;
|
|
position: relative;
|
|
clear: both;
|
|
border: 5px solid $button-colour;
|
|
|
|
&-title {
|
|
@include bold-24;
|
|
}
|
|
|
|
p {
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
.list-bullet {
|
|
@include copy-19;
|
|
}
|
|
|
|
.page-footer {
|
|
margin-bottom: govuk-spacing(1);
|
|
}
|
|
|
|
}
|
|
|
|
%banner-with-tick,
|
|
.banner-with-tick {
|
|
padding: govuk-spacing(3) (govuk-spacing(6) + govuk-spacing(3));
|
|
background-image: file-url('tick.png');
|
|
background-size: 19px;
|
|
background-repeat: no-repeat;
|
|
background-position: govuk-spacing(3) govuk-spacing(3);
|
|
|
|
}
|
|
|
|
.banner-default-with-tick {
|
|
@extend %banner;
|
|
@extend %banner-with-tick;
|
|
}
|
|
|
|
.banner-dangerous {
|
|
|
|
@extend %banner;
|
|
@include bold-19;
|
|
background: $white;
|
|
color: $text-colour;
|
|
border: 5px solid $error-colour;
|
|
margin: 15px 0;
|
|
text-align: left;
|
|
|
|
&:focus {
|
|
outline: 3px solid $yellow;
|
|
}
|
|
|
|
.list {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.banner-tour {
|
|
|
|
@extend %banner;
|
|
background: $govuk-blue;
|
|
color: $white;
|
|
margin-top: 10px;
|
|
margin-bottom: 0;
|
|
padding: govuk-spacing(6);
|
|
height: 425px;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 -1em 1.6em 0 rgba(0, 0, 0, 0.05);
|
|
border: 0;
|
|
|
|
&-no-fixed-height {
|
|
height: auto;
|
|
padding-top: govuk-spacing(8);
|
|
min-height: 425px;
|
|
}
|
|
|
|
&-with-service-name {
|
|
margin-top: -10px;
|
|
padding-top: 0;
|
|
box-shadow: 0 -1px 0 0 darken($govuk-blue, 10%);
|
|
}
|
|
|
|
.heading-medium {
|
|
@include core-24;
|
|
}
|
|
|
|
p {
|
|
|
|
margin-top: 0;
|
|
margin-bottom: govuk-spacing(6);
|
|
color: $white;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& + p {
|
|
margin-top: -1 * govuk-spacing(3);
|
|
}
|
|
|
|
}
|
|
|
|
ul {
|
|
@include core-24;
|
|
color: $white;
|
|
margin-bottom: govuk-spacing(5);
|
|
}
|
|
|
|
li {
|
|
margin-bottom: govuk-spacing(3);
|
|
list-style-type: disc;
|
|
margin-left: govuk-spacing(6);
|
|
}
|
|
|
|
a {
|
|
|
|
font-weight: bold;
|
|
display: block;
|
|
padding: 0 ;
|
|
margin: 0 0 govuk-spacing(6) 0;
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $white;
|
|
}
|
|
|
|
&:focus,
|
|
&:active {
|
|
color: $govuk-focus-text-colour;
|
|
outline: 10px solid $yellow;
|
|
}
|
|
|
|
&:hover {
|
|
color: $white;
|
|
background-color: $link-hover-colour;
|
|
outline: 10px solid $link-hover-colour;
|
|
}
|
|
|
|
}
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
top: -1 * govuk-spacing(2);
|
|
}
|
|
|
|
.greyed-out-step {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
}
|
|
|
|
.banner-dashboard {
|
|
|
|
$baseline-shift: 5px;
|
|
|
|
display: block; // for browsers that don't support flexbox
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
padding: (govuk-spacing(3) - 1px) 0 (govuk-spacing(3) + 1px) 0;
|
|
border-top: 1px solid $border-colour;
|
|
border-bottom: 1px solid $border-colour;
|
|
margin-bottom: govuk-spacing(6);
|
|
text-decoration: none;
|
|
|
|
&:focus {
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
&-count,
|
|
&-meta {
|
|
float: left; // for browsers that don't support flexbox
|
|
}
|
|
|
|
&-count {
|
|
@include govuk-font(36, $weight: bold, $tabular: true);
|
|
padding-right: 8px;
|
|
position: relative;
|
|
// remove the top of the extra line-height this introduces
|
|
top: $baseline-shift;
|
|
margin-top: -$baseline-shift;
|
|
flex: 0 1 0.85ch;
|
|
}
|
|
|
|
&-count-label {
|
|
@include govuk-font(24, $weight: bold);
|
|
text-decoration: underline;
|
|
padding-right: govuk-spacing(6);
|
|
margin: 10px 0px 5px; // 10px includes 5px extra to counter the -5px margin-top on the count item
|
|
flex: 2 1 auto;
|
|
}
|
|
|
|
&-meta {
|
|
@include govuk-font(19);
|
|
float: right;
|
|
text-align: right;
|
|
flex: initial;
|
|
}
|
|
|
|
& + .banner-dashboard {
|
|
margin-top: -1 * govuk-spacing(6);
|
|
border-top: none;
|
|
}
|
|
}
|