Changeset 44149 for trunk/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

Timestamp:

12/14/2018 02:32:33 AM (6 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:

• . (modified) (1 prop)
• src/wp-content/themes/twentynineteen (copied) (copied from branches/5.0/src/wp-content/themes/twentynineteen)
• src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss (copied) (copied from branches/5.0/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss) (10 diffs)

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

@@ -16 +16 @@
     .main-menu {
 
-        display: inline;
+        display: inline-block;
         margin: 0;
         padding: 0;
@@ -24 +24 @@
             color: $color__link;
             display: inline;
-
-            @include media(tablet) {
-                position: relative;
-            }
+            position: relative;
 
             > a {
@@ -48 +45 @@
 
                 display: inline-block;
+                position: inherit;
+
+                @include media(tablet) {
+                    position: relative;
+                }
 
                 > a {
@@ -62 +64 @@
                 }
 
-                .mobile-submenu-expand svg,
-                .desktop-submenu-expand svg {
-                    position: relative;
-                    top: 0.2rem;
-                }
-
-                &:not(:last-child) {
-
-                    .mobile-submenu-expand,
-                    .desktop-submenu-expand {
-                        margin-right: #{0.5 * $size__spacing-unit};
-                    }
-                }
-            }
-
-            &:last-child > a {
+                .submenu-expand {
+
+                    display: inline-block;
+                    margin-right: #{0.25 * $size__spacing-unit};
+
+                    /* Priority+ Menu */
+                    &.main-menu-more-toggle {
+
+                        position: relative;
+                        height: 24px;
+                        line-height: $font__line-height-heading;
+                        width: 24px;
+                        padding: 0;
+                        margin-left: #{0.5 * $size__spacing-unit};
+
+                        svg {
+                            height: 24px;
+                            width: 24px;
+                            top: #{-0.125 * $size__spacing-unit};
+                            vertical-align: text-bottom;
+                        }
+                    }
+
+                    .wp-customizer-unloading &,
+                    &.is-empty {
+                        display: none;
+                    }
+
+                    svg {
+                        position: relative;
+                        top: 0.2rem;
+                    }
+                }
+            }
+
+            &:last-child > a,
+            &:last-child.menu-item-has-children .submenu-expand {
                 margin-right: 0;
             }
@@ -85 +108 @@
     .sub-menu {
 
-        background: $color__link;
+        background-color: $color__link;
         color: $color__background-body;
         list-style: none;
         padding-left: 0;
 
-        display: none;
-        float: left;
         position: absolute;
         opacity: 0;
-        left: -999px;
+        left: -9999px;
         z-index: 99999;
 
         @include media(tablet) {
-            width: max-content;
-            max-width: calc(3 * (100vw / 12));
+            width: auto;
+            min-width: -moz-max-content;
+            min-width: -webkit-max-content;
+            min-width: max-content;
         }
 
         > li {
 
-            clear: both;
             display: block;
             float: none;
             position: relative;
-            word-break: break-word;
 
             &.menu-item-has-children {
 
-                .mobile-submenu-expand,
-                .desktop-submenu-expand {
+                .submenu-expand {
+                    display: inline-block;
                     position: absolute;
                     width: calc( 24px + #{$size__spacing-unit} );
@@ -128 +149 @@
                 }
 
-                &:not(:last-child) {
-
-                    .mobile-submenu-expand,
-                    .desktop-submenu-expand {
-                        margin-right: 0;
-                    }
+                .submenu-expand {
+                    margin-right: 0;
                 }
 
                 @include media(tablet) {
+
                     .menu-item-has-children > a {
 
@@ -146 +164 @@
             }
 
-            > a:not(.mobile-submenu-expand) {
+            > a,
+            > .menu-item-link-return {
+
                 color: $color__background-body;
                 display: block;
                 line-height: $font__line-height-heading;
                 padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit;
+                white-space: nowrap;
 
                 &:hover,
@@ -162 +183 @@
             }
 
+            > a:empty {
+                display: none;
+            }
+
             &.mobile-parent-nav-menu-item {
+
                 display: none;
                 font-size: $font__size-sm;
@@ -177 +203 @@
 
     /*
+     * Sub-menu styles
+     *
      * :focus-within needs its own selector so other similar
      * selectors don’t get ignored if a browser doesn’t recognize it
      */
-    .main-menu .menu-item-has-children:focus-within > .sub-menu {
+    .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
+
         display: block;
         left: 0;
         margin-top: 0;
         opacity: 1;
-        width: calc( 100vw - #{$size__spacing-unit * 2});
-
-        .sub-menu {
-
-            margin-top: inherit;
-            position: relative;
-            padding-left: $size__spacing-unit;
-
-            @include media(tablet) {
-                padding-left: 0;
-                position: absolute;
-                left: 100%;
-                width: max-content;
-                top: 0;
-            }
-        }
-    }
-
-    .main-menu .menu-item-has-children:hover > .sub-menu,
-    .main-menu .menu-item-has-children:focus > .sub-menu,
-    .main-menu .menu-item-has-children .sub-menu:hover,
-    .main-menu .menu-item-has-children .sub-menu:focus {
-        display: table;
-        margin-top: 0;
-        opacity: 1;
+        width: auto;
+        min-width: 100%;
+
 
         /* Non-mobile position */
         @include media(tablet) {
+            display: block;
+            margin-top: 0;
+            opacity: 1;
             position: absolute;
             left: 0;
@@ -219 +229 @@
             bottom: auto;
             height: auto;
-            width: max-content;
+            min-width: -moz-max-content;
+            min-width: -webkit-max-content;
+            min-width: max-content;
             transform: none;
-            animation: fade_in 0.1s forwards;
+        }
+
+        &.hidden-links {
+            left: 0;
+            width: 100%;
+            display: table;
+            position: absolute;
+
+            @include media(tablet) {
+                right: 0;
+                left: auto;
+                display: block;
+                width: max-content;
+            }
+        }
+
+        .submenu-expand {
+            display: none;
         }
 
         .sub-menu {
-
+            display: block;
+            margin-top: inherit;
+            position: relative;
+            width: 100%;
+            left: 0;
+            opacity: 1;
+
+            /* Non-mobile position */
             @include media(tablet) {
-                margin-top: inherit;
-                padding-left: 0;
-                position: absolute;
-                left: 100%;
-                top: 0;
-            }
-        }
-    }
-
-    .main-menu .menu-item-has-children.focus .sub-menu.expanded-true {
-
-        display: table;
+                float: none;
+                max-width: 100%;
+            }
+        }
+
+        /* Nested sub-menu dashes */
+        .sub-menu {
+            counter-reset: submenu;
+        }
+
+        .sub-menu > li > a::before {
+            font-family: $font__body;
+            font-weight: normal;
+            content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
+            counter-increment: submenu
+        }
+    }
+
+    .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
+    .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
+    .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu {
+
+        display: block;
+        left: 0;
         margin-top: 0;
         opacity: 1;
-        padding-left: 0;
-
-        /* Mobile position */
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        position: fixed;
-        z-index: 100000; /* Make sure appears above mobile admin bar */
-        width: 100%;
-        height:  100%;
-        transform: translateX(+100%);
-        animation: slide_in_right 0.3s forwards;
-
-        > .mobile-parent-nav-menu-item {
-            display: inline-block;
-        }
-    }
-
-    /* Only show one submenu expand button at a time (desktop vs mobile) */
-    .desktop-submenu-expand {
-        display: none;
-
+        width: auto;
+        min-width: 100%;
+
+
+        /* Non-mobile position */
         @include media(tablet) {
-            display: inline-block;
-        }
-    }
-
-    .mobile-submenu-expand {
-        display: inline-block;
-
-        @include media(tablet) {
+            display: block;
+            float: none;
+            margin-top: 0;
+            opacity: 1;
+            position: absolute;
+            left: 0;
+            right: auto;
+            top: auto;
+            bottom: auto;
+            height: auto;
+            min-width: -moz-max-content;
+            min-width: -webkit-max-content;
+            min-width: max-content;
+            transform: none;
+        }
+
+        &.hidden-links {
+            left: 0;
+            width: 100%;
+            display: table;
+            position: absolute;
+
+            @include media(tablet) {
+                right: 0;
+                left: auto;
+                display: table;
+                width: max-content;
+            }
+        }
+
+        .submenu-expand {
             display: none;
         }
+
+        .sub-menu {
+            display: block;
+            margin-top: inherit;
+            position: relative;
+            width: 100%;
+            left: 0;
+            opacity: 1;
+
+            /* Non-mobile position */
+            @include media(tablet) {
+                float: none;
+                max-width: 100%;
+            }
+        }
+
+        /* Nested sub-menu dashes */
+        .sub-menu {
+            counter-reset: submenu;
+        }
+
+        .sub-menu > li > a::before {
+            font-family: $font__body;
+            font-weight: normal;
+            content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
+            counter-increment: submenu
+        }
+    }
+
+    /**
+     * Fade-in animation for top-level submenus
+     */
+    .main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu {
+        animation: fade_in 0.1s forwards;
+    }
+
+    /**
+     * Off-canvas touch device styles
+     */
+    .main-menu .menu-item-has-children.off-canvas .sub-menu {
+
+        .submenu-expand .svg-icon {
+            transform: rotate(270deg);
+        }
+
+        .sub-menu {
+            opacity: 0;
+            position: absolute;
+            z-index: 0;
+            transform: translateX(-100%);
+        }
+
+        li:hover,
+        li:focus,
+        li > a:hover,
+        li > a:focus {
+            background-color: transparent;
+        }
+
+        > li > a,
+        > li > .menu-item-link-return {
+            white-space: inherit;
+        }
+
+        &.expanded-true {
+
+            display: table;
+            margin-top: 0;
+            opacity: 1;
+            padding-left: 0;
+
+            /* Mobile position */
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            position: fixed;
+            z-index: 100000; /* Make sure appears above mobile admin bar */
+            width: 100vw;
+            height:  100vh;
+            max-width: 100vw;
+            transform: translateX(+100%);
+            animation: slide_in_right 0.3s forwards;
+
+            > .mobile-parent-nav-menu-item {
+                display: block;
+            }
+
+            /* Prevent menu from being blocked by admin bar */
+            .admin-bar & {
+                top: 46px;
+                height: calc( 100vh - 46px );
+
+                .sub-menu.expanded-true {
+                    top: 0;
+                }
+
+                /* WP core breakpoint */
+                @media only screen and ( min-width: 782px ) {
+                    top: 32px;
+                    height: calc( 100vh - 32px );
+
+                    .sub-menu.expanded-true {
+                        top: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    // Hide duplicate menu-more-link when re-loading a menu in the customizer
+    .main-menu-more {
+        &:nth-child(n+3) {
+            display: none;
+        }
     }
 
 }
 
-/* Menu Animation */
+/* Menu animation */
 
 @keyframes slide_in_right {