Add cleaner and more performant mobile nav animations, replace multip…

…le vars with $nav-open-from-direction
SLKTH · May 27, 2019 · 130c7bc · 130c7bc
1 parent 576c7b5
commit 130c7bc
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 57 deletions.
diff --git a/css/global.css b/css/global.css
@@ -2913,27 +2913,22 @@ form.search-form .search-submit {
   }
 
   .js.js-nav-active .nav-primary {
-    visibility: visible;
-    height: 100vh;
     overflow: auto;
     top: 0;
-    width: 100vw;
-    top: 0;
   }
 
   .js.js-nav-active .nav-primary .menu-items {
     opacity: 1;
   }
 
   .js .nav-primary {
-    visibility: hidden;
     height: 100vh;
-    width: 100%;
-    clip: auto;
+    width: 100vw;
     position: fixed;
-    right: 0;
-    top: -100%;
-    top: -100%;
+    transition: all 250ms ease-in-out;
+    left: 0;
+    z-index: 5;
+    top: -100vh;
   }
 
   .js .nav-primary .menu-items {
@@ -2942,11 +2937,9 @@ form.search-form .search-submit {
 
   .nav-primary {
     background: #232426;
-    transition: all .55s;
     margin: 0;
     overflow: hidden;
     display: block;
-    width: 100%;
   }
 
   .nav-primary .menu-items {

diff --git a/css/global.min.css b/css/global.min.css
diff --git a/functions.php b/functions.php
@@ -5,7 +5,7 @@
  * @package air-light
  */
 
-define( 'AIR_LIGHT_VERSION', '4.6.5' );
+define( 'AIR_LIGHT_VERSION', '4.6.6' );
 
 /**
  * Requires.

diff --git a/newtheme.sh b/newtheme.sh
@@ -85,7 +85,7 @@ chmod 777 ${PROJECTPATH}/media
 
 echo "${yellow}Generating default README.md...${txtreset}"
 
-newestair="4.6.5"
+newestair="4.6.6"
 newestwordpress="5.0.3"
 newestphp="7.2"
 currentdate=$(LC_TIME=en_US date '+%d %b %Y' |tr ' ' '_');

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "air-light",
-  "version": "4.6.5",
+  "version": "4.6.6",
   "description": "A minimalist WordPress starter theme.",
   "author": "Digitoimisto Dude Oy (moro@dude.fi)",
   "devDependencies": {

diff --git a/readme.txt b/readme.txt
@@ -12,7 +12,7 @@ Tags: one-column, accessibility-ready, translation-ready
 
 Requires at least: 4.0
 Tested up to: 5.1.1
-Stable tag: 4.6.5
+Stable tag: 4.6.6
 License: MIT License
 License URI: https://opensource.org/licenses/MIT
 

diff --git a/sass/navigation/_nav-mobile.scss b/sass/navigation/_nav-mobile.scss
@@ -17,10 +17,7 @@ $hamburger-layer-border-radius: 0;
 $hamburger-hover-opacity: .8;
 $hamburger-hover-transition-duration: .15s;
 $hamburger-hover-transition-timing-function: linear;
-$nav-open-from-right: false;
-$nav-open-from-left: false;
-$nav-open-from-bottom: false;
-$nav-open-from-top: true;
+$nav-open-from-direction: top;
 
 @charset 'utf-8';
 
@@ -54,66 +51,57 @@ $nav-open-from-top: true;
       overflow: hidden;
 
       .nav-primary {
-        visibility: visible;
-        height: 100vh;
         overflow: auto;
-        top: 0;
 
-        .menu-items {
-          opacity: 1;
+        @if $nav-open-from-direction == top {
+          top: 0;
         }
 
-        @if $nav-open-from-right == true {
-          width: 100vw;
+        @if $nav-open-from-direction == right {
           right: 0;
         }
 
-        @if $nav-open-from-left == true {
-          width: 100vw;
-          left: 0;
+        @if $nav-open-from-direction == bottom {
+          bottom: 0;
         }
 
-        @if $nav-open-from-bottom == true {
-          width: 100vw;
-          bottom: 0;
-          top: initial;
+        @if $nav-open-from-direction == left {
+          left: 0;
         }
 
-        @if $nav-open-from-top == true {
-          width: 100vw;
-          top: 0;
+        .menu-items {
+          opacity: 1;
         }
       }
     }
   }
 
   .js .nav-primary {
     // Hide mobile navigation by default while enabling use of animations
-    visibility: hidden;
     height: 100vh;
-    width: 100%;
-    clip: auto;
+    width: 100vw;
     position: fixed;
-    right: 0;
-    top: -100%;
+    transition: all 250ms ease-in-out;
+    left: 0;
+    z-index: 5;
 
-    @if $nav-open-from-right == true {
-      right: -100%;
-      top: 0;
+    @if $nav-open-from-direction == top {
+      top: -100vh;
     }
 
-    @if $nav-open-from-left == true {
-      left: -100%;
+    @if $nav-open-from-direction == right {
+      right: -100vw;
       top: 0;
+      left: auto;
     }
 
-    @if $nav-open-from-bottom == true {
-      bottom: -100%;
-      top: initial;
+    @if $nav-open-from-direction == bottom {
+      bottom: -100vh;
     }
 
-    @if $nav-open-from-top == true {
-      top: -100%;
+    @if $nav-open-from-direction == left {
+      left: -100vw;
+      top: 0;
     }
 
     .menu-items {
@@ -123,11 +111,9 @@ $nav-open-from-top: true;
 
   .nav-primary {
     background: $nav-background-color;
-    transition: all .55s;
     margin: 0;
     overflow: hidden;
     display: block;
-    width: 100%;
 
     .menu-items {
       transition: all .55s;
@@ -136,6 +122,7 @@ $nav-open-from-top: true;
       width: 100%;
       float: none;
       padding: 2rem 0;
+
       // We have color here, so it's okay to remove outline
       outline: none;
 

diff --git a/style.css b/style.css
@@ -4,7 +4,7 @@ Theme URI: https://github.com/digitoimistodude/air-light
 Author: Digitoimisto Dude Oy
 Author URI: https://www.dude.fi
 Description: A minimalist WordPress starter theme.
-Version: 4.6.5
+Version: 4.6.6
 License: MIT License
 License URI: https://github.com/digitoimistodude/air-light/blob/master/LICENSE.md
 Text Domain: air-light
@@ -19,6 +19,6 @@ Tags: one-column, accessibility-ready, translation-ready
 * @link https://github.com/Automattic/_s/commits/master
 *
 * @author Roni Laukkarinen (https://github.com/ronilaukkarinen), Timi Wahalahti (https://github.com/timiwahalahti)
-* @version 08.05.2019
+* @version 27.05.2019
 * @since 28.01.2016
 */