navbar
This commit is contained in:
parent
13d4d12079
commit
94962c0553
578
css/navbar.css
578
css/navbar.css
|
|
@ -1,23 +1,16 @@
|
|||
/*
|
||||
Navbars
|
||||
========================================
|
||||
* Simplified Modern Navbar
|
||||
* Flattened structure using flexbox
|
||||
*/
|
||||
|
||||
/* COMMON STYLES
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Base class and wrapper */
|
||||
/* Base navbar */
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
min-height: var(--navbar-height);
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: var(--base-line-height);
|
||||
background-color: var(--navbar-background);
|
||||
background-image: linear-gradient(to bottom, var(--navbar-background-highlight), var(--navbar-background));
|
||||
border: 1px solid var(--navbar-border);
|
||||
|
|
@ -25,305 +18,117 @@
|
|||
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 */
|
||||
/* Brand */
|
||||
.navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--navbar-height);
|
||||
padding: 0 20px;
|
||||
margin-left: -20px;
|
||||
margin-right: 20px;
|
||||
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);
|
||||
.navbar-brand:hover,
|
||||
.navbar-brand:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Janky solution for now to account for links outside the .nav
|
||||
-------------------------- */
|
||||
.navbar-link {
|
||||
color: var(--navbar-link-color);
|
||||
/* Toggle button for responsive */
|
||||
.navbar-toggle {
|
||||
display: none;
|
||||
padding: 7px 10px;
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
background-color: #ededed;
|
||||
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: var(--base-border-radius);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
||||
}
|
||||
|
||||
.navbar-link:hover,
|
||||
.navbar-link:focus {
|
||||
color: var(--navbar-link-color-hover);
|
||||
.navbar-toggle .icon-bar {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
background-color: #888;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
/* 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"] {
|
||||
.navbar-toggle .icon-bar + .icon-bar {
|
||||
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 */
|
||||
/* Collapsible navigation */
|
||||
.navbar-collapse {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
/* Nav lists */
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
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;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
.navbar-nav > li > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--navbar-height);
|
||||
padding: 0 15px;
|
||||
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 */
|
||||
.navbar-nav > li > a:focus,
|
||||
.navbar-nav > li > a:hover {
|
||||
background-color: var(--navbar-link-background-hover);
|
||||
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 {
|
||||
/* Active 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 {
|
||||
/* Right aligned nav */
|
||||
.navbar-right {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Dropdown menus */
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: var(--zindex-dropdown);
|
||||
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);
|
||||
min-width: 160px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
background-color: var(--dropdown-background);
|
||||
border: 1px solid var(--dropdown-border);
|
||||
border-radius: var(--base-border-radius);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.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 {
|
||||
.dropdown-menu:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 7px solid transparent;
|
||||
|
|
@ -335,7 +140,7 @@
|
|||
left: 9px;
|
||||
}
|
||||
|
||||
.navbar .nav > li > .dropdown-menu:after {
|
||||
.dropdown-menu:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 6px solid transparent;
|
||||
|
|
@ -346,192 +151,113 @@
|
|||
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;
|
||||
.dropdown-menu > li > a {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
color: var(--dropdown-link-color);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
|
||||
border-top: 6px solid var(--dropdown-background);
|
||||
border-bottom: 0;
|
||||
bottom: -6px;
|
||||
top: auto;
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: var(--dropdown-link-color-hover);
|
||||
background-color: var(--dropdown-link-background-hover);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
.dropdown.open > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
/* Dividers */
|
||||
.divider-vertical {
|
||||
height: var(--navbar-height);
|
||||
margin: 0 9px;
|
||||
border-left: 1px solid var(--navbar-background);
|
||||
border-right: 1px solid var(--navbar-background-highlight);
|
||||
}
|
||||
|
||||
.navbar .nav li.dropdown > .dropdown-toggle .caret {
|
||||
border-top-color: var(--navbar-link-color);
|
||||
border-bottom-color: var(--navbar-link-color);
|
||||
.dropdown-menu .divider {
|
||||
height: 1px;
|
||||
margin: 9px 1px;
|
||||
overflow: hidden;
|
||||
background-color: var(--dropdown-divider-top);
|
||||
border-bottom: 1px solid var(--dropdown-divider-bottom);
|
||||
}
|
||||
|
||||
.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 {
|
||||
/* Inverted navbar */
|
||||
.navbar-inverse {
|
||||
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 {
|
||||
.navbar-inverse .navbar-brand,
|
||||
.navbar-inverse .navbar-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 {
|
||||
.navbar-inverse .navbar-brand:hover,
|
||||
.navbar-inverse .navbar-brand:focus,
|
||||
.navbar-inverse .navbar-nav > li > a:hover,
|
||||
.navbar-inverse .navbar-nav > li > a:focus {
|
||||
color: var(--navbar-inverse-link-color-hover);
|
||||
}
|
||||
|
||||
.navbar-inverse .brand {
|
||||
color: var(--navbar-inverse-brand-color);
|
||||
/* Responsive */
|
||||
@media (max-width: 979px) {
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-text {
|
||||
color: var(--navbar-inverse-text);
|
||||
.navbar-collapse {
|
||||
display: none;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.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-collapse.show {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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);
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Inline text links */
|
||||
.navbar-inverse .navbar-link {
|
||||
color: var(--navbar-inverse-link-color);
|
||||
.navbar-nav > li > a {
|
||||
height: auto;
|
||||
padding: 9px 15px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-link:hover,
|
||||
.navbar-inverse .navbar-link:focus {
|
||||
color: var(--navbar-inverse-link-color-hover);
|
||||
.navbar-right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,.15);
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
.dropdown-menu:before,
|
||||
.dropdown-menu:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.navbar-collapse {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,202 +0,0 @@
|
|||
/*
|
||||
Responsive: Navbar
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* TABLETS AND BELOW */
|
||||
@media (max-width: 979px) {
|
||||
/* UNFIX THE TOPBAR */
|
||||
/* Remove any padding from the body */
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Unfix the navbars */
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
margin-bottom: var(--base-line-height);
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom {
|
||||
margin-top: var(--base-line-height);
|
||||
}
|
||||
|
||||
.navbar-fixed-top .navbar-inner,
|
||||
.navbar-fixed-bottom .navbar-inner {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Account for brand name */
|
||||
.navbar .brand {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin: 0 0 0 -5px;
|
||||
}
|
||||
|
||||
/* COLLAPSIBLE NAVBAR */
|
||||
/* Nav collapse clears brand */
|
||||
.nav-collapse {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Block-level the nav */
|
||||
.nav-collapse .nav {
|
||||
float: none;
|
||||
margin: 0 0 calc(var(--base-line-height) / 2);
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li > a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > .divider-vertical {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-collapse .nav .nav-header {
|
||||
color: var(--navbar-text);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Nav and dropdown links in navbar */
|
||||
.nav-collapse .nav > li > a,
|
||||
.nav-collapse .dropdown-menu a {
|
||||
padding: 9px 15px;
|
||||
font-weight: bold;
|
||||
color: var(--navbar-link-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.nav-collapse .btn {
|
||||
padding: 4px 10px 4px;
|
||||
font-weight: normal;
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
.nav-collapse .dropdown-menu li + li a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li > a:hover,
|
||||
.nav-collapse .nav > li > a:focus,
|
||||
.nav-collapse .dropdown-menu a:hover,
|
||||
.nav-collapse .dropdown-menu a:focus {
|
||||
background-color: var(--navbar-background);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav > li > a,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a {
|
||||
color: var(--navbar-inverse-link-color);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav > li > a:hover,
|
||||
.navbar-inverse .nav-collapse .nav > li > a:focus,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a:hover,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a:focus {
|
||||
background-color: var(--navbar-inverse-background);
|
||||
}
|
||||
|
||||
/* Buttons in the navbar */
|
||||
.nav-collapse.in .btn-group {
|
||||
margin-top: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Dropdowns in the navbar */
|
||||
.nav-collapse .dropdown-menu {
|
||||
position: static;
|
||||
top: auto;
|
||||
left: auto;
|
||||
float: none;
|
||||
display: none;
|
||||
max-width: none;
|
||||
margin: 0 15px;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nav-collapse .open > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-collapse .dropdown-menu:before,
|
||||
.nav-collapse .dropdown-menu:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-collapse .dropdown-menu .divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li > .dropdown-menu:before,
|
||||
.nav-collapse .nav > li > .dropdown-menu:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Forms in navbar */
|
||||
.nav-collapse .navbar-form,
|
||||
.nav-collapse .navbar-search {
|
||||
float: none;
|
||||
padding: calc(var(--base-line-height) / 2) 15px;
|
||||
margin: calc(var(--base-line-height) / 2) 0;
|
||||
border-top: 1px solid var(--navbar-background);
|
||||
border-bottom: 1px solid var(--navbar-background);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .navbar-form,
|
||||
.navbar-inverse .nav-collapse .navbar-search {
|
||||
border-top-color: var(--navbar-inverse-background);
|
||||
border-bottom-color: var(--navbar-inverse-background);
|
||||
}
|
||||
|
||||
/* Pull right (secondary) nav content */
|
||||
.navbar .nav-collapse .nav.pull-right {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Hide everything in the navbar save .brand and toggle button */
|
||||
.nav-collapse,
|
||||
.nav-collapse.collapse {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Navbar button */
|
||||
.navbar .btn-navbar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* STATIC NAVBAR */
|
||||
.navbar-static .navbar-inner {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* DEFAULT DESKTOP */
|
||||
@media (min-width: 980px) {
|
||||
/* Required to make the collapsing navbar work on regular desktops */
|
||||
.nav-collapse.collapse {
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
/*
|
||||
Bootstrap Responsive
|
||||
========================================
|
||||
|
||||
Originally designed and built by @mdo and @fat
|
||||
Converted to CSS variables
|
||||
*/
|
||||
|
||||
/*
|
||||
This file serves as the main import for responsive styles.
|
||||
In a CSS variables implementation, you would include:
|
||||
|
||||
1. responsive-utilities.css - Utility classes for responsive layouts
|
||||
2. responsive-1200px-min.css - Styles for large desktops
|
||||
3. responsive-768px-979px.css - Styles for tablets to regular desktops
|
||||
4. responsive-767px-max.css - Styles for phones to portrait tablets
|
||||
5. responsive-navbar.css - Responsive navigation bar
|
||||
*/
|
||||
|
|
@ -25,24 +25,22 @@
|
|||
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Static navbar -->
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<nav class="navbar">
|
||||
<a class="navbar-brand" href="#">Project name</a>
|
||||
|
||||
<button class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
</button>
|
||||
|
||||
<div id="main-nav" class="navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
|
||||
class="caret"></b></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
|
|
@ -54,15 +52,14 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav pull-right">
|
||||
|
||||
<ul class="navbar-nav navbar-right">
|
||||
<li class="active"><a href="./navbar.html">Default</a></li>
|
||||
<li><a href="./navbar-static-top.html">Static top</a></li>
|
||||
<li><a href="./navbar-fixed-top.html">Fixed top</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
|
|
@ -92,4 +89,5 @@
|
|||
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user