Permalink
Browse files

feat(navbar): added search input to examples

  • Loading branch information...
katrin-freihofner committed Feb 13, 2017
1 parent 1ec62e4 commit 8d2a33d6b1b9a2c1f2fa0214607e1611c520dd1b
View
@@ -8,7 +8,8 @@ $nav-secondary-background: $gray-900;
$nav-height: 2.75rem;
$nav-height-secondary: 1.5rem;
$nav-breakpoint: 760px;
// $nav-breakpoint: 760px;
$nav-breakpoint: 980px;
.nav {
display: block;
@@ -217,7 +218,26 @@ $nav-breakpoint: 760px;
position: absolute;
top: 0;
right: 0;
z-index: 11;
z-index: 12;
}
.nav__buttongroup .nav__search {
display: inline-block;
position: relative;
vertical-align: middle;
background-color: transparent;
border: none;
height: $nav-height;
color: #fff;
width: 200px;
}
.nav__buttongroup .nav__search:hover {
background-color: $gray-700;
}
.nav__buttongroup .nav__search:focus {
background-color: $gray-700;
outline: none;
box-shadow: none;
}
.nav__cta {
@@ -236,9 +256,14 @@ $nav-breakpoint: 760px;
.nav__buttongroup {
margin-top: $nav-height-secondary;
.nav__search {
width: 200px;
}
}
}
/*
* Brand logo
*/
@@ -3,6 +3,7 @@
<img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<input type="search" class="inputfield inputfield--search nav__search" id="i0"/>
<button data-target="#nav-bar-example1" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
</div>
<nav id="nav-bar-example1" class="nav__bar js-nav-toggle">
@@ -3,6 +3,7 @@
<img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<input type="search" class="inputfield inputfield--search nav__search" id="i0"/>
<button data-target="#nav-bar-example2" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
</div>
<nav id="nav-bar-example2" class="nav__bar js-nav-toggle">
@@ -3,6 +3,7 @@
<img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<input type="search" class="inputfield inputfield--search nav__search" id="i0"/>
<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>

0 comments on commit 8d2a33d

Please sign in to comment.