Vulcan/packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss
Anthony Mayer 5674269072 Fixes #572 - Expands search box when focused or not empty.
Also, changed when empty class is removed to avoid text box shrinking and then expanding after it loses focus but has content.
2014-11-30 17:03:30 -08:00

128 lines
No EOL
1.9 KiB
SCSS

.header{
background-color:$highlight-color;
margin-bottom:$grid-margin;
position:relative;
height: 60px;
@include cf;
padding: 0 20px;
z-index: 100;
@include small{
padding: 0 10px;
}
.primary-nav{
float:left;
z-index: 20;
position: relative;
}
.logo{
@extend %vcenter;
position:absolute;
display:block;
text-align:center;
color:white;
@include small{
font-size: 18px;
a{
position: static;
}
}
@include medium-large{
font-size:24px;
}
left: 0px;
right: 0px;
a, a:visited{
color:white;
}
}
.logo-image{
line-height: 1;
a{
display:inline-block;
background: no-repeat center center;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
}
.secondary-nav{
z-index: 20;
position: relative;
float:right;
.submit{
// background:$red;
// display:block;
// padding:0px 10px;
}
}
}
.sign-in{
margin-right: 10px;
}
.nav{
@include cf;
@extend %vcenter;
>li{
line-height: 2;
&:last-child{
margin-right: 0px;
}
>a, >div >a{
color:white;
font-size:15px;
font-weight:normal;
&.intercom em{
&:before{
content:'(';
}
&:after{
content:')';
}
}
}
}
}
.search {
$compressed-width: 120px;
$expanded-width: 200px;
position: relative;
.search-field {
font-size: 14px;
padding: 4px 12px;
line-height: 1.3;
border-radius: 20px;
border: 0px;
width: $expanded-width;
transition: 0.2s all;
-webkit-appearance: textfield;
background: white;
&:focus {
outline: none;
}
}
&.empty {
.search-field {
width: $compressed-width;
background: white(0.1);
&:focus {
background: white;
width: $expanded-width;
}
}
}
}
.has-dropdown .user-menu .dropdown-menu{
left: auto;
right: 10px;
}
.has-dropdown .notifications-menu .dropdown-menu{
left: auto;
right: 10px;
}
.newsletter-dismiss{
line-height: 30px !important;
}