diff options
| author | Zarino Zappia <mail@zarino.co.uk> | 2018-06-25 11:34:04 +0100 |
|---|---|---|
| committer | Struan Donald <struan@exo.org.uk> | 2018-10-01 07:57:22 +0100 |
| commit | d7fd08e151f6c0c4b57350cfcc3a2ea24481ba2c (patch) | |
| tree | 815265b81707a2608acfbdd856cde8d41cd6fc3f /web | |
| parent | d52accf2008c57437b2c08fd9050854934714a13 (diff) | |
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.
Diffstat (limited to 'web')
| -rw-r--r-- | web/cobrands/sass/_base.scss | 5 |
1 files changed, 3 insertions, 2 deletions
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; } |