Permalink
Browse files

Updates and fixes to the new button styles. By default, buttons are n…

…ow 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
  • Loading branch information...
1 parent 5a362d3 commit c1b0670c2de26b5378e48af05a310d9f41c09476 @nacin nacin committed Sep 21, 2012
@@ -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;
@@ -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;
@@ -157,7 +157,7 @@ body {
#customize-header-actions .button-primary {
float: right;
- margin-top: 11px;
+ margin-top: 10px;
}
#customize-header-actions img {
View
@@ -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-small {
- padding: 3px .8em 2px;
+.button.button-large,
+.button.button-primary {
+ padding: 0.4em 0.8em 0.5em;
}
-.button.button-large {
- font-size: 14px;
- padding: 0.6em 1em 0.5em;
+.button.button-small {
+ padding: 0.15em 0.8em 0.17em;
}
-.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 {
@@ -260,7 +260,7 @@ function admin_page() {
<input type="file" id="upload" name="import" />
<input type="hidden" name="action" value="save" />
<?php wp_nonce_field( 'custom-background-upload', '_wpnonce-custom-background-upload' ); ?>
- <?php submit_button( __( 'Upload' ), 'button', 'submit', false ); ?>
+ <?php submit_button( __( 'Upload' ), 'small', 'submit', false ); ?>
</p>
<?php
$image_library_url = get_upload_iframe_src( 'image', null, 'library' );
@@ -558,7 +558,7 @@ function step_1() {
<input type="file" id="upload" name="import" />
<input type="hidden" name="action" value="save" />
<?php wp_nonce_field( 'custom-header-upload', '_wpnonce-custom-header-upload' ); ?>
- <?php submit_button( __( 'Upload' ), 'button', 'submit', false ); ?>
+ <?php submit_button( __( 'Upload' ), 'small', 'submit', false ); ?>
</p>
<?php
$image_library_url = get_upload_iframe_src( 'image', null, 'library' );
@@ -294,7 +294,7 @@
$sample_permalink_html = $post_type_object->public ? get_sample_permalink_html($post->ID) : '';
$shortlink = wp_get_shortlink($post->ID, 'post');
if ( !empty($shortlink) )
- $sample_permalink_html .= '<input id="shortlink" type="hidden" value="' . esc_attr($shortlink) . '" /><a href="#" class="button button-tiny" onclick="prompt(&#39;URL:&#39;, jQuery(\'#shortlink\').val()); return false;">' . __('Get Shortlink') . '</a>';
+ $sample_permalink_html .= '<input id="shortlink" type="hidden" value="' . esc_attr($shortlink) . '" /><a href="#" class="button button-small" onclick="prompt(&#39;URL:&#39;, jQuery(\'#shortlink\').val()); return false;">' . __('Get Shortlink') . '</a>';
if ( $post_type_object->public && ! ( 'pending' == $post->post_status && !current_user_can( $post_type_object->cap->publish_posts ) ) ) { ?>
<div id="edit-slug-box">
@@ -224,13 +224,13 @@ function extra_tablenav( $which ) {
?>
</select>
<?php
- submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => '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 '</div>';
Oops, something went wrong.

0 comments on commit c1b0670

Please sign in to comment.