0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/assets/scss/_sidebar.scss

167 lines
2.6 KiB
SCSS

// scss-lint:disable VendorPrefix
//
// Right side table of contents
//
.bd-toc {
@supports (position: sticky) {
position: sticky;
top: 4rem;
max-height: calc(100vh - 4rem);
}
order: 2;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
overflow-x: visible;
font-size: .875rem;
}
.section-nav {
padding-left: 0;
border-left: 1px solid #eee;
ul {
padding-left: 1rem;
ul {
display: none;
}
}
}
.toc-entry {
display: block;
a {
display: block;
padding: .125rem 1.5rem;
color: #99979c;
&:hover {
color: $brand-primary;
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;
max-height: calc(100vh - 4rem);
}
border-right: 1px solid rgba(0,0,0,.1);
}
@include media-breakpoint-up(xl) {
max-width: 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 - 9rem);
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-dark;
}
.bd-sidenav {
display: none;
}
.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: 500;
color: rgba(0,0,0,.85);
background-color: transparent;
}