From 81d3e2b9172bd66de7248893427fc3037dd31df4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <gael.poupard@orange.com>
Date: Mon, 20 Jul 2020 11:26:41 +0200
Subject: [PATCH] docs(skippy): prevent skip links from overlapping header

---
 site/_includes/skippy.html             | 11 ++++++++---
 site/docs/4.5/assets/scss/_skippy.scss | 27 ++++++++++++++------------
 2 files changed, 23 insertions(+), 15 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 @@
-.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;
+  }
 }