From 9dd42e1a07cba04d52050f47d9a343416d72b8c0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 Feb 2023 08:58:08 -0800 Subject: [PATCH] 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 --- site/assets/scss/_toc.scss | 12 +++--------- .../content/docs/5.3/getting-started/introduction.md | 2 +- site/layouts/_default/docs.html | 6 +++--- 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 38915aaee7..32bf3cf625 100644 --- 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 a4192fb658..d296d18ff5 100644 --- 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 ``` -### 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 ``. diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 678fab4e64..ed23045a6d 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -32,13 +32,13 @@ {{ if (eq .Page.Params.toc true) }} -
+
- On this page -
+ On this page +
{{ .TableOfContents }}
-- 2.47.2