]> 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: d0fece9)
Attempt to fix focus ring being cut off in table of contents (#37965)
authorMark Otto <markd.otto@gmail.com>
Tue, 14 Feb 2023 16:58:08 +0000 (08:58 -0800)
committerGitHub <noreply@github.com>
Tue, 14 Feb 2023 16:58:08 +0000 (08:58 -0800)
* Attempt to fix focus ring being cut off in table of contents

* Update _toc.scss

---------

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
site/assets/scss/_toc.scss patch | blob | blame | history
site/content/docs/5.3/getting-started/introduction.md patch | blob | blame | history
site/layouts/_default/docs.html patch | blob | blame | history

diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 38915aaee7a078575bfa0bb73529c198d2d21594..32bf3cf625c562e7229132e11534ba6fa3a3c6f8 100644 (file)
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-compound-selectors
+// stylelint-disable selector-max-type, selector-no-qualifying-type
 
 .bd-toc {
   @include media-breakpoint-up(lg) {
@@ -16,22 +16,16 @@
     ul {
       padding-left: 0;
       margin-bottom: 0;
-      margin-left: -.75rem;
       list-style: none;
 
       ul {
         padding-left: 1rem;
-        margin-left: -1rem;
-
-        a {
-          padding-left: 1.375rem;
-        }
       }
     }
 
     a {
       display: block;
-      padding: .125rem 0 .125rem .625rem;
+      padding: .125rem 0 .125rem .75rem;
       color: inherit;
       text-decoration: none;
       border-left: .125rem solid transparent;
@@ -86,7 +80,7 @@
 .bd-toc-collapse {
   @include media-breakpoint-down(md) {
     nav {
-      padding: 1.25rem;
+      padding: 1.25rem 1.25rem 1.25rem 1rem;
       background-color: var(--bs-tertiary-bg);
       border: 1px solid var(--bs-border-color);
       @include border-radius(var(--bs-border-radius));
diff --git a/site/content/docs/5.3/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md
index a4192fb658dd0a8a621ba6c2c508fce6b1261c34..d296d18ff5a0814570e6c89ef96bee1045e1c084 100644 (file)
--- a/site/content/docs/5.3/getting-started/introduction.md
+++ b/site/content/docs/5.3/getting-started/introduction.md
@@ -119,7 +119,7 @@ Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some fun
 </html>
 ```
 
-### Responsive meta tag
+### Viewport meta
 
 Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>`.
 
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 678fab4e64176775a6e33df69c870456b4d84145..ed23045a6dff2c5687cf93cd6f91fc50b9d5e92e 100644 (file)
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -32,13 +32,13 @@
       </div>
 
       {{ if (eq .Page.Params.toc true) }}
-        <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-body-secondary">
+        <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
           <button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
             On this page
             <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
           </button>
-          <strong class="d-none d-md-block h6 my-2">On this page</strong>
-          <hr class="d-none d-md-block my-2">
+          <strong class="d-none d-md-block h6 my-2 ms-3">On this page</strong>
+          <hr class="d-none d-md-block my-2 ms-3">
           <div class="collapse bd-toc-collapse" id="tocContents">
             {{ .TableOfContents }}
           </div>
Mirror of https://github.com/twbs/bootstrap.git