From 9e4afd2c5af4e9e5e9765ba40b5b1d2cde4bd25c Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Thu, 14 Apr 2016 16:22:52 -0400
Subject: [PATCH] Top-bar and off-canvas adjustments

---
 css/app.css                 | 35 +++++++++++++++++++++++------------
 header.php                  |  4 ++--
 parts/top-bar.php           |  7 ++++++-
 scss/_page.header.scss      |  3 ++-
 scss/_right-off-canvas.scss | 35 +++++++++++++++++++++++++----------
 scss/_settings.scss         | 33 ++++++++++++++++++++++++++++++++-
 6 files changed, 90 insertions(+), 27 deletions(-)

diff --git a/css/app.css b/css/app.css
index 9a94b4f..f9960a0 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6336,7 +6336,8 @@ header {
   header ul#second-nav {
     float: left;
     margin-top: 10px;
-    padding-right: 90px;
+    margin-left: 0;
+    padding-right: 30px;
     width: 90%; }
     header ul#second-nav li {
       display: inline;
@@ -7799,27 +7800,37 @@ aside.left-off-canvas-menu ul.open {
 /* End Mobile Menu */
 /* for the mobile menu */
 aside.right-off-canvas-menu {
-  visibility: hidden;
   position: fixed;
-  opacity: 0;
+  transform: translate3d(100%, 0px, 0px);
   transition: all 500ms ease 0s; }
 
 aside.right-off-canvas-menu.glm-move-left {
-  transform: translate3d(0%, 0px, 0px);
-  visibility: visible;
-  opacity: 1;
-  transition: translate3d 500ms ease 0s;
-  transition: visibility 500ms, opacity 0.5s linear; }
+  transform: translate3d(0%, 0px, 0px) !important;
+  transition: translate3d 500ms ease 0s !important, visibility 500ms, opacity 0.5s ease; }
 
 .inner-wrap {
   transform: none !important; }
 
