root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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>
This commit is contained in:
GeoSot 2022-12-29 22:11:01 +02:00 committed by GitHub
parent 8befabbde9
commit a9810ece61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/assets/scss/_syntax.scss
View File

@ -27,7 +27,7 @@
--base05: #abb2bf;
--base06: #b6bdca;
--base07: #d19a66;
--base08: #e06c75;
--base08: #{$red-300};
--base09: #d19a66;
--base0A: #e5c07b;
--base0B: #98c379;

27
site/assets/scss/_toc.scss
View File

@ -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;
a {
padding-left: 1.375rem;
}
}
}
li {
margin-bottom: .25rem;
}
a {
display: block;
padding: .125rem 0 .125rem .625rem;
color: inherit;
text-decoration: none;
border-left: .125rem solid transparent;
&:not(:hover) {
text-decoration: none;
&:hover,
&.active {
color: var(--bd-toc-color);
border-left-color: var(--bd-toc-color);
}
&.active {
font-weight: 500;
}
code {

3
site/assets/scss/_variables.scss
View File

@ -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);
}

1
site/layouts/_default/docs.html
View File

@ -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">