Added library-ized top nav

mu-box · Mar 22, 2017 · 4e0bfa0 · 4e0bfa0
1 parent 2487859
commit 4e0bfa0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 95 deletions.
diff --git a/app/pages/shared/top-nav.jade b/app/pages/shared/top-nav.jade
@@ -1,4 +1,4 @@
-.top-nav-wrapper(style="height:49px;")
+.top-nav-wrapper()
   input(type="checkbox")
   .hamburg-icon
     .line.top
@@ -7,15 +7,14 @@
   .top-nav
     .logo
       a.icon(href="//nanobox.io")
-        img.shadow-icon(data-src="logo")
+        img.shadow-icon(data-src="blue-logo" scalable="true")
       a.company(href="/") Nanobox
     .menu
       .nav
         .left-items
           .more.what-is-nanobox
             a(href="//nanobox.io/what-is-nanobox")
               .txt What is Nanobox
-              img.shadow-icon(data-src="more-arrow")
             .sub-menu
               .shadow
                 a(href="//nanobox.io/app-development-environment")

diff --git a/app/pages/templates/base.jade b/app/pages/templates/base.jade
@@ -16,6 +16,7 @@ html(lang="en")
 
     // build:css /style.css
     link(href='/css/shared-svg.css' rel='stylesheet' type='text/css')
+    link(href="/bower-libs/front-top-nav/rel/style.css", rel="stylesheet")
     link(href='/css/hexes-svg.css' rel='stylesheet' type='text/css')
     link(href='/css/hexes-frameworks-svg.css' rel='stylesheet' type='text/css')
     link(href='/css/base-svg.css' rel='stylesheet' type='text/css')
@@ -39,6 +40,7 @@ html(lang="en")
       .txt
 
     // build:js /js/libs.js
+    script(src="/bower-libs/front-top-nav/rel/style.js")
     script(src="/bower-libs/jquery/dist/jquery.js")
     script(src="/bower-libs/jade/runtime.js")
     script(src="/bower-libs/shadow-icons/rel/app.js")

