mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-19 14:09:20 -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).
204 lines
3.7 KiB
SCSS
204 lines
3.7 KiB
SCSS
.navigation {
|
|
|
|
@include govuk-font($size: 19);
|
|
padding: 0 govuk-spacing(6) 0 0;
|
|
|
|
$padding-top: 14px;
|
|
$padding-bottom: 11px;
|
|
|
|
&-service-name,
|
|
&-organisation-link {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
// aligning to the baseline with overflow: hidden adds to the parent's height
|
|
// aligning to the top doesn't
|
|
// see: https://stackoverflow.com/questions/23529369/why-does-x-overflowhidden-cause-extra-space-below#answer-51088033
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&-service-type {
|
|
|
|
&--training {
|
|
@include bold-16;
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-left: govuk-spacing(2);
|
|
padding: 0 govuk-spacing(1);
|
|
background: $grey-3;
|
|
color: mix($grey-1, $text-colour);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
box-shadow: 0 -3px 0 0 $grey-3;
|
|
}
|
|
|
|
}
|
|
|
|
&-service-switch,
|
|
&-service-back-to,
|
|
&-organisation-link {
|
|
|
|
&:link,
|
|
&:visited {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
}
|
|
|
|
&-service {
|
|
|
|
@include govuk-font($size: 19);
|
|
border-bottom: 1px solid $border-colour;
|
|
margin: 0 0 10px;
|
|
position: relative;
|
|
|
|
&-name {
|
|
|
|
padding: $padding-top 0 $padding-bottom 0;
|
|
max-width: 50%;
|
|
|
|
}
|
|
|
|
&-switch {
|
|
|
|
text-align: right;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: $padding-top 0 $padding-bottom govuk-spacing(3);
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-bottom: 1px solid $yellow;
|
|
border-left: 10px solid $yellow;
|
|
border-right: 3px solid $yellow;
|
|
right: -3px;
|
|
}
|
|
|
|
}
|
|
|
|
&-back-to {
|
|
|
|
padding: $padding-top govuk-spacing(3) $padding-bottom 0;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-organisation-link {
|
|
|
|
max-width: 25%;
|
|
padding: $padding-top 20px $padding-bottom 0;
|
|
margin-right: 5px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: -1px;
|
|
bottom: 1px;
|
|
right: 7px;
|
|
width: 7px;
|
|
height: 7px;
|
|
margin: auto 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
border: solid;
|
|
border-width: 1px 1px 0 0;
|
|
border-color: $secondary-text-colour;
|
|
}
|
|
|
|
// hack to make the focus style fit in the navigation bar
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour;
|
|
}
|
|
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
a {
|
|
|
|
display: block;
|
|
padding: 5px 0;
|
|
position: relative;
|
|
top: 5px;
|
|
|
|
&:link,
|
|
&:visited {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&.selected {
|
|
@include bold-19;
|
|
position: relative;
|
|
// These two lines stop the width of the item jumping so much
|
|
// between selected and unselected states
|
|
left: -0.5px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// https://github.com/alphagov/product-page-example/blob/master/source/stylesheets/modules/_sub-navigation.scss
|
|
.sub-navigation {
|
|
@include media(tablet) {
|
|
margin-top: govuk-spacing(6) * 1.5;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
&__item {
|
|
@include core-16;
|
|
|
|
border-bottom: 1px $grey-3 solid;
|
|
display: block;
|
|
padding: govuk-spacing(2) 0;
|
|
|
|
a:link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover,
|
|
a:active {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ol ol & {
|
|
padding-left: govuk-spacing(6);
|
|
}
|
|
}
|
|
|
|
&__item--active {
|
|
@include bold-16;
|
|
|
|
a:link, a:visited {
|
|
color: $text-colour;
|
|
}
|
|
}
|
|
}
|