WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
12/14/2018 02:32:33 AM (8 years 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.