Issue #2408475 by joaogarin, pjbaert: Rewrite skip-link component inline with our CSS standards

core/themes/seven/css/components/skip-link.css

 /**
- * Skip link.
+ * @file
+ * Skip link
+ *
+ * Allows keyboard users to quickly skip to the main content of the page.
  */
+
 .skip-link {
-  margin-top: 0;
-  position: absolute;
-  left: 50%; /* LTR */
-  margin-left: -5.25em; /* LTR */
-  width: auto;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
   z-index: 50;
-}
-[dir="rtl"] .skip-link {
-  right: 50%;
-  margin-right: -5.25em;
-}
-.skip-link,
-.skip-link:link,
-.skip-link:visited {
-  display: inline-block;
   background: #444;
   color: #fff;
   font-size: 0.94em;
-  padding: 1px 10px 2px 10px; /* LTR */
-  text-decoration: none;
+  padding: 1px 10px 2px;
   border-radius: 0 0 10px 10px;
 }
-[dir="rtl"] .skip-link,
-[dir="rtl"] .skip-link:link,
-[dir="rtl"] .skip-link:visited {
-  padding: 1px 10px 2px 10px;
-}
-.skip-link:hover,
-.skip-link:focus,
-.skip-link:active {
-  outline: 0;
+.skip-link:focus {
+  text-decoration: none;
 }
-.skip-link.visually-hidden.focusable:hover,
-.skip-link.visually-hidden.focusable:focus,
-.skip-link.visually-hidden.focusable:active
-{
+.skip-link.visually-hidden.focusable:focus {
   position: absolute !important;
 }