Sharkk/Torq
Sharkk/Torq
1
0
Fork 0
Code Issues Pull Requests Releases Activity

navbar

Browse Source
This commit is contained in:
Sky Johnson 2025-04-11 16:38:52 -05:00
parent 13d4d12079
commit 94962c0553
4 changed files with 227 additions and 723 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

592
css/navbar.css
View File

@ -1,23 +1,16 @@
/* /*
Navbars * Simplified Modern Navbar
======================================== * Flattened structure using flexbox
*/ */
/* COMMON STYLES /* Base navbar */
-------------------------------------------------- */
/* Base class and wrapper */
.navbar { .navbar {
overflow: visible; display: flex;
margin-bottom: var(--base-line-height); flex-wrap: wrap;
} align-items: center;
padding: 0 20px;
/* 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); min-height: var(--navbar-height);
padding-left: 20px; margin-bottom: var(--base-line-height);
padding-right: 20px;
background-color: var(--navbar-background); background-color: var(--navbar-background);
background-image: linear-gradient(to bottom, var(--navbar-background-highlight), var(--navbar-background)); background-image: linear-gradient(to bottom, var(--navbar-background-highlight), var(--navbar-background));
border: 1px solid var(--navbar-border); border: 1px solid var(--navbar-border);
@ -25,305 +18,117 @@
box-shadow: 0 1px 4px rgba(0,0,0,.065); box-shadow: 0 1px 4px rgba(0,0,0,.065);
} }
.navbar-inner:before, /* Brand */
.navbar-inner:after { .navbar-brand {
display: table; display: flex;
content: ""; align-items: center;
line-height: 0; height: var(--navbar-height);
} padding: 0 20px;
margin-left: -20px;
.navbar-inner:after { margin-right: 20px;
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-size: 20px;
font-weight: 200; font-weight: 200;
color: var(--navbar-brand-color); color: var(--navbar-brand-color);
text-shadow: 0 1px 0 var(--navbar-background-highlight); text-shadow: 0 1px 0 var(--navbar-background-highlight);
}
.navbar .brand:hover,
.navbar .brand:focus {
text-decoration: none; text-decoration: none;
} }
/* Plain text in topbar .navbar-brand:hover,
-------------------------- */ .navbar-brand:focus {
.navbar-text { text-decoration: none;
margin-bottom: 0;
line-height: var(--navbar-height);
color: var(--navbar-text);
} }
/* Janky solution for now to account for links outside the .nav /* Toggle button for responsive */
-------------------------- */ .navbar-toggle {
.navbar-link { display: none;
color: var(--navbar-link-color); 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-toggle .icon-bar {
.navbar-link:focus { display: block;
color: var(--navbar-link-color-hover); width: 18px;
height: 2px;
background-color: #888;
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0,0,0,.25);
} }
/* Dividers in navbar .navbar-toggle .icon-bar + .icon-bar {
-------------------------- */
.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; margin-top: 3px;
} }
.navbar-form .input-append, /* Collapsible navigation */
.navbar-form .input-prepend { .navbar-collapse {
margin-top: 5px; display: flex;
white-space: nowrap; /* prevent two items from separating within a .navbar-form that has .pull-left */ flex-grow: 1;
} }
.navbar-form .input-append input, /* Nav lists */
.navbar-form .input-prepend input { .navbar-nav {
margin-top: 0; /* remove the margin on top since it's on the parent */ display: flex;
}
/* 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-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; margin: 0 10px 0 0;
list-style: none;
} }
.navbar .nav.pull-right { .navbar-nav > li > a {
float: right; /* redeclare due to specificity */ display: flex;
margin-right: 0; /* remove margin on float right nav */ align-items: center;
} height: var(--navbar-height);
padding: 0 15px;
.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); color: var(--navbar-link-color);
text-decoration: none; text-decoration: none;
text-shadow: 0 1px 0 var(--navbar-background-highlight); text-shadow: 0 1px 0 var(--navbar-background-highlight);
} }
.navbar .nav .dropdown-toggle .caret { .navbar-nav > li > a:focus,
margin-top: 8px; .navbar-nav > li > a:hover {
} background-color: var(--navbar-link-background-hover);
/* 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); color: var(--navbar-link-color-hover);
text-decoration: none; text-decoration: none;
} }
/* Active nav items */ /* Active items */
.navbar .nav > .active > a, .navbar-nav > .active > a,
.navbar .nav > .active > a:hover, .navbar-nav > .active > a:hover,
.navbar .nav > .active > a:focus { .navbar-nav > .active > a:focus {
color: var(--navbar-link-color-active); color: var(--navbar-link-color-active);
text-decoration: none; text-decoration: none;
background-color: var(--navbar-link-background-active); background-color: var(--navbar-link-background-active);
box-shadow: inset 0 3px 8px rgba(0,0,0,.125); box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
} }
/* Navbar button for toggling navbar items in responsive layouts */ /* Right aligned nav */
.navbar .btn-navbar { .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; display: none;
float: right; min-width: 160px;
padding: 7px 10px; padding: 5px 0;
margin-left: 5px; margin: 2px 0 0;
margin-right: 5px; background-color: var(--dropdown-background);
color: #fff; border: 1px solid var(--dropdown-border);
text-shadow: 0 -1px 0 rgba(0,0,0,.25); border-radius: var(--base-border-radius);
background-color: #ededed; box-shadow: 0 5px 10px rgba(0,0,0,.2);
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 { .dropdown-menu:before {
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: ''; content: '';
display: inline-block; display: inline-block;
border-left: 7px solid transparent; border-left: 7px solid transparent;
@ -335,7 +140,7 @@
left: 9px; left: 9px;
} }
.navbar .nav > li > .dropdown-menu:after { .dropdown-menu:after {
content: ''; content: '';
display: inline-block; display: inline-block;
border-left: 6px solid transparent; border-left: 6px solid transparent;
@ -346,192 +151,113 @@
left: 10px; left: 10px;
} }
/* Menu position and menu caret support for dropups via extra dropup class */ .dropdown-menu > li > a {
.navbar-fixed-bottom .nav > li > .dropdown-menu:before { display: block;
border-top: 7px solid #ccc; padding: 3px 20px;
border-top-color: var(--dropdown-border); clear: both;
border-bottom: 0; color: var(--dropdown-link-color);
bottom: -7px; text-decoration: none;
top: auto; white-space: nowrap;
} }
.navbar-fixed-bottom .nav > li > .dropdown-menu:after { .dropdown-menu > li > a:hover,
border-top: 6px solid var(--dropdown-background); .dropdown-menu > li > a:focus {
border-bottom: 0; color: var(--dropdown-link-color-hover);
bottom: -6px; background-color: var(--dropdown-link-background-hover);
top: auto;
} }
/* Caret should match text color on hover/focus */ .dropdown.open > .dropdown-menu {
.navbar .nav li.dropdown > a:hover .caret, display: block;
.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 */ /* Dividers */
.navbar .nav li.dropdown.open > .dropdown-toggle, .divider-vertical {
.navbar .nav li.dropdown.active > .dropdown-toggle, height: var(--navbar-height);
.navbar .nav li.dropdown.open.active > .dropdown-toggle { margin: 0 9px;
background-color: var(--navbar-link-background-active); border-left: 1px solid var(--navbar-background);
color: var(--navbar-link-color-active); border-right: 1px solid var(--navbar-background-highlight);
} }
.navbar .nav li.dropdown > .dropdown-toggle .caret { .dropdown-menu .divider {
border-top-color: var(--navbar-link-color); height: 1px;
border-bottom-color: var(--navbar-link-color); 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, /* Inverted navbar */
.navbar .nav li.dropdown.active > .dropdown-toggle .caret, .navbar-inverse {
.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-color: var(--navbar-inverse-background);
background-image: linear-gradient(to bottom, var(--navbar-inverse-background-highlight), 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); border-color: var(--navbar-inverse-border);
} }
.navbar-inverse .brand, .navbar-inverse .navbar-brand,
.navbar-inverse .nav > li > a { .navbar-inverse .navbar-nav > li > a {
color: var(--navbar-inverse-link-color); color: var(--navbar-inverse-link-color);
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
} }
.navbar-inverse .brand:hover, .navbar-inverse .navbar-brand:hover,
.navbar-inverse .brand:focus, .navbar-inverse .navbar-brand:focus,
.navbar-inverse .nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .nav > li > a:focus { .navbar-inverse .navbar-nav > li > a:focus {
color: var(--navbar-inverse-link-color-hover); color: var(--navbar-inverse-link-color-hover);
} }
.navbar-inverse .brand { /* Responsive */
color: var(--navbar-inverse-brand-color); @media (max-width: 979px) {
} .navbar-toggle {
display: block;
}
.navbar-inverse .navbar-text { .navbar-collapse {
color: var(--navbar-inverse-text); display: none;
} width: 100%;
order: 1;
}
.navbar-inverse .nav > li > a:focus, .navbar-collapse.show {
.navbar-inverse .nav > li > a:hover { display: flex;
background-color: var(--navbar-inverse-link-background-hover); flex-direction: column;
color: var(--navbar-inverse-link-color-hover); }
}
.navbar-inverse .nav .active > a, .navbar-nav {
.navbar-inverse .nav .active > a:hover, flex-direction: column;
.navbar-inverse .nav .active > a:focus { width: 100%;
color: var(--navbar-inverse-link-color-active); margin: 0;
background-color: var(--navbar-inverse-link-background-active); }
}
/* Inline text links */ .navbar-nav > li > a {
.navbar-inverse .navbar-link { height: auto;
color: var(--navbar-inverse-link-color); padding: 9px 15px;
} margin-bottom: 2px;
border-radius: 3px;
}
.navbar-inverse .navbar-link:hover, .navbar-right {
.navbar-inverse .navbar-link:focus { margin-left: 0;
color: var(--navbar-inverse-link-color-hover); }
}
/* Dividers in navbar */ .dropdown-menu {
.navbar-inverse .divider-vertical { position: static;
border-left-color: var(--navbar-inverse-background); float: none;
border-right-color: var(--navbar-inverse-background-highlight); width: auto;
} margin-top: 0;
background-color: transparent;
/* 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; border: 0;
box-shadow: 0 0 3px rgba(0,0,0,.15); box-shadow: none;
outline: 0; }
.dropdown-menu:before,
.dropdown-menu:after {
display: none;
}
} }
/* Navbar collapse button */ @media (min-width: 980px) {
.navbar-inverse .btn-navbar { .navbar-collapse {
color: #fff; display: flex !important;
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);
} }

202
css/responsive-navbar.css
View File

@ -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;
}
}

18
css/responsive.css
View File

@ -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
*/

60
css/tests/navbar.html
View File

@ -24,25 +24,23 @@
</head> </head>
<body> <body>
<div class="container">
<!-- Static navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container"> <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> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div id="main-nav" class="navbar-collapse">
<ul class="nav"> <ul class="navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Another action</a></li>
@ -54,15 +52,14 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<ul class="nav pull-right">
<ul class="navbar-nav navbar-right">
<li class="active"><a href="./navbar.html">Default</a></li> <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-static-top.html">Static top</a></li>
<li><a href="./navbar-fixed-top.html">Fixed top</a></li> <li><a href="./navbar-fixed-top.html">Fixed top</a></li>
</ul> </ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div> </div>
</nav>
<!-- Main hero unit for a primary marketing message or call to action --> <!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit"> <div class="hero-unit">
@ -74,22 +71,23 @@
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Le javascript ================================================== --> <!-- Le javascript ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs/assets/js/jquery.js"></script> <script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/bootstrap-transition.js"></script> <script src="../../docs/assets/js/bootstrap-transition.js"></script>
<script src="../../docs/assets/js/bootstrap-alert.js"></script> <script src="../../docs/assets/js/bootstrap-alert.js"></script>
<script src="../../docs/assets/js/bootstrap-modal.js"></script> <script src="../../docs/assets/js/bootstrap-modal.js"></script>
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script> <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script> <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="../../docs/assets/js/bootstrap-tab.js"></script> <script src="../../docs/assets/js/bootstrap-tab.js"></script>
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script> <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
<script src="../../docs/assets/js/bootstrap-popover.js"></script> <script src="../../docs/assets/js/bootstrap-popover.js"></script>
<script src="../../docs/assets/js/bootstrap-button.js"></script> <script src="../../docs/assets/js/bootstrap-button.js"></script>
<script src="../../docs/assets/js/bootstrap-collapse.js"></script> <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
<script src="../../docs/assets/js/bootstrap-carousel.js"></script> <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script> <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
</body> </body>
</html> </html>