Notices: Add styles for use against white backgrounds.

These colored backgrounds can be accessed by adding the `.notice-alt` class to a notice.

There is also now a large version when using the `.notice-large` class, and a `.notice-title` class that is appropriate for headline text within a large notice.

props paulwilde, hugobaeta, melchoyce.
fixes #32244.


git-svn-id: https://develop.svn.wordpress.org/trunk@34365 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2015-09-21 15:25:37 +00:00
parent 2b3347332e
commit 9aaa278e02
5 changed files with 54 additions and 50 deletions

View File

@ -1296,6 +1296,7 @@ div.error {
}
.notice p,
.notice-title,
div.updated p,
div.error p,
.form-table td .notice p {
@ -1303,6 +1304,29 @@ div.error p,
padding: 2px;
}
.error a {
text-decoration: underline;
}
.updated a {
padding-bottom: 2px;
text-decoration: none;
}
.notice-alt {
box-shadow: none;
}
.notice-large {
padding: 10px 20px;
}
.notice-title {
display: inline-block;
color: #23282d;
font-size: 18px;
}
.wp-core-ui .notice.is-dismissible {
padding-right: 38px;
position: relative;
@ -1338,20 +1362,36 @@ div.error p,
.notice-success,
div.updated {
border-color: #7ad03a;
border-left-color: #46b450;
}
.notice-success.notice-alt {
background-color: #ecf7ed;
}
.notice-warning {
border-color: #ffba00;
border-left-color: #ffb900;
}
.notice-warning.notice-alt {
background-color: #fff8e5;
}
.notice-error,
div.error {
border-color: #dd3d36;
border-left-color: #dc3232;
}
.notice-error.notice-alt {
background-color: #fbeaea;
}
.notice-info {
border-color: #00a0d2;
border-left-color: #00a0d2;
}
.notice-info.notice-alt {
background-color: #e5f5fa;
}
.wrap .notice,
@ -2758,15 +2798,6 @@ img {
content: "\f140";
}
.error a {
text-decoration: underline;
}
.updated a {
text-decoration: none;
padding-bottom: 2px;
}
/* @todo: appears to be Press This only and overridden */
#photo-add-url-div input[type="text"] {
width: 300px;

View File

@ -58,19 +58,18 @@ p {
line-height: 1.5;
}
.login .message {
.login .message,
.login #login_error {
border-left: 4px solid #00a0d2;
padding: 1px 12px;
padding: 12px;
margin-left: 0;
background-color: #fff;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}
.login #login_error {
border-left: 4px solid #dd3d36;
background: #fff;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
border-left-color: #dc3232;
}
#loginform p.submit,
@ -156,12 +155,6 @@ p {
margin: auto;
}
#login_error,
.login .message {
margin-left: 0;
padding: 12px;
}
.login #nav,
.login #backtoblog {
font-size: 13px;
@ -231,9 +224,7 @@ p {
padding: 20px 0;
}
.mobile #login form,
.mobile #login .message,
.mobile #login_error {
.mobile #login form {
margin-left: 0;
}

View File

@ -786,24 +786,6 @@ body.folded .theme-overlay .theme-wrap {
margin-right: 5px;
}
/* Theme Updates info */
.theme-overlay .theme-update-message {
background: #fef7f1;
border: 1px solid #eee;
border-left: 4px solid #d54e21;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 5px 20px 10px;
}
.theme-overlay .theme-update {
color: #23282d;
font-size: 18px;
display: inline-block;
line-height: 40px;
margin: 0;
}
.theme-overlay .parent-theme {
background: #f7fcfe;
border: 1px solid #eee;

View File

@ -541,9 +541,9 @@ function install_plugin_information() {
<div id="section-holder" class="wrap">
<?php
if ( ! empty( $api->tested ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->tested ) ), $api->tested, '>' ) ) {
echo '<div class="notice notice-warning"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been tested</strong> with your current version of WordPress.') . '</p></div>';
echo '<div class="notice notice-warning notice-alt"><p>' . __( '<strong>Warning:</strong> This plugin has <strong>not been tested</strong> with your current version of WordPress.' ) . '</p></div>';
} elseif ( ! empty( $api->requires ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->requires ) ), $api->requires, '<' ) ) {
echo '<div class="notice notice-warning"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been marked as compatible</strong> with your version of WordPress.') . '</p></div>';
echo '<div class="notice notice-warning notice-alt"><p>' . __( '<strong>Warning:</strong> This plugin has <strong>not been marked as compatible</strong> with your version of WordPress.' ) . '</p></div>';
}
foreach ( (array) $api->sections as $section_name => $content ) {

View File

@ -407,8 +407,8 @@ $can_delete = current_user_can( 'delete_themes' );
<h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
<# if ( data.hasUpdate ) { #>
<div class="theme-update-message">
<h4 class="theme-update"><?php _e( 'Update Available' ); ?></h4>
<div class="notice notice-warning notice-alt notice-large">
<h4 class="notice-title"><?php _e( 'Update Available' ); ?></h4>
{{{ data.update }}}
</div>
<# } #>