diff --git a/app/scss/_top-nav.scss b/app/scss/_top-nav.scss
@@ -1,96 +1,14 @@
-.top-nav-wrapper              {
-  .top-nav                    {display: flex; align-items: center; max-width:996px; margin: 0 auto; padding-top: 15px; justify-content: flex-start; position:relative; // transform: translateZ(0);
-    .logo                     {display:flex; align-items: center; position: relative;
-      .icon                   {position: relative;
-        &:hover:after         {position: absolute; bottom:-15px; content:"Home"; letter-spacing: 0.06em; font-size:13px; text-transform: uppercase; color:#0D69B4; left:-9px; }
+.top-nav-wrapper      {height: 65px;
+  .top-nav            {max-width: 1015px;
+    .logo             {
+      .icon           {width:48px;
+        &:hover:after {position: absolute; bottom:-15px; content:"Home"; letter-spacing: 0.06em; font-size:13px; text-transform: uppercase; color:#0D69B4; left:-6px; }
       }
+      .company        {color:#285875}
     }
-    .company                  {margin-left:25px; margin-top: -6px; text-transform: uppercase; font-weight: $semibold; font-size:21px; color:#94ACBA; letter-spacing: 0.1em;
-      &:after                 {content:"/ Guides /"; color:#94ACBA; font-size:12px; letter-spacing: 0.06em; margin-left:15px; }
-      &:hover                 {color:#0091D5}
-    }
-    .index-items              {display:none;}
-    .menu                     {flex-grow: 2; margin-top: 3px;
-      .nav                    {display:flex;  font-size:12px; letter-spacing: 0.06em; font-weight: $bold; text-transform: uppercase; justify-content: space-between;
-        .left-items,
-        .right-items          {display: flex; align-items: baseline;}
-        a                     {color:#94ACBA; margin-left:32px; display:flex; align-items: center;
-          &:hover             {color:#0091D5;}
-          &.sign-up           {color:#19abf5; border-bottom:solid 3px; padding-bottom: 2px; }
-        }
-
-        // Trigger for submenu
-        .more                 {position: relative;
-          svg                 {margin-left:5px; margin-bottom:-1px;}
-          &:hover             {
-            svg#more-arrow *  {fill:#0091D5; }
-          }
-
-          // Submenu
-          .sub-menu           {position: absolute; visibility: hidden; opacity:0; transition: visibility 0.2s, opacity 0.1s linear; padding-top:10px; z-index: 1000;
-            .shadow           {box-shadow: 0px 3px 12px rgba(#000, 0.15);}
-            a                 {color:#0D69B4; background: white; font-style:italic; font-size:16px; font-weight: $bold; text-transform: none; margin:0; padding:10px 26px 10px 20px; letter-spacing: 0; white-space: nowrap;
-              .icon           {width:25px; text-align: center; margin-right:10px; margin-bottom: -5px;
-                svg           {margin:0 auto;}
-              }
-              &:hover         {color:#002177;
-                svg *         {stroke:#002177; }
-              }
-              &:first-of-type {padding-top:20px;}
-              &:last-of-type  {padding-bottom:22px;}
-            }
-          }
-          &:hover, &:active   {
-            .sub-menu         {visibility: visible; opacity:1; }
-          }
-        }
-      }
-    }
-  }
-  .hamburg-icon, input        {display: none; position: absolute; right:9px; top:10px; }
-  .hamburg-icon               {flex-direction: column; padding:10px; pointer-events: none;
-    .line                     {width:22px; height: 3px; background: #19abf5; margin-bottom: 3px; border-radius: 2px; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.3s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
-      &:first-child           {transform-origin: 0% 0%;}
-      &:last-child            {transform-origin: 0% 100%;}
-    }
-  }
-  input                       {width:35px; height:35px; z-index: 10; background:red; cursor: pointer; display: block; opacity: 0; }
-  // When screen gets narrow
-  @media screen and (max-width:800px )
-                              {
-    .hamburg-icon, input      {display: initial;z-index: 1001;}
-    .hamburg-icon             {display: flex; margin-right:0; transition:all 0.2s; }
-    input                     {user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-touch-callout: none;}
-    .menu                     {opacity:0;}
-    .logo                     {padding-left:15px; }
-    .top-nav                  {align-items: flex-start; background: rgba(white,0); padding-bottom:10px;  z-index: 1000; transition: all 0.3s; }
-    input:checked ~           {
-      .top-nav                {background: rgba(white,0.9); box-shadow:0px 4px 28px rgba(#000, 0.3);
-        .menu                 {opacity:1;
-          .nav                {flex-direction:column; font-size:17px; padding:40px 0 30px;
-            a                 {color:#0777b2; padding:5px 0;
-              &:hover         {color:#00537E}
-            }
-            .left-items,
-            .right-items      {flex-direction:column; }
-            .left-items       {
-              .get-started    {order: -1}
-            }
-            .more             {
-              > svg{display: none; }
-            }
-            // .more > a         {pointer-events: none}
-          }
-        }
-        a.logo                {
-          .company            {display: none; }
-        }
-      }
-      .hamburg-icon           {margin-right:-4px;
-        .line                 {transform: rotate(0deg); opacity:0 ;
-          &:first-child       {transform: rotate(45deg) translate(-3px, -1px); opacity:1; }
-          &:last-child        {transform: rotate(-45deg) translate(-1px, -1px); opacity:1 }
-        }
+    .menu             {
+      .nav            {
+        a             {color:#7b94a2}
       }
     }
   }

diff --git a/bower.json b/bower.json
@@ -14,7 +14,7 @@
     "pubsub-js": "~1.5.0",
     "shadow-icons": "tolmark12/shadow-icons-js",
     "sprint.js": "*",
-    "top-nav": "nanobox-io/top-nav",
+    "front-top-nav": "nanobox-io/front-top-nav",
     "velocity": "~1.2.2"
   },
   "ignore": [