rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

docs(skippy): prevent skip links from overlapping header

Browse Source
This commit is contained in:
Gaël Poupard 2020-05-26 10:35:43 +02:00 committed by Mark Otto
parent 9e372b121a
commit cb1eee16f0
2 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
site/assets/scss/_skippy.scss
View File

@ -1,13 +1,20 @@
// stylelint-disable declaration-no-important
.skippy { .skippy {
position: fixed;
top: .5rem;
left: .5rem;
z-index: $zindex-fixed;
padding: .5rem;
color: $white;
background-color: $bd-purple; background-color: $bd-purple;
&:hover { a {
color: $white; color: $white;
} }
&:focus-within a {
position: static !important;
width: auto !important;
height: auto !important;
padding: $spacer / 2 !important;
margin: $spacer / 4 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
}
} }

12
site/layouts/partials/skippy.html
View File

@ -1,5 +1,9 @@
<a class="skippy visually-hidden-focusable" href="#content">Skip to main content</a> <div class="skippy overflow-hidden">
<div class="container-xl">
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
{{ if (eq .Page.Layout "docs") }} {{ if (eq .Page.Layout "docs") }}
<a class="skippy visually-hidden-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a> <a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
{{- end }} {{- end }}
</div>
</div>