[wp-trac] [WordPress Trac] #32244: Introduce notice class for notices that are on a white background

[WordPress Trac]

#32244: Introduce notice class for notices that are on a white background
-------------------------+-----------------------------
 Reporter:  paulwilde    |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  General      |    Version:  4.2.1
 Severity:  normal       |   Keywords:
  Focuses:  ui           |
-------------------------+-----------------------------
 The notice that is used to notify a user that a theme update is available
 seems like a nice use for notices on white backgrounds.

 This patch does the following:
 - Introduce {{{.notice-alt}}} which adds a light background to the notice
 and makes the notice work better on a white background. This works with
 all 4 notice colours (success, warning, error, info). I've attached a
 screenshot which shows all different variations.
 - Introduce {{{.notice-large}}} which adds padding to the notice.
 - Introduce {{{.notice-title}}} which styles the title used on the theme
 notice so that it aligns nicely.
 - Removes all the {{{.theme-update-message}}} CSS that styles the notice
 on the theme modal popup. We're opting for reusable OOP CSS here.
 - Moves {{{.error a}}} and {{{.updated a}}} into the same section as the
 Notifications styles to keep things organised.
 - Added {{{.notice-alt}}} to the plugin modal notices as they are on a
 white background.

 Here's a screenshot of the plugin modal with the before and after notice:

 [[Image(https://s3.amazonaws.com/f.cl.ly/items/0v3Q0f0d1b2l3h1Y432Y
 /plugin-notices.png)]]

 Here's a screenshot of the theme modal with the before and after notice (I
 opted for orange as it's more of a warning than an error):

 [[Image(https://s3.amazonaws.com/f.cl.ly/items/0L1t3h0b1c3A473z3608/theme-
 notices.png)]]

 And lastly here's a screenshot of all possible sizes and variations of the
 new class:

 [[Image(https://s3.amazonaws.com/f.cl.ly/items/1r1o2Q2l062M3M2S1d45/notices.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32244>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform