From 4e0bfa01247d445e69ed7d75b63a528649b83f37 Mon Sep 17 00:00:00 2001
From: Mark Parson <mark@delorum.com>
Date: Wed, 22 Mar 2017 11:29:20 -0600
Subject: [PATCH] Added library-ized top nav
---
app/pages/shared/top-nav.jade | 5 +-
app/pages/templates/base.jade | 2 +
app/scss/_top-nav.scss | 100 +++-------------------------------
bower.json | 2 +-
4 files changed, 14 insertions(+), 95 deletions(-)
diff --git a/app/pages/shared/top-nav.jade b/app/pages/shared/top-nav.jade
index 70942b28..45d50152 100644
--- 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,7 +7,7 @@
.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
@@ -15,7 +15,6 @@
.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
index a6cf6c65..38703bab 100644
--- 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
index 5b10eff2..f1eea143 100644
--- 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
index 55bdf762..e9d9e226 100644
--- 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": [