]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 8befabb)
Use scrollspy on docs pages (#33428)
authorGeoSot <geo.sotis@gmail.com>
Thu, 29 Dec 2022 20:11:01 +0000 (22:11 +0200)
committerGitHub <noreply@github.com>
Thu, 29 Dec 2022 20:11:01 +0000 (12:11 -0800)
* 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>
site/assets/scss/_syntax.scss patch | blob | blame | history
site/assets/scss/_toc.scss patch | blob | blame | history
site/assets/scss/_variables.scss patch | blob | blame | history
site/layouts/_default/docs.html patch | blob | blame | history

diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 092307e0584dccc4854f3480db70cf517787819a..5d5f1092271a4f7194d18bed4e608056d04b96b8 100644 (file)
--- 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 ffa6a0c442847325955130e8c01294208505909c..38915aaee7a078575bfa0bb73529c198d2d21594 100644 (file)
--- 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 9d3f82e12f08f8c5626018e6285a2f343a8857df..964a77394b1e604f3db939c3b1124abebd72442e 100644 (file)
--- 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 2ad46376fd0175ed99e87d65dd6ff7098a26cfcb..738d7ee8ecd30301be3b4667e28bf1456c5deb5d 100644 (file)
--- 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">
Mirror of https://github.com/twbs/bootstrap.git