@import "mymixins"; /* placeholder input styles */ .search input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ color: $search-txt; } .search input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: $search-txt; } .search input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color: $search-txt; opacity: 1; } .search input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color: $search-txt; } /**/ #header { padding: 0 10px; font-size: 14px; line-height: 16px; color: $black; position: fixed; width: 100%; top: 0; left: 0; z-index: 5; background:$white; .icon-down-arrow{ font-size: 11px; line-height: 34px; @include vertical-bottom(); margin: 0 0 0 6px; } .search-drop .icon-down-arrow{ line-height: 22px; } .btn-upload .icon-down-arrow{ line-height: 20px; } .menu-holder{ display: table; width: 100%; .col{ display: table-cell; vertical-align: middle; padding: 0 0 0 10px; text-align: left; &.search{ width: 446px; } &.btn-holder{ width: 260px; &.logged-out{ width: 220px; } } } } .main-links{ @include vertical-middle(); &>ul{ font-size: 16px; line-height: 36px; @include list-style(); &>li{ @include vertical-top(); &>a{ color: $black; display: block; padding:12px; &:focus, &:hover{ color:$black; text-decoration: none; position: relative; &:after{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: $blue-color; } } } &.active a{ font-weight: 600; text-decoration: none; position: relative; &:after{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: $blue-color; } } } } } .navbar{ min-height: inherit; margin: 0; background: none; border: none; padding: 0; } .container-fluid{ padding: 0; } .navbar-collapse{ padding: 0; .search{ padding: 0; } @include boxsizing(); } // .search { form.search-form{ border-radius: 4px; } .cbsearchtype{ background: $lt-grey; width: 100%; padding: 0 40px 0 94px; text-align: left; border-radius: 4px; position: relative; &:after{ @include after(); } .btn-default{ height: 34px; padding: 0; font-weight:400; font-size: 14px; line-height: 34px; border: none; background: none; box-shadow: none; color: $black; &.btn-search{ background: $blue-color; color: $white; font-size: 20px; width: 40px; border-radius: 0 4px 4px 0; position: absolute; right: 0; top: 0; } } .search-drop{ width:94px; position: absolute; left: 0; top: 0; color: $black; background: darken($lt-grey,5%); border-radius: 4px 0 0 4px; .btn-default{ padding: 6px; line-height: 20px; width: 100%; .search-type{ @include vertical-middle(); } } } } input[type="text"]{ padding: 3px 10px; height: 34px; color: $search-txt; font-size: 14px; line-height:20px; background: none; box-shadow: none; border: none !important; } } .dropdown-menu{ margin: 0; padding: 0; box-shadow: none; border: none; border-radius: 0 0 4px 4px; overflow: hidden; >li{ >a{ line-height: 24px; color: #404040; border-top: $default-border; i.glyphicon{ color:$orange; } &:hover{ color: $white; background:$blue-color; } } &:first-child >a{ border: none; } } .divider{ margin: 0; } > .active > a, > .active > a:hover, > .active > a:focus{ background:$blue-color; color:$white; } } .right-menu .dropdown-menu, .search-drop .dropdown-menu{ padding: 13px 0 0; } } .search-icon{ font:17px/20px $iconfont; } .navbar-header{ padding: 10px 0; float: none; display: table-cell; vertical-align: middle; width: 200px; } .btn-search-toggle{ width: 30px; height: 30px; font-size: 20px; line-height: 20px; font-weight: 400; padding:5px 4px 9px; color:$search-toggle; &:active, &:focus, &:hover{ color:$search-toggle; } } .logo{ width: 200px; height: 40px; margin: 0; font-size: 0; line-height:0; } .logo a{ display: block; height: 100%; height: 100%; position: relative; color:$white; font-size:0; line-height:0; &:hover{ text-decoration: none; } span{ @include text-replacement(); font-size: 0; line-height: 0; } img{ width: 100%; } } /**/ /**/ .header-holder{ position: relative; display: table; width: 100%; .navbar-collapse{ display: table-cell !important; vertical-align: middle; } } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{ } .navbar-default { .navbar-toggle{ padding: 0; margin: 0 0 0 5px; width: 34px; height: 34px; border: none; background: none; box-shadow: none; &:hover, &:focus{ background: none; box-shadow: none; } span{ display: block; margin: 6px 0 0; height: 4px; border-radius: 2px; background: #000; &:first-child{ margin: 0; } } } .navbar-nav > .open > a.user-area, .navbar-nav > .open > a.user-area:focus, .navbar-nav > .open > a.user-area:hover{ background: none; } .navbar-nav.navbar-right:last-child{ margin: 0; } .right-menu{ margin: 0; font-size: 14px; &.navbar-nav{ > li{ padding: 0 0 0 10px; > a{ padding: 0; color: $black; &.btn-upload{ font-size: 14px; line-height: 22px; font-weight: 600; border: 2px solid $black; border-radius: 4px; padding: 4px 12px; .icon-upload{ @include vertical-top(); line-height: 20px; margin: 0 10px 0 0; } &:hover, &:focus{ color:$white; background: $black; } } &.user-area{ display: block; font-weight: 600; &:focus{ background: none; box-shadow: none; } img{ display: inline-block; vertical-align: middle; margin: 0 10px; width: 36px; height: 36px; border-radius: 50%; } span{ display: inline-block; vertical-align: middle; margin: 0 10px 0 0; } } } } } /**/ .btn-default{ border: none; text-transform: capitalize; background:none; height: 34px; line-height: 34px; font-size: 14px; line-height: 34px; font-weight: 400; padding: 0; border: none; color: $black; box-shadow: none; &:hover, &:focus, &:active, &.active{ background: none; color: $black; } } .upload_link, .navbar-sm-login-links{ .btn-default{ font-size: 14px; line-height: 22px; font-weight: 600; border: 2px solid $white; border-radius: 4px; padding: 4px 6px; &:hover, &:active{ color:$white; } &.btn-newacc{ border-color: $black; &:hover, &:active{ background: $black; } } &.btn-login{ &:hover, &:active{ background: $green; } } } } .open > .dropdown-toggle.btn-default{ background: none; color: $white; } .btn-success:hover{ background:$green; } } } /**/ @media only screen and (max-width: 1259px) { #header{ .main-links > ul > li > a{ padding: 12px 6px; } .menu-holder .col{ text-align: center; &.search{ width: 280px; } &.btn-holder{ width: 180px; &.logged-out{ width: 150px; } } } .btn-upload{ padding: 4px 8px; .icon-upload{ margin: 0; } span, .icon-down-arrow{ display: none; } } } } @media only screen and (max-width: 991px){ .logo{ float: left; } /**/ .header-holder{ display: block; .navbar-header{ display: block; width: 100%; .search{ width: 300px; float: right; } } .navbar-collapse{ display: block !important; } } #header{ .menu-holder{ display: block; } } /**/ .btn-search-toggle{ float: right; } .navbar-collapse.collapse { display: none !important; } .navbar-collapse.collapse.in { display: block !important; } .navbar-header .collapse, .navbar-toggle { display:block !important; } .navbar-header { float:none; } } @media only screen and (max-width: 991px){ } @media only screen and (max-width: 767px) { }