-.move-left #stick-header div.top-right-items {
-  position: absolute;
-  right: 260px; }
+@media (max-width: 1720px) {
+  .move-left #stick-header div.top-right-items {
+    position: absolute;
+    right: 260px;
+    transition: all 500ms ease 0s !important; } }
+
+@media only screen and (max-width: 40em) {
+  .move-left #stick-header div.top-left-items {
+    display: none;
+    transition: all 500ms ease 0s; } }
 
 .move-left .exit-off-canvas {
-  transform: translateX(-250px); }
+  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
+  transform: translateX(-250px);
+  transition: all 500ms ease 0s !important; }
+
+.exit-off-canvas {
+  box-shadow: none;
+  transform: translateX(0px);
+  transition: all 500ms ease 0s !important; }
 
 aside.right-off-canvas-menu li.page_item {
   display: block;
diff --git a/header.php b/header.php
index 8e58746..c745668 100644
--- a/header.php
+++ b/header.php
@@ -14,10 +14,10 @@
             <div id="page-wrapper">
                     <header id="stick-header">
                         <div class="row medium-uncollapse large-collapse">
-                            <div class="small-8 text-left medium-6 large-3 columns">
+                            <div class="top-left-items small-8 text-left medium-6 large-3 columns">
                                 <a href="<?php bloginfo('url');?>"><img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/gaslight-media-logo.png"></a>
                             </div>
-                            <div class="top-right-items small-4 medium-6 large-push-6 large-4 columns">
+                            <div class="top-right-items small-4 medium-6 large-9 columns">
                                 <div class="show-for-large-up">
                                     <ul id="second-nav">
                                         <li class="right"><a href="<?php echo get_page_link('506'); ?>">Bill Pay</a></li>
diff --git a/parts/top-bar.php b/parts/top-bar.php
index 9988cee..8da6b69 100644
--- a/parts/top-bar.php
+++ b/parts/top-bar.php
@@ -4,8 +4,13 @@
         <a class="right-off-canvas-toggle menu-icon" href="#"><span>Menu</span></a>
     </section>
 </nav>
-<nav class="tab-bar show-for-medium-down">
+<nav class="tab-bar show-for-medium">
     <section class="right-small">
         <a class="right-off-canvas-toggle menu-icon" href="#"><span>Menu</span></a>
     </section>
 </nav>
+<nav class="tab-bar show-for-small">
+    <section class="right-small">
+        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
+    </section>
+</nav>
diff --git a/scss/_page.header.scss b/scss/_page.header.scss
index 8e878d7..9389295 100644
--- a/scss/_page.header.scss
+++ b/scss/_page.header.scss
@@ -61,7 +61,8 @@ header {
     ul#second-nav {
         float: left;
         margin-top: 10px;
-        padding-right: 90px;
+        margin-left: 0;
+        padding-right: 30px;
         width: 90%;
         li {
             display: inline;
diff --git a/scss/_right-off-canvas.scss b/scss/_right-off-canvas.scss
index 7f33d5c..fc4a0f3 100644
--- a/scss/_right-off-canvas.scss
+++ b/scss/_right-off-canvas.scss
@@ -1,28 +1,43 @@
 /* for the mobile menu */
 
 aside.right-off-canvas-menu {
-    visibility: hidden;
     position: fixed;
-    opacity: 0;
+    transform:  translate3d(100%, 0px, 0px);
     transition: all 500ms ease 0s;
 }
 aside.right-off-canvas-menu.glm-move-left {
-    transform:  translate3d(0%, 0px, 0px);
-    visibility: visible;
-    opacity: 1;
-    transition: translate3d 500ms ease 0s;
-    transition: visibility 500ms, opacity 0.5s linear;
+    transform:  translate3d(0%, 0px, 0px) !important;
+    transition: translate3d 500ms ease 0s !important, visibility 500ms, opacity 0.5s ease;
 }
 .inner-wrap {
     transform: none !important;
 }
-.move-left #stick-header div.top-right-items {
-    position: absolute;
-    right: 260px;
+@media (max-width:1720px) {
+    .move-left #stick-header div.top-right-items {
+        position: absolute;        
+        right: 260px;
+        transition: all 500ms ease 0s !important;
+    }
+}
+.move-left #stick-header div.top-left-items {
+    @media #{$small-only} {
+        display: none;
+        transition: all 500ms ease 0s;
+    }
 }
 .move-left .exit-off-canvas {
+    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
     transform: translateX(-250px);
+    transition: all 500ms ease 0s !important;
+    
 }
+.exit-off-canvas {
+    
+    box-shadow: none;
+    transform: translateX(0px);
+    transition: all 500ms ease 0s !important;
+}
+
 aside.right-off-canvas-menu li.page_item {
   display: block;
   overflow: hidden;
diff --git a/scss/_settings.scss b/scss/_settings.scss
index 9334b94..0f5cac5 100644
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@@ -1453,7 +1453,38 @@ $small-font-color: scale-color($header-font-color, $lightness: 35%);
 // $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
 
 // Transitions and breakpoint styles
-// $topbar-transition-speed: 300ms;
+ //$topbar-transition-speed: 500ms;
+ @mixin transition($transition...) {
+    -moz-transition:    $transition;
+    -o-transition:      $transition;
+    -webkit-transition: $transition;
+    transition:         $transition;
+}
+@mixin transition-property($property...) {
+    -moz-transition-property:    $property;
+    -o-transition-property:      $property;
+    -webkit-transition-property: $property;
+    transition-property:         $property;
+}
+@mixin transition-duration($duration...) {
+    -moz-transition-property:    $duration;
+    -o-transition-property:      $duration;
+    -webkit-transition-property: $duration;
+    transition-property:         $duration;
+}
+@mixin transition-timing-function($timing...) {
+    -moz-transition-timing-function:    $timing;
+    -o-transition-timing-function:      $timing;
+    -webkit-transition-timing-function: $timing;
+    transition-timing-function:         $timing;
+}
+@mixin transition-delay($delay...) {
+    -moz-transition-delay:    $delay;
+    -o-transition-delay:      $delay;
+    -webkit-transition-delay: $delay;
+    transition-delay:         $delay;
+}
+
 // Using rem-calc for the below breakpoint causes issues with top bar
 // $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
 // $topbar-media-query: $medium-up;
-- 
2.17.1