@include screen {
.toc {
@include core-16;
padding: $gutter-half;
ul {
list-style: none;
padding: 0;
margin: 0;
}
&__close {
display: none;
}
a:link, a:visited {
text-decoration: none;
color: $link-colour;
}
a:hover {
text-decoration: underline;
}
&__list {
a:link, a:visited {
display: block;
padding: 8px $gutter-half;
margin: 0 $gutter-half * -1;
border-left: 5px solid transparent;
@include media(tablet) {
&.toc-link--in-view {
color: $link-active-colour;
border-left-color: $link-active-colour;
background-color: $grey-4;
}
}
}
// Top level
> ul > li > a:link {
@include bold-19;
}
@include media(tablet) {
// Level 2
> ul > li > ul {
margin-bottom: 20px;
}
// Level 3
li li li {
a:link, a:visited {
padding-left: $gutter-half * 2;
}
}
// Level 4
li li li li {
a:link, a:visited {
padding-left: $gutter-half * 4;
}
}
// Level 5
li li li li li {
a:link, a:visited {
padding-left: $gutter-half * 5;
}
}
// Level 6
li li li li li li {
a:link, a:visited {
padding-left: $gutter-half * 6;
}
}
}
}
}
.toc-show {
display: none;
}
@include media(tablet) {
.toc {
padding: 22px $gutter $gutter-half;
}
// Prevent the fixedsticky spacer from appearing if the browser is resized
// from mobile to desktop.
.fixedsticky-on + .fixedsticky-dummy {
display: none !important;
}
}
@include media(mobile) {
.js {
.toc {
display: none;
// Hide third level nav and below on mobile
li li li {
display: none;
}
}
.toc-show {
display: block;
position: sticky;
top: 0;
box-sizing: border-box;
width: 100%;
z-index: 10;
&__label {
display: block;
position: relative;
z-index: 10;
padding: $gutter-half $gutter-half 10px;
background: $grey-4;
@supports(backdrop-filter: blur(2px)) {
background: transparentize($grey-4, 0.05);
backdrop-filter: blur(2px);
}
border-bottom: 1px solid $grey-2;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
color: $text-colour;
text-decoration: none;
}
&__icon {
width: 20px;
height: 20px;
float: right;
background-image: file-url('govuk-icn-numbered-list.png');
background-repeat: no-repeat;
background-position: left center;
@include device-pixel-ratio {
background-image: file-url('govuk-icn-numbered-list@2x.png');
background-size: 20px 20px;
}
}
}
.toc__list {
margin-right: $gutter * 1.5;
}
.toc__close {
display: block;
position: sticky;
right: 0;
top: 0;
float: right;
width: 20px;
height: 20px;
background-image: file-url('govuk-icn-close.png');
background-repeat: no-repeat;
background-position: left center;
@include device-pixel-ratio {
background-image: file-url('govuk-icn-close@2x.png');
background-size: 20px 20px;
}
}
/* Applied to <html> */
&.toc-open {
overflow: hidden;
body {
height: 100%;
overflow: hidden;
pointer-events: none;
}
.toc-show {
visibility: hidden;
}
.toc {
display: block;
pointer-events: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
background: $white;
@supports(backdrop-filter: blur(2px)) {
background: transparentize($white, 0.05);
backdrop-filter: blur(2px);
}
}
}
}
}
}
@include print {
.toc {
display: none;
}
}