foundation
Are button hover states working?
Button hover states don't seem to be working for me. Checked in browser, Apple Mail and Gmail. Most of the buttons in my layout are via the following code block.
<row>
<columns>
<center>
<button href="#" class="radius">Track order status</button>
</center>
</columns>
</row>
Please let me know, what more info i can give to help with this... Thanks!
Checking the HTML being output, it looks like the compiler ignores any CSS rules that have the :hover pseudo-selector in them - these don't make it in the <style>
However, something like :first-child works...
So for now, you'd need to manually add them. Don't forget !important, since the <a> elements have color defined inline.
Assuming you are referring to inlined code right? The hover states seem to work in development.
Looks like the inliner is the issue here: https://github.com/jonkemp/inline-css/issues/31
The maintainer may need some help in the form of a PR on it...
Yeah - It's definitely the inliner. One option is to rip the inliner out all together because with the Gmail responsive update it's no longer needed. Issue with that is right now IOS Gmail app didn't get the update: https://litmus.com/blog/gmail-to-support-responsive-email-design
Other option is to decouple the inline task from the build allowing us to run a task to ignore certain things it's messing with.
Or - we can get inliner maintainer to update the inliner.
I think I just found a workaround in the inliner's parent lib issue queue: Automattic/juice#237.
Media queries don't strip pseudos, so the workaround is to wrap everything in an all rule:
@media all {
// typography
a:hover { color: $anchor-color-hover }
a:active { color: $anchor-color-active }
a:visited { color: $anchor-color-visited }
// buttons
table.button:hover, table.button:visited, table.button:active {
table a { border-width: 0px }
table td {
background: darken($button-background, 10%) !important;
color: $button-color !important;
}
}
table.button.secondary:hover table td {
background: lighten($secondary-color, 10%) !important
}
table.button.success:hover table td {
background: darken($success-color, 10%) !important
}
table.button.alert:hover table td {
background: darken($alert-color, 10%) !important
}
table.button.warning:hover table td {
background: darken($warning-color, 10%) !important
}
}
Haven't run it through litmus, but it works in browser and (I assume) should work on any email clients that respect media queries.
Yes - I tested this and it works - good solution! Can you apply a PR against that library?
This is still broken in zurb. The issue linked above, https://github.com/Automattic/juice/issues/237, has been resolved. As of Sep 2018, juice has a preservePseudos flag. The jonkemp/inline-css#31 above notes that the library was written because juice was abandoned, but now that juice works again he seems to recommend using juice, and abandoning inline-css. The flags appear to be the same, but I'm having a little trouble swapping out inline-css for juice...
A little more info in case anyone else bumps into this. I did all the work to switch over to juice, so that I could use preservePseudos. But it doesn't actually help, because, as noted above, the inlined styles will trump a style block. You have to make sure that all of your pseudo styles have !important, and the zurg email styles do not have this.
Because the inlining process changes the selector precedence, you always have to treat those rules specially, and putting them into an @media all {} block is a good way to remember that, and you don't need to patch or upgrade the existing toolchain at all for that to work.
I would say that there is a bug though, which is that _typography.scss, _thumbnail.scss, and _button.scss all define :hover styles without !important. And that means that npm start and npm run build will always give different results, unless you consciously override every one of those styles with an !important and wrap it in @media all{}. Switching to juice means that you don't need the @media all{}, but you still need to add the !important all over the place.