You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.6 KiB
69 lines
1.6 KiB
3 years ago
|
.app-primary-navigation {
|
||
|
|
@include govuk-font(19, $weight: bold);
|
||
|
|
background-color: govuk-colour("light-grey");
|
||
|
|
border-bottom: 1px solid $govuk-border-colour;
|
||
|
|
}
|
||
|
|
|
||
|
|
.govuk-phase-banner + .app-primary-navigation {
|
||
|
|
margin-top: -1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-primary-navigation__list {
|
||
|
|
@include govuk-clearfix;
|
||
|
|
left: govuk-spacing(-3);
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
position: relative;
|
||
|
|
right: govuk-spacing(-3);
|
||
|
|
width: calc(100% + #{govuk-spacing(6)});
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-primary-navigation__item {
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: block;
|
||
|
|
float: left;
|
||
|
|
line-height: 50px;
|
||
|
|
height: 50px;
|
||
|
|
padding: 0 govuk-spacing(3);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-primary-navigation__item--current {
|
||
|
|
border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
border-bottom-color: $govuk-link-hover-colour;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
border-bottom-color: $govuk-link-active-colour;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-primary-navigation__item--align-right {
|
||
|
|
@include govuk-media-query($from: tablet) {
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-primary-navigation__link {
|
||
|
|
@include govuk-link-common;
|
||
|
|
@include govuk-link-style-no-visited-state;
|
||
|
|
@include govuk-link-style-no-underline;
|
||
|
|
@include govuk-typography-weight-bold;
|
||
|
|
|
||
|
|
// Extend the touch area of the link to the list
|
||
|
|
&:after {
|
||
|
|
bottom: 0;
|
||
|
|
content: "";
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-primary-navigation__item--current .app-primary-navigation__link:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|