From d7fd08e151f6c0c4b57350cfcc3a2ea24481ba2c Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Mon, 25 Jun 2018 11:34:04 +0100 Subject: Nicer image replacement for #nav-link mobile menu button The large negative text-indent can sometimes cause horizontal scrollbars in Right-to-Left languages, and, in some browsers, can also result in a huge :focus outline being drawn around the button and off to the right of the window. Setting a zero height, padding top, and overflow:hidden is a simpler way to achieve the same thing, and works regardless of text direction, text length, or focus state. --- CHANGELOG.md | 1 + web/cobrands/sass/_base.scss | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a400271a..642facde6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - Clearer relocation options while you’re reporting a problem #2238 - Speed up fetching lists of bodies. #2248 - Improve vertical alignment of navigation menu in Internet Explorer 9–11. + - Mobile menu button no longer uses -9999px text-indent hack. - Bugfixes: - Fix display of area/pins on body page when using Bing or TonerLite map. - Do not scan through all problems to show /_dev pages. diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 22fc70d0a..587ff59f3 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -525,11 +525,12 @@ ul.error { // this is a skip to nav for mobile users only #nav-link { width: 3em; - height: 3em; + height: 0; + padding-top: 3em; + overflow: hidden; background: transparent url(../fixmystreet/images/#{$menu-image}.png) center center no-repeat; background-image: inline-image("../fixmystreet/images/#{$menu-image}.svg"), none; background-size: 22px 18px; - text-indent: -999999px; #{$right}: 0; } -- cgit v1.2.3