From c1b0670c2de26b5378e48af05a310d9f41c09476 Mon Sep 17 00:00:00 2001
From: Andrew Nacin
Date: Fri, 21 Sep 2012 19:34:23 +0000
Subject: [PATCH] Updates and fixes to the new button styles. By default,
buttons are now the same size as they were in 3.4. Then there is a smaller
button (designed for minor elements) and a larger button (designed for things
like Publish and Save Changes). Better focus styles. props lessbloat. see
#21598.
git-svn-id: http://core.svn.wordpress.org/trunk@21944 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
wp-admin/css/colors-classic.css | 70 ++++++++++--------
wp-admin/css/colors-fresh.css | 71 ++++++++++---------
wp-admin/css/customize-controls.css | 2 +-
wp-admin/css/wp-admin.css | 37 ++++++----
wp-admin/custom-background.php | 2 +-
wp-admin/custom-header.php | 2 +-
wp-admin/edit-form-advanced.php | 2 +-
.../includes/class-wp-comments-list-table.php | 4 +-
.../includes/class-wp-links-list-table.php | 2 +-
wp-admin/includes/class-wp-list-table.php | 4 +-
.../includes/class-wp-media-list-table.php | 4 +-
.../includes/class-wp-posts-list-table.php | 4 +-
wp-admin/includes/dashboard.php | 4 +-
wp-admin/includes/media.php | 2 +-
wp-admin/includes/meta-boxes.php | 14 ++--
wp-admin/includes/nav-menu.php | 4 +-
wp-admin/includes/plugin-install.php | 2 +-
wp-admin/includes/post.php | 8 +--
wp-admin/includes/template.php | 2 +-
wp-admin/includes/widgets.php | 2 +-
wp-admin/js/post.js | 2 +-
wp-admin/update-core.php | 2 +-
22 files changed, 136 insertions(+), 110 deletions(-)
diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css
index e019888f60..4da48b2d96 100644
--- a/wp-admin/css/colors-classic.css
+++ b/wp-admin/css/colors-classic.css
@@ -387,15 +387,15 @@ a.button:active {
.submit input,
input[type=button],
input[type=submit] {
- background: #ececec;
+ background: #f3f3f3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(to bottom, #fff, #eee);
border-color: #ccc;
- -webkit-box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9);
- box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9);
+ -webkit-box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9);
+ box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9);
color: #464646;
text-shadow: 1px 1px 0 #fff;
}
@@ -413,21 +413,35 @@ input[type=submit]:hover,
.button-secondary:focus,
.submit input.focus,
.submit input:focus,
+input[type=button].focus,
input[type=button]:focus,
-input[type=submit].focus,
input[type=submit]:focus {
- background: #ececec;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
- background-image: -webkit-linear-gradient(top, #fff, #eee);
- background-image: -moz-linear-gradient(top, #fff, #eee);
- background-image: -o-linear-gradient(top, #fff, #eee);
- background-image: linear-gradient(to bottom, #fff, #eee);
+ background: #f3f3f3;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
+ background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
+ background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
+ background-image: -o-linear-gradient(top, #fff, #f3f3f3);
+ background-image: linear-gradient(to bottom, #fff, #f3f3f3);
border-color: #bbb;
- -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
- box-shadow: 0px 1px 1px rgba(0,0,0,.1);
+ -webkit-box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1);
+ box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1);
color: #000;
}
+.button.focus,
+.button:focus,
+.button-secondary.focus,
+.button-secondary:focus,
+.submit input.focus,
+.submit input:focus,
+input[type=button].focus,
+input[type=button]:focus,
+input[type=submit]:focus {
+ border-color: #999;
+ -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
+ box-shadow: 1px 1px 1px rgba(0,0,0,.2);
+}
+
.button.active,
.button:active,
.button-secondary.active,
@@ -448,17 +462,6 @@ input[type=submit]:active {
box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
}
-.button.focus,
-.button:focus,
-.button-secondary.focus,
-.button-secondary:focus,
-.submit input.focus,
-.submit input:focus,
-input[type=button].focus,
-input[type=submit]:focus {
- border-color: #aaa;
-}
-
input.button-primary,
button.button-primary,
a.button-primary {
@@ -498,6 +501,15 @@ a.button-primary:focus {
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
}
+input.button-primary.focus,
+input.button-primary:focus,
+button.button-primary:focus,
+a.button-primary:focus {
+ border-color: #0e3950;
+ -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4);
+ box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4);
+}
+
input.button-primary.active,
input.button-primary:active,
button.button-primary:active,
@@ -514,13 +526,6 @@ a.button-primary:active {
box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
}
-input.button-primary.focus,
-input.button-primary:focus,
-button.button-primary:focus,
-a.button-primary:focus {
- border-color: #124560;
-}
-
.button-disabled,
.button[disabled],
.button:disabled,
@@ -542,6 +547,11 @@ a.button.disabled {
box-shadow: none !important;
}
+.button-primary-disabled:hover,
+.button-primary[disabled]:hover {
+ text-shadow: none;
+}
+
a:hover,
a:active {
color: #d54e21;
diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css
index cc7b995e35..67af31cda9 100644
--- a/wp-admin/css/colors-fresh.css
+++ b/wp-admin/css/colors-fresh.css
@@ -378,15 +378,15 @@ a.button:active {
.submit input,
input[type=button],
input[type=submit] {
- background: #ececec;
+ background: #f3f3f3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(to bottom, #fff, #eee);
border-color: #ccc;
- -webkit-box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9);
- box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9);
+ -webkit-box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9);
+ box-shadow: inset 0 0 1px 2px rgba(255,255,255, 0.9);
color: #464646;
text-shadow: 1px 1px 0 #fff;
}
@@ -407,22 +407,34 @@ input[type=submit]:hover,
input[type=button].focus,
input[type=button]:focus,
input[type=submit]:focus {
- background: #ececec;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
- background-image: -webkit-linear-gradient(top, #fff, #eee);
- background-image: -moz-linear-gradient(top, #fff, #eee);
- background-image: -o-linear-gradient(top, #fff, #eee);
- background-image: linear-gradient(to bottom, #fff, #eee);
+ background: #f3f3f3;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
+ background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
+ background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
+ background-image: -o-linear-gradient(top, #fff, #f3f3f3);
+ background-image: linear-gradient(to bottom, #fff, #f3f3f3);
border-color: #bbb;
- -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
- box-shadow: 0px 1px 1px rgba(0,0,0,.1);
+ -webkit-box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1);
+ box-shadow: inset 0 0 1px 2px #fff, 0px 1px 1px rgba(0,0,0,.1);
color: #000;
}
+.button.focus,
+.button:focus,
+.button-secondary.focus,
+.button-secondary:focus,
+.submit input.focus,
+.submit input:focus,
+input[type=button].focus,
+input[type=button]:focus,
+input[type=submit]:focus {
+ border-color: #999;
+ -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
+ box-shadow: 1px 1px 1px rgba(0,0,0,.2);
+}
+
.button.active,
.button:active,
-.small.active,
-.small:active,
.button-secondary.active,
.button-secondary:active,
.submit input:active,
@@ -441,18 +453,6 @@ input[type=submit]:active {
box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
}
-.button.focus,
-.button:focus,
-.button-secondary.focus,
-.button-secondary:focus,
-.submit input.focus,
-.submit input:focus,
-input[type=button].focus,
-input[type=button]:focus,
-input[type=submit]:focus {
- border-color: #aaa;
-}
-
input.button-primary,
button.button-primary,
a.button-primary {
@@ -492,6 +492,15 @@ a.button-primary:focus {
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
}
+input.button-primary.focus,
+input.button-primary:focus,
+button.button-primary:focus,
+a.button-primary:focus {
+ border-color: #0e3950;
+ -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4);
+ box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,.4);
+}
+
input.button-primary.active,
input.button-primary:active,
button.button-primary:active,
@@ -508,13 +517,6 @@ a.button-primary:active {
box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
}
-input.button-primary.focus,
-input.button-primary:focus,
-button.button-primary:focus,
-a.button-primary:focus {
- border-color: #124560;
-}
-
.button-disabled,
.button[disabled],
.button:disabled,
@@ -536,6 +538,11 @@ a.button.disabled {
box-shadow: none !important;
}
+.button-primary-disabled:hover,
+.button-primary[disabled]:hover {
+ text-shadow: none;
+}
+
a:hover,
a:active {
color: #d54e21;
diff --git a/wp-admin/css/customize-controls.css b/wp-admin/css/customize-controls.css
index 4d7d31927e..68429914ef 100644
--- a/wp-admin/css/customize-controls.css
+++ b/wp-admin/css/customize-controls.css
@@ -157,7 +157,7 @@ body {
#customize-header-actions .button-primary {
float: right;
- margin-top: 11px;
+ margin-top: 10px;
}
#customize-header-actions img {
diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css
index c0fc733f84..8d4e20db9c 100644
--- a/wp-admin/css/wp-admin.css
+++ b/wp-admin/css/wp-admin.css
@@ -783,9 +783,10 @@ input.button-secondary {
display: inline-block;
text-decoration: none;
font-size: 12px;
- line-height: 15px;
+ line-height: 17px;
+ height: 15px;
margin: 0;
- padding: 0.5em 0.8em 0.4em;
+ padding: 0.25em 0.8em 0.35em;
cursor: pointer;
border-width: 1px;
border-style: solid;
@@ -797,18 +798,17 @@ input.button-secondary {
white-space: nowrap;
}
+.button.button-large,
+.button.button-primary {
+ padding: 0.4em 0.8em 0.5em;
+}
+
.button.button-small {
- padding: 3px .8em 2px;
+ padding: 0.15em 0.8em 0.17em;
}
-.button.button-large {
- font-size: 14px;
- padding: 0.6em 1em 0.5em;
-}
-
-.button.button-tiny {
- padding: .2em .8em;
- font-size: 11px;
+.button.regular {
+ padding: 0.25em 0.8em 0.35em !important;
}
#minor-publishing-actions input,
@@ -843,10 +843,12 @@ input[type="number"].small-text {
#doaction,
#doaction2,
#post-query-submit {
- margin-right: 8px;
+ margin: 1px 8px 0 0;
}
.tablenav .actions select {
+ float: left;
+ margin-right: 6px;
max-width: 200px;
}
@@ -894,6 +896,12 @@ p.search-box {
margin: 0;
}
+.search-box input[name="s"], #search-plugins input[name="s"], .tagsdiv .newtag {
+ float: left;
+ height: 2em;
+ margin: 0 4px 0 0;
+}
+
input[type="text"].ui-autocomplete-loading {
background: transparent url('../images/loading.gif') no-repeat right center;
visibility: visible;
@@ -2482,6 +2490,7 @@ th.asc:hover span.sorting-indicator {
}
.tablenav .actions {
+ overflow: hidden;
padding: 2px 8px 0 0;
}
@@ -5848,7 +5857,7 @@ h3:hover .edit-box {
}
#dashboard-widgets-wrap #dashboard-widgets .postbox form .submit input {
- margin: 0;
+ margin: 0 5px 0 0;
}
#dashboard-widgets-wrap #dashboard-widgets .postbox form .submit #publish {
@@ -6105,7 +6114,7 @@ h3:hover .edit-box {
}
#dashboard-widgets #dashboard_quick_press form p.submit #save-post {
- margin: 0 1em 0 0;
+ margin: 0 0.7em 0 1px;
}
#dashboard-widgets #dashboard_quick_press form p.submit #publish {
diff --git a/wp-admin/custom-background.php b/wp-admin/custom-background.php
index 8fb1399b3b..05d3006a2a 100644
--- a/wp-admin/custom-background.php
+++ b/wp-admin/custom-background.php
@@ -260,7 +260,7 @@ if ( get_background_image() ) {
-
+
-
+
public ? get_sample_permalink_html($post->ID) : '';
$shortlink = wp_get_shortlink($post->ID, 'post');
if ( !empty($shortlink) )
- $sample_permalink_html .= '' . __('Get Shortlink') . '';
+ $sample_permalink_html .= '' . __('Get Shortlink') . '';
if ( $post_type_object->public && ! ( 'pending' == $post->post_status && !current_user_can( $post_type_object->cap->publish_posts ) ) ) { ?>
diff --git a/wp-admin/includes/class-wp-comments-list-table.php b/wp-admin/includes/class-wp-comments-list-table.php
index 9e98f03882..87e105cf06 100644
--- a/wp-admin/includes/class-wp-comments-list-table.php
+++ b/wp-admin/includes/class-wp-comments-list-table.php
@@ -224,13 +224,13 @@ class WP_Comments_List_Table extends WP_List_Table {
?>
'post-query-submit' ) );
+ submit_button( __( 'Filter' ), 'button', false, false, array( 'id' => 'post-query-submit' ) );
}
if ( ( 'spam' == $comment_status || 'trash' == $comment_status ) && current_user_can( 'moderate_comments' ) ) {
wp_nonce_field( 'bulk-destroy', '_destroy_nonce' );
$title = ( 'spam' == $comment_status ) ? esc_attr__( 'Empty Spam' ) : esc_attr__( 'Empty Trash' );
- submit_button( $title, 'small apply', 'delete_all', false );
+ submit_button( $title, 'apply', 'delete_all', false );
}
do_action( 'manage_comments_nav', $comment_status );
echo '
';
diff --git a/wp-admin/includes/class-wp-links-list-table.php b/wp-admin/includes/class-wp-links-list-table.php
index 2a897b76ba..b5cbc55609 100644
--- a/wp-admin/includes/class-wp-links-list-table.php
+++ b/wp-admin/includes/class-wp-links-list-table.php
@@ -69,7 +69,7 @@ class WP_Links_List_Table extends WP_List_Table {
'orderby' => 'name',
);
wp_dropdown_categories( $dropdown_options );
- submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) );
+ submit_button( __( 'Filter' ), 'button', false, false, array( 'id' => 'post-query-submit' ) );
?>
- 'search-submit') ); ?>
+ 'search-submit') ); ?>
\n";
- submit_button( __( 'Apply' ), 'small action', false, false, array( 'id' => "doaction$two" ) );
+ submit_button( __( 'Apply' ), 'action', false, false, array( 'id' => "doaction$two" ) );
echo "\n";
}
diff --git a/wp-admin/includes/class-wp-media-list-table.php b/wp-admin/includes/class-wp-media-list-table.php
index b4126f5ee9..465612cbb6 100644
--- a/wp-admin/includes/class-wp-media-list-table.php
+++ b/wp-admin/includes/class-wp-media-list-table.php
@@ -92,13 +92,13 @@ class WP_Media_List_Table extends WP_List_Table {
$this->months_dropdown( 'attachment' );
do_action( 'restrict_manage_posts' );
- submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) );
+ submit_button( __( 'Filter' ), 'button', false, false, array( 'id' => 'post-query-submit' ) );
}
if ( $this->detached ) {
submit_button( __( 'Scan for lost attachments' ), 'secondary', 'find_detached', false );
} elseif ( $this->is_trash && current_user_can( 'edit_others_posts' ) ) {
- submit_button( __( 'Empty Trash' ), 'small apply', 'delete_all', false );
+ submit_button( __( 'Empty Trash' ), 'apply', 'delete_all', false );
} ?>
'post-query-submit' ) );
+ submit_button( __( 'Filter' ), 'button', false, false, array( 'id' => 'post-query-submit' ) );
}
if ( $this->is_trash && current_user_can( get_post_type_object( $this->screen->post_type )->cap->edit_others_posts ) ) {
- submit_button( __( 'Empty Trash' ), 'small apply', 'delete_all', false );
+ submit_button( __( 'Empty Trash' ), 'apply', 'delete_all', false );
}
?>
diff --git a/wp-admin/includes/dashboard.php b/wp-admin/includes/dashboard.php
index 1cc3c813df..5bfb71ccd3 100644
--- a/wp-admin/includes/dashboard.php
+++ b/wp-admin/includes/dashboard.php
@@ -439,14 +439,14 @@ function wp_network_dashboard_right_now() {
-
+
diff --git a/wp-admin/includes/meta-boxes.php b/wp-admin/includes/meta-boxes.php
index ea7e2d345f..2b3e6ab2a7 100644
--- a/wp-admin/includes/meta-boxes.php
+++ b/wp-admin/includes/meta-boxes.php
@@ -206,19 +206,19 @@ if ( !in_array( $post->post_status, array('publish', 'future', 'private') ) || 0
if ( $can_publish ) :
if ( !empty($post->post_date_gmt) && time() < strtotime( $post->post_date_gmt . ' +0000' ) ) : ?>
- 'p' ) ); ?>
+ 'p' ) ); ?>
- 'p' ) ); ?>
+ 'p' ) ); ?>
- 'p' ) ); ?>
+ 'p' ) ); ?>
-
+
@@ -286,7 +286,7 @@ function post_tags_meta_box($post, $box) {
labels->add_new_item; ?>
-
+
labels->separate_items_with_commas ); ?>
@@ -636,9 +636,9 @@ if ( !empty($_GET['action']) && 'edit' == $_GET['action'] && current_user_can('m
link_id) ) { ?>
-
+
-
+
diff --git a/wp-admin/includes/nav-menu.php b/wp-admin/includes/nav-menu.php
index 5fc73fcbbf..6d87e247a1 100644
--- a/wp-admin/includes/nav-menu.php
+++ b/wp-admin/includes/nav-menu.php
@@ -693,7 +693,7 @@ function wp_nav_menu_item_post_type_meta_box( $object, $post_type ) {
- 'submit-quick-search-posttype-' . $post_type_name ) ); ?>
+ 'submit-quick-search-posttype-' . $post_type_name ) ); ?>