diff options
Diffstat (limited to 'site/static/docs/4.3/assets/scss/_sidebar.scss')
-rw-r--r-- | site/static/docs/4.3/assets/scss/_sidebar.scss | 151 |
1 files changed, 39 insertions, 112 deletions
diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss index 18782a9fd2..c18a42053b 100644 --- a/site/static/docs/4.3/assets/scss/_sidebar.scss +++ b/site/static/docs/4.3/assets/scss/_sidebar.scss @@ -1,91 +1,15 @@ // 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; - @include font-size(.875rem); -} - -// stylelint-disable selector-max-type, selector-max-combinators, selector-max-compound-selectors -.bd-toc nav { - padding-left: 0; - border-left: 1px solid #eee; - - > ul, - > ul > li > ul { - padding: 0; - } - - a code { - font: inherit; - } - - li { - display: block; - - ul li ul { - padding-left: 1rem; - } - - a { - display: block; - padding: .125rem 1.5rem; - color: #77757a; - - &:hover { - color: $blue; - text-decoration: none; - } - } - } -} -// stylelint-enable selector-max-type, selector-max-combinators, selector-max-compound-selectors - -// -// 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 - 9rem); - overflow-y: auto; + position: sticky; + top: 5rem; + z-index: 1000; } } @@ -97,10 +21,6 @@ .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; @@ -117,32 +37,35 @@ display: none; } -.bd-toc-link { - display: block; - padding: .25rem 1.5rem; +.bd-sidenav-group-link { + padding: .25rem .625rem .25rem .5rem; font-weight: 600; color: rgba(0, 0, 0, .65); + @include border-radius(.25rem); + + > * { pointer-events: none; } &:hover { color: rgba(0, 0, 0, .85); text-decoration: none; + background-color: rgba($bd-purple-bright, .1); } } -.bd-toc-item { - &.active { - margin-bottom: 1rem; +.bd-sidenav-group-link-icon { + width: .875rem; + margin-right: .25rem; + opacity: .5; +} - &:not(:first-child) { - margin-top: 1rem; +.bd-sidenav-group { + &.active { + .bd-sidenav-group-link-icon { + transform: rotate(90deg); } - > .bd-toc-link { + > .bd-sidenav-group-link { color: rgba(0, 0, 0, .85); - - &:hover { - background-color: transparent; - } } > .bd-sidenav { @@ -152,22 +75,26 @@ } // All levels of nav -.bd-sidebar .nav > li > a { - display: block; - padding: .25rem 1.5rem; - @include font-size(90%); - color: rgba(0, 0, 0, .65); -} +.bd-sidebar .nav { + padding-left: 1.25rem; -.bd-sidebar .nav > li > a:hover { - color: rgba(0, 0, 0, .85); - text-decoration: none; - background-color: transparent; -} + > li > a { + display: inline-block; + padding: .25rem .5rem; + @include font-size(.875rem); + color: rgba(0, 0, 0, .65); + @include border-radius(.25rem); -.bd-sidebar .nav > .active > a, -.bd-sidebar .nav > .active:hover > a { - font-weight: 600; - color: rgba(0, 0, 0, .85); - background-color: transparent; + &:hover { + color: rgba(0, 0, 0, .85); + text-decoration: none; + background-color: rgba($bd-purple-bright, .1); + } + } + + > .active > a, + > .active:hover > a { + font-weight: 600; + color: rgba(0, 0, 0, .85); + } } |