WordPress.org
Get WordPress

Making WordPress.org


Ignore:
Timestamp:
09/05/2022 05:14:31 AM (2 years ago)
Author:
dufresnesteven
Message:

wporg-developer: Sync with ​https://github.com/WordPress/wporg-developer/commit/790d402933d2725374de0d19e6bf6a576c8b15d2

File:
1 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

    r11910 r12050  
     1// stylelint-disable no-duplicate-selectors -- duplicates OK when nested.
     2// stylelint-disable max-line-length -- Comments may be longer.
     3// stylelint-disable font-family-no-missing-generic-family-keyword -- dashicons OK.
     4// stylelint-disable function-url-quotes -- Allow quotes in `url("…")`.
     5
    16@import "reset";
    27@import "global";
    38
    49.home .devhub-wrap {
    5     h1, h2, h3, h4, h5, h6 {
     10    h1,
     11    h2,
     12    h3,
     13    h4,
     14    h5,
     15    h6 {
    616        font-family: "Open Sans", sans-serif;
    717    }
    818    padding-bottom: 0;
     19
    920    #content {
    1021        padding: 0;
    … …  
    1425.devhub-wrap {
    1526    padding-bottom: 1.5em;
     27
    1628    *,
    17     *:before,
    18     *:after {
     29    *::before,
     30    *::after {
    1931        -moz-box-sizing: border-box;
    2032        -webkit-box-sizing: border-box;
    … …  
    2436    /* Override inline style from wporg-markdown plugin. */
    2537    a.github-edit {
    26         padding: 0 .6em 0;
    27     }
    28 
    29     #content, #content-area {
    30         padding: 0 #{"max( 20px, 2% )"};
    31 
    32         .toc-heading {
    33             clear: left;
    34         }
     38        padding: 0 0.6em 0;
     39    }
     40
     41    #content,
     42    #content-area {
     43        padding: 0 12px; // Matches .site-branding padding
    3544
    3645        table {
    3746            border: 1px solid #f0f0f0;
    38             @media ( max-width: 991px ) {
    39                 overflow-x: scroll;
    40                 display: block;
    41             }
     47
    4248            th {
    4349                padding: 1em;
    … …  
    4551                background: #f0f0f0;
    4652            }
     53
    4754            td {
    4855                padding: 0.8em 1em;
    … …  
    5158        }
    5259    }
     60
     61    @media ( min-width: 889px ) {
     62        #content {
     63            padding: 0;
     64        }
     65
     66        #content-area {
     67            padding: 0 24px;
     68        }
     69    }
     70
    5371    #content-area,
    5472    .inner-wrap {
    5573        margin: 2rem auto 0;
    56         max-width: 60em;
    57     }
     74        max-width: $devhub-wrap-content-width;
     75    }
     76
    5877    .page-header {
    5978        margin-top: 1em;
    … …  
    89108        font-weight: 300;
    90109        font-size: 28px;
    91         line-height: 1em;
    92         text-shadow: #fff 0px 1px 0px;
     110        line-height: 1;
     111        text-shadow: #fff 0 1px 0;
    93112        font-family: $header-font;
    94113    }
    95114
    96115    h1 {
    97         font-size: 28px;
    98116        font-size: 3rem;
    99         line-height: 32px;
    100         line-height: 3.2rem;
     117        line-height: 1.067;
    101118        font-weight: 300;
    102119        margin-bottom: 1.5rem;
    103120    }
     121
    104122    h2 {
    105         font-size: 22px;
    106123        font-size: 2.2rem;
    107         line-height: 26px;
    108         line-height: 2.6rem;
     124        line-height: 1.18;
    109125        font-weight: 300;
    110126    }
     127
    111128    h3 {
    112         font-size: 20px;
    113129        font-size: 2rem;
    114         line-height: 24px;
    115         line-height: 2.4rem;
     130        line-height: 1.2;
    116131        font-weight: 300;
    117132    }
     133
    118134    h4 {
    119         font-size: 18px;
    120135        font-size: 1.8rem;
    121         line-height: 22px;
    122         line-height: 2.2rem;
     136        line-height: 1.2;
    123137        border-bottom: none;
    124138        font-weight: 300;
    125139
    126140        .dashicons {
    127             font-size: 22px;
    128141            font-size: 2.2rem;
    129             line-height: 22px;
    130             line-height: 2.2rem;
    131             height: 22px;
    132             width: 22px;
    133             height: 2.2rem;
    134             width: 2.2rem;
     142            line-height: 1;
     143            height: 1em;
     144            width: 1em;
    135145        }
    136146    }
    … …  
    151161        border-radius: 3px;
    152162        background: #fff;
    153         color: rgba(0, 0, 0, .8);
     163        color: rgba(0, 0, 0, 0.8);
    154164        cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
    155         font-size: 16px;
    156165        font-size: 1.6rem;
    157166        line-height: 1.1;
    158167        float: none;
    159168        height: auto;
    160         padding: .6em 1.8em;
     169        padding: 0.6em 1.8em;
    161170        text-decoration: none;
    162171        -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
     172
    163173        &:hover {
    164174            border-color: #ccc #bbb #aaa #bbb;
    165175            background: #f0f0f0;
    166176        }
    167         &:focus, &:active {
     177
     178        &:focus,
     179        &:active {
    168180            border-color: #aaa #bbb #bbb #bbb;
    169181            background: #f0f0f0;
    170             -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    171             box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    172         }
     182            box-shadow: 0 0 3px get-color(blue-40);
     183        }
     184
    173185        &.shiny-blue {
    174             background-color: #21759b;
    175             background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
    176             background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
    177             background-image:    -moz-linear-gradient(top, #2a95c5, #21759b);
    178             background-image:     -ms-linear-gradient(top, #2a95c5, #21759b);
    179             background-image:      -o-linear-gradient(top, #2a95c5, #21759b);
    180             background-image:   linear-gradient(to bottom, #2a95c5, #21759b);
    181             border-color: #21759b;
    182             border-bottom-color: #1e6a8d;
    183             -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    184             box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     186            background-color: get-color(blue-50);
     187            border-color: get-color(blue-50);
     188            border-bottom-color: get-color(blue-70);
    185189            color: #fff;
    186190            text-decoration: none;
    187             text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    188             padding: 3px 8px;
    189             &:hover {
    190                 background-color: #278ab7;
    191                 background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
    192                 background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
    193                 background-image:    -moz-linear-gradient(top, #2e9fd2, #21759b);
    194                 background-image:     -ms-linear-gradient(top, #2e9fd2, #21759b);
    195                 background-image:      -o-linear-gradient(top, #2e9fd2, #21759b);
    196                 background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
    197                 border-color: #1b607f;
    198                 -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    199                 box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     191
     192            &:hover,
     193            &:focus,
     194            &:active {
     195                background-color: get-color(blue-60);
     196                border-color: get-color(blue-80);
    200197                color: #fff;
    201                 text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    202             }
    203         }
     198            }
     199
     200            &:focus,
     201            &:active {
     202                box-shadow: 0 0 3px 1px get-color(yellow-30);
     203            }
     204        }
     205
    204206        .dashicons {
     207            transform: scale(-1, 1);
    205208            vertical-align: text-bottom;
    206209        }
    … …  
    210213        .three-columns a.button {
    211214            max-width: 100%;
    212             padding: .6em 1em;
    213             font-size: 14px;
     215            padding: 0.6em 1em;
    214216            font-size: 1.4rem;
    215217        }
     218
    216219        .three-columns .dashicons {
    217220            width: 16px;
    … …  
    226229        padding: 0; /* Addresses excess padding in IE8/9 */
    227230    }
     231
    228232    input[type="search"] {
    229233        -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
    230         -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
    231         -moz-box-sizing:    content-box;
    232         box-sizing:         content-box;
    233     }
    234     input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    235         -webkit-appearance: none;
    236     }
    237     button::-moz-focus-inner,
    238     input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    239         border: 0;
    240         padding: 0;
    241     }
     234        box-sizing: content-box;
     235    }
     236
     237    input[type="search"]::-webkit-search-decoration {
     238        -webkit-appearance: none; /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
     239    }
     240
    242241    input[type="text"],
    243242    input[type="email"],
    … …  
    250249        border: 1px solid #ccc;
    251250        border-radius: 3px;
     251
    252252        &:focus {
    253253            color: #111;
    254254        }
    255255    }
     256
    256257    textarea {
    257258        overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
    … …  
    263264    }
    264265
    265     /* Text meant only for screen readers */
    266     .screen-reader-text {
    267         clip: rect(1px, 1px, 1px, 1px);
    268         position: absolute !important;
    269     }
    270 
    271     .screen-reader-text:hover,
    272     .screen-reader-text:active,
    273     .screen-reader-text:focus {
    274         background-color: #f1f1f1;
     266    select {
     267        appearance: none;
     268        background-color: $color-white;
     269        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24' aria-hidden='true'%3E%3Cpath d='M17.5 11.6 12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z'/%3E%3C/svg%3E%0A");
     270        background-position: right center;
     271        background-repeat: no-repeat;
     272        background-size: 1.5em 1.5em;
     273        padding-right: 2em;
     274        color: get-color(gray-70);
     275        border: 1px solid get-color(gray-70);
    275276        border-radius: 3px;
    276         box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    277         clip: auto !important;
    278         color: #21759b;
    279         display: block;
    280         font-size: 14px;
    281         font-weight: bold;
    282         height: auto;
    283         left: 5px;
    284         line-height: normal;
    285         padding: 15px 23px 14px;
    286         text-decoration: none;
    287         top: 5px;
    288         width: auto;
    289         z-index: 100000; /* Above WP toolbar */
    290277    }
    291278
    292279    /* Clearing */
    293     .clear:before,
    294     .clear:after,
    295     .entry-content:before,
    296     .entry-content:after,
    297     .comment-content:before,
    298     .comment-content:after,
    299     .site-content:before,
    300     .site-content:after,
    301     .site-footer:before,
    302     .site-footer:after {
    303         content: '';
     280    .clear::before,
     281    .clear::after,
     282    .entry-content::before,
     283    .entry-content::after,
     284    .comment-content::before,
     285    .comment-content::after,
     286    .site-content::before,
     287    .site-content::after,
     288    .site-footer::before,
     289    .site-footer::after,
     290    section::after {
     291        content: "";
    304292        display: table;
    305293    }
    306294
    307     .clear:after,
    308     .entry-content:after,
    309     .comment-content:after,
    310     .site-content:after,
    311     .site-footer:after {
     295    .clear::after,
     296    .entry-content::after,
     297    .comment-content::after,
     298    .site-content::after,
     299    .site-footer::after,
     300    section::after {
    312301        clear: both;
    313302    }
    … …  
    315304    /* =Content
    316305    ----------------------------------------------- */
     306
    317307    .hentry {
    318308        margin: 0;
    319309    }
     310
    320311    .byline,
    321312    .updated {
    322313        display: none;
    323314    }
     315
    324316    .single .byline,
    325317    .group-blog .byline {
    326318        display: inline;
    327319    }
     320
    328321    .page-content,
    329322    .entry-content,
    … …  
    331324        margin: 1.5em 0 0;
    332325    }
     326
    333327    .page-links {
    334328        clear: both;
    … …  
    342336        margin: 0;
    343337    }
     338
    344339    .tablist li {
    345340        display: inline-block;
    346341        list-style: none;
    347342    }
     343
    348344    .tablist a {
    349         border-color: none;
     345        border-color: transparent;
    350346        background-color: transparent;
    351         border-color: transparent;
    352347        border-image: none;
    353348        border-style: solid solid none;
    354349        border-width: 1px 1px 0;
    355350        display: inline-block;
    356         padding: .5em 1em;
    357         margin-bottom:-1px;
    358     }
     351        padding: 0.5em 1em;
     352        margin-bottom: -1px;
     353    }
     354
    359355    .tablist a[aria-selected],
    360356    .tablist a:focus {
    … …  
    364360        color: #333;
    365361    }
     362
    366363    .tab-section {
    367364        margin-top: 0;
    … …  
    369366        border: none;
    370367    }
     368
    371369    .tab-section[aria-hidden="true"] {
    372370        display: none;
    373371    }
     372
    374373    .tab-section:focus {
    375374        background: #eee;
    … …  
    388387        padding: 0;
    389388    }
     389
    390390    .wp-caption {
    391391        border: 1px solid #ccc;
    … …  
    393393        max-width: 100%;
    394394    }
     395
    395396    .wp-caption img[class*="wp-image-"] {
    396397        display: block;
    … …  
    398399        max-width: 98%;
    399400    }
     401
    400402    .wp-caption-text {
    401403        text-align: center;
    402404    }
     405
    403406    .wp-caption .wp-caption-text {
    404407        margin: 0.8075em 0;
    405408    }
     409
    406410    .site-main .gallery {
    407411        margin-bottom: 1.5em;
    408412    }
     413
    409414    .site-main .gallery a img {
    410415        border: none;
    … …  
    412417        max-width: 90%;
    413418    }
     419
    414420    .site-main .gallery dd {
    415421        margin: 0;
    … …  
    437443    }
    438444
    439     .widget-area .search-section.hide-if-js {
    440         display: block;
    441     }
    442 
    443445    /* =Infinite Scroll
    444446    ----------------------------------------------- */
    … …  
    456458
    457459
    458 
    459460    /*
    460461     * Header area
    … …  
    468469        font-size: 1.3rem;
    469470    }
     471
    470472    .breadcrumb-trail {
    471473        margin-bottom: 2rem;
    … …  
    475477        }
    476478    }
     479
    477480    h1.entry-title,
    478481    h1.page-title {
    479482        font-weight: 300;
    480         font-size: 37px;
    481483        font-size: 3.7rem;
    482484        color: #606060;
    483485        text-align: center;
     486
    484487        a {
    485488            text-decoration: none;
    … …  
    491494    h2.entry-title {
    492495        text-align: left;
    493         font-size: 30px;
    494496        font-size: 3rem;
    495         padding: 0 0 24px;
    496497        padding: 0 0 2.4rem;
    497498
    … …  
    507508
    508509    .home-landing .section {
    509         padding: 50px 0 10px;
    510510        padding: 5rem 0 1rem;
    511         margin-top: 60px;
    512511        margin-top: 6rem;
    513512        overflow: auto;
    … …  
    515514        .no-bullets {
    516515            li {
    517                 line-height: 20px;
    518                 line-height: 2rem;
    519                 margin-bottom: 12.5px;
     516                line-height: 1.5;
    520517                margin-bottom: 1.25rem;
    521518
    … …  
    528525
    529526        .widget-title {
    530             line-height: 60px;
    531             line-height: 6rem;
     527            line-height: 2.4;
     528            cursor: pointer;
     529            text-decoration: none;
     530            color: inherit;
     531            font-weight: inherit;
    532532        }
    533533
    … …  
    542542
    543543    }
     544
    544545    .color.section {
    545546        color: #fff;
    546547    }
     548
    547549    .section {
     550
    548551        /*background: #0073aa;*/
    549         padding: 30px 0;
    550552        padding: 3rem 0;
    551553
    552554        .box {
    553555            text-align: center;
    554 
    555             padding: 0 30px 90px;
    556556            padding: 0 3rem 9rem;
    557557            width: 320px;
    … …  
    559559            .widget-description {
    560560                padding: 1em 0 0;
    561                 margin-bottom: 5px;
    562561                margin-bottom: 1rem;
    563562            }
    564563        }
     564
    565565        &.search-guide {
    566             padding-top: 60px;
    567566            padding-top: 6rem;
    568567            margin-top: 0;
    … …  
    574573
    575574        .widget-title {
    576 
    577             font-size: 25px;
    578575            font-size: 2.5rem;
    579             line-height: 20px;
    580             line-height: 2rem;
     576            line-height: 0.8;
     577
    581578            .dashicons {
    582579                color: #222;
    583                 font-size: 108px;
    584580                font-size: 10.8rem;
    585                 line-height: 84px;
    586                 line-height: 8.4rem;
    587                 height: 84px;
    588                 width: 84px;
     581                line-height: 0.778;
    589582                height: 8.4rem;
    590583                width: 8.4rem;
    591                 display: block;
    592584                margin: 0 auto;
    593585                opacity: 0.4;
     586                display: flex;
     587                align-items: center;
     588                flex-direction: column;
    594589
    595590                &.dashicons-rest-api {
    596                     font-size:90px;
    597                     font-size:9rem;
     591                    font-size: 9rem;
    598592                }
    599593            }
    600594        }
     595
    601596        .three-columns .widget-title {
     597
    602598            @media ( min-width: 43em ) and ( max-width: 915px ) {
    603                 font-size: 35px;
    604599                font-size: 3.5rem;
    605600            }
    … …  
    611606        background: #797878;
    612607        color: #fff;
     608
    613609        h2,
    614610        h3,
    … …  
    616612            color: #fff;
    617613        }
     614
    618615        .inner-wrap {
    619             max-width: 760px;
    620616            max-width: 76rem;
    621617            margin: 1.2em auto 0;
    … …  
    627623                text-align: center;
    628624            }
     625
    629626            .code-ref-right {
    630627                float: left;
    … …  
    644641                    text-align: center;
    645642                }
     643
    646644                .code-ref-left .widget-description {
    647645                    margin-left: 0;
    … …  
    658656        .widget-title {
    659657            font-weight: 300;
    660             font-size: 50px;
    661658            font-size: 5rem;
    662             line-height: 68px;
    663             line-height: 6.8rem;
     659            line-height: 1.36;
     660
    664661            .dashicons {
    665                 font-size: 68px;
    666662                font-size: 6.8rem;
    667                 line-height: 68px;
    668                 line-height: 6.8rem;
    669                 height: 6.8px;
    670                 width: 6.8px;
     663                line-height: 1;
    671664                height: 6.8rem;
    672665                width: 6.8rem;
    673666            }
     667
    674668            @media ( min-width: 43em ) and ( max-width: 915px ) {
    675                 font-size: 35px;
    676669                font-size: 3.5rem;
    677670            }
    678671        }
     672
    679673        .widget-description {
    680             margin-left: 85px;
    681674            margin-left: 8.5rem;
    682675        }
    … …  
    687680        background: #f2f2f2;
    688681        color: #606060;
     682
    689683        .widget-title {
    690684            color: #606060;
    … …  
    692686
    693687            a {
    694                 color: #2D96C2;
    695             }
    696         }
     688                color: #2d96c2;
     689            }
     690        }
     691
    697692        a {
    698693            color: #606060;
    699694            text-decoration: none;
    700695
    701             &.make-wp-link:after {
     696            &.make-wp-link::after {
    702697                content: "\f345";
    703                 font-family: 'dashicons';
     698                font-family: dashicons;
    704699                margin-left: 4px;
    705700                vertical-align: middle;
    … …  
    709704
    710705    .section .home-primary-content {
    711         max-width: 600px;
    712706        max-width: 60rem;
    713707        margin: 0 auto;
    … …  
    715709
    716710    .box {
    717         padding: 30px;
    718711        padding: 3rem;
    719712        float: left;
    720713        clear: none;
    721714    }
     715
    722716    .three-columns .box {
     717
    723718        @media ( min-width: 43em ) and ( max-width: 915px ) {
    724             padding: 30px 20px;
    725719            padding: 3rem 2rem;
    726         }
    727     }
    728 
    729     .reference-landing .section.search-section {
    730         padding-top: 0;
    731     }
    732 
    733     div#inner-search {
    734         background-color: #666;
    735         margin-bottom: 1em;
    736         padding-top: 2px;
    737         .section.search-section {
    738             color: #ffffff;
    739         }
    740         div#inner-search-icon-container {
    741             margin: 0 auto;
    742             max-width: 60em;
    743             cursor: pointer;
    744             div#inner-search-icon {
    745                 background-color: #666;
    746                 color: #ffffff;
    747                 text-align: center;
    748                 margin-right: 26px;
    749                 margin-left: 4px;
    750                 float: right;
    751                 padding: 5px;
    752                 -webkit-border-bottom-right-radius: 5px;
    753                 -webkit-border-bottom-left-radius: 5px;
    754                 -moz-border-radius-bottomright: 5px;
    755                 -moz-border-radius-bottomleft: 5px;
    756                 border-bottom-right-radius: 5px;
    757                 border-bottom-left-radius: 5px;
    758                 .dashicons-search {
    759                     height: auto;
    760                     width: auto;
    761                     &:before {
    762                         font-size: 36px;
    763                         line-height: 36px;
    764                     }
    765                 }
    766             }
    767720        }
    768721    }
    … …  
    771724        margin: 5rem 0;
    772725        font-size: 1.5rem;
     726        line-height: 1.5;
     727
     728        select,
    773729        input[type="submit"] {
    774             margin-left: .5em;
    775             padding: 0.2em 0.5em;
    776             line-height: 1;
    777             font-size: 1.5rem;
    778         }
    779     }
    780 
    781     .searchform {
    782         overflow: hidden;
    783         height: auto;
    784         position: relative;
    785         input[type="text"] {
    786             border-radius: 0;
    787             margin: 0 auto;
    788             padding: 0.5em;
    789             width: 100%;
    790         }
    791         .button-search {
    792             background: transparent;
    793             border: none;
    794             border-radius: 0;
    795             box-shadow: none;
    796             color: #32373c;
    797             display: block;
    798             height: 40px;
    799             padding: 0.5rem 1rem;
    800             position: absolute;
    801             right: 0;
    802             top: 0;
    803             text-shadow: none;
    804         }
    805         label {
    806             width: 560px;
    807             width: 56rem;
    808             max-width: 100%;
    809             margin-right: 15px;
    810             display: inline-block;
    811             float: left;
    812             .search-field input[type="text"] {
    813                 width: 100%;
    814             }
    815         }
    816         div {
    817             overflow: auto;
    818         }
    819         .search-post-type {
    820             margin-top: 1em;
    821 
    822             label {
    823                 border-right: 1px solid #ccc;
    824                 float: none;
    825                 width: inherit;
    826                 margin-left: 1em;
    827                 margin-right: 0;
    828                 padding-left: 0;
    829                 padding-right: 1.3em;
    830                 input {
    831                     margin-bottom: 6px;
    832                     padding-left: 0.5em;
    833                     vertical-align: middle;
    834                 }
    835             }
    836             label:last-child {
    837                 border-right-width: 0;
    838             }
    839 
    840             @media ( max-width: 688px ) {
    841                 span {
    842                     display: block;
    843                 }
    844 
    845                 label {
    846                     margin-left: 0;
    847                     margin-right: 1em;
    848                     width: 130px;
    849 
    850                     &:last-child {
    851                         margin-right: 0;
    852                         padding-right: 0;
    853                         width: initial;
    854                     }
    855                 }
    856             }
     730            margin: 0 0 0 0.5em;
     731            padding: 0.333em 1em;
     732            font-size: inherit;
     733            line-height: inherit;
     734        }
     735
     736        select {
     737            padding-right: 2em;
    857738        }
    858739    }
    859740
    860741    .search-results-summary {
    861         font-style: italic;
    862742        margin-bottom: 1em;
    863     }
    864 
    865     .reference-landing .section, .search-section {
    866         max-width: 970px;
     743        padding: 2rem;
     744        background: get-color(gray-2);
     745        border-radius: 2px;
     746        font-size: 14px;
     747    }
     748
     749    .reference-landing .section {
    867750        max-width: 97rem;
    868751        margin: 0 auto;
    … …  
    884767                margin-bottom: 0;
    885768            }
     769
    886770            &.search-guide {
    887771                padding-bottom: 0;
    888772            }
    889             &.section.topic-guide, &.section.new-in-guide  {
     773
     774            &.section.topic-guide,
     775            &.section.new-in-guide {
    890776                padding-top: 0;
    891777            }
    … …  
    896782    .sidebar .box {
    897783        padding: 0;
    898         border: 2px solid #cccccc;
    899         background-color: #eeeeee;
     784        border: 2px solid #ccc;
     785        background-color: #eee;
     786
    900787        ul {
    901788            padding: 2em;
    … …  
    904791
    905792        .widget-title {
    906             padding: 10px 30px;
    907793            padding: 1rem 30px;
    908             font-size: 16px;
    909794            font-size: 1.6rem;
    910795        }
     796
    911797        .widget-content {
    912             padding: 16px 30px;
    913798            padding: 1.6rem 3rem;
    914799        }
    … …  
    924809        width: 31%;
    925810        margin: 1.15%;
     811
    926812        @media ( min-width: 43em ) and ( max-width: 915px ) {
    927813            margin: 1% 0;
    … …  
    931817    .two-columns .box {
    932818        width: 48%;
    933         margin: 1% 1% 1% 0;
     819        margin-top: 1%;
     820        margin-bottom: 1%;
    934821    }
    935822
    936823    .new-in-guide.two-columns .box {
    937         width: 43%;
     824        margin-left: 1%;
     825
    938826        @media ( max-width: 688px ) {
    939827            width: 100%;
    940         }
    941     }
     828            margin-left: 0;
     829        }
     830    }
     831
    942832    .new-in-guide.two-columns .box:first-child {
    943         width: 53%;
     833        width: 48%;
     834        margin-right: 1%;
     835        margin-left: 0;
     836
    944837        @media ( max-width: 688px ) {
    945838            width: 100%;
    … …  
    954847        padding: 0;
    955848    }
     849
    956850    .horizontal-list {
    957851        display: block;
    … …  
    960854        margin: 0;
    961855        padding: 0;
    962         text-align: center;
    963     }
     856    }
     857
    964858    .horizontal-list li {
    965859        display: inline;
    966860    }
     861
    967862    .horizontal-list li a {
    968         padding: 0px 40px;
    969863        padding: 0 4rem;
    970864        border-left: 1px solid #ccc;
    971865    }
     866
    972867    .horizontal-list li:first-child a {
    973868        padding-left: 0;
    … …  
    993888        background: #fff;
    994889        border: 1px solid #d8d8d8;
     890
    995891        .widget-title {
    996             color: #666666;
     892            color: #666;
    997893            background: #d8d8d8;
    998894            text-transform: uppercase;
    … …  
    1005901        padding: 0;
    1006902        margin: 0;
    1007         font-size: 13px;
    1008903        font-size: 1.3rem;
    1009         line-height: 30px;
    1010         line-height: 3rem;
     904        line-height: 2.3;
    1011905    }
    1012906
    … …  
    1014908        font-weight: 400;
    1015909    }
     910
    1016911    .go {
    1017912        color: #4ca6cf;
    … …  
    1022917            margin: 24px 0;
    1023918            font-size: 20px;
    1024             font-weight: normal;
    1025         }
    1026     }
    1027     .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
     919            font-weight: 400;
     920        }
     921    }
     922
     923    .wp-parser-class,
     924    .wp-parser-function,
     925    .wp-parser-hook,
     926    .wp-parser-method {
    1028927        border-bottom: 1px solid #dfdfdf;
    1029928
    … …  
    1032931            padding-left: 100px;
    1033932            text-indent: -100px;
    1034             color: #24831d;
    1035             font-family: $code-font;
    1036933            font-size: 20px;
    1037             .hook-func {
    1038                 color: #888888;
    1039             }
    1040             .arg-type {
    1041                 color: #cd2f23;
    1042                 font-style: italic;
    1043             }
    1044             .arg-name {
    1045                 color: #0f55c8;
    1046             }
    1047             .arg-default {
    1048                 color: #000000;
    1049             }
    1050             a:hover {
    1051                 border-bottom: 1px dotted #21759b;
    1052             }
    1053         }
     934            line-height: 1.6;
     935        }
     936
    1054937        h2 {
    1055938            font-family: $serif-font;
    1056             margin-bottom: .5em;
    1057         }
    1058         .return-type {
    1059             font-style: italic;
    1060         }
    1061         .parameters {
     939            margin-bottom: 0.5em;
     940        }
     941
     942        .toc-header {
     943            margin-top: 0 !important;
     944        }
     945
     946        h1,
     947        .signature-highlight {
     948            color: get-color(green-50);
     949            font-family: $code-font;
     950            font-weight: 400;
     951
     952            .hook-func,
     953            .keyword {
     954                color: get-color(gray-50);
     955            }
     956
     957            .arg-type {
     958                color: get-color(red-50);
     959                font-style: italic;
     960                font-size: 0.9em;
     961            }
     962
     963            .arg-name {
     964                color: get-color(blue-60);
     965            }
     966
     967            .arg-default {
     968                color: $color-black;
     969            }
     970
     971            a {
     972                text-decoration: none;
     973                color: inherit;
     974
     975                &:hover {
     976                    border-bottom: 1px dotted get-color(blue-50);
     977                }
     978            }
     979        }
     980
     981        .return .return-type {
     982            margin-right: 8px;
     983            font-size: 14px;
     984        }
     985
     986        .return-type,
     987        .return .type,
     988        .parameters .type {
     989            color: get-color(red-50);
     990
     991            a {
     992                color: inherit;
     993                text-decoration: none;
     994                border-bottom: 1px dotted get-color(gray-70);
     995
     996                &:hover {
     997                    border-bottom-style: solid;
     998                }
     999            }
     1000        }
     1001
     1002        .parameters,
     1003        .return {
    10621004            p {
    10631005                margin-bottom: 0;
    10641006            }
     1007
     1008            dt code {
     1009                font-weight: 400;
     1010            }
     1011
    10651012            dd {
    1066                 .desc {
    1067                     .type, .required {
    1068                         font-style: italic;
     1013                margin-bottom: 2em;
     1014
     1015                ul {
     1016                    margin-left: 2.5rem;
     1017
     1018                    ul {
     1019                        margin-bottom: 0.5em;
    10691020                    }
    10701021                }
    1071                 .default {
    1072                     font-style: italic;
     1022
     1023                code {
     1024                    background: #efefef;
     1025                    border-radius: 4px;
     1026                    padding: 2px 6px;
    10731027                }
    1074 
    1075                 ul {
    1076                     margin-left: 25px;
    1077                     margin-left: 2.5rem;
    1078                 }
    1079             }
     1028            }
     1029
     1030            dd:last-child {
     1031                margin-bottom: 0;
     1032            }
     1033
    10801034            .param-hash {
    10811035                margin-left: 1.2em;
    10821036                margin-bottom: 0.5em;
     1037
     1038                .desc {
     1039                    margin-left: 1.5em;
     1040                }
     1041
    10831042                > li {
    1084                     margin-top: 1em;
     1043                    margin-top: 1.5em;
     1044
     1045                    > code {
     1046                        background: transparent;
     1047                        padding: unset;
     1048                    }
    10851049                }
     1050
    10861051                li li {
    10871052                    list-style-type: circle;
    10881053                }
     1054
    10891055                .param-hash > li {
    10901056                    list-style-type: disc;
    10911057                }
    10921058            }
    1093         }
     1059
     1060            .desc {
     1061                margin: 1rem 0 0.5rem;
     1062            }
     1063
     1064            .extended-description {
     1065                margin: 1.5em 0 1.5em 1.2em;
     1066
     1067                summary + .description {
     1068                    display: block;
     1069                    margin-top: 1em;
     1070                }
     1071
     1072                summary {
     1073                    color: #21759b;
     1074                    text-decoration: underline;
     1075                }
     1076            }
     1077
     1078            .type,
     1079            .required {
     1080                margin: 0 4px;
     1081                font-weight: 400;
     1082            }
     1083
     1084            .type {
     1085                margin-left: 8px;
     1086                font-size: 14px;
     1087                font-style: 400;
     1088            }
     1089
     1090            .required {
     1091                font-size: 12px;
     1092            }
     1093        }
     1094
    10941095        .learn-more {
    10951096            background-color: #f1f1f1;
    … …  
    10981099            padding: 20px;
    10991100        }
     1101
    11001102        .deprecated,
    11011103        .private-access {
    11021104            margin-top: 30px;
    11031105            padding: 20px;
     1106
    11041107            p {
    1105                 margin-bottom: 0px;
    1106             }
    1107         }
     1108                margin-bottom: 0;
     1109            }
     1110        }
     1111
    11081112        .deprecated {
    11091113            background-color: #fbeaea;
    11101114            border: 1px solid #dc3232;
    11111115        }
     1116
    11121117        .deprecated-method {
    11131118            color: #be2423;
    11141119            font-style: italic;
    11151120        }
     1121
    11161122        .private-access {
    11171123            border: 1px solid #ffb900;
    11181124            background-color: #fff8e5;
    11191125        }
     1126
    11201127        .callout {
    11211128            margin-top: 30px;
    11221129        }
    1123         .toc-jump {
    1124             display: inline-block;
    1125             float: right;
    1126         }
    1127     }
    1128 
    1129     .callout:before {
     1130    }
     1131
     1132    .callout::before {
    11301133        top: 0.4em;
    11311134    }
    11321135
    1133     &.archive, &.search {
    1134         .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
     1136    &.archive,
     1137    &.search {
     1138        .wp-parser-class,
     1139        .wp-parser-function,
     1140        .wp-parser-hook,
     1141        .wp-parser-method {
    11351142            h1 {
    11361143                font-family: $body-font;
    11371144                color: #21759b;
    1138                 font-weight: normal;
    1139             }
     1145                font-weight: 400;
     1146            }
     1147
    11401148            div {
    11411149                &.sourcefile {
    1142                     color: #999999;
     1150                    color: #999;
    11431151                    font-style: italic;
    11441152                }
    … …  
    11481156
    11491157    .single {
    1150         .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
     1158        .wp-parser-class,
     1159        .wp-parser-function,
     1160        .wp-parser-hook,
     1161        .wp-parser-method {
    11511162            border-bottom-style: none;
    11521163        }
    … …  
    11551166    /* = Related
    11561167    ----------------------------------------------- */
     1168
    11571169    .related {
    1158         .show-more, .hide-more {
     1170        .show-more,
     1171        .hide-more {
    11591172            display: none;
    11601173        }
    … …  
    11621175        /* Hide the title and toc links (same as .screen-reader-text)
    11631176           this allows for linking from the toc. */
    1164         h3, .uses .toc-jump, .used-by .toc-jump {
     1177
     1178        h3,
     1179        .uses .toc-jump,
     1180        .used-by .toc-jump {
    11651181            height: 0;
    11661182            margin-bottom: 0;
    … …  
    11691185        }
    11701186
    1171         .used-by, .uses {
     1187        .used-by,
     1188        .uses {
    11721189            overflow-x: auto;
    11731190            clear: right;
    11741191        }
    11751192
    1176         td p  {
     1193        td p {
    11771194            margin-bottom: 0;
    11781195        }
    11791196
    1180         th, td {
     1197        th,
     1198        td {
    11811199            width: 50%;
    11821200        }
    11831201
     1202        .used-by,
     1203        .uses {
     1204            td.related-title span {
     1205                display: block;
     1206                color: #666;
     1207            }
     1208        }
     1209
    11841210        @media (max-width: 43em) {
    1185             .related-desc, span {
     1211            .related-desc,
     1212            span {
    11861213                display: none;
    11871214            }
    11881215        }
    1189     }
    1190 
    1191     .source-content {
    1192         overflow: auto;
    11931216    }
    11941217
    … …  
    11961219        margin-left: 2em;
    11971220        margin-top: 1em;
    1198     }
    1199 
    1200     .source-code-links span {
    1201         border-left: 1px solid #999;
    1202         margin-left: 1em;
    1203         padding-left: 1em;
    1204     }
    1205 
    1206     .source-code-links span:first-child {
    1207         display: none;
    1208         border-left: 0;
    1209         margin-left: 1em;
    1210         padding-left: 0;
     1221
     1222        span {
     1223            border-right: 1px solid #999;
     1224            margin-right: 1em;
     1225            padding-right: 1em;
     1226
     1227            &:last-of-type {
     1228                border-right: none;
     1229            }
     1230        }
    12111231    }
    12121232
    … …  
    12161236    }
    12171237
    1218     .show-complete-source, .less-complete-source {
     1238    .show-complete-source,
     1239    .less-complete-source {
    12191240        display: none;
    12201241    }
    … …  
    12251246            width: 10%;
    12261247        }
     1248
    12271249        .changelog-desc {
    12281250            width: 90%;
    … …  
    12301252    }
    12311253
     1254
    12321255    .loop-pagination {
    1233         text-align: center;
    1234         font-size: 18px;
    1235         margin-bottom: 20px;
     1256        display: flex;
     1257        margin: 3rem 0;
     1258        list-style: none;
     1259        justify-content: center;
     1260        align-items: center;
     1261        gap: 0.75rem;
     1262
     1263        .page-numbers {
     1264            display: inline-block;
     1265            padding: 1rem 1.25rem;
     1266            background: $color-white;
     1267            border: 1px solid get-color(gray-5);
     1268            border-radius: 2px;
     1269            line-height: 1;
     1270            text-decoration: none;
     1271
     1272            &:hover,
     1273            &:active {
     1274                color: $wp4--link-color--hover;
     1275            }
     1276
     1277            &.current {
     1278                border: 1px solid get-color(gray-90);
     1279                background: get-color(gray-90);
     1280                color: $color-white;
     1281            }
     1282
     1283            &.dots {
     1284                border: none;
     1285            }
     1286        }
    12361287    }
    12371288
    … …  
    12411292    }
    12421293
    1243     // User contributed notes
    1244     .single-wp-parser-function, .single-wp-parser-method, .single-wp-parser-hook, .single-wp-parser-class {
    1245 
     1294    /* User contributed notes*/
     1295    .single-wp-parser-function,
     1296    .single-wp-parser-method,
     1297    .single-wp-parser-hook,
     1298    .single-wp-parser-class {
    12461299        .bad-note .comment-content {
    1247             opacity: .6;
     1300            opacity: 0.6;
    12481301        }
    12491302
    … …  
    12551308        .comment-edited {
    12561309            background-color: #fff8e5;
    1257             padding: .2em .5em;
    1258             margin-right: .5em;
     1310            padding: 0.2em 0.5em;
     1311            margin-right: 0.5em;
    12591312            border-radius: 3px;
    12601313            border: 1px solid #ffb900;
    … …  
    12921345        }
    12931346
    1294         // Feedback
     1347        /* Feedback*/
    12951348        .comment-list li.depth-2 {
    12961349            border-top: 1px solid #dfdfdf;
    … …  
    12991352
    13001353            .comment-content {
    1301                 padding: .9em 0;
    1302             }
     1354                padding: 0.9em 0;
     1355            }
     1356
    13031357            .comment-content p {
    13041358                margin-bottom: 0;
    1305                 font-size: .9em;
     1359                font-size: 0.9em;
    13061360            }
    13071361        }
    … …  
    13281382            font-size: 1.8rem;
    13291383            font-weight: 300;
    1330             line-height: 2.2rem;
     1384            line-height: 1.222;
    13311385            margin-bottom: 1em;
    13321386        }
    … …  
    13571411        }
    13581412
    1359         label[for=comment],
     1413        label[for="comment"],
    13601414        .comment-form-comment,
    13611415        .comment-preview {
    … …  
    13641418
    13651419        .js & .comment-form-comment {
    1366             padding: 0 .7em .7em;
     1420            padding: 0 0.7em 0.7em;
    13671421        }
    13681422
    … …  
    13811435            border: 1px solid #eee;
    13821436        }
     1437
    13831438        .comment-meta {
    1384             padding: .5em 1em;
     1439            padding: 0.5em 1em;
    13851440            background-color: #f7f7f7;
    13861441            overflow: auto;
    … …  
    13881443
    13891444        .comment-content {
    1390             margin-left: 60px;
    1391             margin-left: 3.75rem;
    13921445            margin-left: 0;
    13931446            clear: both;
    1394             padding: 2rem 1.5rem .5rem;
     1447            padding: 2rem 1.5rem 0.5rem;
    13951448        }
    13961449
    13971450        .comment-content ol {
    13981451            list-style: decimal inside;
    1399             margin: 0 0 1.5em 0;
    1400             border-top: none;
    14011452            margin: 0 0 1.5em 1.5em;
    14021453            padding: 0;
     1454            border-top: none;
    14031455        }
    14041456
    14051457        .comment-content ul {
    14061458            list-style: square inside;
    1407             margin: 0 0 1.5em 0;
    1408             border-top: none;
    14091459            margin: 0 0 1.5em 1.5em;
    14101460            padding: 0;
     1461            border-top: none;
    14111462        }
    14121463
    … …  
    14511502        }
    14521503
    1453         .comment-form ul, .feedback-form ul {
     1504        .comment-form ul,
     1505        .feedback-form ul {
    14541506            margin-left: 1.5em;
    14551507        }
    … …  
    15081560     *
    15091561     */
     1562
    15101563    #content-area.has-sidebar {
    15111564        float: none;
    15121565        margin: 0 auto;
    1513         width: 60em;
     1566        width: $devhub-wrap-content-width;
    15141567    }
    15151568
    15161569    .has-sidebar {
    1517 
    15181570        main {
    15191571            float: right;
    … …  
    15211573            margin: 0;
    15221574            clear: none;
    1523             padding: 0 12px;
    15241575            padding: 0 1.2rem;
    15251576        }
     1577
    15261578        .widget-area {
    15271579            float: left;
    15281580            overflow: hidden;
    15291581            width: 27%;
    1530             margin-left: -55px;
    15311582            margin: 0;
    15321583            clear: none;
    … …  
    15451596            width: 49%;
    15461597            display: inline-block;
     1598
    15471599            &[rel="prev"] {
    15481600                text-align: left;
    15491601            }
     1602
    15501603            &[rel="next"] {
    15511604                text-align: right;
    … …  
    15611614        margin-right: 10px;
    15621615    }
    1563     .user-note-voting-up .dashicons, .user-note-voting-down .dashicons {
     1616
     1617    .user-note-voting-up .dashicons,
     1618    .user-note-voting-down .dashicons {
    15641619        font-size: 30px;
    15651620        height: 30px;
    … …  
    15671622        color: #000;
    15681623    }
     1624
    15691625    .site-main {
    1570         .user-note-voting-down, .user-note-voting-up {
     1626        .user-note-voting-down,
     1627        .user-note-voting-up {
    15711628            text-decoration: none;
    15721629        }
    15731630    }
     1631
    15741632    .user-note-voting-up {
    15751633        margin-left: -9px;
    … …  
    15841642        margin-right: -2px;
    15851643    }
     1644
    15861645    .user-voted.user-note-voting-up .dashicons {
    1587         color: green;
    1588     }
     1646        color: color(green-50);
     1647    }
     1648
    15891649    .user-voted.user-note-voting-down .dashicons {
    1590         color: red;
    1591     }
     1650        color: color(red-50);
     1651    }
     1652
    15921653    .user-submitted-note .dashicons {
    1593         color: grey;
    1594     }
    1595 
    1596     .syntaxhighlighter {
    1597         /* These are !important due to use of !important in SyntaxHighlighter Evolved plugin. */
    1598         max-width: 100% !important;
    1599         width: inherit !important;
    1600         padding-bottom: 0.5rem !important;
    1601     }
    1602 
    1603     &.archive, &.blog {
     1654        color: color(gray-50);
     1655    }
     1656
     1657    &.archive,
     1658    &.blog {
    16041659        .hentry {
    16051660            padding: 0 0 1.5em 0;
    … …  
    16091664}
    16101665
     1666/** Fix screen-reader-text font size. **/
     1667a.screen-reader-text:focus,
     1668.screen-reader-text:focus {
     1669    font-size: 1.4rem;
     1670}
     1671
    16111672/** Site Header **/
    1612 
    16131673.site-header {
    16141674    background: #0073aa;
    16151675    float: none;
    1616     margin: 0 0 4em;
     1676    margin: 0;
    16171677    padding: 18px 0;
    16181678    width: auto;
    1619     margin: 0;
    1620 }
     1679}
     1680
    16211681.site-branding {
    1622     height: 32px;
    16231682    box-sizing: border-box;
    16241683    margin: 0 auto;
    16251684    max-width: 960px;
    1626     padding: 0 10px;
     1685    padding: 0 24px;
    16271686    position: relative;
    1628 }
     1687
     1688    &.has-actions {
     1689        display: flex;
     1690        justify-content: space-between;
     1691        align-items: center;
     1692
     1693        @media screen and (max-width: 500px) {
     1694            flex-direction: column;
     1695        }
     1696
     1697        .site-title {
     1698
     1699            @media screen and (max-width: 500px) {
     1700                margin-bottom: 2rem;
     1701            }
     1702
     1703            a {
     1704                font-size: 28px;
     1705            }
     1706        }
     1707    }
     1708}
     1709
    16291710.site-title {
    16301711    line-height: 1;
    16311712    margin: 0;
    16321713    padding: 0;
    1633     font-family: 'Open Sans', sans-serif;
     1714    font-family: "Open Sans", sans-serif;
    16341715    display: inline-block;
    16351716    text-align: left;
    1636     color: black;
     1717    color: #000;
    16371718
    16381719    a {
    … …  
    16561737    }
    16571738}
     1739
    16581740.site-header.home {
    1659     padding: 28px 20px;
    1660     padding: 2.8rem 2.0rem;
     1741    padding: 2.8rem 2rem;
    16611742    text-align: center;
    16621743
    … …  
    16681749        max-width: none;
    16691750        font-weight: 300;
    1670         margin: 36px 0 11.25px;
    16711751        margin: 3.6rem 0 1.125rem;
    16721752        text-align: center;
    … …  
    16751755
    16761756        a {
    1677             font-size: 68.6646px;
    16781757            font-size: 6.86646rem;
    16791758
    … …  
    16861765
    16871766    .site-description {
    1688         color: hsla(0,0%,100%,.8);
     1767        color: hsla(0, 0%, 100%, 0.8);
    16891768        font-size: 2.25rem;
    16901769        font-weight: 300;
    … …  
    17151794        display: block;
    17161795        text-decoration: none;
    1717         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
     1796        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    17181797        font-size: 12.8px;
    17191798
    … …  
    17551834    }
    17561835}
     1836
    17571837.main-navigation {
    17581838    clear: both;
    … …  
    17821862    -webkit-appearance: none;
    17831863}
    1784 .toggled .menu-toggle.dashicons:before {
     1864
     1865.toggled .menu-toggle.dashicons::before {
    17851866    content: "\f343";
    17861867}
    … …  
    17901871        display: none;
    17911872    }
     1873
    17921874    .main-navigation {
    17931875        float: right;
    … …  
    18241906
    18251907/** WP editor link button modal **/
    1826 
    18271908#wp-link-wrap {
    18281909    height: 210px !important;
    … …  
    18431924
    18441925/** Handbook **/
    1845 
    18461926aside[id^="handbook"] .widget-title,
    18471927aside[id^="nav_menu"] .widget-title {
    … …  
    18641944    margin-right: 4%;
    18651945}
     1946
    18661947.handbook-header {
    1867     line-height: 2em;
     1948    line-height: 2;
    18681949
    18691950    h1 {
    … …  
    18731954
    18741955.single-handbook {
    1875     font-size: 13px;
    18761956    font-size: 1.3rem;
    18771957
    1878     p, ol, ul {
     1958    p,
     1959    ol,
     1960    ul {
    18791961        line-height: 1.6;
    18801962    }
    18811963
    18821964    .site-main {
    1883         p, ol, ul {
     1965        p,
     1966        ol,
     1967        ul {
    18841968            font-size: 1.05em;
    18851969            color: #555;
    … …  
    19192003
    19202004/** Table of Contents */
    1921 
    1922 .site-main .table-of-contents {
    1923     float: right;
    1924     width: 250px;
    1925     border: 1px solid #eee;
    1926     margin: 0 0 15px 15px;
    1927     z-index: 1;
    1928     position: relative;
    1929     color: #555d66;
    1930     background-color: #fff;
    1931     box-shadow: 0 0 8px rgba(0,0,0,0.1);
    1932     border-radius: 3px;
    1933 
    1934     @media (min-width: 971px) {
    1935         margin: 0 -30px 15px 15px;
    1936     }
    1937 
    1938     h2 {
    1939         margin: 0;
    1940         padding: 0.7rem 1.2rem;
    1941         font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    1942         font-size: 1.3em;
    1943         color: #32373c;
    1944         text-transform: uppercase;
    1945         border-bottom: 1px solid #eee;
    1946         margin-bottom: 0;
     2005.site-main {
     2006    .table-of-contents {
     2007        display: flex;
     2008        flex-direction: column;
     2009        min-width: 230px;
     2010        border: 1px solid #eee;
     2011        margin: 30px 0;
     2012        z-index: 1;
     2013        position: relative;
     2014        color: #555d66;
     2015        background-color: #fff;
     2016        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
     2017        border-radius: 3px;
     2018
     2019        .code-reference & {
     2020            float: right;
     2021            margin-top: 15px;
     2022            margin-left: 15px;
     2023        }
     2024
     2025        h2 {
     2026            margin: 0;
     2027            padding: 0.7rem 1.2rem;
     2028            font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
     2029            font-size: 1.3em;
     2030            color: #32373c;
     2031            text-transform: uppercase;
     2032            border-bottom: 1px solid #eee;
     2033            margin-bottom: 0;
     2034        }
     2035
     2036        .items {
     2037            overflow-y: scroll;
     2038        }
    19472039    }
    19482040}
    … …  
    19642056                color: #0073aa;
    19652057                text-decoration: underline;
    1966             };
     2058            }
    19672059        }
    19682060
    … …  
    19752067}
    19762068
    1977 /* Highlight current heading and adjust scroll position for fixed toolbar */
    1978 .toc-heading:target {
    1979     position: initial;
    1980     padding-top: 50px;
    1981     margin-top: -50px;
    1982 }
    1983 
    1984 /* Remove negative margin because there is no jump link before these headlines */
    1985 .entry-content h2.toc-heading:first-of-type:target,
    1986 .entry-content h3.toc-heading:first-of-type:target,
    1987 h2.toc-heading + h3.toc-heading:target {
    1988     margin-top: 0;
    1989 }
    1990 
    1991 .toc-heading:target:before {
    1992     content: '';
    1993     position: absolute;
    1994     left: -10px;
    1995     top: 50px;
    1996     border-left: 5px solid #0073aa;
    1997     height: 50%;
    1998     height: calc(100% - 50px);
    1999 }
    2000 
    2001 .toc-jump {
     2069.toc-header {
     2070    margin-bottom: 1em;
     2071}
     2072
     2073.toc-heading {
    20022074    position: relative;
    2003     height: 50px;
    2004 }
    2005 
    2006 .toc-jump:after {
    2007     content: '';
    2008     display: table;
    2009     clear: both;
    2010 }
    2011 
    2012 .toc-jump a {
    2013     z-index: 1;
    2014 }
    2015 
    2016 @media (max-width: 480px) {
    2017     .table-of-contents {
    2018         display: none;
    2019     }
     2075}
     2076
     2077.toc-heading a::before {
     2078    color: get-color(gray-30);
     2079}
     2080
     2081.toc-heading:target a::before {
     2082    color: inherit;
     2083}
     2084
     2085.toc-heading a:hover::before,
     2086.toc-heading a:active::before,
     2087.toc-heading a:focus::before {
     2088    color: get-color(blue-50);
    20202089}
    20212090
    20222091/** Menu */
    2023 
    20242092#secondary aside.widget_wporg_handbook_pages,
    20252093#secondary aside.widget_nav_menu {
    … …  
    20322100.widget_nav_menu h1 {
    20332101    font-size: 1.6em;
    2034     font-weight: bold;
     2102    font-weight: 700;
    20352103    margin-bottom: 0.6em;
    20362104}
    … …  
    20422110        outline: 0;
    20432111    }
     2112
    20442113    ul {
    20452114        margin-left: 0;
    … …  
    20672136                background-color: #fafafa;
    20682137                border: 0;
    2069                 border-left: 1px solid rgba(0,0,0,0.05);
     2138                border-left: 1px solid rgba(0, 0, 0, 0.05);
    20702139                border-radius: 0;
    20712140                box-shadow: none;
    … …  
    20812150            &.open > div > .dashicons {
    20822151                transform: rotate(180deg);
    2083                 border-right: 1px solid rgba(0,0,0,0.05);
     2152                border-right: 1px solid rgba(0, 0, 0, 0.05);
    20842153                border-left: none;
    20852154            }
    … …  
    21022171                background-color: #0073aa;
    21032172            }
     2173
    21042174            &.active {
    21052175                color: #555;
    21062176                background-color: #fff;
    2107                 font-weight: bold;
     2177                font-weight: 700;
    21082178            }
    21092179        }
    … …  
    21132183        }
    21142184    }
    2115     & > ul > li {
     2185
     2186    > ul > li {
    21162187        &.open > div > a {
    21172188            &:not(:focus) {
    21182189                color: #0073aa;
    21192190            }
     2191
    21202192            &:hover {
    21212193                color: #fff;
    … …  
    21242196        }
    21252197    }
     2198
    21262199    .current-menu-item ul,
    21272200    .current-menu-ancestor ul {
    21282201        display: block;
    21292202    }
     2203
    21302204    .current-menu-ancestor:not(.open) .expandable .dashicons:not(:focus),
    21312205    .current-menu-item > .expandable .dashicons:not(:focus) {
    … …  
    21332207        color: #0073aa;
    21342208    }
     2209
    21352210    .current-menu-ancestor .expandable .dashicons:hover,
    21362211    .current-menu-item .expandable .dashicons:hover {
    … …  
    21382213        color: #fff !important;
    21392214    }
     2215
    21402216    .children,
    21412217    .sub-menu {
    … …  
    21532229                position: relative;
    21542230            }
     2231
    21552232            ul {
    21562233                margin-left: 12px;
    … …  
    21712248
    21722249    #content {
    2173         max-width: 960px;
     2250        max-width: $single-handbook-content-width;
    21742251        margin: 0 auto;
    21752252        display: flex;
    2176         padding-top: 0;
     2253        padding: 0 #{"max( 20px, 2% )"};
    21772254    }
    21782255
    … …  
    21942271        background: #fff;
    21952272        box-sizing: border-box;
    2196         width: 72%;
    2197 
    2198         @media(max-width: 876px) {
     2273        width: $single-handbook-content-primary-width * 100%;
     2274
     2275        @media (max-width: 876px) {
    21992276            padding: 4rem 20px;
    22002277            width: 100%;
    … …  
    22102287        top: 10px;
    22112288    }
     2289
    22122290    .make-welcome {
    22132291        margin: 0 !important;
    22142292    }
    22152293}
     2294
    22162295/** Handbook **/
    2217 
    22182296.rest-api-handbook-reference {
    2219 
    22202297    .table-of-contents {
    22212298        float: none;
    … …  
    22292306
    22302307            &::after {
    2231                 content: '; ';
     2308                content: "; ";
    22322309            }
    22332310
    22342311            &:last-child::after {
    2235                 content: '';
     2312                content: "";
    22362313            }
    22372314        }
    … …  
    22412318
    22422319/* Menu toggle */
    2243 
    22442320#secondary-toggle {
    22452321    display: none;
    22462322}
     2323
    22472324body.responsive-show {
    22482325    position: fixed;
    … …  
    22532330        overflow-y: scroll;
    22542331        z-index: 500;
    2255 
    2256         .search-section {
    2257             margin-top: 32px;
    2258             width: 100%;
    2259         }
    2260     }
     2332    }
     2333
    22612334    #secondary-toggle {
    22622335        height: 32px;
    … …  
    22642337        width: 100%;
    22652338    }
     2339
    22662340    #primary-modal {
    22672341        display: block;
    22682342    }
     2343
    22692344    #o2-expand-editor {
    22702345        display: none;
    22712346    }
    22722347}
     2348
    22732349@media only screen and (max-width: 782px) {
    22742350    body.responsive-show {
    … …  
    22832359    }
    22842360}
     2361
    22852362@media (max-width: 876px) {
    22862363    #secondary {
    22872364        position: fixed;
    22882365        z-index: 10;
    2289         bottom: 0px;
     2366        bottom: 0;
    22902367        overflow-y: auto;
    2291         transition: all .25s ease;
     2368        transition: all 0.25s ease;
    22922369        top: 32px;
    22932370        left: -100%;
    … …  
    23082385        z-index: 1;
    23092386
    2310         &:before {
    2311             content: '\f333';
     2387        &::before {
     2388            content: "\f333";
    23122389            -webkit-font-smoothing: antialiased;
    2313             font: normal 32px/1 'dashicons';
     2390            font: 400 32px/1 dashicons;
    23142391            position: relative;
    23152392            top: 0;
    23162393            color: #fff;
    23172394        }
     2395
    23182396        strong {
    23192397            display: none;
    23202398        }
    23212399    }
     2400
    23222401    #page {
    23232402        overflow-x: hidden;
    23242403    }
     2404
    23252405    body.responsive-show {
    23262406        overflow-y: visible;
    … …  
    23302410            overflow-x: visible;
    23312411        }
    2332         #secondary-toggle:before {
     2412
     2413        #secondary-toggle::before {
    23332414            color: #0073aa;
    23342415        }
    … …  
    23462427
    23472428@media ( max-width: 59.999999em ) {
    2348 
    23492429    .devhub-wrap {
    23502430        max-width: 100%;
    … …  
    23552435            padding: 0 13px;
    23562436        }
     2437
    23572438        #content-area,
    23582439        .inner-wrap {
    … …  
    23622443        }
    23632444
    2364         &.archive, &.search {
     2445        &.archive,
     2446        &.search {
    23652447            .meta {
    23662448                font-size: 100%;
    … …  
    23732455        }
    23742456    }
    2375 
     2457}
     2458
     2459@media (min-width: 90em) {
     2460    .site-main .table-of-contents {
     2461        position: fixed;
     2462        width: 15vw;
     2463
     2464        .code-reference & {
     2465            margin-left: 0;
     2466            left: calc( #{ $devhub-wrap-content-width } + ( ( 100vw - #{ $devhub-wrap-content-width } ) / 2 ) );
     2467            top: $devhub-wrap-toc-position-top;
     2468            max-height: calc(90vh - #{ $devhub-wrap-toc-position-top });
     2469        }
     2470
     2471        // Pages with sidebar
     2472        .widget-area + & {
     2473            left: calc( #{ $single-handbook-content-width } + ( ( 100vw - #{ $single-handbook-content-width } ) / 2 ) );
     2474            top: $single-handbook-toc-position-top;
     2475            max-height: calc(90vh - #{ $single-handbook-toc-position-top });
     2476        }
     2477    }
     2478}
     2479
     2480@media (min-width: 877px) {
     2481    // Pages which are not code reference and without a sidebar
     2482    .site-main .table-of-contents:not(.code-reference .site-main .table-of-contents):not(.widget-area + .site-main .table-of-contents) {
     2483        position: fixed;
     2484        width: 15vw;
     2485        top: $single-handbook-toc-position-top;
     2486        left: calc(
     2487            #{ $single-handbook-content-width } * #{ $single-handbook-content-primary-width }
     2488            + ( ( 100vw - #{ $single-handbook-content-width } ) / 2 )
     2489            + 15px
     2490        );
     2491        max-height: calc(90vh - #{ $single-handbook-toc-position-top });
     2492    }
    23762493}
    23772494
    23782495@media ( min-width: 43em ) {
    23792496    .devhub-wrap {
    2380         &.archive, &.search {
     2497        &.archive,
     2498        &.search {
    23812499            .meta {
    23822500                float: right;
    … …  
    23902508}
    23912509
     2510// Matches global header breakpoint
     2511@media ( max-width: 889px ) {
     2512    .code-reference .site-main .table-of-contents {
     2513        float: none;
     2514        margin-left: 0;
     2515        width: 100%;
     2516    }
     2517}
     2518
    23922519@media ( max-width: 43em ) {
    2393 
    23942520    #content-area.has-sidebar {
    2395 
    23962521        main {
    23972522            float: right;
    … …  
    23992524            margin: 0 auto;
    24002525            clear: both;
    2401             padding: 0 12px;
    24022526            padding: 0 1.2rem;
    24032527        }
     2528
    24042529        .widget-area {
    24052530            float: none;
    … …  
    24272552            display: block;
    24282553        }
     2554
    24292555        .reference-landing .section .box,
    24302556        .sidebar .box {
    … …  
    24322558            margin-bottom: 1.5em;
    24332559        }
     2560
    24342561        .home-primary-content .entry-content,
    24352562        .reference-landing .section {
    … …  
    24462573
    24472574        .horizontal-list li:first-child a {
    2448             padding: 0 40px;
    24492575            padding: 0 4rem;
    24502576        }
    24512577
    2452         .reference-landing .searchform {
    2453             text-align: center;
    2454         }
    2455 
    2456         .reference-landing .searchform input[type="text"],
    2457         .reference-landing .searchform input[type="submit"] {
    2458             width: 100%;
    2459             margin-right: 0;
    2460             margin-bottom: 1em;
    2461             float: none;
    2462             clear: both;
    2463         }
    2464 
    2465         .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
     2578        .wp-parser-class,
     2579        .wp-parser-function,
     2580        .wp-parser-hook,
     2581        .wp-parser-method {
    24662582            h1 {
    24672583                padding-left: 45px;
    … …  
    24782594@media (max-width: 32em) {
    24792595    .devhub-wrap {
    2480         .table-of-contents {
    2481             float: none;
    2482             margin-left: 0;
    2483             width: 100%;
    2484         }
    2485 
    24862596        section {
    24872597            overflow: inherit;
    … …  
    24952605
    24962606@media (max-width: 22em) {
    2497     ul, ol {
     2607    ul,
     2608    ol {
    24982609        margin-left: 1.2em;
    24992610    }
     2611
    25002612    .devhub-wrap {
    2501         .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
     2613        .wp-parser-class,
     2614        .wp-parser-function,
     2615        .wp-parser-hook,
     2616        .wp-parser-method {
    25022617            h1 {
    25032618                padding-left: 20px;
    2504                 line-height: 2rem;
    25052619                text-indent: -20px;
    2506                 font-size: 16px;
    2507             }
    2508         }
    2509 
    2510         &.single-wp-parser-function, &.single-wp-parser-method, &.single-wp-parser-hook {
     2620                font-size: 1.6rem;
     2621                line-height: 1.25;
     2622            }
     2623        }
     2624
     2625        &.single-wp-parser-function,
     2626        &.single-wp-parser-method,
     2627        &.single-wp-parser-hook {
    25112628            .comment-list {
    25122629                li {
    … …  
    25322649
    25332650.single-command #content {
    2534 
    2535     h2, h3 {
     2651    h2,
     2652    h3 {
    25362653        margin-top: 4rem;
    25372654        margin-bottom: 2.5rem;
    … …  
    25422659        padding: 0;
    25432660        font-size: 3.5rem;
    2544         line-height: 4.5rem;
     2661        line-height: 1.29;
    25452662        margin-top: 3rem;
    25462663        margin-bottom: 1rem;
    25472664        font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
     2665
    25482666        a {
    25492667            color: #000;
     2668
    25502669            span {
    25512670                color: #949494;
    … …  
    25642683    .quick-links {
    25652684        margin-left: 0.5rem;
    2566         color: #ABABAB;
     2685        color: #ababab;
     2686
    25672687        a {
    25682688            text-decoration: underline;
    2569             color: #ABABAB;
     2689            color: #ababab;
     2690
    25702691            &:hover {
    25712692                color: #757575;
    … …  
    25742695    }
    25752696
    2576     .toc-jump {
    2577         float: right;
    2578         font-size: 75%;
    2579         margin-top: 11px;
    2580     }
    2581 
    25822697    table {
    2583         border-collapse:collapse;
     2698        border-collapse: collapse;
    25842699        border: 1px solid #eee;
    2585         padding:0;
    2586         margin:0 0 ms(0);
     2700        padding: 0;
     2701        margin: 0 0 ms(0);
    25872702        font-size: ms(-2);
    2588         width:100%;
     2703        width: 100%;
    25892704
    25902705        thead {
    25912706            background: #eee;
     2707
    25922708            th {
    2593                 font-weight: bold;
     2709                font-weight: 700;
    25942710                padding: 1em;
    25952711            }
    25962712        }
    25972713
    2598         th, td {
     2714        th,
     2715        td {
    25992716            padding: 0.8em 1em;
    2600             margin:0;
    2601             font-weight:normal;
    2602             text-align:left;
    2603             vertical-align:top;
     2717            margin: 0;
     2718            font-weight: 400;
     2719            text-align: left;
     2720            vertical-align: top;
    26042721            border: 1px solid #eee;
    26052722        }
    … …  
    26072724        tbody {
    26082725            tr:nth-child(even) {
    2609                 background:rgba(0, 0, 0, .025);
     2726                background: rgba(0, 0, 0, 0.025);
    26102727            }
    26112728        }
    … …  
    26142731
    26152732.single-command {
    2616     .devhub-wrap *, .devhub-wrap *::before, .devhub-wrap *::after {
     2733    .devhub-wrap *,
     2734    .devhub-wrap *::before,
     2735    .devhub-wrap *::after {
    26172736        -moz-box-sizing: border-box;
    26182737        -webkit-box-sizing: border-box;
    … …  
    26202739    }
    26212740
    2622     .devhub-wrap a.button, .devhub-wrap button, .devhub-wrap input[type="button"], .devhub-wrap input[type="reset"], .devhub-wrap input[type="submit"] {
     2741    .devhub-wrap a.button,
     2742    .devhub-wrap button,
     2743    .devhub-wrap input[type="button"],
     2744    .devhub-wrap input[type="reset"],
     2745    .devhub-wrap input[type="submit"] {
    26232746        border: 1px solid;
    26242747        border-color: #ccc;
    … …  
    26312754        float: none;
    26322755        height: auto;
    2633         padding: .8rem 1.2rem;
    2634         margin: .4rem 0;
     2756        padding: 0.8rem 1.2rem;
     2757        margin: 0.4rem 0;
    26352758        text-decoration: none;
    26362759        -webkit-appearance: none;
    … …  
    26412764        }
    26422765
    2643         &:focus, &:active {
     2766        &:focus,
     2767        &:active {
    26442768            border-color: #bbb;
    26452769            background: #eee;
    … …  
    26542778                color: #dc3232;
    26552779            }
     2780
    26562781            &.green {
    2657                 color: #46B450;
     2782                color: #46b450;
    26582783            }
    26592784        }
    … …  
    26672792            position: relative;
    26682793
    2669             @media(min-width: 571px) {
     2794            @media (min-width: 571px) {
    26702795                &:first-child {
    26712796                    right: -6px;
    26722797                    border-radius: 3px 0 0 3px;
    26732798                }
     2799
    26742800                &:last-child {
    26752801                    border-radius: 0 3px 3px 0;
    … …  
    26812807    .github-tracker {
    26822808        margin-bottom: 2.5rem;
     2809
    26832810        img.icon-github {
    26842811            width: 23px;
    … …  
    26912818}
    26922819
    2693 code[class*="language-"],pre[class*="language-"]{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;background:#2b303b;color:#c0c5ce}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#a7adba}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#a7adba}pre[class*="language-"]{overflow:auto}:not(pre)>code[class*="language-"]{border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#65737e}.token.punctuation{color:#c0c5ce}.token.namespace{opacity:.7}.token.operator,.token.boolean,.token.number{color:#d08770}.token.property{color:#ebcb8b}.token.tag{color:#8fa1b3}.token.string{color:#96b5b4}.token.selector{color:#b48ead}.token.attr-name{color:#d08770}.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#96b5b4}.token.attr-value,.token.keyword,.token.control,.token.directive,.token.unit{color:#a3be8c}.token.statement,.token.regex,.token.atrule{color:#96b5b4}.token.placeholder,.token.variable{color:#8fa1b3}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #eff1f5;text-decoration:none}.token.italic{font-style:italic}.token.important,.token.bold{font-weight:bold}.token.important{color:#bf616a}.token.entity{cursor:help}pre>code.highlight{outline:0.4em solid #bf616a;outline-offset:.4em}
    2694 
    26952820button.code-tab,
    26962821button.code-tab:hover {
    26972822    background: #fff;
    2698     border: none;
    26992823    box-shadow: none;
    27002824    text-shadow: none;
    2701     border: 1px solid #D0DFDA;
     2825    border: 1px solid #d0dfda;
    27022826    border-radius: 30px 0 0 30px;
    27032827    padding: 8px 20px;
    … …  
    27162840
    27172841button.code-tab.is-active {
    2718     background: #00B975;
    2719     border: 1px solid #00B975;
     2842    background: #00b975;
     2843    border: 1px solid #00b975;
    27202844    box-shadow: none;
    27212845    color: #fff;
    … …  
    27292853    display: block;
    27302854}
     2855
     2856.search-wrap {
     2857    .searchform {
     2858        display: flex;
     2859        align-items: center;
     2860        flex-direction: column;
     2861        position: relative;
     2862        border-radius: 2px;
     2863        margin: 3rem auto 0;
     2864
     2865        input[type="search"] {
     2866            flex-grow: 1;
     2867            margin: 0;
     2868            padding: 1rem 45px 1rem 1rem;
     2869            border: 1px solid transparent;
     2870            border-radius: 2px;
     2871            box-shadow: none;
     2872            font-size: 13px;
     2873            width: 100%;
     2874            box-sizing: border-box;
     2875        }
     2876
     2877        .search-field {
     2878            position: relative;
     2879            margin-bottom: 2rem;
     2880            display: flex;
     2881            border: 1px solid #000;
     2882            border-radius: 4px;
     2883            width: 100%;
     2884
     2885            ul {
     2886                left: 50%;
     2887                transform: translate(-50%, 0);
     2888                max-width: calc(100vw - 40px - 48px); /* Match parents padding/margin. */
     2889
     2890                li {
     2891                    padding-right: 20px;
     2892                }
     2893            }
     2894        }
     2895
     2896        .button-search {
     2897            display: flex;
     2898            padding: 0;
     2899            position: absolute;
     2900            cursor: pointer;
     2901            right: 0;
     2902            background: transparent;
     2903            border: 1px solid transparent;
     2904            border-radius: 2px;
     2905            height: 100%;
     2906            width: 40px;
     2907            align-items: center;
     2908            top: 0;
     2909
     2910            &:active {
     2911                background: get-color(gray-5);
     2912            }
     2913
     2914            > svg {
     2915                flex: 1;
     2916            }
     2917        }
     2918
     2919        .search-post-type {
     2920            display: flex;
     2921            align-items: center;
     2922            justify-content: flex-start;
     2923            width: 100%;
     2924            margin: 0 0 2rem;
     2925
     2926            color: #000;
     2927            font-size: 13px;
     2928            flex-wrap: wrap;
     2929
     2930            > span,
     2931            > div {
     2932                position: relative;
     2933                margin: 0.25rem;
     2934            }
     2935
     2936            label {
     2937                padding: 0.5rem 0.5rem 0.5rem 2.5rem;
     2938                border-radius: 2px;
     2939                user-select: none;
     2940            }
     2941
     2942            input {
     2943                position: absolute;
     2944                z-index: 1;
     2945                top: 3px;
     2946                left: 6px;
     2947            }
     2948
     2949            label,
     2950            input {
     2951                cursor: pointer;
     2952            }
     2953        }
     2954
     2955        &.searchform-handbook .search-field {
     2956            border-color: get-color(gray-10);
     2957            border-radius: 0;
     2958        }
     2959
     2960        .widget_search &.searchform-handbook {
     2961            padding-right: 1em;
     2962
     2963            @media (max-width: 876px) {
     2964                padding: 1.5em 1em 0;
     2965            }
     2966        }
     2967    }
     2968
     2969    &.search-wrap-inline .searchform {
     2970        margin: 0;
     2971    }
     2972
     2973    &.search-wrap-inline .search-field {
     2974        margin: 0;
     2975        border: none;
     2976    }
     2977
     2978    &.search-wrap-embedded .search-field {
     2979        margin-bottom: 0;
     2980        max-width: 400px;
     2981        border: none;
     2982    }
     2983
     2984    &.search-wrap-embedded .search-post-type {
     2985        margin-top: 2rem;
     2986        justify-content: space-between;
     2987        color: $color-white;
     2988        max-width: 450px;
     2989
     2990        input:checked + label {
     2991            content: "";
     2992            background: #fff;
     2993            color: #000;
     2994        }
     2995
     2996        @media ( max-width: 688px ) {
     2997            justify-content: center;
     2998
     2999            > span {
     3000                flex-basis: 100%;
     3001                margin-bottom: 1rem;
     3002            }
     3003
     3004            > div {
     3005                position: relative;
     3006                margin: 1rem;
     3007            }
     3008        }
     3009    }
     3010}
     3011
     3012.not-found {
     3013    padding: 4rem 0;
     3014    text-align: center;
     3015}
Note: See TracChangeset for help on using the changeset viewer.