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() {

- 'submit_users' ) ); ?> + 'submit_users' ) ); ?>

- 'submit_sites' ) ); ?> + 'submit_sites' ) ); ?>

- + 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 ) ); ?>