mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-13 13:29:25 +01:00
docs(skippy): prevent skip links from overlapping header
This commit is contained in:
parent
9e372b121a
commit
cb1eee16f0
@ -1,13 +1,20 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
.skippy {
|
||||
position: fixed;
|
||||
top: .5rem;
|
||||
left: .5rem;
|
||||
z-index: $zindex-fixed;
|
||||
padding: .5rem;
|
||||
color: $white;
|
||||
background-color: $bd-purple;
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
@ -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") }}
|
||||
<a class="skippy visually-hidden-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
{{- end }}
|
||||
{{ if (eq .Page.Layout "docs") }}
|
||||
<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 }}
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user