Paul Robert Lloyd
3 years ago
8 changed files with 72 additions and 109 deletions
@ -1,69 +1,69 @@
|
||||
.app-primary-navigation { |
||||
@include govuk-font(19, $weight: bold); |
||||
background-color: govuk-colour("light-grey"); |
||||
border-bottom: 1px solid $govuk-border-colour; |
||||
@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; |
||||
} |
||||
|
||||
.govuk-phase-banner + .app-primary-navigation { |
||||
margin-top: -1px; |
||||
|
||||
&:active { |
||||
border-bottom-color: $govuk-link-active-colour; |
||||
} |
||||
|
||||
.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--align-right { |
||||
@include govuk-media-query($from: tablet) { |
||||
float: right; |
||||
} |
||||
|
||||
.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__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 { |
||||
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; |
||||
} |
||||
} |
||||
|
||||
.app-primary-navigation__item--current .app-primary-navigation__link:hover { |
||||
text-decoration: none; |
||||
} |
||||
|
Loading…
Reference in new issue