Permalink
Browse files

feat(navbar): new secondary nav styles for desktop and mobile

  • Loading branch information...
lara-aigmueller committed Jun 27, 2017
1 parent 8c17408 commit 52a93723d89608a962ed2852da9e00a4e3f0bbd0
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<polygon fill="#ffffff" points="403.07822,142.41222 256,289.49042 108.92179,142.41222 63.66695,187.66705 256,380.00009 448.33304,187.66705 "/>
</svg>
View
@@ -101,23 +101,11 @@ $nav-search-to-icon-breakpoint: 560px !default;
margin: 0;
}
.nav.hide-brand .nav__list {
padding-left: 0;
}
.nav__bar.is-active .nav__list {
background-color: $nav-primary-active;
}
.nav__item {
margin: 0;
white-space: nowrap;
}
.nav__item.is-current {
background-color: $nav-primary-active;
}
.nav__link,
.nav__link:visited {
color: $gray-200;
@@ -130,29 +118,74 @@ $nav-search-to-icon-breakpoint: 560px !default;
.nav__link:hover,
.nav__link:focus {
color: #fff;
background-color: $gray-700;
text-decoration: none;
}
/* Primary nav */
.nav__list--primary > .nav__item {
position: relative;
&.is-current {
background-color: $nav-primary-active;
}
&:before {
content: " ";
display: block;
position: absolute;
background-image: url(/assets/images/icons/icons_controls_001_DropDownOpen.svg);
background-size: 1em;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
left: 0;
top: 20px;
transform: translate(0, -50%) rotate(-90deg);
transition: transform 0.3s ease;
}
&.is-current:before {
transform: translate(0, -50%) rotate(0);
}
.nav__link {
padding-left: 40px;
}
}
/* Secondary nav */
.nav__list--secondary > .nav__item {
&.is-current {
background-color: $nav-secondary-active;
}
.nav__link {
padding-left: 70px;
}
}
@media (min-width: $nav-breakpoint) {
.nav__list {
display: flex;
}
.nav__list--primary {
justify-content: flex-start;
align-items: center;
height: $nav-line-height;
padding-left: 8.5rem;
}
.nav__item,
.nav__link {
line-height: 1em;
height: $nav-line-height;
}
.nav__link {
padding: 0.85rem 1.5rem;
}
/* Home item */
.nav__item--home .nav__link {
background-image: url(http://assets.dynatrace.com/global/logos/dynatrace-logo.svg);
background-repeat: no-repeat;
@@ -162,8 +195,42 @@ $nav-search-to-icon-breakpoint: 560px !default;
text-indent: -99999px;
}
.nav__link {
padding: 0.85rem 1.5rem;
/* Primary nav */
.nav__list--primary {
justify-content: flex-start;
align-items: center;
height: $nav-line-height;
padding-left: 8.5rem;
> .nav__item {
position: static;
&:before {
display: none;
}
.nav__link {
padding-left: 1.5rem;
}
> .nav__link:hover {
background-color: $gray-700;
}
}
}
/* Secondary nav */
.nav__list--secondary {
position: absolute;
left: 0;
.nav__item.is-current {
border-bottom: 4px solid $turquoise-400;
background-color: inherit;
}
}
/* pull nav item right */
@@ -181,6 +248,16 @@ $nav-search-to-icon-breakpoint: 560px !default;
}
}
/* nav modifier */
.nav.hide-brand .nav__list {
padding-left: 0;
}
.nav__bar.is-active .nav__list {
background-color: $nav-primary-active;
}
/*
* Nav buttongroup:
* Search, CTA, Menu toggle
@@ -291,11 +368,11 @@ $nav-search-to-icon-breakpoint: 560px !default;
}
.nav__buttongroup .nav__search:hover {
background-color: $gray-640;
background-color: $gray-620;
}
.nav__buttongroup .nav__search:focus {
background-color: $gray-640;
background-color: $gray-620;
outline: none;
box-shadow: none;
}
@@ -304,7 +381,7 @@ $nav-search-to-icon-breakpoint: 560px !default;
position: relative;
margin: 0;
padding: 12px 0 12px 0;
background-color: $gray-700;
background-color: $gray-620;
list-style: none;
line-height: 32px;
max-width: $nav-search-width;
@@ -322,5 +399,5 @@ $nav-search-to-icon-breakpoint: 560px !default;
}
.nav .search__results a:hover {
background-color: $gray-640;
background-color: $gray-600;
}
@@ -0,0 +1,55 @@
<div class="nav hide-brand">
<a class="nav__brand" href="/">
<img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<form action="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
</form>
<a href="#" class="nav__search__icon"></a>
<a class="nav__btn nav__btn--cta" href="https://www.dynatrace.com/trial/">Free trial</a>
<button data-target="#nav-bar-example3" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
</div>
<nav id="nav-bar-example3" class="nav__bar js-nav-toggle">
<ul class="nav__list nav__list--primary">
<li class="nav__item nav__item--home">
<a class="nav__link" href="#">Dynatrace</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Solution & Pricing</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Why Dynatrace</a>
</li>
<li class="nav__item is-current">
<a class="nav__link" href="#">Company</a>
<ul class="nav__list nav__list--secondary">
<li class="nav__item is-current">
<a class="nav__link" href="#">Overview</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Customer stories</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Industry leadership</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Innovation</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Competitive</a>
</li>
</ul>
</li>
<li class="nav__item">
<a class="nav__link" href="#">News & Resources</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Support</a>
</li>
<li class="nav__item nav__item--right">
<a class="nav__link" href="#">Login</a>
</li>
</ul>
</nav>
</div>

0 comments on commit 52a9372

Please sign in to comment.