0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-05 17:24:20 +01:00
Bootstrap/site/assets/scss/_toc.scss
GeoSot a9810ece61
Use scrollspy on docs pages (#33428)
* use scrollspy on docs pages

* Update colors by taking into account new dark mode

* Restyle it

* Update colors once more

* Fix some color contrast issues

Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-12-29 12:11:01 -08:00

100 lines
1.9 KiB
SCSS

// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-compound-selectors
.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;
margin-left: -.75rem;
list-style: none;
ul {
padding-left: 1rem;
margin-left: -1rem;
a {
padding-left: 1.375rem;
}
}
}
a {
display: block;
padding: .125rem 0 .125rem .625rem;
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;
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
}
}