WordPress.org

Making WordPress.org

Changeset 6155


Ignore:
Timestamp:
11/21/2017 07:55:22 PM (8 months 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.