mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-14 23:08:07 -04:00
2d36ec8214
Was just in one of those meetings where it felt like writing this would take less time than I’d already spent talking about its relative priority… --- In the admin app you can already set the broadcast channel as 'test', 'severe' or 'government'. Aim: - Add the 'operator' channel to the list of channels you can pick for the admin app broadcast services Note: - The API already supports this - https://github.com/alphagov/notifications-api/pull/3262 - The CBC proxy does not yet support the operator channel and this will need a separate card. That card has not yet been written because the interface has not been agreed between us and the MNOs yet. - Will need to have the ability to select the operator channel for just a single MNO like we do for the other channels - If we add this, we shouldn't actually start using it until the MNO in question gives us the go ahead. --- https://www.pivotaltracker.com/story/show/178485177
236 lines
4.4 KiB
SCSS
236 lines
4.4 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 {
|
|
|
|
@include bold-16;
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-left: govuk-spacing(2);
|
|
padding: 0 govuk-spacing(1);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
|
|
&--training {
|
|
background: $grey-3;
|
|
color: mix($grey-1, $text-colour);
|
|
box-shadow: 0 -3px 0 0 $grey-3;
|
|
}
|
|
|
|
&--suspended {
|
|
background: $grey-3;
|
|
color: mix($grey-1, $text-colour);
|
|
box-shadow: 0 -3px 0 0 $grey-3;
|
|
}
|
|
|
|
&--live, &--test, &--operator {
|
|
// This uses new Design System colours to match .govuk-tag--red
|
|
background: #F6D7D2;
|
|
color: #942514;
|
|
box-shadow: 0 -3px 0 0 #F6D7D2;
|
|
}
|
|
|
|
&--government {
|
|
background: #942514;
|
|
color: #F6D7D2;
|
|
box-shadow: 0 -3px 0 0 #942514;
|
|
}
|
|
|
|
}
|
|
|
|
&-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 {
|
|
padding: $padding-top 0px $padding-bottom + 1px govuk-spacing(3) + 10;
|
|
/* override default focus style to inset bottom underline */
|
|
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
&-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: 2px;
|
|
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;
|
|
}
|
|
|
|
&:focus:before {
|
|
border-color: $govuk-focus-text-colour;
|
|
}
|
|
|
|
// hack to make the focus style fit in the navigation bar
|
|
&:focus {
|
|
box-shadow: inset 0 -3px $govuk-focus-text-colour, 0 1px $govuk-focus-text-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;
|
|
|
|
ol,
|
|
ul {
|
|
margin-top: govuk-spacing(2);
|
|
border-top: 1px $grey-3 solid;
|
|
}
|
|
}
|
|
|
|
&__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);
|
|
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__item--active {
|
|
@include bold-16;
|
|
|
|
a:link, a:visited {
|
|
color: $text-colour;
|
|
}
|
|
}
|
|
}
|