//Navbar links colours, font and fadeinout animations.
// Media Queries .dropdown-menu {
z-index: 25000 !important;
} .navbar-inverse .navbar-brand{
color: $navbar-text-color; line-height: $navbar-height; padding-left:15px;
} .navbar-inverse .navbar-brand:hover{
color: $brand-primary;
}
nav#main-navigation {
height: $navbar-height;
}
.mobile-link-inactive{
pointer-events: none; cursor: default;
}
tabbed-nav-bar .tabbed-container-fluid {
background-color: #fff;
}
div#tabbed-nav-bar-collapse {
padding: 0;
} @media screen and (max-width: $screen-lg) and (min-width: 0px){
.sticky-nav#tabbed-nav-bar button.navbar-toggle { margin-right: -5px; }
} tabbed-nav-bar {
margin-top: -20px;
}
div#tabbed-nav-bar.non-sticky-nav > .container {
padding-left: 0px; padding-right: 0px;
}
tabbed-nav-bar .navbar-header {
margin-left: 0px; margin-right: 0px;
}
@media (min-width: $screen-lg) {
#navbar-collapse { padding-top: 0px; padding-right: 38px; margin-right: -40px; margin-left: -15px; } ul.dropdown-menu { margin-top: -1px !important; } #navbar-collapse { width: 80%; float: right; } .navbar-right .dropdown-menu { right: auto; left: 0; }
}
@media (min-width: $screen-sm) {
.navbar-right { float: right !important; margin-right: 0px; }
}
nav#main-navigation.nav-light.navbar-inverse .navbar-collapse{
background-color: transparent;
}
nav#main-navigation.nav-light navbar-buttons>li>a {
color: #fff;
}
@media (max-width: $screen-sm){
.sticky-nav#tabbed-nav-bar { top: 20px; } div#tabbed-nav-bar.sticky-nav li.divider { border-top: 2px solid #272727; } // Style for Home Page Nav - Transparent nav.nav-light > div#navbar-collapse { background-color: $navbar-inverse-bg; } nav.nav-light div#navbar-collapse {background-color: $navbar-inverse-bg;} nav.nav-light #navbar-buttons>li>a { color: $navbar-text-color; } div#tabbed-nav-bar.sticky-nav > .container { padding-left: 0px; padding-right: 0px; } #tabbed-nav-bar.sticky-nav a#sub-navigation-header { padding-left: 5px; } nav#main-navigation.nav-light.navbar-inverse .navbar-collapse{ background-color: $navbar-inverse-bg; } nav#main-navigation.nav-light #navbar-buttons>li>a { color: $navbar-text-color; }
}
@media screen and (max-width: $screen-lg) and (min-width: 0px) {
button.navbar-toggle { margin-right: 10px; }
}
// Nav Bar Toggle main-navigation .navbar-toggle {
margin-top: ($navbar-height - 18px) / 2; position: static; padding:0px;
} tabbed-nav-bar .navbar-toggle{
color:$brand-primary !important;
} button.btn.btn-default.dropdown-toggle {
color: $navbar-text-color;
} nav{
letter-spacing: 1px;
} nav ul.dropdown-menu {
min-width: 260px;
} nav li a {
font-size: 16px;
} nav .dropdown-menu li a {
padding: 10px 20px; font-size: 14px;
} nav .dropdown-menu li a:hover{
transition: color .5s ease; -moz-transition: color .5s ease; -webkit-transition: color .5s ease;
} nav li a:hover{
transition: color .5s ease; -moz-transition: color .5s ease; -webkit-transition: color .5s ease;
} // Dark and Light Nav Bar nav.nav-light navbar-buttons > li > a {
color:#fff;
} nav.nav-dark navbar-buttons > li > a {
color:#000;
} nav.nav-light#main-navigation navbar_svg .cls-2 {
fill: #fff;
} nav.nav-light {
background: transparent;
} nav.nav-dark {
background: transparent;
} nav.nav-light button.navbar-toggle .icon-bar {
background-color:#fff !important;
} nav.nav-dark button.navbar-toggle .icon-bar {
background-color:#fff !important;
} // Nav Bar SVG Style svg#navbar_svg {
height: 66px; padding-top: 5px; padding-bottom: 5px;
} nav.nav-light .cls-2 {
fill: #666;
} nav.nav-light .cls-2 {
fill: #fff;
} nav.nav-dark .cls-2 {
fill: #000;
} // Sub Menu for Boostrap NavBar .dropdown-submenu {
position:relative;
} .dropdown-submenu>.dropdown-menu {
top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px;
} .dropdown-submenu>a:after {
display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#cccccc; margin-top:5px; margin-right:-10px;
} .dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
} .dropdown-submenu.pull-left {
float:none;}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
} .dropdown-submenu.pull-left {
float:none;
} .dropdown-submenu.pull-left>.dropdown-menu {
left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px;
}
.dropdown-submenu > ul.dropdown-menu > li > a {
color: $navbar-text-color;
} .dropdown-submenu > ul.dropdown-menu > li > a:hover {
color: $brand-primary; text-decoration: none; transition: 500ms all ease;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px;
}
.dropdown-submenu > ul.dropdown-menu > li > a {
color: $navbar-text-color;
} .dropdown-submenu > ul.dropdown-menu > li > a:hover {
color: $brand-primary; text-decoration: none; transition: 500ms all ease;
}
.dropdown-submenu > ul.dropdown-menu {
margin-left: -1px;
}
ul#navbar-buttons > li > ul.dropdown-menu {
top: 67px;
}
// Tabbed nav bar css
tabbed-nav-bar .nav-tabs > li > a {
color: black;
}
ul#tabbed_nav > li.active > a:after {
height: 1px; background-color: #fff;
}
ul#tabbed_nav > li.active > a {
border-bottom: none;
}
ul#tabbed_nav > li > a {
border-bottom: 1px solid #eee; border-right: 1px solid #eee; font-size: 13px;
}
div#tabbed_nav_content {
margin-top:0; padding: 10px; border-right: 1px solid #eee; border-left: 1px solid #eee; border-bottom:1px solid #eee; margin-bottom: 20px;
}
div#tabbed_nav_content > div.tab-pane {
margin-top:0; padding: 10px
}
ul#tabbed_nav {
border: 1px solid #eee; margin-bottom:0 !important;
}
// Navbar Brand .navbar-brand {
@media (min-width: $screen-md-min){ padding-top: 0px; padding-bottom: 0px; padding-left: 15px; } @media (max-width: $screen-md-min){ padding-top: 0px; padding-bottom: 0px; padding-left: 5px; }
}
brand-image {
height:66px; width:auto; padding-top: 5px; padding-bottom: 5px;
} brand-image {
@media (max-width: $screen-md-min){ height:70px; width:auto; }
}
.navbar-collapse {
position: relative; max-height: 270px;
}
.input-group-btn { min-width: 50px;
}
nav > li {
font-size: 14px;
} nav > li.active > a, nav > li.active > a:focus, nav > li.active > a:hover {
border-width: 0;
} nav > li.active > a, nav > li > a:hover {
border: none;
}
nav > li > a {
/* adjust padding for height*/ padding-top: 4px; padding-bottom: 4px;
}
nav > li > a::after {
content: ""; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0);
}
nav > li.active > a::after, nav > li:hover > a::after {
transform: scale(1);
}
nav > ul.navbar-right {
min-width: 620px;
}
tabbed-nav-bar > nav.navbar-inverse {
background-color: $navbar-inverse-bg; height:$navbar-height;
}
tabbed-nav-bar .navbar-default .navbar-toggle .icon-bar {
background-color: $brand-primary;
}
@media(max-width: $screen-md-min){
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: $navbar-inverse-bg; background-color: $navbar-inverse-bg; }
}
tabbed-nav-bar .collapse{
margin-bottom:-1px; z-index: 1;
} tabbed-nav-bar.non-sticky-nav button.navbar-toggle {
margin-right: -5px;
}
.sticky-nav {
position: fixed; top: 0; z-index: 1000; left: 0; right: 0; transition: all 1s ease;
}
@media(max-width:$screen-sm-min - 1){
#tabbed-nav-bar .tabbed-nav-btn{ width:100%; } #sub-navigation-header { font-size: 14px; } #tabbed-nav-bar .nav-tabs{ background-color: $navbar-inverse-bg; margin-top: 0px; margin-bottom: 20px; } #tabbed-nav-bar .nav-tabs>li>a::after { background: transparent; } #tabbed-nav-bar .nav-tabs>li>a { color: $navbar-text-color; font-size: 12px; font-weight: bold; padding: 10px; padding-left: 20px; text-transform: uppercase; letter-spacing: 0px; line-height: 21px; } #tabbed-nav-bar .nav-tabs>li>a:hover { color: $brand-primary; } #tabbed-nav-bar .nav-tabs>li.active>a, #tabbed-nav-bar .nav-tabs>li.active>a:hover, #tabbed-nav-bar .nav-tabs>li.active>a:focus { color: $brand-primary; background-color: transparent; cursor: default; } #tabbed-nav-bar { z-index:10000; }
}
sub-navigation-header{
display:none; height:100%; font-size: 19px; line-height: $navbar-height;
}
tabbed-nav-bar a#sub-navigation-header {
color: #000; padding: 0px;
} tabbed-nav-bar.sticky-nav a#sub-navigation-header{
color: $navbar-text-color;
}
/* Sub Navigation Side Bar Hover Style */ .nav-pills>li.side-nav-button>a:hover {
color: $navbar-inverse-bg;
}
.navbar-header {
position: relative; z-index: 2;
}
// Tabbed Nav bar /* ——– Tabbed Content Sections ——- */ .tab-pane {
background-color: white; margin-top: -20px; padding: 21px; overflow: hidden;
} .tab-content {
margin-top: 40px;
} .nav-tabs > li {
font-size: 14px;
} .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
border-width: 0;
} .nav-tabs > li > a {
border: none; line-height:40px; //Set the line height to change the size of the tabs. font-size: 18px;
} .nav-tabs > li.active > a, .nav-tabs > li > a:hover {
border: none;
}
.nav-tabs > li > a {
/* adjust padding for height*/ padding-top: 4px; padding-bottom: 4px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus, .nav-tabs>li>a:hover {
color: $brand-primary !important;
}
.nav-tabs > li > a::after {
content: ""; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0);
}
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {
transform: scaleY(2);
}
.tab-row-faq > li {
height:20px ;
}
.nav-tabs {
border-bottom: 2px solid $gray;
}
.nav-tabs > li > a {
color: $navbar-text-color;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover {
color: black; background: transparent;
} .nav-tabs > li > a::after {
background: $brand-primary;
} .tab-nav > li > a::after {
background: $brand-primary none repeat scroll 0% 0%; color: $navbar-text-color;
}
@media (min-width: $screen-md-min) {
#tabbed-nav-bar .nav-tabs { margin-top: 18px; }
}
.tab-pane-legal{
padding:0px;
}
//Changed the default navbar text colour .navbar-inverse .navbar-nav > li > a {
color: $footer-text-color;
}
button#closeForm {
color: $navbar-text-color;
}
@media (max-width: $screen-md-min){
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a.dropdown-item { color: $navbar-text-color; }
}
// Style for stacked nav li.side-nav-button {
border-top: 1px sstackedolid $gray-lighter; border-right: 0px; border-left: 0px; margin-bottom: -3px;
} li.side-nav-button:first-child {
border-top: 0px;
} .nav-pills > li.side-nav-button>a {
border-radius: 0px; font-size: 16px;
}
.dropdown-menu li:hover {
background-color: #eee; transition: all 500ms ease;
} .dropdown-menu li {
transition: all 500ms ease;
}
navbar-buttons .dropdown-menu {
background-color: #fff; border-top: 2px solid $brand-primary;
}
/* Bold the first li in nav-stacked */ ul.nav.nav-pills.nav-stacked li:first-child {
font-weight: bold;
}
li.side-nav-button:hover > a {
color: $brand-primary;
}
/* Stacked Nav Icon Div */ .ext-left{
float:left;
} .ext-right {
height: auto; vertical-align: middle; display: table-cell; padding-right: 10px; padding-left: 10px;
}
navbar-buttons .dropdown-menu>li>a {
color: $navbar-dropdown-text-color; letter-spacing: 0; font-size:12px; outline: 0;
}
navbar-buttons .dropdown-menu>li>a:hover {
color: $brand-primary; letter-spacing: 0; font-size:12px;
} main-navigation.navbar-inverse .navbar-nav>li>a {
color: $navbar-text-color; font-size: 14px; font-weight: normal; padding-right: 20px !important; padding-left: 20px !important; text-transform: none; letter-spacing: 0px;
} .navbar-inverse navbar-buttons >li>a {
color: $navbar-text-color;
}
.navbar-inverse navbar-buttons>li>a:hover{
color: $brand-primary;
}
// Search Bar
i.glyphicon.glyphicon-search {
font-size: 16px;
}
div#search_bar {
width: 100%; position: absolute; text-align:right; height: 66px; right: 43px; display: none; background-color: $navbar-inverse-bg; z-index: 99999;
}
div#search_bar input {
width:100%; right: 0; height: 66px; border-radius:0; outline:0; border:0; text-align: right; font-size: 26px; background-color: $navbar-inverse-bg; color: $navbar-text-color; border-color: inherit; -webkit-box-shadow: none; box-shadow: none;
}
div#search_bar input:focus {
border-color: inherit; -webkit-box-shadow: none; box-shadow: none; outline: none;
}
search_bar .input-group{
width: auto;
}
div#search_bar button {
width:50px; margin-left: -10px; border-radius: 0px; height: 66px; padding-top: 13px; font-size: 16px; background-color: $navbar-inverse-bg; border:0; color: $navbar-text-color;
} div#search_bar button:hover {
background-color: $navbar-text-color; color: $navbar-inverse-bg;
}
div#search_bar input::-webkit-input-placeholder {
color: $navbar-text-color !important;
}
div#search_bar input:-moz-placeholder { /* Firefox 18- */
color: $navbar-text-color !important;
}
div#search_bar input::-moz-placeholder { /* Firefox 19+ */
color: $navbar-text-color !important;
}
div#search_bar input:-ms-input-placeholder {
color: $navbar-text-color !important;
}
//NavBar Subtle Animations li.dropdown-submenu.sub-menu:hover > a:after {
margin-right:-6px; margin-top: 8px; transform: rotateZ(90deg); border-left-color:#a5a5a5;
}
li.dropdown-submenu.sub-menu > a:after {
transition: all 100ms linear;
}
li.dropdown.menu.open > a {
color: $brand-primary !important;
}
ul.dropdown-menu.menu {
padding-top: 0; padding-bottom: 0; border-radius: 0 !important;
}
// Linaro Sites Navigation
li#linaro-app-menu-item > a >i.glyphicon.glyphicon-th {
font-size: 16px; margin-top: -17px;
}
li#linaro-app-menu-item {
top: -1px;
}
li#linaro-app-menu-item {
margin-right: 15px;
}
li#linaro-app-menu-item > ul {
right: 10px; left: auto;
}
li#linaro-app-menu-item > ul {
background: none repeat scroll 0 0 #a080b7; margin-top: 25px; padding: 0 0 0 10px; position: absolute; width: 125px; z-index: 999; border:solid #a080b7 1px; margin-left:-24px; padding-left: 0;
}
li#linaro-app-menu-item > ul:before {
top:-34px; left: 93%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
li#linaro-app-menu-item > ul:before {
border-color: rgba(204, 204, 204, 0); border-bottom-color: #a080b7; border-width: 16px; margin-left: -16px;
}
@media(min-width:$screen-sm-min){
div#tabbed-nav-bar.sticky-nav li.divider { border-right: 1px solid $navbar-inverse-bg; height: 48px; width: 1px; } div#tabbed-nav-bar.non-sticky-nav li.divider { border-right: 2px solid #272727; } #main-navigation a.navbar-brand { padding-left:15px; }
}
@media only screen and (max-width: $screen-lg-min) and (min-width: $screen-sm-min) {
div#search_bar { right: 0px; }
}
/* Tabbed Nav Bar Mobile Style*/ @media (max-width: $screen-sm) {
ul#tabbed_nav > li { width: 100%; } ul#tabbed_nav > li > a { border:0; } ul#tabbed_nav > li > a:after { height: 1px; background-color: #fff; }
}
// Nav Bar SVG Base Style navbar_svg .cls-1 {
fill: none;
}
navbar_svg .cls-2 {
fill: #666;
}
navbar_svg .cls-3 {
fill: #9c3;
} navbar_svg .cls-8 {
fill: #9c3;
}
navbar_svg .cls-4, navbar_svg .cls-5 {
fill: #c03;
}
navbar_svg .cls-5 {
opacity: 0.6;
}
navbar_svg .cls-6, navbar_svg .cls-7 {
fill: #909;
}
navbar_svg .cls-7, navbar_svg .cls-8 {
opacity: 0.7;
}
main-navigation.navbar-static button.navbar-toggle {
left: 42px; position: relative;
}
// Style for sidebar stacked nav sub pages li.side-nav-button.sub-page a {
padding-left: 40px;
} nav#main-navigation {
transition: all 300ms ease;
}
nav#main-navigation.navbar-static {
height: $navbar-height + 20; padding-bottom: 10px; padding-top: 10px;
}
nav#main-navigation.navbar-fixed-top {
height: $navbar-height; padding-top:0px; padding-bottom:0px;
} main-navigation div#navbar-collapse {
z-index: 3;
} // CSS for the left aligned dropdowns
li.dropdown-submenu.sub-menu.pull-left {
width: 100%;
} main-navigation .pull-left ul.dropdown-menu.sub-menu {
margin-left: -3px !important; margin-top: 0px !important; text-align: right;
} main-navigation ul.dropdown-menu.sub-menu {
margin-left: 1px; border-radius: 0px; border: 0px; padding-top: 0; margin-top: 5px; padding-bottom: 0;
} li.dropdown-submenu.sub-menu > a {
cursor: pointer;
}
// Import the CSS for the iuniversal NavBar @import “universal-nav”;