diff options
| author | Gaël Poupard <[email protected]> | 2020-05-26 10:35:43 +0200 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2020-07-13 12:36:29 -0700 |
| commit | cb1eee16f0e7a497c459de70169ab828ea5654d6 (patch) | |
| tree | 75646692c794c9b26f2c9c157669564dfc93488a | |
| parent | 9e372b121ae929af34f3ed0663f454cdc47f0702 (diff) | |
| download | bootstrap-cb1eee16f0e7a497c459de70169ab828ea5654d6.tar.xz bootstrap-cb1eee16f0e7a497c459de70169ab828ea5654d6.zip | |
docs(skippy): prevent skip links from overlapping header
| -rw-r--r-- | site/assets/scss/_skippy.scss | 21 | ||||
| -rw-r--r-- | site/layouts/partials/skippy.html | 12 |
2 files changed, 22 insertions, 11 deletions
diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss index c573e4548..894db70db 100644 --- a/site/assets/scss/_skippy.scss +++ b/site/assets/scss/_skippy.scss @@ -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; + } } diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html index 8dce2bc49..e6bf901a9 100644 --- a/site/layouts/partials/skippy.html +++ b/site/layouts/partials/skippy.html @@ -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> |