Refine button styles, notably the gray buttons.
* Crisper edges, fewer outer shadows. * Higher contrast borders on the gray buttons. * Separates `button-large` from `button-primary`, and removes the `regular` override class. props hugobaeta, helenyhou, lessbloat. see #21598. git-svn-id: http://core.svn.wordpress.org/trunk@22099 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith
parent
5acfb5564b
commit
a918ec9135
|
|
@ -388,16 +388,14 @@ a.button:active {
|
|||
input[type=button],
|
||||
input[type=submit] {
|
||||
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 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;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
|
||||
background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: -o-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: linear-gradient(to bottom, #fefefe, #f4f4f4);
|
||||
border-color: #bbb;
|
||||
color: #333;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
.button.hover,
|
||||
|
|
@ -422,10 +420,8 @@ input[type=submit]:focus {
|
|||
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: 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;
|
||||
border-color: #999;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.button.focus,
|
||||
|
|
@ -437,9 +433,8 @@ input[type=submit]: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);
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.button.active,
|
||||
|
|
@ -447,19 +442,38 @@ input[type=submit]:focus {
|
|||
.button-secondary.active,
|
||||
.button-secondary:active,
|
||||
.submit input:active,
|
||||
input[type=button].active,
|
||||
input[type=button]:active,
|
||||
input[type=submit].active,
|
||||
input[type=submit]:active {
|
||||
background: #eee;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f9f9f9));
|
||||
background-image: -webkit-linear-gradient(top, #eee, #f9f9f9);
|
||||
background-image: -moz-linear-gradient(top, #eee, #f9f9f9);
|
||||
background-image: -o-linear-gradient(top, #eee, #f9f9f9);
|
||||
background-image: linear-gradient(to bottom, #eee, #f9f9f9);
|
||||
border-color: #999 #ddd #ddd #999;
|
||||
color: #555;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
|
||||
box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe));
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe);
|
||||
background-image: -o-linear-gradient(top, #f4f4f4, #fefefe);
|
||||
background-image: linear-gradient(to bottom, #f4f4f4, #fefefe);
|
||||
border-color: #999;
|
||||
color: #333;
|
||||
text-shadow: 0 -1px 0 #fff;
|
||||
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
|
||||
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
|
||||
}
|
||||
|
||||
.button-disabled,
|
||||
.button[disabled],
|
||||
.button:disabled,
|
||||
.button-secondary[disabled],
|
||||
.button-secondary:disabled,
|
||||
a.button.disabled {
|
||||
color: #aaa !important;
|
||||
border-color: #ddd !important;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important;
|
||||
background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
|
||||
background-image: -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
|
||||
background-image: -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: 0 1px 0 #fff !important;
|
||||
}
|
||||
|
||||
input.button-primary,
|
||||
|
|
@ -477,7 +491,7 @@ a.button-primary {
|
|||
box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
input.button-primary.hover,
|
||||
|
|
@ -495,10 +509,10 @@ a.button-primary:focus {
|
|||
background-image: -o-linear-gradient(top, #2e9fd2, #21759b);
|
||||
background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
|
||||
border-color: #1b607f;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0px 1px 2px rgba(0,0,0,.4);
|
||||
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0px 1px 2px rgba(0,0,0,.4);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
|
||||
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
|
||||
color: #fff;
|
||||
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
input.button-primary.focus,
|
||||
|
|
@ -506,8 +520,8 @@ 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);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
input.button-primary.active,
|
||||
|
|
@ -520,22 +534,11 @@ a.button-primary:active {
|
|||
background-image: -moz-linear-gradient(top, #21759b, #278ab7);
|
||||
background-image: -o-linear-gradient(top, #21759b, #278ab7);
|
||||
background-image: linear-gradient(to bottom, #21759b, #278ab7);
|
||||
border-color: #124560 #2382ae #2382ae #124560;
|
||||
border-color: #124560 #2382ae #2382ae #2382ae;
|
||||
color: rgba(255,255,255,0.95);
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
|
||||
box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.button-disabled,
|
||||
.button[disabled],
|
||||
.button:disabled,
|
||||
.button-secondary[disabled],
|
||||
.button-secondary:disabled,
|
||||
a.button.disabled {
|
||||
color: #aaa !important;
|
||||
border-color: #ddd !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.button-primary-disabled,
|
||||
|
|
@ -543,8 +546,10 @@ a.button.disabled {
|
|||
.button-primary:disabled {
|
||||
color: #94cde7 !important;
|
||||
background: #298cba !important;
|
||||
border-color: #1b607f !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
.button-primary-disabled:hover,
|
||||
|
|
|
|||
|
|
@ -379,16 +379,14 @@ a.button:active {
|
|||
input[type=button],
|
||||
input[type=submit] {
|
||||
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 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;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
|
||||
background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: -o-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: linear-gradient(to bottom, #fefefe, #f4f4f4);
|
||||
border-color: #bbb;
|
||||
color: #333;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
.button.hover,
|
||||
|
|
@ -413,10 +411,8 @@ input[type=submit]:focus {
|
|||
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: 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;
|
||||
border-color: #999;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.button.focus,
|
||||
|
|
@ -428,9 +424,8 @@ input[type=submit]: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);
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.button.active,
|
||||
|
|
@ -442,15 +437,34 @@ input[type=button].active,
|
|||
input[type=button]:active,
|
||||
input[type=submit]:active {
|
||||
background: #eee;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f9f9f9));
|
||||
background-image: -webkit-linear-gradient(top, #eee, #f9f9f9);
|
||||
background-image: -moz-linear-gradient(top, #eee, #f9f9f9);
|
||||
background-image: -o-linear-gradient(top, #eee, #f9f9f9);
|
||||
background-image: linear-gradient(to bottom, #eee, #f9f9f9);
|
||||
border-color: #999 #ddd #ddd #999;
|
||||
color: #555;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
|
||||
box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe));
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe);
|
||||
background-image: -o-linear-gradient(top, #f4f4f4, #fefefe);
|
||||
background-image: linear-gradient(to bottom, #f4f4f4, #fefefe);
|
||||
border-color: #999;
|
||||
color: #333;
|
||||
text-shadow: 0 -1px 0 #fff;
|
||||
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
|
||||
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
|
||||
}
|
||||
|
||||
.button-disabled,
|
||||
.button[disabled],
|
||||
.button:disabled,
|
||||
.button-secondary[disabled],
|
||||
.button-secondary:disabled,
|
||||
a.button.disabled {
|
||||
color: #aaa !important;
|
||||
border-color: #ddd !important;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important;
|
||||
background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
|
||||
background-image: -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
|
||||
background-image: -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: 0 1px 0 #fff !important;
|
||||
}
|
||||
|
||||
input.button-primary,
|
||||
|
|
@ -468,7 +482,7 @@ a.button-primary {
|
|||
box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
input.button-primary.hover,
|
||||
|
|
@ -486,10 +500,10 @@ a.button-primary:focus {
|
|||
background-image: -o-linear-gradient(top, #2e9fd2, #21759b);
|
||||
background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
|
||||
border-color: #1b607f;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 1px rgba(0,0,0,.3);
|
||||
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 1px rgba(0,0,0,.3);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
|
||||
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
|
||||
color: #fff;
|
||||
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
input.button-primary.focus,
|
||||
|
|
@ -497,8 +511,8 @@ 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);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
input.button-primary.active,
|
||||
|
|
@ -511,22 +525,11 @@ a.button-primary:active {
|
|||
background-image: -moz-linear-gradient(top, #21759b, #278ab7);
|
||||
background-image: -o-linear-gradient(top, #21759b, #278ab7);
|
||||
background-image: linear-gradient(to bottom, #21759b, #278ab7);
|
||||
border-color: #124560 #2382ae #2382ae #124560;
|
||||
border-color: #124560 #2382ae #2382ae #2382ae;
|
||||
color: rgba(255,255,255,0.95);
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
|
||||
box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.button-disabled,
|
||||
.button[disabled],
|
||||
.button:disabled,
|
||||
.button-secondary[disabled],
|
||||
.button-secondary:disabled,
|
||||
a.button.disabled {
|
||||
color: #aaa !important;
|
||||
border-color: #ddd !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.button-primary-disabled,
|
||||
|
|
@ -534,8 +537,10 @@ a.button.disabled {
|
|||
.button-primary:disabled {
|
||||
color: #94cde7 !important;
|
||||
background: #298cba !important;
|
||||
border-color: #1b607f !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
.button-primary-disabled:hover,
|
||||
|
|
|
|||
|
|
@ -783,7 +783,7 @@ input.button-secondary {
|
|||
line-height: 17px;
|
||||
height: 15px;
|
||||
margin: 0;
|
||||
padding: 0.25em 0.8em 0.35em;
|
||||
padding: 0.25em 0.85em 0.35em;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
|
@ -795,17 +795,12 @@ input.button-secondary {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button.button-large,
|
||||
.button.button-primary {
|
||||
padding: 0.4em 0.8em 0.5em;
|
||||
.button.button-large {
|
||||
padding: 0.4em 1.0em 0.5em;
|
||||
}
|
||||
|
||||
.button.button-small {
|
||||
padding: 0.15em 0.8em 0.17em;
|
||||
}
|
||||
|
||||
.button.regular {
|
||||
padding: 0.25em 0.8em 0.35em !important;
|
||||
padding: 0.15em 0.75em 0.17em;
|
||||
}
|
||||
|
||||
#minor-publishing-actions input,
|
||||
|
|
|
|||
|
|
@ -1600,9 +1600,9 @@ function submit_button( $text = null, $type = 'primary', $name = 'submit', $wrap
|
|||
* Defaults to no other attributes. Other attributes can also be provided as a
|
||||
* string such as 'tabindex="1"', though the array format is typically cleaner.
|
||||
*/
|
||||
function get_submit_button( $text = null, $type = 'primary', $name = 'submit', $wrap = true, $other_attributes = null ) {
|
||||
function get_submit_button( $text = null, $type = 'primary large', $name = 'submit', $wrap = true, $other_attributes = null ) {
|
||||
if ( ! is_array( $type ) )
|
||||
$type = explode( ' ', $type );
|
||||
$type = explode( ' ', $type );
|
||||
|
||||
$button_shorthand = array( 'primary', 'small', 'large' );
|
||||
$classes = array( 'button' );
|
||||
|
|
|
|||
Loading…
Reference in New Issue