// stylelint-disable declaration-no-important // // Right side table of contents // .bd-toc { @supports (position: sticky) { position: sticky; top: 4rem; height: calc(100vh - 4rem); overflow-y: auto; } order: 2; padding-top: 1.5rem; padding-bottom: 1.5rem; font-size: .875rem; } .section-nav { padding-left: 0; border-left: 1px solid #eee; ul { padding-left: 1rem; ul { display: none; } } } .toc-entry { display: block; margin-bottom: 0.5em; a { display: block; padding: .125rem 1.5rem; color: #99979c; &:hover { color: $blue; text-decoration: none; } } } // // Left side navigation // .bd-sidebar { order: 0; // background-color: #f5f2f9; border-bottom: 1px solid rgba(0, 0, 0, .1); @include media-breakpoint-up(md) { @supports (position: sticky) { position: sticky; top: 4rem; z-index: 1000; height: calc(100vh - 4rem); } border-right: 1px solid rgba(0, 0, 0, .1); } @include media-breakpoint-up(xl) { flex: 0 1 320px; } } .bd-links { padding-top: 1rem; padding-bottom: 1rem; margin-right: -15px; margin-left: -15px; @include media-breakpoint-up(md) { @supports (position: sticky) { max-height: calc(100vh - 4rem); overflow-y: auto; } } // Override collapse behaviors @include media-breakpoint-up(md) { display: block !important; } } .bd-search { position: relative; // To contain the Algolia search padding: 1rem 15px; margin-right: -15px; margin-left: -15px; border-bottom: 1px solid rgba(0, 0, 0, .05); .form-control:focus { border-color: $bd-purple-bright; box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); } } .bd-search-docs-toggle { line-height: 1; color: $gray-900; } .bd-sidenav { display: block; margin-left:1em; } .bd-toc-link { display: block; padding: .25rem 1.5rem; font-weight: 500; color: rgba(0, 0, 0, .65); &:hover { color: rgba(0, 0, 0, .85); text-decoration: none; } } .bd-toc-item { &.active { margin-bottom: 1rem; &:not(:first-child) { margin-top: 1rem; } > .bd-toc-link { color: rgba(0, 0, 0, .85); &:hover { background-color: transparent; } } > .bd-sidenav { display: block; } } } // All levels of nav .bd-sidebar .nav > li > a { display: block; padding: .25rem 1.5rem; font-size: 90%; color: rgba(0, 0, 0, .65); } .bd-sidebar .nav > li > a:hover { color: rgba(0, 0, 0, .85); text-decoration: none; background-color: transparent; } .bd-sidebar .nav > .active > a, .bd-sidebar .nav > .active:hover > a { font-weight: 600; color: rgba(0, 0, 0, .85); background-color: transparent; }