diff options
| author | Gaël Poupard <gael.poupard@orange.com> | 2020-07-20 12:26:41 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2020-08-03 19:06:36 +0300 |
| commit | 81d3e2b9172bd66de7248893427fc3037dd31df4 (patch) | |
| tree | 77a33d53d12521f6ca431a5a3c5edd474ae0ac50 | |
| parent | 1abe9264aa867766a1dd1d393fe4650a30d17e31 (diff) | |
docs(skippy): prevent skip links from overlapping header
| -rw-r--r-- | site/_includes/skippy.html | 11 | ||||
| -rw-r--r-- | site/docs/4.5/assets/scss/_skippy.scss | 23 |
2 files changed, 21 insertions, 13 deletions
diff --git a/site/_includes/skippy.html b/site/_includes/skippy.html index ec7507d532..4fb12b8bd0 100644 --- a/site/_includes/skippy.html +++ b/site/_includes/skippy.html @@ -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> diff --git a/site/docs/4.5/assets/scss/_skippy.scss b/site/docs/4.5/assets/scss/_skippy.scss index bd2aadb82a..894db70db4 100644 --- a/site/docs/4.5/assets/scss/_skippy.scss +++ b/site/docs/4.5/assets/scss/_skippy.scss @@ -1,17 +1,20 @@ +// stylelint-disable declaration-no-important + .skippy { - display: block; - padding: 1em; - color: $white; - text-align: center; background-color: $bd-purple; - outline: 0; - @include hover() { + 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; + } } |