0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-13 01:08:58 +01:00
Bootstrap/site/assets/scss/_toc.scss
Mark Otto 9dd42e1a07
Attempt to fix focus ring being cut off in table of contents (#37965)
* Attempt to fix focus ring being cut off in table of contents

* Update _toc.scss

---------

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
2023-02-14 08:58:08 -08:00

94 lines
1.8 KiB
SCSS

// stylelint-disable selector-max-type, selector-no-qualifying-type
.bd-toc {
@include media-breakpoint-up(lg) {
position: sticky;
top: 5rem;
right: 0;
z-index: 2;
height: subtract(100vh, 7rem);
overflow-y: auto;
}
nav {
@include font-size(.875rem);
ul {
padding-left: 0;
margin-bottom: 0;
list-style: none;
ul {
padding-left: 1rem;
}
}
a {
display: block;
padding: .125rem 0 .125rem .75rem;
color: inherit;
text-decoration: none;
border-left: .125rem solid transparent;
&:hover,
&.active {
color: var(--bd-toc-color);
border-left-color: var(--bd-toc-color);
}
&.active {
font-weight: 500;
}
code {
font: inherit;
}
}
}
}
.bd-toc-toggle {
display: flex;
align-items: center;
@include media-breakpoint-down(sm) {
justify-content: space-between;
width: 100%;
}
@include media-breakpoint-down(md) {
color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
@include border-radius(var(--bs-border-radius));
&:hover,
&:focus,
&:active,
&[aria-expanded="true"] {
color: var(--bd-violet);
background-color: var(--bs-body-bg);
border-color: var(--bd-violet);
}
&:focus,
&[aria-expanded="true"] {
box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
}
}
}
.bd-toc-collapse {
@include media-breakpoint-down(md) {
nav {
padding: 1.25rem 1.25rem 1.25rem 1rem;
background-color: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
@include border-radius(var(--bs-border-radius));
}
}
@include media-breakpoint-up(md) {
display: block !important; // stylelint-disable-line declaration-no-important
}
}