Attempt to fix focus ring being cut off in table of contents (#37965)

* 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>

Attempt to fix focus ring being cut off in table of contents (#37965)
* 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>
9dd42e1a · Mark Otto · GitHub · d0fece93 · 9dd42e1a · 9dd42e1a
Unverified Commit 9dd42e1a authored 2 years ago by Mark Otto Committed by GitHub 2 years ago
Hide whitespace changes
Inline Side-by-side

Showing

with 7 additions and 13 deletions
+7 -13
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
-// 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));

--- 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>`.


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