WordPress.org

Make WordPress Core


Ignore:
Timestamp:
12/14/2018 02:32:33 AM (18 months ago)
Author:
pento
Message:

Default Themes: Import Twenty Nineteen from the 5.0 branch.

Merges [43808,43821,43842,43860,43892,43904,43909,43926-43929,43956,43961-43963] from the 5.0 branch to trunk.

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, jorbin, netweb, b-07, khleomix, audrasjb, nielslange, mmaumio, richsalvucci, littlebigthing, dimadin, joyously, anevins, peterwilsoncc, dannycooper, iCaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, grapplerulrich, ocean90, joshfeck, frankew, AbdulWahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, nao, mayukojpn, enodekciw, ketuchetan, atanasangelovdev, poena, sharaz, artisticasad, mukesh27, burhandodhy, crunnells, aprakasa, themeroots, imonly_ik, tlxo, youthkee, brentswisher, smyoon315, mrahmadawais, desideveloper, Kau-Boy, mor10, mikeyarce, dingo_bastard, xkon, twoabove.

Fixes #45424.

Location:
trunk
Files:
1 edited
2 copied

Legend:

Unmodified
Added
Removed
  • trunk

  • trunk/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

    r43842 r44149  
    1616    .main-menu {
    1717
    18         display: inline;
     18        display: inline-block;
    1919        margin: 0;
    2020        padding: 0;
     
    2424            color: $color__link;
    2525            display: inline;
    26 
    27             @include media(tablet) {
    28                 position: relative;
    29             }
     26            position: relative;
    3027
    3128            > a {
     
    4845
    4946                display: inline-block;
     47                position: inherit;
     48
     49                @include media(tablet) {
     50                    position: relative;
     51                }
    5052
    5153                > a {
     
    6264                }
    6365
    64                 .mobile-submenu-expand svg,
    65                 .desktop-submenu-expand svg {
    66                     position: relative;
    67                     top: 0.2rem;
    68                 }
    69 
    70                 &:not(:last-child) {
    71 
    72                     .mobile-submenu-expand,
    73                     .desktop-submenu-expand {
    74                         margin-right: #{0.5 * $size__spacing-unit};
    75                     }
    76                 }
    77             }
    78 
    79             &:last-child > a {
     66                .submenu-expand {
     67
     68                    display: inline-block;
     69                    margin-right: #{0.25 * $size__spacing-unit};
     70
     71                    /* Priority+ Menu */
     72                    &.main-menu-more-toggle {
     73
     74                        position: relative;
     75                        height: 24px;
     76                        line-height: $font__line-height-heading;
     77                        width: 24px;
     78                        padding: 0;
     79                        margin-left: #{0.5 * $size__spacing-unit};
     80
     81                        svg {
     82                            height: 24px;
     83                            width: 24px;
     84                            top: #{-0.125 * $size__spacing-unit};
     85                            vertical-align: text-bottom;
     86                        }
     87                    }
     88
     89                    .wp-customizer-unloading &,
     90                    &.is-empty {
     91                        display: none;
     92                    }
     93
     94                    svg {
     95                        position: relative;
     96                        top: 0.2rem;
     97                    }
     98                }
     99            }
     100
     101            &:last-child > a,
     102            &:last-child.menu-item-has-children .submenu-expand {
    80103                margin-right: 0;
    81104            }
     
    85108    .sub-menu {
    86109
    87         background: $color__link;
     110        background-color: $color__link;
    88111        color: $color__background-body;
    89112        list-style: none;
    90113        padding-left: 0;
    91114
    92         display: none;
    93         float: left;
    94115        position: absolute;
    95116        opacity: 0;
    96         left: -999px;
     117        left: -9999px;
    97118        z-index: 99999;
    98119
    99120        @include media(tablet) {
    100             width: max-content;
    101             max-width: calc(3 * (100vw / 12));
     121            width: auto;
     122            min-width: -moz-max-content;
     123            min-width: -webkit-max-content;
     124            min-width: max-content;
    102125        }
    103126
    104127        > li {
    105128
    106             clear: both;
    107129            display: block;
    108130            float: none;
    109131            position: relative;
    110             word-break: break-word;
    111132
    112133            &.menu-item-has-children {
    113134
    114                 .mobile-submenu-expand,
    115                 .desktop-submenu-expand {
     135                .submenu-expand {
     136                    display: inline-block;
    116137                    position: absolute;
    117138                    width: calc( 24px + #{$size__spacing-unit} );
     
    128149                }
    129150
    130                 &:not(:last-child) {
    131 
    132                     .mobile-submenu-expand,
    133                     .desktop-submenu-expand {
    134                         margin-right: 0;
    135                     }
     151                .submenu-expand {
     152                    margin-right: 0;
    136153                }
    137154
    138155                @include media(tablet) {
     156
    139157                    .menu-item-has-children > a {
    140158
     
    146164            }
    147165
    148             > a:not(.mobile-submenu-expand) {
     166            > a,
     167            > .menu-item-link-return {
     168
    149169                color: $color__background-body;
    150170                display: block;
    151171                line-height: $font__line-height-heading;
    152172                padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit;
     173                white-space: nowrap;
    153174
    154175                &:hover,
     
    162183            }
    163184
     185            > a:empty {
     186                display: none;
     187            }
     188
    164189            &.mobile-parent-nav-menu-item {
     190
    165191                display: none;
    166192                font-size: $font__size-sm;
     
    177203
    178204    /*
     205     * Sub-menu styles
     206     *
    179207     * :focus-within needs its own selector so other similar
    180208     * selectors don’t get ignored if a browser doesn’t recognize it
    181209     */
    182     .main-menu .menu-item-has-children:focus-within > .sub-menu {
     210    .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
     211
    183212        display: block;
    184213        left: 0;
    185214        margin-top: 0;
    186215        opacity: 1;
    187         width: calc( 100vw - #{$size__spacing-unit * 2});
    188 
    189         .sub-menu {
    190 
    191             margin-top: inherit;
    192             position: relative;
    193             padding-left: $size__spacing-unit;
    194 
    195             @include media(tablet) {
    196                 padding-left: 0;
    197                 position: absolute;
    198                 left: 100%;
    199                 width: max-content;
    200                 top: 0;
    201             }
    202         }
    203     }
    204 
    205     .main-menu .menu-item-has-children:hover > .sub-menu,
    206     .main-menu .menu-item-has-children:focus > .sub-menu,
    207     .main-menu .menu-item-has-children .sub-menu:hover,
    208     .main-menu .menu-item-has-children .sub-menu:focus {
    209         display: table;
    210         margin-top: 0;
    211         opacity: 1;
     216        width: auto;
     217        min-width: 100%;
     218
    212219
    213220        /* Non-mobile position */
    214221        @include media(tablet) {
     222            display: block;
     223            margin-top: 0;
     224            opacity: 1;
    215225            position: absolute;
    216226            left: 0;
     
    219229            bottom: auto;
    220230            height: auto;
    221             width: max-content;
     231            min-width: -moz-max-content;
     232            min-width: -webkit-max-content;
     233            min-width: max-content;
    222234            transform: none;
    223             animation: fade_in 0.1s forwards;
     235        }
     236
     237        &.hidden-links {
     238            left: 0;
     239            width: 100%;
     240            display: table;
     241            position: absolute;
     242
     243            @include media(tablet) {
     244                right: 0;
     245                left: auto;
     246                display: block;
     247                width: max-content;
     248            }
     249        }
     250
     251        .submenu-expand {
     252            display: none;
    224253        }
    225254
    226255        .sub-menu {
    227 
     256            display: block;
     257            margin-top: inherit;
     258            position: relative;
     259            width: 100%;
     260            left: 0;
     261            opacity: 1;
     262
     263            /* Non-mobile position */
    228264            @include media(tablet) {
    229                 margin-top: inherit;
    230                 padding-left: 0;
    231                 position: absolute;
    232                 left: 100%;
    233                 top: 0;
    234             }
    235         }
    236     }
    237 
    238     .main-menu .menu-item-has-children.focus .sub-menu.expanded-true {
    239 
    240         display: table;
     265                float: none;
     266                max-width: 100%;
     267            }
     268        }
     269
     270        /* Nested sub-menu dashes */
     271        .sub-menu {
     272            counter-reset: submenu;
     273        }
     274
     275        .sub-menu > li > a::before {
     276            font-family: $font__body;
     277            font-weight: normal;
     278            content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
     279            counter-increment: submenu
     280        }
     281    }
     282
     283    .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
     284    .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
     285    .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu {
     286
     287        display: block;
     288        left: 0;
    241289        margin-top: 0;
    242290        opacity: 1;
    243         padding-left: 0;
    244 
    245         /* Mobile position */
    246         left: 0;
    247         top: 0;
    248         right: 0;
    249         bottom: 0;
    250         position: fixed;
    251         z-index: 100000; /* Make sure appears above mobile admin bar */
    252         width: 100%;
    253         height:  100%;
    254         transform: translateX(+100%);
    255         animation: slide_in_right 0.3s forwards;
    256 
    257         > .mobile-parent-nav-menu-item {
    258             display: inline-block;
    259         }
    260     }
    261 
    262     /* Only show one submenu expand button at a time (desktop vs mobile) */
    263     .desktop-submenu-expand {
    264         display: none;
    265 
     291        width: auto;
     292        min-width: 100%;
     293
     294
     295        /* Non-mobile position */
    266296        @include media(tablet) {
    267             display: inline-block;
    268         }
    269     }
    270 
    271     .mobile-submenu-expand {
    272         display: inline-block;
    273 
    274         @include media(tablet) {
     297            display: block;
     298            float: none;
     299            margin-top: 0;
     300            opacity: 1;
     301            position: absolute;
     302            left: 0;
     303            right: auto;
     304            top: auto;
     305            bottom: auto;
     306            height: auto;
     307            min-width: -moz-max-content;
     308            min-width: -webkit-max-content;
     309            min-width: max-content;
     310            transform: none;
     311        }
     312
     313        &.hidden-links {
     314            left: 0;
     315            width: 100%;
     316            display: table;
     317            position: absolute;
     318
     319            @include media(tablet) {
     320                right: 0;
     321                left: auto;
     322                display: table;
     323                width: max-content;
     324            }
     325        }
     326
     327        .submenu-expand {
    275328            display: none;
    276329        }
     330
     331        .sub-menu {
     332            display: block;
     333            margin-top: inherit;
     334            position: relative;
     335            width: 100%;
     336            left: 0;
     337            opacity: 1;
     338
     339            /* Non-mobile position */
     340            @include media(tablet) {
     341                float: none;
     342                max-width: 100%;
     343            }
     344        }
     345
     346        /* Nested sub-menu dashes */
     347        .sub-menu {
     348            counter-reset: submenu;
     349        }
     350
     351        .sub-menu > li > a::before {
     352            font-family: $font__body;
     353            font-weight: normal;
     354            content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
     355            counter-increment: submenu
     356        }
     357    }
     358
     359    /**
     360     * Fade-in animation for top-level submenus
     361     */
     362    .main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu {
     363        animation: fade_in 0.1s forwards;
     364    }
     365
     366    /**
     367     * Off-canvas touch device styles
     368     */
     369    .main-menu .menu-item-has-children.off-canvas .sub-menu {
     370
     371        .submenu-expand .svg-icon {
     372            transform: rotate(270deg);
     373        }
     374
     375        .sub-menu {
     376            opacity: 0;
     377            position: absolute;
     378            z-index: 0;
     379            transform: translateX(-100%);
     380        }
     381
     382        li:hover,
     383        li:focus,
     384        li > a:hover,
     385        li > a:focus {
     386            background-color: transparent;
     387        }
     388
     389        > li > a,
     390        > li > .menu-item-link-return {
     391            white-space: inherit;
     392        }
     393
     394        &.expanded-true {
     395
     396            display: table;
     397            margin-top: 0;
     398            opacity: 1;
     399            padding-left: 0;
     400
     401            /* Mobile position */
     402            left: 0;
     403            top: 0;
     404            right: 0;
     405            bottom: 0;
     406            position: fixed;
     407            z-index: 100000; /* Make sure appears above mobile admin bar */
     408            width: 100vw;
     409            height:  100vh;
     410            max-width: 100vw;
     411            transform: translateX(+100%);
     412            animation: slide_in_right 0.3s forwards;
     413
     414            > .mobile-parent-nav-menu-item {
     415                display: block;
     416            }
     417
     418            /* Prevent menu from being blocked by admin bar */
     419            .admin-bar & {
     420                top: 46px;
     421                height: calc( 100vh - 46px );
     422
     423                .sub-menu.expanded-true {
     424                    top: 0;
     425                }
     426
     427                /* WP core breakpoint */
     428                @media only screen and ( min-width: 782px ) {
     429                    top: 32px;
     430                    height: calc( 100vh - 32px );
     431
     432                    .sub-menu.expanded-true {
     433                        top: 0;
     434                    }
     435                }
     436            }
     437        }
     438    }
     439
     440    // Hide duplicate menu-more-link when re-loading a menu in the customizer
     441    .main-menu-more {
     442        &:nth-child(n+3) {
     443            display: none;
     444        }
    277445    }
    278446
    279447}
    280448
    281 /* Menu Animation */
     449/* Menu animation */
    282450
    283451@keyframes slide_in_right {
Note: See TracChangeset for help on using the changeset viewer.