538 lines
14 KiB
CSS
538 lines
14 KiB
CSS
/*
|
|
Navbars
|
|
========================================
|
|
*/
|
|
|
|
/* COMMON STYLES
|
|
-------------------------------------------------- */
|
|
|
|
/* Base class and wrapper */
|
|
.navbar {
|
|
overflow: visible;
|
|
margin-bottom: var(--base-line-height);
|
|
}
|
|
|
|
/* Inner for background effects */
|
|
/* Gradient is applied to its own element because overflow visible is not honored by IE when filter is present */
|
|
.navbar-inner {
|
|
min-height: var(--navbar-height);
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
background-color: var(--navbar-background);
|
|
background-image: linear-gradient(to bottom, var(--navbar-background-highlight), var(--navbar-background));
|
|
border: 1px solid var(--navbar-border);
|
|
border-radius: var(--base-border-radius);
|
|
box-shadow: 0 1px 4px rgba(0,0,0,.065);
|
|
}
|
|
|
|
.navbar-inner:before,
|
|
.navbar-inner:after {
|
|
display: table;
|
|
content: "";
|
|
line-height: 0;
|
|
}
|
|
|
|
.navbar-inner:after {
|
|
clear: both;
|
|
}
|
|
|
|
/* Set width to auto for default container */
|
|
.navbar .container {
|
|
width: auto;
|
|
}
|
|
|
|
/* Override the default collapsed state */
|
|
.nav-collapse.collapse {
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Brand: website or project name
|
|
----------------------------- */
|
|
.navbar .brand {
|
|
float: left;
|
|
display: block;
|
|
/* Vertically center the text given var(--navbar-height) */
|
|
padding: calc((var(--navbar-height) - var(--base-line-height)) / 2) 20px calc((var(--navbar-height) - var(--base-line-height)) / 2);
|
|
margin-left: -20px; /* negative indent to left-align the text down the page */
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
color: var(--navbar-brand-color);
|
|
text-shadow: 0 1px 0 var(--navbar-background-highlight);
|
|
}
|
|
|
|
.navbar .brand:hover,
|
|
.navbar .brand:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Plain text in topbar
|
|
-------------------------- */
|
|
.navbar-text {
|
|
margin-bottom: 0;
|
|
line-height: var(--navbar-height);
|
|
color: var(--navbar-text);
|
|
}
|
|
|
|
/* Janky solution for now to account for links outside the .nav
|
|
-------------------------- */
|
|
.navbar-link {
|
|
color: var(--navbar-link-color);
|
|
}
|
|
|
|
.navbar-link:hover,
|
|
.navbar-link:focus {
|
|
color: var(--navbar-link-color-hover);
|
|
}
|
|
|
|
/* Dividers in navbar
|
|
-------------------------- */
|
|
.navbar .divider-vertical {
|
|
height: var(--navbar-height);
|
|
margin: 0 9px;
|
|
border-left: 1px solid var(--navbar-background);
|
|
border-right: 1px solid var(--navbar-background-highlight);
|
|
}
|
|
|
|
/* Buttons in navbar
|
|
-------------------------- */
|
|
.navbar .btn,
|
|
.navbar .btn-group {
|
|
margin-top: calc((var(--navbar-height) - 30px) / 2);
|
|
}
|
|
|
|
.navbar .btn-group .btn,
|
|
.navbar .input-prepend .btn,
|
|
.navbar .input-append .btn,
|
|
.navbar .input-prepend .btn-group,
|
|
.navbar .input-append .btn-group {
|
|
margin-top: 0; /* then undo the margin here so we don't accidentally double it */
|
|
}
|
|
|
|
/* Navbar forms
|
|
-------------------------- */
|
|
.navbar-form {
|
|
margin-bottom: 0; /* remove default bottom margin */
|
|
}
|
|
|
|
.navbar-form:before,
|
|
.navbar-form:after {
|
|
display: table;
|
|
content: "";
|
|
line-height: 0;
|
|
}
|
|
|
|
.navbar-form:after {
|
|
clear: both;
|
|
}
|
|
|
|
.navbar-form input,
|
|
.navbar-form select,
|
|
.navbar-form .radio,
|
|
.navbar-form .checkbox {
|
|
margin-top: calc((var(--navbar-height) - 30px) / 2);
|
|
}
|
|
|
|
.navbar-form input,
|
|
.navbar-form select,
|
|
.navbar-form .btn {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.navbar-form input[type="image"],
|
|
.navbar-form input[type="checkbox"],
|
|
.navbar-form input[type="radio"] {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.navbar-form .input-append,
|
|
.navbar-form .input-prepend {
|
|
margin-top: 5px;
|
|
white-space: nowrap; /* prevent two items from separating within a .navbar-form that has .pull-left */
|
|
}
|
|
|
|
.navbar-form .input-append input,
|
|
.navbar-form .input-prepend input {
|
|
margin-top: 0; /* remove the margin on top since it's on the parent */
|
|
}
|
|
|
|
/* Navbar search
|
|
-------------------------- */
|
|
.navbar-search {
|
|
position: relative;
|
|
float: left;
|
|
margin-top: calc((var(--navbar-height) - 30px) / 2);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.navbar-search .search-query {
|
|
margin-bottom: 0;
|
|
padding: 4px 14px;
|
|
font-family: var(--sans-font-family);
|
|
font-size: 13px;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
border-radius: 15px; /* redeclare because of specificity of the type attribute */
|
|
}
|
|
|
|
/* Static navbar
|
|
-------------------------- */
|
|
.navbar-static-top {
|
|
position: static;
|
|
margin-bottom: 0; /* remove 18px margin for default navbar */
|
|
}
|
|
|
|
.navbar-static-top .navbar-inner {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Fixed navbar
|
|
-------------------------- */
|
|
/* Shared (top/bottom) styles */
|
|
.navbar-fixed-top,
|
|
.navbar-fixed-bottom {
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: var(--zindex-fixed-navbar);
|
|
margin-bottom: 0; /* remove 18px margin for default navbar */
|
|
}
|
|
|
|
.navbar-fixed-top .navbar-inner,
|
|
.navbar-static-top .navbar-inner {
|
|
border-width: 0 0 1px;
|
|
}
|
|
|
|
.navbar-fixed-bottom .navbar-inner {
|
|
border-width: 1px 0 0;
|
|
}
|
|
|
|
.navbar-fixed-top .navbar-inner,
|
|
.navbar-fixed-bottom .navbar-inner {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Reset container width */
|
|
.navbar-static-top .container,
|
|
.navbar-fixed-top .container,
|
|
.navbar-fixed-bottom .container {
|
|
width: calc((var(--grid-columns) * var(--grid-column-width)) + (var(--grid-gutter-width) * (var(--grid-columns) - 1)));
|
|
}
|
|
|
|
/* Fixed to top */
|
|
.navbar-fixed-top {
|
|
top: 0;
|
|
}
|
|
|
|
.navbar-fixed-top .navbar-inner,
|
|
.navbar-static-top .navbar-inner {
|
|
box-shadow: 0 1px 10px rgba(0,0,0,.1);
|
|
}
|
|
|
|
/* Fixed to bottom */
|
|
.navbar-fixed-bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
.navbar-fixed-bottom .navbar-inner {
|
|
box-shadow: 0 -1px 10px rgba(0,0,0,.1);
|
|
}
|
|
|
|
/* NAVIGATION
|
|
---------- */
|
|
.navbar .nav {
|
|
position: relative;
|
|
left: 0;
|
|
display: block;
|
|
float: left;
|
|
margin: 0 10px 0 0;
|
|
}
|
|
|
|
.navbar .nav.pull-right {
|
|
float: right; /* redeclare due to specificity */
|
|
margin-right: 0; /* remove margin on float right nav */
|
|
}
|
|
|
|
.navbar .nav > li {
|
|
float: left;
|
|
}
|
|
|
|
/* Links */
|
|
.navbar .nav > li > a {
|
|
float: none;
|
|
/* Vertically center the text given var(--navbar-height) */
|
|
padding: calc((var(--navbar-height) - var(--base-line-height)) / 2) 15px calc((var(--navbar-height) - var(--base-line-height)) / 2);
|
|
color: var(--navbar-link-color);
|
|
text-decoration: none;
|
|
text-shadow: 0 1px 0 var(--navbar-background-highlight);
|
|
}
|
|
|
|
.navbar .nav .dropdown-toggle .caret {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Hover/focus */
|
|
.navbar .nav > li > a:focus,
|
|
.navbar .nav > li > a:hover {
|
|
background-color: var(--navbar-link-background-hover); /* "transparent" is default to differentiate :hover/:focus from .active */
|
|
color: var(--navbar-link-color-hover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Active nav items */
|
|
.navbar .nav > .active > a,
|
|
.navbar .nav > .active > a:hover,
|
|
.navbar .nav > .active > a:focus {
|
|
color: var(--navbar-link-color-active);
|
|
text-decoration: none;
|
|
background-color: var(--navbar-link-background-active);
|
|
box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
|
|
}
|
|
|
|
/* Navbar button for toggling navbar items in responsive layouts */
|
|
.navbar .btn-navbar {
|
|
display: none;
|
|
float: right;
|
|
padding: 7px 10px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
color: #fff;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
background-color: #ededed;
|
|
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
|
|
border-color: #e5e5e5 #e5e5e5 #bfbfbf;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
|
}
|
|
|
|
.navbar .btn-navbar .icon-bar {
|
|
display: block;
|
|
width: 18px;
|
|
height: 2px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 1px;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,.25);
|
|
}
|
|
|
|
.btn-navbar .icon-bar + .icon-bar {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
/* Dropdown menus
|
|
-------------- */
|
|
/* Menu position and menu carets */
|
|
.navbar .nav > li > .dropdown-menu:before {
|
|
content: '';
|
|
display: inline-block;
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
border-bottom: 7px solid #ccc;
|
|
border-bottom-color: var(--dropdown-border);
|
|
position: absolute;
|
|
top: -7px;
|
|
left: 9px;
|
|
}
|
|
|
|
.navbar .nav > li > .dropdown-menu:after {
|
|
content: '';
|
|
display: inline-block;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-bottom: 6px solid var(--dropdown-background);
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 10px;
|
|
}
|
|
|
|
/* Menu position and menu caret support for dropups via extra dropup class */
|
|
.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
|
|
border-top: 7px solid #ccc;
|
|
border-top-color: var(--dropdown-border);
|
|
border-bottom: 0;
|
|
bottom: -7px;
|
|
top: auto;
|
|
}
|
|
|
|
.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
|
|
border-top: 6px solid var(--dropdown-background);
|
|
border-bottom: 0;
|
|
bottom: -6px;
|
|
top: auto;
|
|
}
|
|
|
|
/* Caret should match text color on hover/focus */
|
|
.navbar .nav li.dropdown > a:hover .caret,
|
|
.navbar .nav li.dropdown > a:focus .caret {
|
|
border-top-color: var(--navbar-link-color-hover);
|
|
border-bottom-color: var(--navbar-link-color-hover);
|
|
}
|
|
|
|
/* Remove background color from open dropdown */
|
|
.navbar .nav li.dropdown.open > .dropdown-toggle,
|
|
.navbar .nav li.dropdown.active > .dropdown-toggle,
|
|
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
|
background-color: var(--navbar-link-background-active);
|
|
color: var(--navbar-link-color-active);
|
|
}
|
|
|
|
.navbar .nav li.dropdown > .dropdown-toggle .caret {
|
|
border-top-color: var(--navbar-link-color);
|
|
border-bottom-color: var(--navbar-link-color);
|
|
}
|
|
|
|
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
|
|
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
|
|
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
|
|
border-top-color: var(--navbar-link-color-active);
|
|
border-bottom-color: var(--navbar-link-color-active);
|
|
}
|
|
|
|
/* Right aligned menus need alt position */
|
|
.navbar .pull-right > li > .dropdown-menu,
|
|
.navbar .nav > li > .dropdown-menu.pull-right {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
.navbar .pull-right > li > .dropdown-menu:before,
|
|
.navbar .nav > li > .dropdown-menu.pull-right:before {
|
|
left: auto;
|
|
right: 12px;
|
|
}
|
|
|
|
.navbar .pull-right > li > .dropdown-menu:after,
|
|
.navbar .nav > li > .dropdown-menu.pull-right:after {
|
|
left: auto;
|
|
right: 13px;
|
|
}
|
|
|
|
.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
|
|
.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
|
|
left: auto;
|
|
right: 100%;
|
|
margin-left: 0;
|
|
margin-right: -1px;
|
|
border-radius: 6px 0 6px 6px;
|
|
}
|
|
|
|
/* Inverted navbar
|
|
-------------------------- */
|
|
.navbar-inverse .navbar-inner {
|
|
background-color: var(--navbar-inverse-background);
|
|
background-image: linear-gradient(to bottom, var(--navbar-inverse-background-highlight), var(--navbar-inverse-background));
|
|
border-color: var(--navbar-inverse-border);
|
|
}
|
|
|
|
.navbar-inverse .brand,
|
|
.navbar-inverse .nav > li > a {
|
|
color: var(--navbar-inverse-link-color);
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
}
|
|
|
|
.navbar-inverse .brand:hover,
|
|
.navbar-inverse .brand:focus,
|
|
.navbar-inverse .nav > li > a:hover,
|
|
.navbar-inverse .nav > li > a:focus {
|
|
color: var(--navbar-inverse-link-color-hover);
|
|
}
|
|
|
|
.navbar-inverse .brand {
|
|
color: var(--navbar-inverse-brand-color);
|
|
}
|
|
|
|
.navbar-inverse .navbar-text {
|
|
color: var(--navbar-inverse-text);
|
|
}
|
|
|
|
.navbar-inverse .nav > li > a:focus,
|
|
.navbar-inverse .nav > li > a:hover {
|
|
background-color: var(--navbar-inverse-link-background-hover);
|
|
color: var(--navbar-inverse-link-color-hover);
|
|
}
|
|
|
|
.navbar-inverse .nav .active > a,
|
|
.navbar-inverse .nav .active > a:hover,
|
|
.navbar-inverse .nav .active > a:focus {
|
|
color: var(--navbar-inverse-link-color-active);
|
|
background-color: var(--navbar-inverse-link-background-active);
|
|
}
|
|
|
|
/* Inline text links */
|
|
.navbar-inverse .navbar-link {
|
|
color: var(--navbar-inverse-link-color);
|
|
}
|
|
|
|
.navbar-inverse .navbar-link:hover,
|
|
.navbar-inverse .navbar-link:focus {
|
|
color: var(--navbar-inverse-link-color-hover);
|
|
}
|
|
|
|
/* Dividers in navbar */
|
|
.navbar-inverse .divider-vertical {
|
|
border-left-color: var(--navbar-inverse-background);
|
|
border-right-color: var(--navbar-inverse-background-highlight);
|
|
}
|
|
|
|
/* Dropdowns */
|
|
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
|
|
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
|
|
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
|
|
background-color: var(--navbar-inverse-link-background-active);
|
|
color: var(--navbar-inverse-link-color-active);
|
|
}
|
|
|
|
.navbar-inverse .nav li.dropdown > a:hover .caret,
|
|
.navbar-inverse .nav li.dropdown > a:focus .caret {
|
|
border-top-color: var(--navbar-inverse-link-color-active);
|
|
border-bottom-color: var(--navbar-inverse-link-color-active);
|
|
}
|
|
|
|
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
|
|
border-top-color: var(--navbar-inverse-link-color);
|
|
border-bottom-color: var(--navbar-inverse-link-color);
|
|
}
|
|
|
|
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
|
|
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
|
|
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
|
|
border-top-color: var(--navbar-inverse-link-color-active);
|
|
border-bottom-color: var(--navbar-inverse-link-color-active);
|
|
}
|
|
|
|
/* Navbar search */
|
|
.navbar-inverse .navbar-search .search-query {
|
|
color: var(--white);
|
|
background-color: var(--navbar-inverse-search-background);
|
|
border-color: var(--navbar-inverse-search-border);
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
|
|
transition: none;
|
|
}
|
|
|
|
.navbar-inverse .navbar-search .search-query::placeholder {
|
|
color: var(--navbar-inverse-search-placeholder-color);
|
|
}
|
|
|
|
/* Focus states */
|
|
.navbar-inverse .navbar-search .search-query:focus,
|
|
.navbar-inverse .navbar-search .search-query.focused {
|
|
padding: 5px 15px;
|
|
color: var(--gray-dark);
|
|
text-shadow: 0 1px 0 var(--white);
|
|
background-color: var(--navbar-inverse-search-background-focus);
|
|
border: 0;
|
|
box-shadow: 0 0 3px rgba(0,0,0,.15);
|
|
outline: 0;
|
|
}
|
|
|
|
/* Navbar collapse button */
|
|
.navbar-inverse .btn-navbar {
|
|
color: #fff;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
background-color: #0c0c0c;
|
|
background-image: linear-gradient(to bottom, #151515, #040404);
|
|
border-color: #040404 #040404 #000000;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
|
}
|