aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2012-07-30 10:08:27 -0700
committerMark Otto <[email protected]>2012-07-30 10:08:27 -0700
commitb63543181aad029167de60bc3563aadcd6f895fc (patch)
treea48258d42a3bacd85f6f7dac426e8ae59e3ffc1b
parentcfac4bb59d120c747a2b410f6574f28fa464e271 (diff)
downloadbootstrap-b63543181aad029167de60bc3563aadcd6f895fc.tar.xz
bootstrap-b63543181aad029167de60bc3563aadcd6f895fc.zip
fix examples collapse classes, rename navbar-redux to navbar and delete the old one
Diffstat
-rw-r--r--docs/assets/css/bootstrap.css32
-rw-r--r--docs/examples/fluid.html4
-rw-r--r--docs/examples/hero.html4
-rw-r--r--docs/examples/starter-template.html4
-rw-r--r--less/bootstrap.less3
-rw-r--r--less/navbar-redux.less418
-rw-r--r--less/navbar.less360
7 files changed, 189 insertions, 636 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4a885d82a..9cabb3687 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4458,6 +4458,38 @@ input[type="submit"].btn.btn-mini {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
+.navbar-inverse .btn-navbar {
+ color: #ffffff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ background-color: #0e0e0e;
+ *background-color: #040404;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
+ background-image: -webkit-linear-gradient(top, #151515, #040404);
+ background-image: -o-linear-gradient(top, #151515, #040404);
+ background-image: linear-gradient(to bottom, #151515, #040404);
+ background-image: -moz-linear-gradient(top, #151515, #040404);
+ background-repeat: repeat-x;
+ border-color: #040404 #040404 #000000;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
+ filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+
+.navbar-inverse .btn-navbar:hover,
+.navbar-inverse .btn-navbar:active,
+.navbar-inverse .btn-navbar.active,
+.navbar-inverse .btn-navbar.disabled,
+.navbar-inverse .btn-navbar[disabled] {
+ color: #ffffff;
+ background-color: #040404;
+ *background-color: #000000;
+}
+
+.navbar-inverse .btn-navbar:active,
+.navbar-inverse .btn-navbar.active {
+ background-color: #000000 \9;
+}
+
.breadcrumb {
padding: 8px 15px;
margin: 0 0 20px;
diff --git a/docs/examples/fluid.html b/docs/examples/fluid.html
index f235d7614..e39ea8b1a 100644
--- a/docs/examples/fluid.html
+++ b/docs/examples/fluid.html
@@ -35,7 +35,7 @@
<body>
- <div class="navbar navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -55,7 +55,7 @@
<li><a href="#">Sign Out</a></li>
</ul>
</div>
- <div class="nav-collapse">
+ <div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
diff --git a/docs/examples/hero.html b/docs/examples/hero.html
index c1f89bf9a..32f6561bd 100644
--- a/docs/examples/hero.html
+++ b/docs/examples/hero.html
@@ -32,7 +32,7 @@
<body>
- <div class="navbar navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -41,7 +41,7 @@
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
- <div class="nav-collapse">
+ <div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
diff --git a/docs/examples/starter-template.html b/docs/examples/starter-template.html
index 538ff08be..7eac55de8 100644
--- a/docs/examples/starter-template.html
+++ b/docs/examples/starter-template.html
@@ -31,7 +31,7 @@
<body>
- <div class="navbar navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -40,7 +40,7 @@
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
- <div class="nav-collapse">
+ <div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 94e5a6c2f..c43875a80 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -40,8 +40,7 @@
// Components: Nav
@import "navs.less";
-//@import "navbar.less";
-@import "navbar-redux.less";
+@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
diff --git a/less/navbar-redux.less b/less/navbar-redux.less
deleted file mode 100644
index c13629c9b..000000000
--- a/less/navbar-redux.less
+++ /dev/null
@@ -1,418 +0,0 @@
-//
-// Navbars (Redux)
-// --------------------------------------------------
-
-
-// COMMON STYLES
-// -------------
-
-// Base class and wrapper
-.navbar {
- overflow: visible;
- margin-bottom: @baseLineHeight;
- color: @navbarText;
-
- // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
- *position: relative;
- *z-index: 2;
-}
-
-// 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: @navbarHeight;
- padding-left: 20px;
- padding-right: 20px;
- #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
- border: 1px solid @navbarBorder;
- .border-radius(4px);
- .box-shadow(0 1px 4px rgba(0,0,0,.065));
-}
-
-// Set width to auto for default container
-// We then reset it for fixed navbars in the #gridSystem mixin
-.navbar .container {
- width: auto;
-}
-
-// Override the default collapsed state
-.nav-collapse.collapse {
- height: auto;
-}
-
-
-// Brand: website or project name
-// -------------------------
-.navbar .brand {
- float: left;
- display: block;
- // Vertically center the text given @navbarHeight
- @elementHeight: 20px;
- padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2);
- margin-left: -20px; // negative indent to left-align the text down the page
- font-size: 20px;
- font-weight: 200;
- color: @navbarBrandColor;
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
- &:hover {
- text-decoration: none;
- }
-}
-
-// Plain text in topbar
-// -------------------------
-.navbar-text {
- margin-bottom: 0;
- line-height: @navbarHeight;
-}
-
-// Janky solution for now to account for links outside the .nav
-// -------------------------
-.navbar-link {
- color: @navbarLinkColor;
- &:hover {
- color: @navbarLinkColorHover;
- }
-}
-
-// Buttons in navbar
-// -------------------------
-.navbar .btn,
-.navbar .btn-group {
- .navbarVerticalAlign(28px); // Vertically center in navbar
-}
-.navbar .btn-group .btn {
- margin: 0; // then undo the margin here so we don't accidentally double it
-}
-
-// Navbar forms
-.navbar-form {
- margin-bottom: 0; // remove default bottom margin
- .clearfix();
- input,
- select,
- .radio,
- .checkbox {
- .navbarVerticalAlign(28px); // Vertically center in navbar
- }
- input,
- select,
- .btn {
- display: inline-block;
- margin-bottom: 0;
- }
- input[type="image"],
- input[type="checkbox"],
- input[type="radio"] {
- margin-top: 3px;
- }
- .input-append,
- .input-prepend {
- margin-top: 6px;
- white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
- input {
- margin-top: 0; // remove the margin on top since it's on the parent
- }
- }
-}
-
-// Navbar search
-.navbar-search {
- position: relative;
- float: left;
- .navbarVerticalAlign(30px); // Vertically center in navbar
- margin-bottom: 0;
- .search-query {
- margin-bottom: 0;
- padding: 4px 14px;
- #font > .sans-serif(13px, normal, 1);
- .border-radius(15px); // redeclare because of specificity of the type attribute
- .placeholder(@navbarSearchPlaceholderColor);
- }
-}
-
-
-
-// FIXED NAVBAR
-// ------------
-
-// Shared (top/bottom) styles
-.navbar-fixed-top,
-.navbar-fixed-bottom {
- position: fixed;
- right: 0;
- left: 0;
- z-index: @zindexFixedNavbar;
- margin-bottom: 0; // remove 18px margin for static navbar
-}
-.navbar-fixed-top .navbar-inner,
-.navbar-fixed-bottom .navbar-inner {
- padding-left: 0;
- padding-right: 0;
- .border-radius(0);
-}
-
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
- #grid > .core > .span(@gridColumns);
-}
-
-// Fixed to top
-.navbar-fixed-top {
- top: 0;
- .navbar-inner {
- border-width: 0 0 1px;
- .box-shadow(0 1px 10px rgba(0,0,0,.1));
- }
-}
-
-// Fixed to bottom
-.navbar-fixed-bottom {
- bottom: 0;
- .navbar-inner {
- border-width: 1px 0 0;
- .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
-}
-.navbar .nav > li {
- float: left;
-}
-
-// Links
-.navbar .nav > li > a {
- float: none;
- // Vertically center the text given @navbarHeight
- @elementHeight: 20px;
- padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2);
- color: @navbarLinkColor;
- text-decoration: none;
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
-}
-.navbar .nav .dropdown-toggle .caret {
- margin-top: 8px;
-}
-
-// Hover
-.navbar .nav > li > a:focus,
-.navbar .nav > li > a:hover {
- background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
- color: @navbarLinkColorHover;
- text-decoration: none;
-}
-
-// Active nav items
-.navbar .nav .active > a,
-.navbar .nav .active > a:hover,
-.navbar .nav .active > a:focus {
- color: @navbarLinkColorActive;
- text-decoration: none;
- background-color: @navbarLinkBackgroundActive;
- -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
- -moz-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
-// These definitions need to come after '.navbar .btn'
-.navbar .btn-navbar {
- display: none;
- float: right;
- padding: 7px 10px;
- margin-left: 5px;
- margin-right: 5px;
- .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
- .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 .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: @dropdownBorder;
- position: absolute;
- top: -7px;
- left: 9px;
- }
- &:after {
- content: '';
- display: inline-block;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-bottom: 6px solid @dropdownBackground;
- position: absolute;
- top: -6px;
- left: 10px;
- }
-}
-// Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .dropdown-menu {
- &:before {
- border-top: 7px solid #ccc;
- border-top-color: @dropdownBorder;
- border-bottom: 0;
- bottom: -7px;
- top: auto;
- }
- &:after {
- border-top: 6px solid @dropdownBackground;
- border-bottom: 0;
- bottom: -6px;
- top: auto;
- }
-}
-
-// 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: @navbarLinkBackgroundActive;
- color: @navbarLinkColorActive;
-}
-.navbar .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarLinkColor;
- border-bottom-color: @navbarLinkColor;
-}
-.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: @navbarLinkColorActive;
- border-bottom-color: @navbarLinkColorActive;
-}
-
-// Right aligned menus need alt position
-.navbar .pull-right .dropdown-menu,
-.navbar .dropdown-menu.pull-right {
- left: auto;
- right: 0;
- &:before {
- left: auto;
- right: 12px;
- }
- &:after {
- left: auto;
- right: 13px;
- }
-}
-
-
-// Inverted navbar
-// -------------------------
-
-.navbar-inverse {
- color: @navbarInverseText;
-
- .navbar-inner {
- #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
- border-color: @navbarInverseBorder;
- }
-
- .brand,
- .nav > li > a {
- color: @navbarInverseLinkColor;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- &:hover {
- color: @navbarInverseLinkColorHover;
- }
- }
-
- .nav > li > a:focus,
- .nav > li > a:hover {
- background-color: @navbarInverseLinkBackgroundHover;
- color: @navbarInverseLinkColorHover;
- }
-
- .nav .active > a,
- .nav .active > a:hover,
- .nav .active > a:focus {
- color: @navbarInverseLinkColorActive;
- background-color: @navbarInverseLinkBackgroundActive;
- }
-
- .navbar-link {
- color: @navbarInverseLinkColor;
- &:hover {
- color: @navbarInverseLinkColorHover;
- }
- }
-
- .nav li.dropdown.open > .dropdown-toggle,
- .nav li.dropdown.active > .dropdown-toggle,
- .nav li.dropdown.open.active > .dropdown-toggle {
- background-color: @navbarInverseLinkBackgroundActive;
- color: @navbarInverseLinkColorActive;
- }
- .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarInverseLinkColor;
- border-bottom-color: @navbarInverseLinkColor;
- }
- .nav li.dropdown.open > .dropdown-toggle .caret,
- .nav li.dropdown.active > .dropdown-toggle .caret,
- .nav li.dropdown.open.active > .dropdown-toggle .caret {
- border-top-color: @navbarInverseLinkColorActive;
- border-bottom-color: @navbarInverseLinkColorActive;
- }
-
- // Navbar search
- .navbar-search {
- .search-query {
- color: @white;
- background-color: @navbarInverseSearchBackground;
- border-color: @navbarInverseSearchBorder;
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
- .transition(none);
- .placeholder(@navbarInverseSearchPlaceholderColor);
-
- // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
- &:focus,
- &.focused {
- padding: 5px 15px;
- color: @grayDark;
- text-shadow: 0 1px 0 @white;
- background-color: @navbarInverseSearchBackgroundFocus;
- border: 0;
- .box-shadow(0 0 3px rgba(0,0,0,.15));
- outline: 0;
- }
- }
- }
-
-}
-
-
-
diff --git a/less/navbar.less b/less/navbar.less
index d2f122784..02535a467 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -1,28 +1,32 @@
//
-// Navbars
+// Navbars (Redux)
// --------------------------------------------------
// COMMON STYLES
// -------------
+// Base class and wrapper
.navbar {
+ overflow: visible;
+ margin-bottom: @baseLineHeight;
+ color: @navbarText;
+
// Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
*position: relative;
*z-index: 2;
-
- overflow: visible;
- margin-bottom: @baseLineHeight;
}
+// 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: @navbarHeight;
padding-left: 20px;
padding-right: 20px;
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
+ border: 1px solid @navbarBorder;
.border-radius(4px);
- .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
+ .box-shadow(0 1px 4px rgba(0,0,0,.065));
}
// Set width to auto for default container
@@ -37,48 +41,50 @@
}
-// Brand, links, text, and buttons
-.navbar {
- color: @navbarText;
- // Hover and active states
- .brand:hover {
+// Brand: website or project name
+// -------------------------
+.navbar .brand {
+ float: left;
+ display: block;
+ // Vertically center the text given @navbarHeight
+ @elementHeight: 20px;
+ padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2);
+ margin-left: -20px; // negative indent to left-align the text down the page
+ font-size: 20px;
+ font-weight: 200;
+ color: @navbarBrandColor;
+ text-shadow: 0 1px 0 @navbarBackgroundHighlight;
+ &:hover {
text-decoration: none;
}
- // Website or project name
- .brand {
- float: left;
- display: block;
- // Vertically center the text given @navbarHeight
- @elementHeight: 20px;
- padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
- margin-left: -20px; // negative indent to left-align the text down the page
- font-size: 20px;
- font-weight: 200;
- line-height: 1;
- color: @navbarBrandColor;
- }
- // Plain text in topbar
- .navbar-text {
- margin-bottom: 0;
- line-height: @navbarHeight;
- }
- // Janky solution for now to account for links outside the .nav
- .navbar-link {
- color: @navbarLinkColor;
- &:hover {
- color: @navbarLinkColorHover;
- }
- }
- // Buttons in navbar
- .btn,
- .btn-group {
- .navbarVerticalAlign(28px); // Vertically center in navbar
- }
- .btn-group .btn {
- margin: 0; // then undo the margin here so we don't accidentally double it
+}
+
+// Plain text in topbar
+// -------------------------
+.navbar-text {
+ margin-bottom: 0;
+ line-height: @navbarHeight;
+}
+
+// Janky solution for now to account for links outside the .nav
+// -------------------------
+.navbar-link {
+ color: @navbarLinkColor;
+ &:hover {
+ color: @navbarLinkColorHover;
}
}
+// Buttons in navbar
+// -------------------------
+.navbar .btn,
+.navbar .btn-group {
+ .navbarVerticalAlign(28px); // Vertically center in navbar
+}
+.navbar .btn-group .btn {
+ margin: 0; // then undo the margin here so we don't accidentally double it
+}
+
// Navbar forms
.navbar-form {
margin-bottom: 0; // remove default bottom margin
@@ -120,26 +126,8 @@
margin-bottom: 0;
padding: 4px 14px;
#font > .sans-serif(13px, normal, 1);
- color: @white;
- background-color: @navbarSearchBackground;
- border: 1px solid @navbarSearchBorder;
.border-radius(15px); // redeclare because of specificity of the type attribute
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
- .transition(none);
-
.placeholder(@navbarSearchPlaceholderColor);
-
- // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
- &:focus,
- &.focused {
- padding: 5px 15px;
- color: @grayDark;
- text-shadow: 0 1px 0 @white;
- background-color: @navbarSearchBackgroundFocus;
- border: 0;
- .box-shadow(0 0 3px rgba(0,0,0,.15));
- outline: 0;
- }
}
}
@@ -172,17 +160,19 @@
// Fixed to top
.navbar-fixed-top {
top: 0;
- -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
- -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
- box-shadow: 0 1px 10px rgba(0,0,0,.1);
+ .navbar-inner {
+ border-width: 0 0 1px;
+ .box-shadow(0 1px 10px rgba(0,0,0,.1));
+ }
}
// Fixed to bottom
.navbar-fixed-bottom {
bottom: 0;
- -webkit-box-shadow: 0 -1px 10px rgba(0,0,0,.1);
- -moz-box-shadow: 0 -1px 10px rgba(0,0,0,.1);
- box-shadow: 0 -1px 10px rgba(0,0,0,.1);
+ .navbar-inner {
+ border-width: 1px 0 0;
+ .box-shadow(0 -1px 10px rgba(0,0,0,.1));
+ }
}
@@ -209,31 +199,15 @@
float: none;
// Vertically center the text given @navbarHeight
@elementHeight: 20px;
- padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
- line-height: 19px;
+ padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2);
color: @navbarLinkColor;
text-decoration: none;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
}
-// Buttons
-.navbar .btn {
- display: inline-block;
- padding: 4px 10px 4px;
- // Vertically center the button given @navbarHeight
- @elementHeight: 28px;
- margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
- line-height: @baseLineHeight;
-}
-.navbar .btn-group {
- margin: 0;
- // Vertically center the button given @navbarHeight
- @elementHeight: 28px;
- padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
-}
// Hover
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
@@ -249,22 +223,9 @@
color: @navbarLinkColorActive;
text-decoration: none;
background-color: @navbarLinkBackgroundActive;
-}
-
-// Dividers (basically a vertical hr)
-.navbar .divider-vertical {
- height: @navbarHeight;
- width: 1px;
- margin: 0 9px;
- overflow: hidden;
- background-color: @navbarBackground;
- border-right: 1px solid @navbarBackgroundHighlight;
-}
-
-// Secondary (floated right) nav in topbar
-.navbar .nav.pull-right {
- margin-left: 10px;
- margin-right: 0;
+ -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
+ -moz-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
@@ -291,6 +252,7 @@
}
+
// Dropdown menus
// --------------
@@ -334,31 +296,26 @@
top: auto;
}
}
-// Dropdown toggle caret
-.navbar .nav li.dropdown .dropdown-toggle .caret,
-.navbar .nav li.dropdown.open .caret {
- border-top-color: @white;
- border-bottom-color: @white;
-}
-.navbar .nav li.dropdown.active .caret {
- .opacity(100);
-}
// 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: transparent;
+ background-color: @navbarLinkBackgroundActive;
+ color: @navbarLinkColorActive;
}
-
-// Dropdown link on hover
-.navbar .nav li.dropdown.active > .dropdown-toggle:focus,
-.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
- color: @white;
+.navbar .nav li.dropdown > .dropdown-toggle .caret {
+ border-top-color: @navbarLinkColor;
+ border-bottom-color: @navbarLinkColor;
+}
+.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: @navbarLinkColorActive;
+ border-bottom-color: @navbarLinkColorActive;
}
// Right aligned menus need alt position
-// TODO: rejigger this at some point to simplify the selectors
.navbar .pull-right .dropdown-menu,
.navbar .dropdown-menu.pull-right {
left: auto;
@@ -374,112 +331,95 @@
}
-/* Subnav navbar
--------------------------------------------------- */
-// In the future, we may make two options available for the navbar:
-// a default state, the lighter one, and the darker one as an option
-// to enable. This would prevent some overriding back to defaults.
+// Inverted navbar
+// -------------------------
+.navbar-inverse {
+ color: @navbarInverseText;
-// Override the default .navbar
-.navbar-subnav .navbar-inner {
- #gradient > .vertical(#ffffff, #f1f1f1);
- .box-shadow(none);
- border: 1px solid #e5e5e5;
- padding-left: 10px;
- padding-right: 10px;
-}
+ .navbar-inner {
+ #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
+ border-color: @navbarInverseBorder;
+ }
-// Lighten vertical dividers
-.navbar-subnav .divider-vertical {
- background-color: #f1f1f1;
- border-right-color: #ffffff;
-}
+ .brand,
+ .nav > li > a {
+ color: @navbarInverseLinkColor;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ &:hover {
+ color: @navbarInverseLinkColorHover;
+ }
+ }
+ .nav > li > a:focus,
+ .nav > li > a:hover {
+ background-color: @navbarInverseLinkBackgroundHover;
+ color: @navbarInverseLinkColorHover;
+ }
-// Change link colors back
-.navbar-subnav .nav > li > a {
- color: @linkColor;
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
-}
-.navbar-subnav .nav > li > a:hover {
- color: @linkColorHover;
-}
+ .nav .active > a,
+ .nav .active > a:hover,
+ .nav .active > a:focus {
+ color: @navbarInverseLinkColorActive;
+ background-color: @navbarInverseLinkBackgroundActive;
+ }
-// Active nav links
-.navbar-subnav .nav > .active > a,
-.navbar-subnav .nav > .active > a:hover {
- color: #777;
- background-color: #eee;
- -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
- -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
- box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
-}
+ // Inline text links
+ .navbar-link {
+ color: @navbarInverseLinkColor;
+ &:hover {
+ color: @navbarInverseLinkColorHover;
+ }
+ }
-// Dropdown carets
-.navbar-subnav .nav li.dropdown .dropdown-toggle .caret,
-.navbar-subnav .nav li.dropdown.open .caret {
- border-top-color: @linkColor;
- border-bottom-color: @linkColor;
-}
+ // Dropdowns
+ .nav li.dropdown.open > .dropdown-toggle,
+ .nav li.dropdown.active > .dropdown-toggle,
+ .nav li.dropdown.open.active > .dropdown-toggle {
+ background-color: @navbarInverseLinkBackgroundActive;
+ color: @navbarInverseLinkColorActive;
+ }
+ .nav li.dropdown > .dropdown-toggle .caret {
+ border-top-color: @navbarInverseLinkColor;
+ border-bottom-color: @navbarInverseLinkColor;
+ }
+ .nav li.dropdown.open > .dropdown-toggle .caret,
+ .nav li.dropdown.active > .dropdown-toggle .caret,
+ .nav li.dropdown.open.active > .dropdown-toggle .caret {
+ border-top-color: @navbarInverseLinkColorActive;
+ border-bottom-color: @navbarInverseLinkColorActive;
+ }
-// Reset search input form
-.navbar-subnav .search-query {
- background-color: #fff;
- border-color: #ccc;
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
+ // Navbar search
+ .navbar-search {
+ .search-query {
+ color: @white;
+ background-color: @navbarInverseSearchBackground;
+ border-color: @navbarInverseSearchBorder;
+ .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
+ .transition(none);
+ .placeholder(@navbarInverseSearchPlaceholderColor);
+
+ // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
+ &:focus,
+ &.focused {
+ padding: 5px 15px;
+ color: @grayDark;
+ text-shadow: 0 1px 0 @white;
+ background-color: @navbarInverseSearchBackgroundFocus;
+ border: 0;
+ .box-shadow(0 0 3px rgba(0,0,0,.15));
+ outline: 0;
+ }
+ }
+ }
- // On :focus, keep the same padding and border
- &:focus,
- &.focused {
- padding: 4px 9px;
- border: 1px solid rgba(82,168,236,.8);
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
+ // Navbar collapse button
+ .btn-navbar {
+ .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
}
-}
-// Open dropdown dropdown-toggle
-.navbar-subnav .nav .open > a {
- color: @linkColorHover;
}
-// Collapse button
-.navbar-subnav .btn-navbar {
- .buttonBackground(darken(#ffffff, 5%), darken(#f1f1f1, 5%));
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25)");
-}
-.navbar .btn-navbar .icon-bar {
- background-color: #999;
- .box-shadow(0 1px 0 rgba(0,0,0,.25));
-}
-// Fixed subnav on scroll, but only for 980px and up (sorry IE!)
-.navbar-subnav-fixed {
- position: fixed;
- top: 40px;
- left: 0;
- right: 0;
- z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
- -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1);
- -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1);
- box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1);
-}
-.navbar-subnav-fixed .navbar-inner {
- border-color: #d5d5d5;
- border-width: 0 0 1px; /* drop the border on the fixed edges */
- filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
- .border-radius(0);
-}
-.navbar-subnav-fixed .nav {
- float: none;
- max-width: 970px;
- margin: 0 auto;
- padding: 0 1px;
-}
-.navbar-subnav .nav > li:first-child > a,
-.navbar-subnav .nav > li:first-child > a:hover {
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
-}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 10:09:48 +0000