open-nomad/website/source/assets/stylesheets/_header.scss

149 lines
3.3 KiB
SCSS
Executable File

//
// Header
// --------------------------------------------------
#header {
position: relative;
height: 92px;
color: $white;
text-rendering: optimizeLegibility;
margin-bottom: 0;
/* opacity: 0;
@include translate3d(0, -10px, 0); */
transition: all 1s ease;
background-color: $white;
/* &.showit{
opacity: 1;
@include translate3d(0, 0px, 0);
transition: all 1s ease;
} */
// &.navbar-static-top{
// height:70px;
// z-index: 1000;
// }
.navbar-header{
.navbar-toggle{
padding-right: 15px;
margin-top: 26px;
margin-bottom: 14px;
margin-right: 0;
//border: 2px solid $white;
border-radius: 0;
.icon-bar{
border: 1px solid $black;
border-radius: 0;
}
}
}
.navbar-brand {
display: inline-block;
padding: 0;
margin: 16px 10px 0 0 ;
.logo{
display: inline-block;
height: 56px;
padding: 0;
color: $gray-darker;
font-family: $font-family-blanc;
font-size: 28px;
line-height: 56px;
padding-left: 60px;
background: image-url('../images/logo-header.png') 0 0 no-repeat;
@include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", 49px, 56px);
&:hover{
@include transition(all 300ms ease-in);
color: $green-dark;
text-decoration: none;
}
}
}
.main-links.navbar-nav{
margin-top: 36px;
margin-left: 120px;
li > a {
@include v-nav-style();
}
}
.buttons{
ul.navbar-nav{
margin-top: 36px;
li {
padding-left: 12px;
&.download{
background: image-url('../images/icon-download.png') 0 0 no-repeat;
@include img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 18px, 18px);
margin-right: 22px;
background-position: 0 1px;
}
&.github{
background: image-url('../images/icon-github.png') 0 0 no-repeat;
@include img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 19px, 18px);
background-position: 0 1px;
}
>a {
@include v-nav-style();
}
}
}
}
.nav > li > a:hover, .nav > li > a:focus {
background-color: transparent;
color: $black;
@include transition( color 0.3s ease );
}
}
@media (min-width: 992px) {
}
@media (max-width: 992px) {
}
@media (max-width: 992px) {
#header{
.main-links.navbar-nav{
margin-left: 20px;
}
.buttons{
ul.navbar-nav{
li {
&.download{
margin-right: 8px;
}
}
}
}
}
}
@media (max-width: 763px) {
.navbar-static-top {
.nav-white {
background-color:rgba(0,0,0,0.5);
}
}
}
@media (max-width: 320px) {
}