mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 14:54:27 +02:00
Code Issues Releases Wiki Activity

docs(skippy): prevent skip links from overlapping header

Browse Source
This commit is contained in:
Gaël Poupard
2020-07-20 11:26:41 +02:00
committed by XhmikosR
parent 1abe9264aa
commit 81d3e2b917
2 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
site/_includes/skippy.html
View File

@@ -1,3 +1,8 @@
<a class="skippy sr-only sr-only-focusable" href="#content"> <div class="skippy overflow-hidden">
<span class="skippy-text">Skip to main content</span> <div class="container-xl">
</a> <a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
{%- if page.layout == "docs" -%}
<a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
{%- endif -%}
</div>
</div>

27
site/docs/4.5/assets/scss/_skippy.scss
View File

@@ -1,17 +1,20 @@
.skippy { // stylelint-disable declaration-no-important
display: block;
padding: 1em;
color: $white;
text-align: center;
background-color: $bd-purple;
outline: 0;
@include hover() { .skippy {
background-color: $bd-purple;
a {
color: $white; color: $white;
} }
}
.skippy-text { &:focus-within a {
padding: .5em; position: static !important;
outline: 1px dotted; width: auto !important;
height: auto !important;
padding: $spacer / 2 !important;
margin: $spacer / 4 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
}
} }