Improve the design of the callout boxes (shortcodes)

[samuelsidler]

We should have a designer look through the design of our callout boxes and improve them. That probably means changing the colors slightly, change the icon of the "alert" one (to what? dunno), and removing the default text so we can use them more generically. For example, I want to use "Alert" sometimes as a Draft box.

[DrewAPicture]

Alert: This is a draft.

Seems pretty straightforward to me.

[McGuive7]

See #1 for previous discussion.

[McGuive7]

Updated markup and CSS for callout shortcodes

[McGuive7]

One other thing to note is that I was noticing extra <p> tags being generated when testing this locally, in two places:

1. Wrapping the entire <div class="callout"> element.
2. Empty <p> tags being inserted in weird places.

I wouldn't think my modifications to the shortcode PHP would cause this (just removed the icon <div> and replaced with a CSS background image), so I think it may have been something wonky caused by manually copying and pasting header and footer code into my local files. Anyhow, I suggest someone else check this code with an install they know to be working properly. Thanks.

[coffee2code]

Comparison of existing callout boxes vs proposed changes.

[coffee2code]

I've attached meta-630.comparison.png​ which compares the current appearance versus the changes implemented as part of selectively applying parts of 630.diff​.

The changes to the existing implementation are:

• Remove of the prefix denoting the type of callout box being shown.
• Use of dashicons fully through CSS rather than via HTML placeholder.
• Some padding tweaks.
• Since @samuelsidler requested a change of the icon for the alert box. I took the liberty of previewing use of the flag dashicon (​https://developer.wordpress.org/resource/dashicons/#flag). We could also consider the sticky dashicon (​https://developer.wordpress.org/resource/dashicons/#sticky) as well. Either is better than the current post icon. I think the former is the best given our options.

My tweaks from 630.diff:

• Explicit top position for call-out.
• Restore removal of margin-bottom for p tags in a callout box, and add margin-top for subsequent paragraphs.
• Did not enact any color changes (@samuelsidler has indicted the existing colors have since been changed as desired).

[coffee2code]

In 2489:

Handbook plugin: Improve the design of the callout boxes.

• Only display prefix denoting the type of callout box being shown as screen-reader-text.
• Use dashicons fully through CSS rather than via HTML placeholder.
• Use flag dashicon for alerts.
• Some padding tweaks.

Props McGuive7.
Fixes #630.