search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.76k stars 1.09k forks source link

Default Callout Styles are hardly readable #798

Open LeonidasJP opened 7 years ago

LeonidasJP commented 7 years ago

How can we reproduce this bug? Send a mail with the default stylesheet, containing one or more Callouts, with classes success, warning or alert. (used success in examples) Occurs especially when not using a <p> to wrap the contents of the callout; <p> already renders its content black-ish

<callout class="success">
    Lorem ipsum dolor sic amet
</callout>

What did you expect to happen? Callout being generated with a light-green, light-yellow or light-red background, with dark text. Expected CSS would be like

th.callout-inner.success {
    background: #e1faea;
    border: 1px solid #1b9448;
    color: #0a0a0a; }

What happened instead? The text is rendered white-ish, which makes it unreadable. CSS used is:

th.callout-inner.success {
    background: #e1faea;
    border: 1px solid #1b9448;
    color: #fefefe; }

Perhaps due to the SCSS variable $white being used, instead of $black.

What email clients does this happen in? Bug is not client-specific.

justingit commented 5 years ago

This is a problem that's been hitting us. Are there any plans to apply this pull request?