foundation-emails icon indicating copy to clipboard operation
foundation-emails copied to clipboard

Default Callout Styles are hardly readable

Open LeonidasJP opened this issue 7 years ago • 1 comments

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.

LeonidasJP avatar Jun 19 '17 13:06 LeonidasJP

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

justingit avatar Oct 22 '18 17:10 justingit