WordPress.org

Making WordPress.org

Changeset 6155


Ignore:
Timestamp:
11/21/17 19:55:22 (3 weeks ago)
Author:
obenland
Message:

wp4: Update button styles to latest Core version.

Should bring back consistency across w.org.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/style/wp4.css

    r6016 r6155  
    281281    text-shadow: none !important; 
    282282    border: none; 
     283    box-shadow: none; 
    283284    height: 30px; 
    284285    width: 26px; 
     
    676677} 
    677678 
    678 /* New button styles 
     679/* WordPress-style Buttons 
     680======================= 
     681Create a button by adding the `.button` class to an element. For backwards 
     682compatibility, we support several other classes (such as `.button-secondary`), 
     683but these will *not* work with the stackable classes described below. 
     684 
     685Button Styles 
     686------------- 
     687To display a primary button style, add the `.button-primary` class to a button. 
     688 
     689Button Sizes 
     690------------ 
     691Adjust a button's size by adding the `.button-large` or `.button-small` class. 
     692 
     693Button States 
     694------------- 
     695Lock the state of a button by adding the name of the pseudoclass as 
     696an actual class (e.g. `.hover` for `:hover`). 
     697 
    679698 
    680699TABLE OF CONTENTS: 
     
    683702 2.0 - Default Button Style 
    684703 3.0 - Primary Button Style 
     704 4.0 - Button Groups 
     705 5.0 - Responsive Button Styles 
    685706 
    686707---------------------------------------------------------------------------- */ 
    687  
    688 /* 1.0 - Button Layouts  */ 
    689  
     708/* ---------------------------------------------------------------------------- 
     709  1.0 - Button Layouts 
     710---------------------------------------------------------------------------- */ 
    690711.submit input, 
    691712input[type=button], 
     
    695716.download-button, 
    696717.button-secondary { 
    697     display: inline-block; 
    698     text-decoration: none; 
    699     font-size: 12px; 
    700     line-height: 23px; 
    701     height: 24px; 
    702     margin: 0; 
    703     padding: 0 10px 1px; 
    704     cursor: pointer; 
    705     border-width: 1px; 
    706     border-style: solid; 
     718    border: 1px solid; 
    707719    -webkit-border-radius: 3px; 
    708     -webkit-appearance: none; 
    709720    border-radius: 3px; 
    710     white-space: nowrap; 
    711721    -webkit-box-sizing: border-box; 
    712722    -moz-box-sizing:    border-box; 
    713723    box-sizing:         border-box; 
     724    cursor: pointer; 
     725    display: inline-block; 
     726    font-size: 0.8rem; 
     727    height: 1.5625rem; 
     728    line-height: 1; 
     729    margin: 0; 
     730    padding: 0 .8rem; 
     731    text-decoration: none; 
     732    white-space: nowrap; 
     733    -webkit-appearance: none; 
    714734} 
    715735 
     
    719739input[type="button"]::-moz-focus-inner, 
    720740input[type="submit"]::-moz-focus-inner { 
    721     border-width: 1px 0; 
    722     border-style: solid none; 
    723     border-color: transparent; 
     741    border: 0 none; 
    724742    padding: 0; 
     743} 
     744 
     745.button.button-xl, 
     746.button-group.button-xl .button { 
     747    font-size: 1rem; 
     748    height: 2.44141rem; 
     749    line-height: 1; 
     750    padding: 0 1.5rem; 
    725751} 
    726752 
    727753.button.button-large, 
    728754.button-group.button-large .button, 
    729 .col-2 p.button, .col-13 p.button { 
    730     height: 30px; 
    731     line-height: 28px; 
    732     padding: 0 12px 2px; 
     755.col-2 p.button, 
     756.col-13 p.button { 
     757    height: 1.95313rem; 
     758    line-height: 1; 
     759    padding: 0 1rem; 
    733760} 
    734761 
     
    736763.block-content span.button, 
    737764.button-group.button-small .button { 
    738     height: 21px; 
    739     line-height: 20px; 
    740     padding: 0 8px 1px; 
     765    font-size: 0.64rem; 
     766    height: 1.25rem; 
     767    line-height: 1; 
     768    padding: 0 .5rem; 
    741769} 
    742770 
     
    751779} 
    752780 
    753 .button:active { 
     781a.button, 
     782a.button-primary, 
     783a.button-secondary { 
     784    line-height:  1.5625rem; 
     785} 
     786 
     787a.button.button-large, 
     788.button-group.button-large a.button { 
     789    line-height: 1.95313rem; 
     790} 
     791 
     792a.button.button-xl, 
     793.button-group.button-xl a.button { 
     794    line-height: 2.44141rem; 
     795} 
     796 
     797a.button.button-small, 
     798.button-group.button-small a.button { 
     799    line-height: 1.25rem; 
     800} 
     801 
     802.button:active, 
     803.button:focus { 
    754804    outline: none; 
    755805} 
     
    759809} 
    760810 
    761 /* 2.0 - Default Button Style */ 
    762  
     811/* Style Reset buttons as simple text links */ 
     812input[type="reset"], 
     813input[type="reset"]:hover, 
     814input[type="reset"]:active, 
     815input[type="reset"]:focus { 
     816    background: none; 
     817    border: none; 
     818    -webkit-box-shadow: none; 
     819    box-shadow:         none; 
     820    padding: 0 2px 1px; 
     821    width: auto; 
     822} 
     823 
     824/* ---------------------------------------------------------------------------- 
     825  2.0 - Default Button Style 
     826---------------------------------------------------------------------------- */ 
    763827.submit input, 
    764828input[type=button], 
    765829input[type=submit], 
    766830.button, 
     831.button:visited, 
    767832.button-secondary { 
    768     background: #f3f3f3; 
    769     background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4)); 
    770     background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); 
    771     background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4); 
    772     background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4); 
    773     background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4); 
    774     border-color: #bbb; 
    775     color: #333; 
    776     text-shadow: 0 1px 0 #fff; 
     833    background: #f7f7f7; 
     834    border-color: #cccccc; 
     835    -webkit-box-shadow: 0 1px 0 #cccccc; 
     836    box-shadow:         0 1px 0 #cccccc; 
     837    color: #555; 
     838    vertical-align: top; 
     839} 
     840 
     841p .button { 
     842    vertical-align: baseline; 
    777843} 
    778844 
     
    789855.button:focus, 
    790856.button-secondary:focus { 
    791     background: #f3f3f3; 
    792     background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3)); 
    793     background-image: -webkit-linear-gradient(top, #fff, #f3f3f3); 
    794     background-image:    -moz-linear-gradient(top, #fff, #f3f3f3); 
    795     background-image:     -ms-linear-gradient(top, #fff, #f3f3f3); 
    796     background-image:      -o-linear-gradient(top, #fff, #f3f3f3); 
    797     background-image:   linear-gradient(to bottom, #fff, #f3f3f3); 
     857    background: #fafafa; 
    798858    border-color: #999; 
    799     color: #222; 
     859    color: #23282d; 
    800860} 
    801861 
     
    805865.button.focus, 
    806866.button:focus, 
    807 .button-secondary:focus { 
    808     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); 
    809     box-shadow: 1px 1px 1px rgba(0,0,0,.2); 
     867.button-secondary:focus, 
     868.button-link:focus { 
     869    border-color: #5b9dd9; 
     870    -webkit-box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); 
     871    box-shadow:         0 0 3px rgba(0, 115, 170, 0.8); 
    810872} 
    811873 
     
    819881.button-secondary:active { 
    820882    background: #eee; 
    821     background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe)); 
    822     background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe); 
    823     background-image:    -moz-linear-gradient(top, #f4f4f4, #fefefe); 
    824     background-image:     -ms-linear-gradient(top, #f4f4f4, #fefefe); 
    825     background-image:      -o-linear-gradient(top, #f4f4f4, #fefefe); 
    826     background-image:   linear-gradient(to bottom, #f4f4f4, #fefefe); 
    827883    border-color: #999; 
    828     color: #333; 
    829     text-shadow: 0 -1px 0 #fff; 
    830     -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); 
    831     box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); 
     884    -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); 
     885    box-shadow:         inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); 
     886    -webkit-transform: translateY(1px); 
     887    -ms-transform:     translateY(1px); 
     888    transform:         translateY(1px); 
     889} 
     890 
     891.button.active:focus { 
     892    border-color: #5b9dd9; 
     893    -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 115, 170, 0.8); 
     894    box-shadow:         inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 115, 170, 0.8); 
    832895} 
    833896 
     
    837900.button[disabled], 
    838901.button:disabled, 
     902.button.disabled, 
    839903.button-secondary[disabled], 
    840904.button-secondary:disabled, 
     905.button-secondary.disabled, 
    841906.button-disabled { 
    842     color: #aaa !important; 
     907    background: #f7f7f7 !important; 
    843908    border-color: #ddd !important; 
    844     background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important; 
    845     background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important; 
    846     background-image:    -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important; 
    847     background-image:     -ms-linear-gradient(top, #f9f9f9, #f4f4f4) !important; 
    848     background-image:      -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important; 
    849     background-image:   linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important; 
    850909    -webkit-box-shadow: none !important; 
    851910    box-shadow:         none !important; 
     911    color: #a0a5aa !important; 
     912    cursor: default; 
    852913    text-shadow: 0 1px 0 #fff !important; 
    853     cursor: default; 
    854 } 
    855  
    856 /* 3.0 - Primary Button Style */ 
    857  
     914    -webkit-transform: none !important; 
     915    -ms-transform:     none !important; 
     916    transform:         none !important; 
     917} 
     918 
     919/* Buttons that look like links, for a cross of good semantics with the visual */ 
     920.button-link { 
     921    background: none; 
     922    border: 0; 
     923    -webkit-border-radius: 0; 
     924    border-radius:         0; 
     925    -webkit-box-shadow: none; 
     926    box-shadow:         none; 
     927    cursor: pointer; 
     928    margin: 0; 
     929    outline: none; 
     930    padding: 0; 
     931} 
     932 
     933.button-link:focus { 
     934    outline: #5b9dd9 solid 1px; 
     935} 
     936 
     937/* ---------------------------------------------------------------------------- 
     938  3.0 - Primary Button Style 
     939---------------------------------------------------------------------------- */ 
    858940.button-primary, 
    859941.download-button, 
    860942.button-primary:visited, 
    861943.download-button:visited { 
    862     background-color: #21759b; 
    863     background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b)); 
    864     background-image: -webkit-linear-gradient(top, #2a95c5, #21759b); 
    865     background-image:    -moz-linear-gradient(top, #2a95c5, #21759b); 
    866     background-image:     -ms-linear-gradient(top, #2a95c5, #21759b); 
    867     background-image:      -o-linear-gradient(top, #2a95c5, #21759b); 
    868     background-image:   linear-gradient(to bottom, #2a95c5, #21759b); 
    869     border-color: #21759b; 
    870     border-bottom-color: #1e6a8d; 
    871     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); 
    872     box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); 
     944    background: #0085ba; 
     945    border-color: #0073aa #006799 #006799; 
     946    -webkit-box-shadow: 0 1px 0 #006799; 
     947    box-shadow:         0 1px 0 #006799; 
    873948    color: #fff; 
    874949    text-decoration: none; 
    875     text-shadow: 0 1px 0 rgba(0,0,0,0.1); 
     950    text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799; 
    876951} 
    877952 
     
    884959.download-button.focus, 
    885960.download-button:focus { 
    886     background-color: #278ab7; 
    887     background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b)); 
    888     background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b); 
    889     background-image:    -moz-linear-gradient(top, #2e9fd2, #21759b); 
    890     background-image:     -ms-linear-gradient(top, #2e9fd2, #21759b); 
    891     background-image:      -o-linear-gradient(top, #2e9fd2, #21759b); 
    892     background-image:   linear-gradient(to bottom, #2e9fd2, #21759b); 
    893     border-color: #1b607f; 
    894     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); 
    895     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); 
     961    background: #008ec2; 
     962    border-color: #006799; 
    896963    color: #fff; 
    897     text-shadow: 0 -1px 0 rgba(0,0,0,0.3); 
    898964} 
    899965 
     
    902968.download-button.focus, 
    903969.download-button:focus { 
    904     border-color: #0e3950; 
    905     -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4); 
    906     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4); 
     970    -webkit-box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db; 
     971    box-shadow:         0 1px 0 #0073aa, 0 0 2px 1px #33b3db; 
    907972} 
    908973 
     
    915980.download-button.active:focus, 
    916981.download-button:active { 
    917     background: #1b607f; 
    918     background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7)); 
    919     background-image: -webkit-linear-gradient(top, #21759b, #278ab7); 
    920     background-image:    -moz-linear-gradient(top, #21759b, #278ab7); 
    921     background-image:     -ms-linear-gradient(top, #21759b, #278ab7); 
    922     background-image:      -o-linear-gradient(top, #21759b, #278ab7); 
    923     background-image:   linear-gradient(to bottom, #21759b, #278ab7); 
    924     border-color: #124560 #2382ae #2382ae #2382ae; 
    925     color: rgba(255,255,255,0.95); 
    926     -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 
    927     box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 
    928     text-shadow: 0 1px 0 rgba(0,0,0,0.1); 
     982    background: #0073aa; 
     983    border-color: #006799; 
     984    -webkit-box-shadow: inset 0 2px 0 #006799; 
     985    box-shadow:         inset 0 2px 0 #006799; 
     986    vertical-align: top; 
    929987} 
    930988 
     
    935993.download-button:disabled, 
    936994.download-button-disabled { 
    937     color: #94cde7 !important; 
    938     background: #298cba !important; 
    939     border-color: #1b607f !important; 
     995    background: #008ec2 !important; 
     996    border-color: #007cb2 !important; 
    940997    -webkit-box-shadow: none !important; 
    941998    box-shadow:         none !important; 
    942     text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important; 
     999    color: #66c6e4 !important; 
    9431000    cursor: default; 
    944 } 
     1001    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important; 
     1002} 
     1003 
     1004/* ---------------------------------------------------------------------------- 
     1005  4.0 - Button Groups 
     1006---------------------------------------------------------------------------- */ 
     1007.button-group { 
     1008    display: inline-block; 
     1009    font-size: 0; 
     1010    position: relative; 
     1011    vertical-align: middle; 
     1012    white-space: nowrap; 
     1013} 
     1014 
     1015.button-group > .button { 
     1016    -webkit-border-radius: 0; 
     1017    border-radius: 0; 
     1018    display: inline-block; 
     1019    margin-right: -1px; 
     1020    z-index: 10; 
     1021} 
     1022 
     1023.button-group > .button-primary { 
     1024    z-index: 100; 
     1025} 
     1026 
     1027.button-group > .button:hover { 
     1028    z-index: 20; 
     1029} 
     1030 
     1031.button-group > .button:first-child { 
     1032    -webkit-border-radius: 3px 0 0 3px; 
     1033    border-radius:         3px 0 0 3px; 
     1034} 
     1035 
     1036.button-group > .button:last-child { 
     1037    -webkit-border-radius: 0 3px 3px 0; 
     1038    border-radius:         0 3px 3px 0; 
     1039} 
     1040 
     1041.button-group > .button:focus { 
     1042    position: relative; 
     1043    z-index: 1; 
     1044} 
     1045 
     1046/* ---------------------------------------------------------------------------- 
     1047  5.0 - Responsive Button Styles 
     1048---------------------------------------------------------------------------- */ 
     1049@media screen and (max-width: 782px) { 
     1050    .button, 
     1051    .button.button-xl, 
     1052    .button.button-large, 
     1053    .button.button-small { 
     1054        font-size: 14px; 
     1055        height: auto; 
     1056        line-height: normal; 
     1057        margin-bottom: 4px; 
     1058        padding: 6px 14px; 
     1059        vertical-align: middle; 
     1060    } 
     1061} 
     1062 
    9451063 
    9461064/* */ 
     
    22312349 
    22322350 
    2233 /*  
     2351/* 
    22342352 *  Notifications 
    22352353 */ 
Note: See TracChangeset for help on using the changeset viewer.