Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-23 13:24:57 +02:00
Code Issues Projects Releases Wiki Activity

New button styles.

Browse Source 
Using the new buttons:

* Button classes are now stackable.
* All buttons should use a base class of "button".
* Buttons default to the gray style (formerly "button-secondary"). Buttons can add a style by adding additional classes. To make a primary button, add the "button-primary" class.
* Buttons can be rendered in various sizes. In addition to the default size, you can add "button-large", "button-small", or "button-tiny".

For backwards compatibility reasons, "button-primary" and "button-secondary" both work as standalone classes.

get_submit_button() has been adjusted to handle shorthand button classes (i.e. button classes can be passed without the "button-" prefix).

props lessbloat, helenyhou, trepmal, nacin. see #21598.



git-svn-id: http://core.svn.wordpress.org/trunk@21789 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-09-08 04:58:34 +00:00
parent 1af8c36086
commit 67894a3407
19 changed files with 369 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
wp-admin/css/colors-classic.css
View File

@ -57,6 +57,7 @@ input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
input[type="button"]:focus,
input[type="submit"].focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="email"]:focus,
@ -377,81 +378,147 @@ td.help {
color: #666;
}
a.button:active {
outline: none;
}
.button,
.button-secondary,
.submit input,
input[type=button],
input[type=submit] {
border-color: #bbb;
color: #464646;
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);
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);
color: #464646;
text-shadow: 1px 1px 0 #fff;
}
.button.hover,
.button:hover,
.button-secondary.hover,
.button-secondary:hover,
.submit input:hover,
input[type=button]:hover,
input[type=submit]:hover {
input[type=submit]:hover,
.button.focus,
.button:focus,
.button-secondary.focus,
.button-secondary:focus,
.submit input.focus,
.submit input: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);
border-color: #bbb;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
color: #000;
border-color: #666;
}
.button,
.submit input,
.button-secondary {
text-shadow: 0 1px 0 #fff;
background: #f2f2f2;
background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#fff));
background-image: -webkit-linear-gradient(bottom, #ededed, #fff);
background-image: -moz-linear-gradient(bottom, #ededed, #fff);
background-image: -o-linear-gradient(bottom, #ededed, #fff);
background-image: linear-gradient(to top, #ededed, #fff);
}
.button.active,
.button:active,
.button-secondary.active,
.button-secondary:active,
.submit input:active,
.button-secondary: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(#ededed), to(#fff));
background-image: -webkit-linear-gradient(top, #ededed, #fff);
background-image: -moz-linear-gradient(top, #ededed, #fff);
background-image: -o-linear-gradient(top, #ededed, #fff);
background-image: linear-gradient(to bottom, #ededed, #fff);
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);
}
.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 {
border-color: #298cba;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
background: #21759b;
background-image: -webkit-gradient(linear, left bottom, left top, from(#227199), to(#298cba));
background-image: -webkit-linear-gradient(bottom, #227199, #298cba);
background-image: -moz-linear-gradient(bottom, #227199, #298cba);
background-image: -o-linear-gradient(bottom, #227199, #298cba);
background-image: linear-gradient(to top, #227199, #298cba);
}
input.button-primary:active,
button.button-primary:active,
a.button-primary:active {
color: #eaf2fa;
background: #298cba;
background-image: -webkit-gradient(linear, left top, left bottom, from(#227199), to(#298cba));
background-image: -webkit-linear-gradient(top, #227199, #298cba);
background-image: -moz-linear-gradient(top, #227199, #298cba);
background-image: -o-linear-gradient(top, #227199, #298cba);
background-image: linear-gradient(to bottom, #227199, #298cba);
background-color: #21759b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
background-image: -moz-linear-gradient(top, #2a95c5, #21759b);
background-image: -o-linear-gradient(top, #2a95c5, #21759b);
background-image: linear-gradient(to bottom, #2a95c5, #21759b);
border-color: #21759b;
border-bottom-color: #1e6a8d;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
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);
}
input.button-primary.hover,
input.button-primary:hover,
button.button-primary:hover,
a.button-primary:hover,
a.button-primary:focus,
input.button-primary.focus,
input.button-primary:focus,
button.button-primary:focus,
a.button-primary:focus {
background-color: #278ab7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
background-image: -moz-linear-gradient(top, #2e9fd2, #21759b);
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);
color: #fff;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
}
input.button-primary.active,
input.button-primary:active,
button.button-primary:active,
a.button-primary:active {
border-color: #13455b;
color: #eaf2fa;
background: #1b607f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
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;
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);
}
input.button-primary.focus,
input.button-primary:focus,
button.button-primary:focus,
a.button-primary:focus {
border-color: #124560;
}
.button-disabled,
@ -462,13 +529,17 @@ a.button-primary:active {
a.button.disabled {
color: #aaa !important;
border-color: #ddd !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.button-primary-disabled,
.button-primary[disabled],
.button-primary:disabled {
color: #9fd0d5 !important;
color: #94cde7 !important;
background: #298cba !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a:hover,
@ -947,6 +1018,7 @@ table.widefat .spam a:hover,
}
/* Containers */
.wp-editor-wrap .wp-editor-container,
.wp-editor-wrap .wp_themeSkin table.mceLayout {
border-color: #bed1dd #bed1dd #d0dfe9;
}
@ -967,12 +1039,9 @@ table.widefat .spam a:hover,
background-color: #f5f5f5;
}
/* Button */
.wp-editor-wrap .wp_themeSkin .mceButton,
.wp-editor-wrap .wp_themeSkin .mceListBox .mceText,
.wp-editor-wrap .wp_themeSkin .mceListBox .mceOpen {
border-color: #b0c8d7;
background: #cfdfe9;
.wp-editor-wrap .wp_themeSkin a.mceButtonEnabled:hover {
border-color: #bbb;
background: #eee;
background-image: -webkit-gradient(linear, left bottom, left top, from(#cfdfe9), to(#fff));
background-image: -webkit-linear-gradient(bottom, #cfdfe9, #fff);
background-image: -moz-linear-gradient(bottom, #cfdfe9, #fff);
@ -980,24 +1049,14 @@ table.widefat .spam a:hover,
background-image: linear-gradient(to top, #cfdfe9, #fff);
}
.wp-editor-wrap .wp_themeSkin a.mceButtonEnabled:hover {
border-color: #5589aa;
background: #c9c9c9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#bdccd5), to(#000));
background-image: -webkit-linear-gradient(bottom, #bdccd5, #fff);
background-image: -moz-linear-gradient(bottom, #bdccd5, #fff);
background-image: -o-linear-gradient(bottom, #bdccd5, #fff);
background-image: linear-gradient(to top, #bdccd5, #fff);
}
.wp-editor-wrap .wp_themeSkin a.mceButton:active,
.wp-editor-wrap .wp_themeSkin a.mceButtonEnabled:active,
.wp-editor-wrap .wp_themeSkin a.mceButtonSelected:active,
.wp-editor-wrap .wp_themeSkin a.mceButtonActive,
.wp-editor-wrap .wp_themeSkin a.mceButtonActive:active,
.wp-editor-wrap .wp_themeSkin a.mceButtonActive:hover {
background: #b0c8d7;
border-color: #5589aa;
background: #c7d8e2;
border-color: #b0c8d7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#cfdfe9), to(#fff));
background-image: -webkit-linear-gradient(top, #cfdfe9, #fff);
background-image: -moz-linear-gradient(top, #cfdfe9, #fff);
@ -1005,10 +1064,6 @@ table.widefat .spam a:hover,
background-image: linear-gradient(to bottom, #cfdfe9, #fff);
}
.wp-editor-wrap .wp_themeSkin .mceButtonDisabled {
border-color: #b0c8d7 !important;
}
.wp-editor-wrap .wp_themeSkin .mceListBox .mceOpen {
border-left: 0 !important;
}
@ -1019,16 +1074,21 @@ table.widefat .spam a:hover,
.wp-editor-wrap .wp_themeSkin .mceListBoxSelected .mceOpen,
.wp-editor-wrap .wp_themeSkin .mceListBoxSelected .mceText,
.wp-editor-wrap .wp_themeSkin table.mceListBoxEnabled:active .mceText {
background: #b0c8d7;
border-color: #5589aa;
border-color: #B0C8D7;
background: #c9c9c9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5));
background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5);
background-image: -moz-linear-gradient(bottom, #fff, #bdccd5);
background-image: -o-linear-gradient(bottom, #fff, #bdccd5);
background-image: linear-gradient(to top, #fff, #bdccd5);
}
.wp-editor-wrap .wp_themeSkin table.mceListBoxEnabled:hover .mceText,
.wp-editor-wrap .wp_themeSkin .mceListBoxHover .mceText,
.wp-editor-wrap .wp_themeSkin table.mceListBoxEnabled:hover .mceOpen,
.wp-editor-wrap .wp_themeSkin .mceListBoxHover .mceOpen {
border-color: #5589aa;
background: #c9c9c9;
border-color: #B0C8D7;
background: #c7d8e2;
background-image: -webkit-gradient(linear, left bottom, left top, from(#cfdfe9), to(#fff));
background-image: -webkit-linear-gradient(bottom, #cfdfe9, #fff);
background-image: -moz-linear-gradient(bottom, #cfdfe9, #fff);
@ -1036,39 +1096,56 @@ table.widefat .spam a:hover,
background-image: linear-gradient(to top, #cfdfe9, #fff);
}
/* SplitButton */
.wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceAction,
.wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceOpen {
border-color: #b0c8d7;
}
.wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceOpen:hover,
.wp-editor-wrap .wp_themeSkin .mceSplitButton:hover a.mceOpen,
.wp-editor-wrap .wp_themeSkin .mceSplitButtonSelected a.mceOpen,
.wp-editor-wrap .wp_themeSkin .mceSplitButtonSelected a.mceAction,
.wp-editor-wrap .wp_themeSkin table.mceSplitButtonEnabled:hover a.mceAction,
.wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceAction:hover {
border-color: #5589aa;
border-color: #B0C8D7;
}
.wp-editor-wrap .wp_themeSkin table.mceSplitButton td {
background: #cfdfe9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#cfdfe9), to(#fff));
background-image: -webkit-linear-gradient(bottom, #cfdfe9, #fff);
background-image: -moz-linear-gradient(bottom, #cfdfe9, #fff);
background-image: -o-linear-gradient(bottom, #cfdfe9, #fff);
background-image: linear-gradient(to top, #cfdfe9, #fff);
.wp-editor-wrap .wp_themeSkin .mceSplitButtonSelected td {
background: #c9c9c9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5));
background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5);
background-image: -moz-linear-gradient(bottom, #fff, #bdccd5);
background-image: -o-linear-gradient(bottom, #fff, #bdccd5);
background-image: linear-gradient(to top, #fff, #bdccd5);
}
.wp-editor-wrap .wp_themeSkin table.mceSplitButton:hover td {
border-color: #bbb;
background: #c9c9c9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#bdccd5), to(#000));
background-image: -webkit-gradient(linear, left bottom, left top, from(#bdccd5), to(#fff));
background-image: -webkit-linear-gradient(bottom, #bdccd5, #fff);
background-image: -moz-linear-gradient(bottom, #bdccd5, #fff);
background-image: -o-linear-gradient(bottom, #bdccd5, #fff);
background-image: linear-gradient(to top, #bdccd5, #fff);
}
.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive {
background-color: #b0c8d7;
.wp-editor-wrap .wp_themeSkin table.mceSplitButton:active td.mceFirst,
.wp-editor-wrap .wp_themeSkin table.mceSplitButton td.mceLast:active {
border-color: #bbb;
background: #c9c9c9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5));
background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5);
background-image: -moz-linear-gradient(bottom, #fff, #bdccd5);
background-image: -o-linear-gradient(bottom, #fff, #bdccd5);
background-image: linear-gradient(to top, #fff, #bdccd5);
}
.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive td a.mceAction,
.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive td a.mceOpen {
border-color: #B0C8D7;
}
.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive td {
background: #c9c9c9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5));
background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5);
background-image: -moz-linear-gradient(bottom, #fff, #bdccd5);
background-image: -o-linear-gradient(bottom, #fff, #bdccd5);
background-image: linear-gradient(to top, #fff, #bdccd5);
}
/* ColorSplitButton */

170
wp-admin/css/colors-fresh.css
View File

@ -52,6 +52,7 @@ input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
input[type="button"]:focus,
input[type="submit"].focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="email"]:focus,
@ -368,81 +369,150 @@ td.help {
color: #666;
}
a.button:active {
outline: none;
}
.button,
.button-secondary,
.submit input,
input[type=button],
input[type=submit] {
border-color: #bbb;
color: #464646;
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);
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);
color: #464646;
text-shadow: 1px 1px 0 #fff;
}
.button.hover,
.button:hover,
.button-secondary.hover,
.button-secondary:hover,
.submit input:hover,
input[type=button]:hover,
input[type=submit]:hover {
input[type=submit]:hover,
.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 {
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);
border-color: #bbb;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
color: #000;
border-color: #666;
}
.button,
.submit input,
.button-secondary {
text-shadow: 0 1px 0 #fff;
background: #f2f2f2;
background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#fff));
background-image: -webkit-linear-gradient(bottom, #ededed, #fff);
background-image: -moz-linear-gradient(bottom, #ededed, #fff);
background-image: -o-linear-gradient(bottom, #ededed, #fff);
background-image: linear-gradient(to top, #ededed, #fff);
}
.button.active,
.button:active,
.small.active,
.small:active,
.button-secondary.active,
.button-secondary:active,
.submit input:active,
.button-secondary:active {
input[type=button].active,
input[type=button]:active,
input[type=submit]:active {
background: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background-image: -webkit-linear-gradient(top, #ededed, #fff);
background-image: -moz-linear-gradient(top, #ededed, #fff);
background-image: -o-linear-gradient(top, #ededed, #fff);
background-image: linear-gradient(to bottom, #ededed, #fff);
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);
}
.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 {
border-color: #298cba;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
background: #21759b;
background-image: -webkit-gradient(linear, left bottom, left top, from(#227199), to(#298cba));
background-image: -webkit-linear-gradient(bottom, #227199, #298cba);
background-image: -moz-linear-gradient(bottom, #227199, #298cba);
background-image: -o-linear-gradient(bottom, #227199, #298cba);
background-image: linear-gradient(to top, #227199, #298cba);
}
input.button-primary:active,
button.button-primary:active,
a.button-primary:active {
color: #eaf2fa;
background: #298cba;
background-image: -webkit-gradient(linear, left top, left bottom, from(#227199), to(#298cba));
background-image: -webkit-linear-gradient(top, #227199, #298cba);
background-image: -moz-linear-gradient(top, #227199, #298cba);
background-image: -o-linear-gradient(top, #227199, #298cba);
background-image: linear-gradient(to bottom, #227199, #298cba);
background-color: #21759b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
background-image: -moz-linear-gradient(top, #2a95c5, #21759b);
background-image: -o-linear-gradient(top, #2a95c5, #21759b);
background-image: linear-gradient(to bottom, #2a95c5, #21759b);
border-color: #21759b;
border-bottom-color: #1e6a8d;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
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);
}
input.button-primary.hover,
input.button-primary:hover,
button.button-primary:hover,
a.button-primary:hover,
a.button-primary:focus,
input.button-primary.focus,
input.button-primary:focus,
button.button-primary:focus,
a.button-primary:focus {
background-color: #278ab7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
background-image: -moz-linear-gradient(top, #2e9fd2, #21759b);
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);
color: #fff;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
}
input.button-primary.active,
input.button-primary:active,
button.button-primary:active,
a.button-primary:active {
border-color: #13455b;
color: #eaf2fa;
background: #1b607f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
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;
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);
}
input.button-primary.focus,
input.button-primary:focus,
button.button-primary:focus,
a.button-primary:focus {
border-color: #124560;
}
.button-disabled,
@ -453,13 +523,17 @@ a.button-primary:active {
a.button.disabled {
color: #aaa !important;
border-color: #ddd !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.button-primary-disabled,
.button-primary[disabled],
.button-primary:disabled {
color: #9fd0d5 !important;
color: #94cde7 !important;
background: #298cba !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a:hover,

3
wp-admin/css/ie.css
View File

@ -124,8 +124,7 @@ table.fixed td {
#wpbody-content input.button,
#wpbody-content input.button-primary,
#wpbody-content input.button-secondary,
#wpbody-content input.button-highlighted {
#wpbody-content input.button-secondary {
overflow: visible;
}

2
wp-admin/css/wp-admin-rtl.css
View File

@ -2303,7 +2303,6 @@ h3.tb {
.button,
.button-primary,
.button-secondary,
.button-highlighted,
#postcustomstuff .submit input {
font-family: Tahoma, Arial, sans-serif;
}
@ -2473,7 +2472,6 @@ body.login.locale-he-il,
.locale-he-il .button,
.locale-he-il .button-primary,
.locale-he-il .button-secondary,
.locale-he-il .button-highlighted,
.locale-he-il #postcustomstuff .submit input,
.locale-he-il div.sidebar-name h3 {
font-family: Arial, sans-serif;

70
wp-admin/css/wp-admin.css
View File

@ -779,28 +779,41 @@ input.button,
.button-primary,
input.button-primary,
.button-secondary,
input.button-secondary,
.button-highlighted,
input.button-highlighted,
#postcustomstuff .submit input {
input.button-secondary {
display: inline-block;
text-decoration: none;
font-size: 12px !important;
line-height: 13px;
padding: 3px 8px;
font-size: 12px;
line-height: 15px;
margin: 0;
padding: 0.5em 0.8em 0.4em;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-border-radius: 11px;
border-radius: 11px;
-moz-box-sizing: content-box;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
white-space: nowrap;
}
.button.button-small {
padding: 3px .8em 2px;
}
.button.button-large {
font-size: 14px;
padding: 0.6em 1em 0.5em;
}
.button.button-tiny {
padding: .2em .8em;
font-size: 11px;
}
#minor-publishing-actions input,
#major-publishing-actions input,
#minor-publishing-actions .preview {
min-width: 80px;
text-align: center;
}
@ -1015,15 +1028,6 @@ ul#add-to-blog-users {
list-style: square;
}
a.button,
a.button-primary,
a.button-secondary {
line-height: 15px;
padding: 3px 10px;
white-space: nowrap;
-webkit-border-radius: 10px;
}
.approve,
.unapproved .unapprove {
display: none;
@ -2804,7 +2808,7 @@ table .inline-edit-row fieldset ul.cat-hover {
#titlediv {
position: relative;
margin-bottom: 20px;
margin-bottom: 10px;
}
#titlediv label { cursor: text; }
@ -2857,11 +2861,15 @@ input#link_url {
}
#edit-slug-box {
height: 1em;
margin-top: 8px;
padding: 0 10px;
}
#edit-slug-box .cancel {
margin-right: 10px;
font-size: 11px;
}
#editable-post-name-full {
display: none;
}
@ -3159,7 +3167,7 @@ td.plugin-title p {
#postcustom #postcustomstuff .submit {
border: 0 none;
float: none;
padding: 5px 8px;
padding: 0 0 8px 8px;
}
#side-sortables #postcustom #postcustomstuff .submit {
@ -3195,10 +3203,6 @@ td.plugin-title p {
width: 38%;
}
#postcustomstuff #newmeta .submit {
padding: 0 8px;
}
#postcustomstuff .submit input,
#postcustomstuff table #newmeta-submit {
width: auto;
@ -4243,7 +4247,7 @@ span.imgedit-scale-warn {
#replysubmit {
margin: 0;
padding: 0 7px 3px;
padding: 0 5px 3px;
text-align: center;
}
@ -4672,8 +4676,6 @@ h2 .nav-tab {
.plugins .name,
#pass-strength-result.strong,
#pass-strength-result.short,
.button-highlighted,
input.button-highlighted,
#ed_reply_toolbar #ed_reply_strong,
.item-controls .item-order a,
.feature-filter .feature-name {
@ -5631,7 +5633,6 @@ table.form-table td .updated {
padding: 0;
}
#titlediv,
#poststuff .postarea {
margin-bottom: 20px;
}
@ -6084,7 +6085,7 @@ h3:hover .edit-box {
}
#dashboard-widgets #dashboard_quick_press form p.submit #save-post {
margin: 0 1em 0 10px;
margin: 0 0.3em 0 5px;
}
#dashboard-widgets #dashboard_quick_press form p.submit #publish {
@ -6278,8 +6279,7 @@ a.rsswidget {
.login .button-primary {
font-size: 13px !important;
line-height: 16px;
padding: 3px 10px;
padding: .4em .8em;
float: right;
}

2
wp-admin/edit-form-advanced.php
View File

@ -294,7 +294,7 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
$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" 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-tiny" 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">

4
wp-admin/includes/class-wp-comments-list-table.php
View File

@ -224,13 +224,13 @@ class WP_Comments_List_Table extends WP_List_Table {
?>
</select>
<?php
submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) );
submit_button( __( 'Filter' ), 'small', 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, 'button-secondary apply', 'delete_all', false );
submit_button( $title, 'small apply', 'delete_all', false );
}
do_action( 'manage_comments_nav', $comment_status );
echo '</div>';

2
wp-admin/includes/class-wp-links-list-table.php
View File

@ -68,7 +68,7 @@ class WP_Links_List_Table extends WP_List_Table {
'orderby' => 'name',
);
wp_dropdown_categories( $dropdown_options );
submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) );
submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) );
?>
</div>
<?php

4
wp-admin/includes/class-wp-list-table.php
View File

@ -217,7 +217,7 @@ class WP_List_Table {
<p class="search-box">
<label class="screen-reader-text" for="<?php echo $input_id ?>"><?php echo $text; ?>:</label>
<input type="search" id="<?php echo $input_id ?>" name="s" value="<?php _admin_search_query(); ?>" />
<?php submit_button( $text, 'button', false, false, array('id' => 'search-submit') ); ?>
<?php submit_button( $text, 'small', false, false, array('id' => 'search-submit') ); ?>
</p>
<?php
}
@ -304,7 +304,7 @@ class WP_List_Table {
echo "</select>\n";
submit_button( __( 'Apply' ), 'button-secondary action', false, false, array( 'id' => "doaction$two" ) );
submit_button( __( 'Apply' ), 'small action', false, false, array( 'id' => "doaction$two" ) );
echo "\n";
}

4
wp-admin/includes/class-wp-media-list-table.php
View File

@ -91,13 +91,13 @@ class WP_Media_List_Table extends WP_List_Table {
$this->months_dropdown( 'attachment' );
do_action( 'restrict_manage_posts' );
submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) );
submit_button( __( 'Filter' ), 'small', 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' ), 'button-secondary apply', 'delete_all', false );
submit_button( __( 'Empty Trash' ), 'small apply', 'delete_all', false );
} ?>
</div>
<?php

2
wp-admin/includes/class-wp-plugins-list-table.php
View File

@ -274,7 +274,7 @@ class WP_Plugins_List_Table extends WP_List_Table {
$screen = get_current_screen();
if ( ! $screen->is_network && 'recently_activated' == $status )
submit_button( __( 'Clear List' ), 'secondary', 'clear-recent-list', false );
submit_button( __( 'Clear List' ), 'small', 'clear-recent-list', false );
elseif ( 'top' == $which && 'mustuse' == $status )
echo '<p>' . sprintf( __( 'Files in the <code>%s</code> directory are executed automatically.' ), str_replace( ABSPATH, '/', WPMU_PLUGIN_DIR ) ) . '</p>';
elseif ( 'top' == $which && 'dropins' == $status )

4
wp-admin/includes/class-wp-posts-list-table.php
View File

@ -218,11 +218,11 @@ class WP_Posts_List_Table extends WP_List_Table {
wp_dropdown_categories( $dropdown_options );
}
do_action( 'restrict_manage_posts' );
submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) );
submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) );
}
if ( $this->is_trash && current_user_can( $post_type_object->cap->edit_others_posts ) ) {
submit_button( __( 'Empty Trash' ), 'button-secondary apply', 'delete_all', false );
submit_button( __( 'Empty Trash' ), 'small apply', 'delete_all', false );
}
?>
</div>

2
wp-admin/includes/class-wp-users-list-table.php
View File

@ -145,7 +145,7 @@ class WP_Users_List_Table extends WP_List_Table {
<option value=''><?php _e( 'Change role to&hellip;' ) ?></option>
<?php wp_dropdown_roles(); ?>
</select>
<?php submit_button( __( 'Change' ), 'secondary', 'changeit', false ); ?>
<?php submit_button( __( 'Change' ), 'small', 'changeit', false ); ?>
</div>
<?php
}

4
wp-admin/includes/dashboard.php
View File

@ -439,14 +439,14 @@ function wp_network_dashboard_right_now() {
<form action="<?php echo network_admin_url('users.php'); ?>" method="get">
<p>
<input type="search" name="s" value="" size="30" autocomplete="off" />
<?php submit_button( __( 'Search Users' ), 'button', 'submit', false, array( 'id' => 'submit_users' ) ); ?>
<?php submit_button( __( 'Search Users' ), 'small', 'submit', false, array( 'id' => 'submit_users' ) ); ?>
</p>
</form>
<form action="<?php echo network_admin_url('sites.php'); ?>" method="get">
<p>
<input type="search" name="s" value="" size="30" autocomplete="off" />
<?php submit_button( __( 'Search Sites' ), 'button', 'submit', false, array( 'id' => 'submit_sites' ) ); ?>
<?php submit_button( __( 'Search Sites' ), 'small', 'submit', false, array( 'id' => 'submit_sites' ) ); ?>
</p>
</form>
<?php

6
wp-admin/includes/meta-boxes.php
View File

@ -28,9 +28,9 @@ function post_submit_meta_box($post) {
<div id="minor-publishing-actions">
<div id="save-action">
<?php if ( 'publish' != $post->post_status && 'future' != $post->post_status && 'pending' != $post->post_status ) { ?>
<input <?php if ( 'private' == $post->post_status ) { ?>style="display:none"<?php } ?> type="submit" name="save" id="save-post" value="<?php esc_attr_e('Save Draft'); ?>" class="button button-highlighted" />
<input <?php if ( 'private' == $post->post_status ) { ?>style="display:none"<?php } ?> type="submit" name="save" id="save-post" value="<?php esc_attr_e('Save Draft'); ?>" class="button" />
<?php } elseif ( 'pending' == $post->post_status && $can_publish ) { ?>
<input type="submit" name="save" id="save-post" value="<?php esc_attr_e('Save as Pending'); ?>" class="button button-highlighted" />
<input type="submit" name="save" id="save-post" value="<?php esc_attr_e('Save as Pending'); ?>" class="button" />
<?php } ?>
<img src="<?php echo esc_url( admin_url( 'images/wpspin_light.gif' ) ); ?>" class="ajax-loading" id="draft-ajax-loading" alt="" />
</div>
@ -286,7 +286,7 @@ function post_tags_meta_box($post, $box) {
<label class="screen-reader-text" for="new-tag-<?php echo $tax_name; ?>"><?php echo $box['title']; ?></label>
<div class="taghint"><?php echo $taxonomy->labels->add_new_item; ?></div>
<p><input type="text" id="new-tag-<?php echo $tax_name; ?>" name="newtag[<?php echo $tax_name; ?>]" class="newtag form-input-tip" size="16" autocomplete="off" value="" />
<input type="button" class="button tagadd" value="<?php esc_attr_e('Add'); ?>" /></p>
<input type="button" class="button button-tiny tagadd" value="<?php esc_attr_e('Add'); ?>" /></p>
</div>
<p class="howto"><?php echo esc_attr( $taxonomy->labels->separate_items_with_commas ); ?></p>
<?php endif; ?>

2
wp-admin/includes/plugin-install.php
View File

@ -130,7 +130,7 @@ function install_search_form( $type_selector = true ) {
<?php endif; ?>
<input type="search" name="s" value="<?php echo esc_attr($term) ?>" autofocus="autofocus" />
<label class="screen-reader-text" for="plugin-search-input"><?php _e('Search Plugins'); ?></label>
<?php submit_button( __( 'Search Plugins' ), 'button', 'plugin-search-input', false ); ?>
<?php submit_button( __( 'Search Plugins' ), 'small', 'plugin-search-input', false ); ?>
</form><?php
}

8
wp-admin/includes/post.php
View File

@ -1084,9 +1084,9 @@ function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) {
if ( false === strpos($permalink, '%postname%') && false === strpos($permalink, '%pagename%') ) {
$return = '<strong>' . __('Permalink:') . "</strong>\n" . '<span id="sample-permalink" tabindex="-1">' . $permalink . "</span>\n";
if ( '' == get_option( 'permalink_structure' ) && current_user_can( 'manage_options' ) && !( 'page' == get_option('show_on_front') && $id == get_option('page_on_front') ) )
$return .= '<span id="change-permalinks"><a href="options-permalink.php" class="button" target="_blank">' . __('Change Permalinks') . "</a></span>\n";
$return .= '<span id="change-permalinks"><a href="options-permalink.php" class="button button-tiny" target="_blank">' . __('Change Permalinks') . "</a></span>\n";
if ( isset($view_post) )
$return .= "<span id='view-post-btn'><a href='$permalink' class='button'>$view_post</a></span>\n";
$return .= "<span id='view-post-btn'><a href='$permalink' class='button button-tiny'>$view_post</a></span>\n";
$return = apply_filters('get_sample_permalink_html', $return, $id, $new_title, $new_slug);
@ -1113,10 +1113,10 @@ function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) {
$return = '<strong>' . __('Permalink:') . "</strong>\n";
$return .= '<span id="sample-permalink" tabindex="-1">' . $display_link . "</span>\n";
$return .= '&lrm;'; // Fix bi-directional text display defect in RTL languages.
$return .= '<span id="edit-slug-buttons"><a href="#post_name" class="edit-slug button hide-if-no-js" onclick="editPermalink(' . $id . '); return false;">' . __('Edit') . "</a></span>\n";
$return .= '<span id="edit-slug-buttons"><a href="#post_name" class="edit-slug button button-tiny hide-if-no-js" onclick="editPermalink(' . $id . '); return false;">' . __('Edit') . "</a></span>\n";
$return .= '<span id="editable-post-name-full">' . $post_name . "</span>\n";
if ( isset($view_post) )
$return .= "<span id='view-post-btn'><a href='$view_link' class='button'>$view_post</a></span>\n";
$return .= "<span id='view-post-btn'><a href='$view_link' class='button button-tiny'>$view_post</a></span>\n";
$return = apply_filters('get_sample_permalink_html', $return, $id, $new_title, $new_slug);

34
wp-admin/includes/template.php
View File

@ -554,7 +554,7 @@ function meta_form() {
</tr>
<tr><td colspan="2" class="submit">
<?php submit_button( __( 'Add Custom Field' ), 'add:the-list:newmeta', 'addmeta', false, array( 'id' => 'newmeta-submit' ) ); ?>
<?php submit_button( __( 'Add Custom Field' ), 'add:the-list:newmeta secondary', 'addmeta', false, array( 'id' => 'newmeta-submit' ) ); ?>
<?php wp_nonce_field( 'add-meta', '_ajax_nonce-add-meta', false ); ?>
</td></tr>
</tbody>
@ -1115,10 +1115,10 @@ function do_settings_sections( $page ) {
foreach ( (array) $wp_settings_sections[$page] as $section ) {
if ( $section['title'] )
echo "<h3>{$section['title']}</h3>\n";
if ( $section['callback'] )
call_user_func( $section['callback'], $section );
if ( ! isset( $wp_settings_fields ) || !isset( $wp_settings_fields[$page] ) || !isset( $wp_settings_fields[$page][$section['id']] ) )
continue;
echo '<table class="form-table">';
@ -1637,18 +1637,22 @@ function submit_button( $text = null, $type = 'primary', $name = 'submit', $wrap
* 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 ) {
switch ( $type ) :
case 'primary' :
case 'secondary' :
$class = 'button-' . $type;
break;
case 'delete' :
$class = 'button-secondary delete';
break;
default :
$class = $type; // Custom cases can just pass in the classes they want to be used
endswitch;
$text = ( null == $text ) ? __( 'Save Changes' ) : $text;
if ( ! is_array( $type ) )
$type = explode( ' ', $type );
$button_shorthand = array( 'primary', 'tiny', 'small', 'large' );
$classes = array( 'button' );
foreach ( $type as $t ) {
if ( 'secondary' === $t || 'button-secondary' === $t )
continue;
$classes[] = in_array( $t, $button_shorthand ) ? 'button-' . $t : $t;
}
$class = implode( ' ', array_unique( $classes ) );
if ( 'delete' === $type )
$class = 'button-secondary delete';
$text = $text ? $text : __( 'Save Changes' );
// Default the id attribute to $name unless an id was specifically provided in $other_attributes
$id = $name;

2
wp-admin/js/post.js
View File

@ -558,7 +558,7 @@ jQuery(document).ready( function($) {
var i, c = 0, e = $('#editable-post-name'), revert_e = e.html(), real_slug = $('#post_name'), revert_slug = real_slug.val(), b = $('#edit-slug-buttons'), revert_b = b.html(), full = $('#editable-post-name-full').html();
$('#view-post-btn').hide();
b.html('<a href="#" class="save button">'+postL10n.ok+'</a> <a class="cancel" href="#">'+postL10n.cancel+'</a>');
b.html('<a href="#" class="save button button-tiny">'+postL10n.ok+'</a> <a class="cancel" href="#">'+postL10n.cancel+'</a>');
b.children('.save').click(function() {
var new_slug = e.children('input').val();
if ( new_slug == $('#editable-post-name-full').text() ) {