From 530af8849d63f3c844017b444722cfe856c0b97d Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 10 Jun 2020 18:30:50 +0000 Subject: [PATCH] Bug 22807: (follow-up) Update style of skip button This patch updates the markup and style of the skip button, adapting (i.e. stealing) the style of the skip link at https://webaim.org. To test, apply the patch and rebuild the OPAC CSS: https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client Go to any page in the OPAC and hit the tab key. The "Skip to main content" link should appear. Tabbing away from it should cause the link to hide. Hitting the ENTER key when the link is highlighted should cause the page to scroll to the main content. Signed-off-by: Hayley Mapley --- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 25 ++++++++++++++++++++++ .../opac-tmpl/bootstrap/en/includes/masthead.inc | 2 +- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 8babc17b63f..bba5d0ec15b 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -3234,4 +3234,29 @@ $star-selected: #EDB867; } /*end browse search*/ +/* Skip to content link. CSS adapted from https://webaim.org/ */ +#scrolltocontent { + background: #c60000; + border: 1px solid white; + border-radius: 0 0 4px 0; + border-width: 0 1px 1px 0; + color: white; + left: 0px; + padding: 6px 12px; + position: absolute; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(58, 0, 0, 0.75); + top: -40px; + transition: top .5s ease-out; + z-index: 100; + + &:focus { + left: 0px; + outline-color: transparent; + position: absolute; + top: 0px; + transition: top .1s ease-in; + } +} + @import "responsive"; diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc index 8de7ec60a5f..f061f78cedf 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc @@ -12,7 +12,7 @@