diff options
| author | GeoSot <[email protected]> | 2022-12-29 22:11:01 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2022-12-29 12:11:01 -0800 |
| commit | a9810ece616b45be77be1b5c7f54db9e25b23bca (patch) | |
| tree | 63cfe133aaea87e1cc0dcb48dd4d123f59603a61 | |
| parent | 8befabbde90e8ee19f8bf9196840e25c07130710 (diff) | |
| download | bootstrap-a9810ece616b45be77be1b5c7f54db9e25b23bca.tar.xz bootstrap-a9810ece616b45be77be1b5c7f54db9e25b23bca.zip | |
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 <[email protected]>
Co-authored-by: Mark Otto <[email protected]>
| -rw-r--r-- | site/assets/scss/_syntax.scss | 2 | ||||
| -rw-r--r-- | site/assets/scss/_toc.scss | 27 | ||||
| -rw-r--r-- | site/assets/scss/_variables.scss | 3 | ||||
| -rw-r--r-- | site/layouts/_default/docs.html | 1 |
4 files changed, 23 insertions, 10 deletions
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 092307e05..5d5f10922 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -27,7 +27,7 @@ --base05: #abb2bf; --base06: #b6bdca; --base07: #d19a66; - --base08: #e06c75; + --base08: #{$red-300}; --base09: #d19a66; --base0A: #e5c07b; --base0B: #98c379; diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index ffa6a0c44..38915aaee 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -1,4 +1,4 @@ -// stylelint-disable selector-max-type +// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-compound-selectors .bd-toc { @include media-breakpoint-up(lg) { @@ -16,23 +16,34 @@ ul { padding-left: 0; margin-bottom: 0; + margin-left: -.75rem; list-style: none; ul { padding-left: 1rem; - margin-top: .25rem; - } - } + margin-left: -1rem; - li { - margin-bottom: .25rem; + 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); + } - &:not(:hover) { - text-decoration: none; + &.active { + font-weight: 500; } code { diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 9d3f82e12..964a77394 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -18,13 +18,14 @@ $bd-callout-variants: info, warning, danger !default; --bd-accent-rgb: #{to-rgb($bd-accent)}; --bd-pink-rgb: #{to-rgb($pink-500)}; --bd-teal-rgb: #{to-rgb($teal-500)}; - --bd-violet-bg: var(--bd-violet); + --bd-toc-color: var(--bd-violet); --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1); } @include color-mode(dark, true) { --bd-violet: #{mix($bd-violet, $white, 75%)}; --bd-violet-bg: #{$bd-violet}; + --bd-toc-color: var(--#{$prefix}emphasis-color); --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5); } diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 2ad46376f..738d7ee8e 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -1,3 +1,4 @@ +{{ define "body_override" }}<body data-bs-spy="scroll" tabindex="0" data-bs-target="#TableOfContents">{{ end }} {{ define "main" }} <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout"> <aside class="bd-sidebar"> |