diff --git a/core/themes/bartik/css/components/skip-link.css b/core/themes/bartik/css/components/skip-link.css index 26c67bbe49f644e87701537e5f95e047cb5ebd4b..c51edd9a11cd72db2b93d83f9aa89dbe5c7df22a 100644 --- a/core/themes/bartik/css/components/skip-link.css +++ b/core/themes/bartik/css/components/skip-link.css @@ -1,37 +1,25 @@ -/* ------------------ Skip link ----------------- */ +/** + * @file + * Styles for the skip link. + */ -.skip-link, -.skip-link.visually-hidden.focusable { - left: 50%; /* LTR */ - margin-left: -5.25em; /* LTR */ - margin-top: 0; - position: absolute !important; - width: auto; +.skip-link { + left: 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); z-index: 50; -} -[dir="rtl"] .skip-link, -[dir="rtl"] .skip-link.visually-hidden.focusable { - left: auto; - right: 50%; - margin-left: 0; - margin-right: -5.25em; -} -.skip-link, -.skip-link:link, -.skip-link:visited { background: #444; background: rgba(0, 0, 0, 0.6); - color: #fff; - display: inline-block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.94em; - line-height: 1.7; - padding: 1px 10px 2px 10px; - text-decoration: none; + line-height: 1.7em; + padding: 1px 10px 2px; border-radius: 0 0 10px 10px; -} -.skip-link:hover, -.skip-link:active, -.skip-link:focus { + border-bottom-width: 0; outline: 0; } +.skip-link.visually-hidden.focusable:focus { + position: absolute !important; + color: #fff; +}