v4 hamburger icon fix #20260
v4 hamburger icon fix #20260
Conversation
| @@ -115,6 +115,12 @@ | |||
| @include hover-focus { | |||
| text-decoration: none; | |||
| } | |||
|
|
|||
| &::before { | |||
| content: "\2261"; // see http://unicode.johnholtripley.co.uk/2261/ | |||
There was a problem hiding this comment.
Properties should be ordered font-weight, content
remove current HTML-based symbol, add any missing aria-* attributes
|
comparison before/after screenshot (admittedly the |
|
|
||
| &::before { | ||
| font-weight: 500; | ||
| content: "\2261"; // see http://unicode.johnholtripley.co.uk/2261/ |
There was a problem hiding this comment.
Maybe comment it as IDENTICAL TO (U+2261) similar to
Line 145 in 1347cb0
|
I'd also suggest adding a comment explaining why we can't use TRIGRAM FOR HEAVEN (U+2630). |
| content: "\2261"; // IDENTICAL TO (U+2261) | ||
| // wider overall support (see http://unicode.johnholtripley.co.uk/2261/) | ||
| // compared to previously used TRIGRAM FOR HEAVEN (U+2630) | ||
| // using generated content, rather than adding this in markup, |
There was a problem hiding this comment.
Erm, where did we establish that using generated content made any difference WRT emoji?
There was a problem hiding this comment.
Good call, i got confused
|
LGTM technically speaking. I can't speak as to the visual design; @mdo ought to weigh in. |
|
Aesthetically that looks a bit off right now. I'd be curious to see an exploration that use an SVG background image like we do with our validation icons for comparison. |
|
rough sketch of how an SVG approach may look like https://jsfiddle.net/patrick_h_lauke/nu5ejdy3/5/ |
|
A survey of implementation options: https://css-tricks.com/three-line-menu-navicon/ |
|
tricks using borders, shadows etc just feel...extremely hacky and old-school to me. my personal preference would be either an SVG or unicode approach (I guess SVG would give us more flexibility in design of course, so not adverse to changing this to match my rough fiddle https://jsfiddle.net/patrick_h_lauke/nu5ejdy3/5/ ... @mdo thoughts?) |
|
I agree with @mdo that visually the new one doesn't look so good. The SVG one does look a lot better IMO. |
|
Personally I think yes. But wait for the others to confirm too. |
|
Sounds like we're onboard with SVG. I'd say go for it Patrick. |
|
closing in favor of successor #20329 which uses SVG |
closes #20234