WordPress.org
Get WordPress

Make WordPress Core

Changeset 21789


Ignore:
Timestamp:
09/08/2012 04:58:34 AM (12 years ago)
Author:
koopersmith
Message:

New button styles.

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.

Location:
trunk/wp-admin
Files:
19 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/colors-classic.css

    r21641 r21789  
    5858input[type="file"]:focus,
    5959input[type="button"]:focus,
     60input[type="submit"].focus,
    6061input[type="submit"]:focus,
    6162input[type="reset"]:focus,
    … …  
    378379}
    379380
     381a.button:active {
     382    outline: none;
     383}
     384
    380385.button,
    381386.button-secondary,
    … …  
    383388input[type=button],
    384389input[type=submit] {
    385     border-color: #bbb;
    386     color: #464646;
    387 }
    388 
     390    background: #ececec;
     391    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
     392    background-image: -webkit-linear-gradient(top, #fff, #eee);
     393    background-image:    -moz-linear-gradient(top, #fff, #eee);
     394    background-image:      -o-linear-gradient(top, #fff, #eee);
     395    background-image:   linear-gradient(to bottom, #fff, #eee);
     396    border-color: #ccc;
     397    -webkit-box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9);
     398    box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9);
     399    color: #464646;
     400    text-shadow: 1px 1px 0 #fff;
     401}
     402
     403.button.hover,
    389404.button:hover,
     405.button-secondary.hover,
    390406.button-secondary:hover,
    391407.submit input:hover,
    392408input[type=button]:hover,
    393 input[type=submit]:hover {
     409input[type=submit]:hover,
     410.button.focus,
     411.button:focus,
     412.button-secondary.focus,
     413.button-secondary:focus,
     414.submit input.focus,
     415.submit input:focus,
     416input[type=button]:focus,
     417input[type=submit].focus,
     418input[type=submit]:focus {
     419    background: #ececec;
     420    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
     421    background-image: -webkit-linear-gradient(top, #fff, #eee);
     422    background-image:    -moz-linear-gradient(top, #fff, #eee);
     423    background-image:      -o-linear-gradient(top, #fff, #eee);
     424    background-image:   linear-gradient(to bottom, #fff, #eee);
     425    border-color: #bbb;
     426    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
     427    box-shadow: 0px 1px 1px rgba(0,0,0,.1);
    394428    color: #000;
    395     border-color: #666;
    396 }
    397 
    398 .button,
    399 .submit input,
    400 .button-secondary {
    401     text-shadow: 0 1px 0 #fff;
    402     background: #f2f2f2;
    403     background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#fff));
    404     background-image: -webkit-linear-gradient(bottom, #ededed, #fff);
    405     background-image:    -moz-linear-gradient(bottom, #ededed, #fff);
    406     background-image:      -o-linear-gradient(bottom, #ededed, #fff);
    407     background-image: linear-gradient(to top, #ededed, #fff);
    408 }
    409 
     429}
     430
     431.button.active,
    410432.button:active,
     433.button-secondary.active,
     434.button-secondary:active,
    411435.submit input:active,
    412 .button-secondary:active {
     436input[type=button]:active,
     437input[type=submit].active,
     438input[type=submit]:active {
    413439    background: #eee;
    414     background-image: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
    415     background-image: -webkit-linear-gradient(top, #ededed, #fff);
    416     background-image:    -moz-linear-gradient(top, #ededed, #fff);
    417     background-image:      -o-linear-gradient(top, #ededed, #fff);
    418     background-image: linear-gradient(to bottom, #ededed, #fff);
     440    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f9f9f9));
     441    background-image: -webkit-linear-gradient(top, #eee, #f9f9f9);
     442    background-image:    -moz-linear-gradient(top, #eee, #f9f9f9);
     443    background-image:      -o-linear-gradient(top, #eee, #f9f9f9);
     444    background-image:   linear-gradient(to bottom, #eee, #f9f9f9);
     445    border-color: #999 #ddd #ddd #999;
     446    color: #555;
     447    -webkit-box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
     448    box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
     449}
     450
     451.button.focus,
     452.button:focus,
     453.button-secondary.focus,
     454.button-secondary:focus,
     455.submit input.focus,
     456.submit input:focus,
     457input[type=button].focus,
     458input[type=submit]:focus {
     459    border-color: #aaa;
    419460}
    420461
    … …  
    422463button.button-primary,
    423464a.button-primary {
    424     border-color: #298cba;
    425     font-weight: bold;
     465    background-color: #21759b;
     466    background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
     467    background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
     468    background-image:    -moz-linear-gradient(top, #2a95c5, #21759b);
     469    background-image:      -o-linear-gradient(top, #2a95c5, #21759b);
     470    background-image:   linear-gradient(to bottom, #2a95c5, #21759b);
     471    border-color: #21759b;
     472    border-bottom-color: #1e6a8d;
     473    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     474    box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     475    color: #fff;
     476    text-decoration: none;
     477    text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
     478}
     479
     480input.button-primary.hover,
     481input.button-primary:hover,
     482button.button-primary:hover,
     483a.button-primary:hover,
     484input.button-primary.focus,
     485input.button-primary:focus,
     486button.button-primary:focus,
     487a.button-primary:focus {
     488    background-color: #278ab7;
     489    background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
     490    background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
     491    background-image:    -moz-linear-gradient(top, #2e9fd2, #21759b);
     492    background-image:      -o-linear-gradient(top, #2e9fd2, #21759b);
     493    background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
     494    border-color: #1b607f;
     495    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0px 1px 2px rgba(0,0,0,.4);
     496    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0px 1px 2px rgba(0,0,0,.4);
    426497    color: #fff;
    427     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    428     background: #21759b;
    429     background-image: -webkit-gradient(linear, left bottom, left top, from(#227199), to(#298cba));
    430     background-image: -webkit-linear-gradient(bottom, #227199, #298cba);
    431     background-image:    -moz-linear-gradient(bottom, #227199, #298cba);
    432     background-image:      -o-linear-gradient(bottom, #227199, #298cba);
    433     background-image: linear-gradient(to top, #227199, #298cba);
    434 }
    435 
     498    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
     499}
     500
     501input.button-primary.active,
    436502input.button-primary:active,
    437503button.button-primary:active,
    438504a.button-primary:active {
    439     color: #eaf2fa;
    440     background: #298cba;
    441     background-image: -webkit-gradient(linear, left top, left bottom, from(#227199), to(#298cba));
    442     background-image: -webkit-linear-gradient(top, #227199, #298cba);
    443     background-image:    -moz-linear-gradient(top, #227199, #298cba);
    444     background-image:      -o-linear-gradient(top, #227199, #298cba);
    445     background-image: linear-gradient(to bottom, #227199, #298cba);
    446 }
    447 
    448 input.button-primary:hover,
    449 button.button-primary:hover,
    450 a.button-primary:hover,
    451 a.button-primary:focus,
    452 a.button-primary:active {
    453     border-color: #13455b;
    454     color: #eaf2fa;
     505    background: #1b607f;
     506    background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
     507    background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
     508    background-image:    -moz-linear-gradient(top, #21759b, #278ab7);
     509    background-image:      -o-linear-gradient(top, #21759b, #278ab7);
     510    background-image:   linear-gradient(to bottom, #21759b, #278ab7);
     511    border-color: #124560 #2382ae #2382ae #124560;
     512    color: rgba(255,255,255,0.95);
     513    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
     514    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
     515}
     516
     517input.button-primary.focus,
     518input.button-primary:focus,
     519button.button-primary:focus,
     520a.button-primary:focus {
     521    border-color: #124560;
    455522}
    456523
    … …  
    463530    color: #aaa !important;
    464531    border-color: #ddd !important;
     532    -webkit-box-shadow: none !important;
     533    box-shadow:         none !important;
    465534}
    466535
    … …  
    468537.button-primary[disabled],
    469538.button-primary:disabled {
    470     color: #9fd0d5 !important;
     539    color: #94cde7 !important;
    471540    background: #298cba !important;
     541    -webkit-box-shadow: none !important;
     542    box-shadow:         none !important;
    472543}
    473544
    … …  
    9481019
    9491020/* Containers */
     1021.wp-editor-wrap .wp-editor-container,
    9501022.wp-editor-wrap .wp_themeSkin table.mceLayout {
    9511023    border-color: #bed1dd #bed1dd #d0dfe9;
    … …  
    9681040}
    9691041
    970 /* Button */
    971 .wp-editor-wrap .wp_themeSkin .mceButton,
    972 .wp-editor-wrap .wp_themeSkin .mceListBox .mceText,
    973 .wp-editor-wrap .wp_themeSkin .mceListBox .mceOpen {
    974     border-color: #b0c8d7;
    975     background: #cfdfe9;
     1042.wp-editor-wrap .wp_themeSkin a.mceButtonEnabled:hover {
     1043    border-color: #bbb;
     1044    background: #eee;
    9761045    background-image: -webkit-gradient(linear, left bottom, left top, from(#cfdfe9), to(#fff));
    9771046    background-image: -webkit-linear-gradient(bottom, #cfdfe9, #fff);
    … …  
    9791048    background-image:      -o-linear-gradient(bottom, #cfdfe9, #fff);
    9801049    background-image: linear-gradient(to top, #cfdfe9, #fff);
    981 }
    982 
    983 .wp-editor-wrap .wp_themeSkin a.mceButtonEnabled:hover {
    984     border-color: #5589aa;
    985     background: #c9c9c9;
    986     background-image: -webkit-gradient(linear, left bottom, left top, from(#bdccd5), to(#000));
    987     background-image: -webkit-linear-gradient(bottom, #bdccd5, #fff);
    988     background-image:    -moz-linear-gradient(bottom, #bdccd5, #fff);
    989     background-image:      -o-linear-gradient(bottom, #bdccd5, #fff);
    990     background-image: linear-gradient(to top, #bdccd5, #fff);
    9911050}
    9921051
    … …  
    9971056.wp-editor-wrap .wp_themeSkin a.mceButtonActive:active,
    9981057.wp-editor-wrap .wp_themeSkin a.mceButtonActive:hover {
    999     background: #b0c8d7;
    1000     border-color: #5589aa;
     1058    background: #c7d8e2;
     1059    border-color: #b0c8d7;
    10011060    background-image: -webkit-gradient(linear, left top, left bottom, from(#cfdfe9), to(#fff));
    10021061    background-image: -webkit-linear-gradient(top, #cfdfe9, #fff);
    … …  
    10041063    background-image:      -o-linear-gradient(top, #cfdfe9, #fff);
    10051064    background-image: linear-gradient(to bottom, #cfdfe9, #fff);
    1006 }
    1007 
    1008 .wp-editor-wrap .wp_themeSkin .mceButtonDisabled {
    1009     border-color: #b0c8d7 !important;
    10101065}
    10111066
    … …  
    10201075.wp-editor-wrap .wp_themeSkin .mceListBoxSelected .mceText,
    10211076.wp-editor-wrap .wp_themeSkin table.mceListBoxEnabled:active .mceText {
    1022     background: #b0c8d7;
    1023     border-color: #5589aa;
     1077    border-color: #B0C8D7;
     1078    background: #c9c9c9;
     1079    background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5));
     1080    background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5);
     1081    background-image:    -moz-linear-gradient(bottom, #fff, #bdccd5);
     1082    background-image:      -o-linear-gradient(bottom, #fff, #bdccd5);
     1083    background-image: linear-gradient(to top, #fff, #bdccd5);
    10241084}
    10251085
    … …  
    10281088.wp-editor-wrap .wp_themeSkin table.mceListBoxEnabled:hover .mceOpen,
    10291089.wp-editor-wrap .wp_themeSkin .mceListBoxHover .mceOpen {
    1030     border-color: #5589aa;
    1031     background: #c9c9c9;
     1090    border-color: #B0C8D7;
     1091    background: #c7d8e2;
    10321092    background-image: -webkit-gradient(linear, left bottom, left top, from(#cfdfe9), to(#fff));
    10331093    background-image: -webkit-linear-gradient(bottom, #cfdfe9, #fff);
    … …  
    10371097}
    10381098
    1039 /* SplitButton */
    1040 .wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceAction,
    1041 .wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceOpen {
    1042     border-color: #b0c8d7;
    1043 }
    1044 
    1045 .wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceOpen:hover,
     1099.wp-editor-wrap .wp_themeSkin .mceSplitButton:hover a.mceOpen,
    10461100.wp-editor-wrap .wp_themeSkin .mceSplitButtonSelected a.mceOpen,
     1101.wp-editor-wrap .wp_themeSkin .mceSplitButtonSelected a.mceAction,
    10471102.wp-editor-wrap .wp_themeSkin table.mceSplitButtonEnabled:hover a.mceAction,
    10481103.wp-editor-wrap .wp_themeSkin .mceSplitButton a.mceAction:hover {
    1049     border-color: #5589aa;
    1050 }
    1051 
    1052 .wp-editor-wrap .wp_themeSkin table.mceSplitButton td {
    1053     background: #cfdfe9;
    1054     background-image: -webkit-gradient(linear, left bottom, left top, from(#cfdfe9), to(#fff));
    1055     background-image: -webkit-linear-gradient(bottom, #cfdfe9, #fff);
    1056     background-image:    -moz-linear-gradient(bottom, #cfdfe9, #fff);
    1057     background-image:      -o-linear-gradient(bottom, #cfdfe9, #fff);
    1058     background-image: linear-gradient(to top, #cfdfe9, #fff);
     1104    border-color: #B0C8D7;
     1105}
     1106
     1107.wp-editor-wrap .wp_themeSkin .mceSplitButtonSelected td {
     1108    background: #c9c9c9;
     1109    background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5));
     1110    background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5);
     1111    background-image:    -moz-linear-gradient(bottom, #fff, #bdccd5);
     1112    background-image:      -o-linear-gradient(bottom, #fff, #bdccd5);
     1113    background-image: linear-gradient(to top, #fff, #bdccd5);
    10591114}
    10601115
    10611116.wp-editor-wrap .wp_themeSkin table.mceSplitButton:hover td {
     1117    border-color: #bbb;
    10621118    background: #c9c9c9;
    1063     background-image: -webkit-gradient(linear, left bottom, left top, from(#bdccd5), to(#000));
     1119    background-image: -webkit-gradient(linear, left bottom, left top, from(#bdccd5), to(#fff));
    10641120    background-image: -webkit-linear-gradient(bottom, #bdccd5, #fff);
    10651121    background-image:    -moz-linear-gradient(bottom, #bdccd5, #fff);
    … …  
    10681124}
    10691125
    1070 .wp-editor-wrap .wp_themeSkin .mceSplitButtonActive {
    1071     background-color: #b0c8d7;
     1126.wp-editor-wrap .wp_themeSkin table.mceSplitButton:active td.mceFirst,
     1127.wp-editor-wrap .wp_themeSkin table.mceSplitButton td.mceLast:active {
     1128    border-color: #bbb;
     1129    background: #c9c9c9;
     1130    background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5));
     1131    background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5);
     1132    background-image:    -moz-linear-gradient(bottom, #fff, #bdccd5);
     1133    background-image:      -o-linear-gradient(bottom, #fff, #bdccd5);
     1134    background-image: linear-gradient(to top, #fff, #bdccd5);
     1135}
     1136
     1137.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive td a.mceAction,
     1138.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive td a.mceOpen {
     1139    border-color: #B0C8D7;
     1140}
     1141
     1142.wp-editor-wrap .wp_themeSkin .mceSplitButtonActive td {
     1143    background: #c9c9c9;
     1144    background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#bdccd5));
     1145    background-image: -webkit-linear-gradient(bottom, #fff, #bdccd5);
     1146    background-image:    -moz-linear-gradient(bottom, #fff, #bdccd5);
     1147    background-image:      -o-linear-gradient(bottom, #fff, #bdccd5);
     1148    background-image: linear-gradient(to top, #fff, #bdccd5);
    10721149}
    10731150

  • trunk/wp-admin/css/colors-fresh.css

    r21641 r21789  
    5353input[type="file"]:focus,
    5454input[type="button"]:focus,
     55input[type="submit"].focus,
    5556input[type="submit"]:focus,
    5657input[type="reset"]:focus,
    … …  
    369370}
    370371
     372a.button:active {
     373    outline: none;
     374}
     375
    371376.button,
    372377.button-secondary,
    … …  
    374379input[type=button],
    375380input[type=submit] {
    376     border-color: #bbb;
    377     color: #464646;
    378 }
    379 
     381    background: #ececec;
     382    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
     383    background-image: -webkit-linear-gradient(top, #fff, #eee);
     384    background-image:    -moz-linear-gradient(top, #fff, #eee);
     385    background-image:      -o-linear-gradient(top, #fff, #eee);
     386    background-image:   linear-gradient(to bottom, #fff, #eee);
     387    border-color: #ccc;
     388    -webkit-box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9);
     389    box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9);
     390    color: #464646;
     391    text-shadow: 1px 1px 0 #fff;
     392}
     393
     394.button.hover,
    380395.button:hover,
     396.button-secondary.hover,
    381397.button-secondary:hover,
    382398.submit input:hover,
    383399input[type=button]:hover,
    384 input[type=submit]:hover {
     400input[type=submit]:hover,
     401.button.focus,
     402.button:focus,
     403.button-secondary.focus,
     404.button-secondary:focus,
     405.submit input.focus,
     406.submit input:focus,
     407input[type=button].focus,
     408input[type=button]:focus,
     409input[type=submit]:focus {
     410    background: #ececec;
     411    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
     412    background-image: -webkit-linear-gradient(top, #fff, #eee);
     413    background-image:    -moz-linear-gradient(top, #fff, #eee);
     414    background-image:      -o-linear-gradient(top, #fff, #eee);
     415    background-image:   linear-gradient(to bottom, #fff, #eee);
     416    border-color: #bbb;
     417    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1);
     418    box-shadow: 0px 1px 1px rgba(0,0,0,.1);
    385419    color: #000;
    386     border-color: #666;
    387 }
    388 
    389 .button,
    390 .submit input,
    391 .button-secondary {
    392     text-shadow: 0 1px 0 #fff;
    393     background: #f2f2f2;
    394     background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#fff));
    395     background-image: -webkit-linear-gradient(bottom, #ededed, #fff);
    396     background-image:    -moz-linear-gradient(bottom, #ededed, #fff);
    397     background-image:      -o-linear-gradient(bottom, #ededed, #fff);
    398     background-image: linear-gradient(to top, #ededed, #fff);
    399 }
    400 
     420}
     421
     422.button.active,
    401423.button:active,
     424.small.active,
     425.small:active,
     426.button-secondary.active,
     427.button-secondary:active,
    402428.submit input:active,
    403 .button-secondary:active {
     429input[type=button].active,
     430input[type=button]:active,
     431input[type=submit]:active {
    404432    background: #eee;
    405     background-image: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
    406     background-image: -webkit-linear-gradient(top, #ededed, #fff);
    407     background-image:    -moz-linear-gradient(top, #ededed, #fff);
    408     background-image:      -o-linear-gradient(top, #ededed, #fff);
    409     background-image: linear-gradient(to bottom, #ededed, #fff);
     433    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f9f9f9));
     434    background-image: -webkit-linear-gradient(top, #eee, #f9f9f9);
     435    background-image:    -moz-linear-gradient(top, #eee, #f9f9f9);
     436    background-image:      -o-linear-gradient(top, #eee, #f9f9f9);
     437    background-image:   linear-gradient(to bottom, #eee, #f9f9f9);
     438    border-color: #999 #ddd #ddd #999;
     439    color: #555;
     440    -webkit-box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
     441    box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);
     442}
     443
     444.button.focus,
     445.button:focus,
     446.button-secondary.focus,
     447.button-secondary:focus,
     448.submit input.focus,
     449.submit input:focus,
     450input[type=button].focus,
     451input[type=button]:focus,
     452input[type=submit]:focus {
     453    border-color: #aaa;
    410454}
    411455
    … …  
    413457button.button-primary,
    414458a.button-primary {
    415     border-color: #298cba;
    416     font-weight: bold;
     459    background-color: #21759b;
     460    background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
     461    background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
     462    background-image:    -moz-linear-gradient(top, #2a95c5, #21759b);
     463    background-image:      -o-linear-gradient(top, #2a95c5, #21759b);
     464    background-image:   linear-gradient(to bottom, #2a95c5, #21759b);
     465    border-color: #21759b;
     466    border-bottom-color: #1e6a8d;
     467    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     468    box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     469    color: #fff;
     470    text-decoration: none;
     471    text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
     472}
     473
     474input.button-primary.hover,
     475input.button-primary:hover,
     476button.button-primary:hover,
     477a.button-primary:hover,
     478input.button-primary.focus,
     479input.button-primary:focus,
     480button.button-primary:focus,
     481a.button-primary:focus {
     482    background-color: #278ab7;
     483    background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
     484    background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
     485    background-image:    -moz-linear-gradient(top, #2e9fd2, #21759b);
     486    background-image:      -o-linear-gradient(top, #2e9fd2, #21759b);
     487    background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
     488    border-color: #1b607f;
     489    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 1px rgba(0,0,0,.3);
     490    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 1px rgba(0,0,0,.3);
    417491    color: #fff;
    418     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    419     background: #21759b;
    420     background-image: -webkit-gradient(linear, left bottom, left top, from(#227199), to(#298cba));
    421     background-image: -webkit-linear-gradient(bottom, #227199, #298cba);
    422     background-image:    -moz-linear-gradient(bottom, #227199, #298cba);
    423     background-image:      -o-linear-gradient(bottom, #227199, #298cba);
    424     background-image: linear-gradient(to top, #227199, #298cba);
    425 }
    426 
     492    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
     493}
     494
     495input.button-primary.active,
    427496input.button-primary:active,
    428497button.button-primary:active,
    429498a.button-primary:active {
    430     color: #eaf2fa;
    431     background: #298cba;
    432     background-image: -webkit-gradient(linear, left top, left bottom, from(#227199), to(#298cba));
    433     background-image: -webkit-linear-gradient(top, #227199, #298cba);
    434     background-image:    -moz-linear-gradient(top, #227199, #298cba);
    435     background-image:      -o-linear-gradient(top, #227199, #298cba);
    436     background-image: linear-gradient(to bottom, #227199, #298cba);
    437 }
    438 
    439 input.button-primary:hover,
    440 button.button-primary:hover,
    441 a.button-primary:hover,
    442 a.button-primary:focus,
    443 a.button-primary:active {
    444     border-color: #13455b;
    445     color: #eaf2fa;
     499    background: #1b607f;
     500    background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
     501    background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
     502    background-image:    -moz-linear-gradient(top, #21759b, #278ab7);
     503    background-image:      -o-linear-gradient(top, #21759b, #278ab7);
     504    background-image:   linear-gradient(to bottom, #21759b, #278ab7);
     505    border-color: #124560 #2382ae #2382ae #124560;
     506    color: rgba(255,255,255,0.95);
     507    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
     508    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
     509}
     510
     511input.button-primary.focus,
     512input.button-primary:focus,
     513button.button-primary:focus,
     514a.button-primary:focus {
     515    border-color: #124560;
    446516}
    447517
    … …  
    454524    color: #aaa !important;
    455525    border-color: #ddd !important;
     526    -webkit-box-shadow: none !important;
     527    box-shadow:         none !important;
    456528}
    457529
    … …  
    459531.button-primary[disabled],
    460532.button-primary:disabled {
    461     color: #9fd0d5 !important;
     533    color: #94cde7 !important;
    462534    background: #298cba !important;
     535    -webkit-box-shadow: none !important;
     536    box-shadow:         none !important;
    463537}
    464538

  • trunk/wp-admin/css/ie.css

    r21641 r21789  
    125125#wpbody-content input.button,
    126126#wpbody-content input.button-primary,
    127 #wpbody-content input.button-secondary,
    128 #wpbody-content input.button-highlighted {
     127#wpbody-content input.button-secondary {
    129128    overflow: visible;
    130129}

  • trunk/wp-admin/css/wp-admin-rtl.css

    r21592 r21789  
    23042304.button-primary,
    23052305.button-secondary,
    2306 .button-highlighted,
    23072306#postcustomstuff .submit input {
    23082307    font-family: Tahoma, Arial, sans-serif;
    … …  
    24742473.locale-he-il .button-primary,
    24752474.locale-he-il .button-secondary,
    2476 .locale-he-il .button-highlighted,
    24772475.locale-he-il #postcustomstuff .submit input,
    24782476.locale-he-il div.sidebar-name h3 {

  • trunk/wp-admin/css/wp-admin.css

    r21781 r21789  
    780780input.button-primary,
    781781.button-secondary,
    782 input.button-secondary,
    783 .button-highlighted,
    784 input.button-highlighted,
    785 #postcustomstuff .submit input {
     782input.button-secondary {
     783    display: inline-block;
    786784    text-decoration: none;
    787     font-size: 12px !important;
    788     line-height: 13px;
    789     padding: 3px 8px;
     785    font-size: 12px;
     786    line-height: 15px;
     787    margin: 0;
     788    padding: 0.5em 0.8em 0.4em;
    790789    cursor: pointer;
    791790    border-width: 1px;
    792791    border-style: solid;
    793     -webkit-border-radius: 11px;
    794     border-radius: 11px;
    795     -moz-box-sizing: content-box;
     792    -webkit-border-radius: 3px;
     793    border-radius: 3px;
    796794    -webkit-box-sizing: content-box;
    797     box-sizing: content-box;
     795    -moz-box-sizing:    content-box;
     796    box-sizing:         content-box;
     797    white-space: nowrap;
     798}
     799
     800.button.button-small {
     801    padding: 3px .8em 2px;
     802}
     803
     804.button.button-large {
     805    font-size: 14px;
     806    padding: 0.6em 1em 0.5em;
     807}
     808
     809.button.button-tiny {
     810    padding: .2em .8em;
     811    font-size: 11px;
    798812}
    799813
    … …  
    801815#major-publishing-actions input,
    802816#minor-publishing-actions .preview {
    803     min-width: 80px;
    804817    text-align: center;
    805818}
    … …  
    10141027    padding-left: 18px;
    10151028    list-style: square;
    1016 }
    1017 
    1018 a.button,
    1019 a.button-primary,
    1020 a.button-secondary {
    1021     line-height: 15px;
    1022     padding: 3px 10px;
    1023     white-space: nowrap;
    1024     -webkit-border-radius: 10px;
    10251029}
    10261030
    … …  
    28052809#titlediv {
    28062810    position: relative;
    2807     margin-bottom: 20px;
     2811    margin-bottom: 10px;
    28082812}
    28092813#titlediv label { cursor: text; }
    … …  
    28582862
    28592863#edit-slug-box {
    2860     height: 1em;
    28612864    margin-top: 8px;
    28622865    padding: 0 10px;
     2866}
     2867
     2868#edit-slug-box .cancel {
     2869    margin-right: 10px;
     2870    font-size: 11px;
    28632871}
    28642872
    … …  
    31603168    border: 0 none;
    31613169    float: none;
    3162     padding: 5px 8px;
     3170    padding: 0 0 8px 8px;
    31633171}
    31643172
    … …  
    31943202#postcustomstuff td.left {
    31953203    width: 38%;
    3196 }
    3197 
    3198 #postcustomstuff #newmeta .submit {
    3199     padding: 0 8px;
    32003204}
    32013205
    … …  
    42444248#replysubmit {
    42454249    margin: 0;
    4246     padding: 0 7px 3px;
     4250    padding: 0 5px 3px;
    42474251    text-align: center;
    42484252}
    … …  
    46734677#pass-strength-result.strong,
    46744678#pass-strength-result.short,
    4675 .button-highlighted,
    4676 input.button-highlighted,
    46774679#ed_reply_toolbar #ed_reply_strong,
    46784680.item-controls .item-order a,
    … …  
    56325634}
    56335635
    5634 #titlediv,
    56355636#poststuff .postarea {
    56365637    margin-bottom: 20px;
    … …  
    60856086
    60866087#dashboard-widgets #dashboard_quick_press form p.submit #save-post {
    6087     margin: 0 1em 0 10px;
     6088    margin: 0 0.3em 0 5px;
    60886089}
    60896090
    … …  
    62796280.login .button-primary {
    62806281    font-size: 13px !important;
    6281     line-height: 16px;
    6282     padding: 3px 10px;
     6282    padding: .4em .8em;
    62836283    float: right;
    62846284}

  • trunk/wp-admin/edit-form-advanced.php

    r21683 r21789  
    295295$shortlink = wp_get_shortlink($post->ID, 'post');
    296296if ( !empty($shortlink) )
    297     $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>';
     297    $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>';
    298298
    299299if ( $post_type_object->public && ! ( 'pending' == $post->post_status && !current_user_can( $post_type_object->cap->publish_posts ) ) ) { ?>

  • trunk/wp-admin/includes/class-wp-comments-list-table.php

    r21736 r21789  
    225225            </select>
    226226<?php
    227             submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) );
     227            submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) );
    228228        }
    229229
    … …  
    231231            wp_nonce_field( 'bulk-destroy', '_destroy_nonce' );
    232232            $title = ( 'spam' == $comment_status ) ? esc_attr__( 'Empty Spam' ) : esc_attr__( 'Empty Trash' );
    233             submit_button( $title, 'button-secondary apply', 'delete_all', false );
     233            submit_button( $title, 'small apply', 'delete_all', false );
    234234        }
    235235        do_action( 'manage_comments_nav', $comment_status );

  • trunk/wp-admin/includes/class-wp-links-list-table.php

    r21323 r21789  
    6969            );
    7070            wp_dropdown_categories( $dropdown_options );
    71             submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) );
     71            submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) );
    7272?>
    7373        </div>

  • trunk/wp-admin/includes/class-wp-list-table.php

    r21750 r21789  
    218218    <label class="screen-reader-text" for="<?php echo $input_id ?>"><?php echo $text; ?>:</label>
    219219    <input type="search" id="<?php echo $input_id ?>" name="s" value="<?php _admin_search_query(); ?>" />
    220     <?php submit_button( $text, 'button', false, false, array('id' => 'search-submit') ); ?>
     220    <?php submit_button( $text, 'small', false, false, array('id' => 'search-submit') ); ?>
    221221</p>
    222222<?php
    … …  
    305305        echo "</select>\n";
    306306
    307         submit_button( __( 'Apply' ), 'button-secondary action', false, false, array( 'id' => "doaction$two" ) );
     307        submit_button( __( 'Apply' ), 'small action', false, false, array( 'id' => "doaction$two" ) );
    308308        echo "\n";
    309309    }

  • trunk/wp-admin/includes/class-wp-media-list-table.php

    r21736 r21789  
    9292
    9393            do_action( 'restrict_manage_posts' );
    94             submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) );
     94            submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) );
    9595        }
    9696
    … …  
    9898            submit_button( __( 'Scan for lost attachments' ), 'secondary', 'find_detached', false );
    9999        } elseif ( $this->is_trash && current_user_can( 'edit_others_posts' ) ) {
    100             submit_button( __( 'Empty Trash' ), 'button-secondary apply', 'delete_all', false );
     100            submit_button( __( 'Empty Trash' ), 'small apply', 'delete_all', false );
    101101        } ?>
    102102        </div>

  • trunk/wp-admin/includes/class-wp-plugins-list-table.php

    r21700 r21789  
    275275
    276276        if ( ! $screen->is_network && 'recently_activated' == $status )
    277             submit_button( __( 'Clear List' ), 'secondary', 'clear-recent-list', false );
     277            submit_button( __( 'Clear List' ), 'small', 'clear-recent-list', false );
    278278        elseif ( 'top' == $which && 'mustuse' == $status )
    279279            echo '<p>' . sprintf( __( 'Files in the <code>%s</code> directory are executed automatically.' ), str_replace( ABSPATH, '/', WPMU_PLUGIN_DIR ) ) . '</p>';

  • trunk/wp-admin/includes/class-wp-posts-list-table.php

    r21788 r21789  
    219219            }
    220220            do_action( 'restrict_manage_posts' );
    221             submit_button( __( 'Filter' ), 'secondary', false, false, array( 'id' => 'post-query-submit' ) );
     221            submit_button( __( 'Filter' ), 'small', false, false, array( 'id' => 'post-query-submit' ) );
    222222        }
    223223
    224224        if ( $this->is_trash && current_user_can( $post_type_object->cap->edit_others_posts ) ) {
    225             submit_button( __( 'Empty Trash' ), 'button-secondary apply', 'delete_all', false );
     225            submit_button( __( 'Empty Trash' ), 'small apply', 'delete_all', false );
    226226        }
    227227?>

  • trunk/wp-admin/includes/class-wp-users-list-table.php

    r21413 r21789  
    146146            <?php wp_dropdown_roles(); ?>
    147147        </select>
    148         <?php submit_button( __( 'Change' ), 'secondary', 'changeit', false ); ?>
     148        <?php submit_button( __( 'Change' ), 'small', 'changeit', false ); ?>
    149149    </div>
    150150<?php

  • trunk/wp-admin/includes/dashboard.php

    r21387 r21789  
    440440        <p>
    441441            <input type="search" name="s" value="" size="30" autocomplete="off" />
    442             <?php submit_button( __( 'Search Users' ), 'button', 'submit', false, array( 'id' => 'submit_users' ) ); ?>
     442            <?php submit_button( __( 'Search Users' ), 'small', 'submit', false, array( 'id' => 'submit_users' ) ); ?>
    443443        </p>
    444444    </form>
    … …  
    447447        <p>
    448448            <input type="search" name="s" value="" size="30" autocomplete="off" />
    449             <?php submit_button( __( 'Search Sites' ), 'button', 'submit', false, array( 'id' => 'submit_sites' ) ); ?>
     449            <?php submit_button( __( 'Search Sites' ), 'small', 'submit', false, array( 'id' => 'submit_sites' ) ); ?>
    450450        </p>
    451451    </form>

  • trunk/wp-admin/includes/meta-boxes.php

    r21770 r21789  
    2929<div id="save-action">
    3030<?php if ( 'publish' != $post->post_status && 'future' != $post->post_status && 'pending' != $post->post_status ) { ?>
    31 <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" />
     31<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" />
    3232<?php } elseif ( 'pending' == $post->post_status && $can_publish ) { ?>
    33 <input type="submit" name="save" id="save-post" value="<?php esc_attr_e('Save as Pending'); ?>" class="button button-highlighted" />
     33<input type="submit" name="save" id="save-post" value="<?php esc_attr_e('Save as Pending'); ?>" class="button" />
    3434<?php } ?>
    3535<img src="<?php echo esc_url( admin_url( 'images/wpspin_light.gif' ) ); ?>" class="ajax-loading" id="draft-ajax-loading" alt="" />
    … …  
    287287        <div class="taghint"><?php echo $taxonomy->labels->add_new_item; ?></div>
    288288        <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="" />
    289         <input type="button" class="button tagadd" value="<?php esc_attr_e('Add'); ?>" /></p>
     289        <input type="button" class="button button-tiny tagadd" value="<?php esc_attr_e('Add'); ?>" /></p>
    290290    </div>
    291291    <p class="howto"><?php echo esc_attr( $taxonomy->labels->separate_items_with_commas ); ?></p>

  • trunk/wp-admin/includes/plugin-install.php

    r21143 r21789  
    131131        <input type="search" name="s" value="<?php echo esc_attr($term) ?>" autofocus="autofocus" />
    132132        <label class="screen-reader-text" for="plugin-search-input"><?php _e('Search Plugins'); ?></label>
    133         <?php submit_button( __( 'Search Plugins' ), 'button', 'plugin-search-input', false ); ?>
     133        <?php submit_button( __( 'Search Plugins' ), 'small', 'plugin-search-input', false ); ?>
    134134    </form><?php
    135135}

  • trunk/wp-admin/includes/post.php

    r21770 r21789  
    10851085        $return = '<strong>' . __('Permalink:') . "</strong>\n" . '<span id="sample-permalink" tabindex="-1">' . $permalink . "</span>\n";
    10861086        if ( '' == get_option( 'permalink_structure' ) && current_user_can( 'manage_options' ) && !( 'page' == get_option('show_on_front') && $id == get_option('page_on_front') ) )
    1087             $return .= '<span id="change-permalinks"><a href="options-permalink.php" class="button" target="_blank">' . __('Change Permalinks') . "</a></span>\n";
     1087            $return .= '<span id="change-permalinks"><a href="options-permalink.php" class="button button-tiny" target="_blank">' . __('Change Permalinks') . "</a></span>\n";
    10881088        if ( isset($view_post) )
    1089             $return .= "<span id='view-post-btn'><a href='$permalink' class='button'>$view_post</a></span>\n";
     1089            $return .= "<span id='view-post-btn'><a href='$permalink' class='button button-tiny'>$view_post</a></span>\n";
    10901090
    10911091        $return = apply_filters('get_sample_permalink_html', $return, $id, $new_title, $new_slug);
    … …  
    11141114    $return .= '<span id="sample-permalink" tabindex="-1">' . $display_link . "</span>\n";
    11151115    $return .= '&lrm;'; // Fix bi-directional text display defect in RTL languages.
    1116     $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";
     1116    $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";
    11171117    $return .= '<span id="editable-post-name-full">' . $post_name . "</span>\n";
    11181118    if ( isset($view_post) )
    1119         $return .= "<span id='view-post-btn'><a href='$view_link' class='button'>$view_post</a></span>\n";
     1119        $return .= "<span id='view-post-btn'><a href='$view_link' class='button button-tiny'>$view_post</a></span>\n";
    11201120
    11211121    $return = apply_filters('get_sample_permalink_html', $return, $id, $new_title, $new_slug);

  • trunk/wp-admin/includes/template.php

    r21781 r21789  
    555555
    556556<tr><td colspan="2" class="submit">
    557 <?php submit_button( __( 'Add Custom Field' ), 'add:the-list:newmeta', 'addmeta', false, array( 'id' => 'newmeta-submit' ) ); ?>
     557<?php submit_button( __( 'Add Custom Field' ), 'add:the-list:newmeta secondary', 'addmeta', false, array( 'id' => 'newmeta-submit' ) ); ?>
    558558<?php wp_nonce_field( 'add-meta', '_ajax_nonce-add-meta', false ); ?>
    559559</td></tr>
    … …  
    11161116        if ( $section['title'] )
    11171117            echo "<h3>{$section['title']}</h3>\n";
    1118        
     1118
    11191119        if ( $section['callback'] )
    11201120            call_user_func( $section['callback'], $section );
    1121        
     1121
    11221122        if ( ! isset( $wp_settings_fields ) || !isset( $wp_settings_fields[$page] ) || !isset( $wp_settings_fields[$page][$section['id']] ) )
    11231123            continue;
    … …  
    16381638 */
    16391639function get_submit_button( $text = null, $type = 'primary', $name = 'submit', $wrap = true, $other_attributes = null ) {
    1640     switch ( $type ) :
    1641         case 'primary' :
    1642         case 'secondary' :
    1643             $class = 'button-' . $type;
    1644             break;
    1645         case 'delete' :
    1646             $class = 'button-secondary delete';
    1647             break;
    1648         default :
    1649             $class = $type; // Custom cases can just pass in the classes they want to be used
    1650     endswitch;
    1651     $text = ( null == $text ) ? __( 'Save Changes' ) : $text;
     1640    if ( ! is_array( $type ) )
     1641        $type = explode( ' ', $type );
     1642
     1643    $button_shorthand = array( 'primary', 'tiny', 'small', 'large' );
     1644    $classes = array( 'button' );
     1645    foreach ( $type as $t ) {
     1646        if ( 'secondary' === $t || 'button-secondary' === $t )
     1647            continue;
     1648        $classes[] = in_array( $t, $button_shorthand ) ? 'button-' . $t : $t;
     1649    }
     1650    $class = implode( ' ', array_unique( $classes ) );
     1651
     1652    if ( 'delete' === $type )
     1653        $class = 'button-secondary delete';
     1654
     1655    $text = $text ? $text : __( 'Save Changes' );
    16521656
    16531657    // Default the id attribute to $name unless an id was specifically provided in $other_attributes

  • trunk/wp-admin/js/post.js

    r21737 r21789  
    559559
    560560            $('#view-post-btn').hide();
    561             b.html('<a href="#" class="save button">'+postL10n.ok+'</a> <a class="cancel" href="#">'+postL10n.cancel+'</a>');
     561            b.html('<a href="#" class="save button button-tiny">'+postL10n.ok+'</a> <a class="cancel" href="#">'+postL10n.cancel+'</a>');
    562562            b.children('.save').click(function() {
    563563                var new_slug = e.children('input').val();
Note: See TracChangeset for help on using the changeset viewer.