mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 11:00:56 +02:00
Code Issues Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Mark Otto
2023-02-14 08:58:08 -08:00
committed by GitHub
parent d0fece9320
commit 9dd42e1a07
3 changed files with 7 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 { .bd-toc {
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@@ -16,22 +16,16 @@
ul { ul {
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
margin-left: -.75rem;
list-style: none; list-style: none;
ul { ul {
padding-left: 1rem; padding-left: 1rem;
margin-left: -1rem;
a {
padding-left: 1.375rem;
}
} }
} }
a { a {
display: block; display: block;
padding: .125rem 0 .125rem .625rem; padding: .125rem 0 .125rem .75rem;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border-left: .125rem solid transparent; border-left: .125rem solid transparent;
@@ -86,7 +80,7 @@
.bd-toc-collapse { .bd-toc-collapse {
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
nav { nav {
padding: 1.25rem; padding: 1.25rem 1.25rem 1.25rem 1rem;
background-color: var(--bs-tertiary-bg); background-color: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color); border: 1px solid var(--bs-border-color);
@include border-radius(var(--bs-border-radius)); @include border-radius(var(--bs-border-radius));

2
site/content/docs/5.3/getting-started/introduction.md
View File

@@ -119,7 +119,7 @@ Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some fun
</html> </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>`. 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>`.

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

@@ -32,13 +32,13 @@
</div> </div>
{{ if (eq .Page.Params.toc true) }} {{ 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"> <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 On this page
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg> <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
</button> </button>
<strong class="d-none d-md-block h6 my-2">On this page</strong> <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"> <hr class="d-none d-md-block my-2 ms-3">
<div class="collapse bd-toc-collapse" id="tocContents"> <div class="collapse bd-toc-collapse" id="tocContents">
{{ .TableOfContents }} {{ .TableOfContents }}
</div> </div>