rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +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-07-20 11:26:41 +02:00 committed by XhmikosR
parent 1abe9264aa
commit 81d3e2b917
2 changed files with 23 additions and 15 deletions
Show Stats 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">
<span class="skippy-text">Skip to main content</span>
</a>
<div class="skippy overflow-hidden">
<div class="container-xl">
<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 {
display: block;
padding: 1em;
color: $white;
text-align: center;
background-color: $bd-purple;
outline: 0;
// stylelint-disable declaration-no-important
@include hover() {
.skippy {
background-color: $bd-purple;
a {
color: $white;
}
}
.skippy-text {
padding: .5em;
outline: 1px dotted;
&: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;
}
}