mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-01 04:09:46 -04:00
c8f0664bf7
We want it to be very clear whether you’re in live or training mode because: - you may be switching back and forth between them - doing something in live mode when you think you’re in training mode would have… consequences By adding a label next to the service name you’ll will have some indication, on every page, which mode you are in. Style of the label is based on the ‘Tag’ component from the Design System: https://design-system.service.gov.uk/components/tag/#showing-multiple-statuses
213 lines
4.0 KiB
SCSS
213 lines
4.0 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;
|
|
}
|
|
|
|
&--live {
|
|
// This uses new Design System colours to match .govuk-tag--red
|
|
background: #F6D7D2;
|
|
color: #942514;
|
|
box-shadow: 0 -3px 0 0 #F6D7D2;
|
|
}
|
|
|
|
}
|
|
|
|
&-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;
|
|
}
|
|
|
|
&__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;
|
|
}
|
|
}
|
|
}
|