mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-23 03:27:19 +00:00
fix examples collapse classes, rename navbar-redux to navbar and delete the old one
This commit is contained in:
Mark Otto
parent
cfac4bb59d
commit
b63543181a
32
docs/assets/css/bootstrap.css
vendored
32
docs/assets/css/bootstrap.css
vendored
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
3
less/bootstrap.less
vendored
3
less/bootstrap.less
vendored
@ -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";
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
374
less/navbar.less
374
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;
|
||||
}
|
||||
|
||||
// Lighten vertical dividers
|
||||
.navbar-subnav .divider-vertical {
|
||||
background-color: #f1f1f1;
|
||||
border-right-color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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)");
|
||||
|
||||
// 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-inner {
|
||||
#gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
|
||||
border-color: @navbarInverseBorder;
|
||||
}
|
||||
}
|
||||
|
||||
// Open dropdown dropdown-toggle
|
||||
.navbar-subnav .nav .open > a {
|
||||
color: @linkColorHover;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
// Inline text links
|
||||
.navbar-link {
|
||||
color: @navbarInverseLinkColor;
|
||||
&:hover {
|
||||
color: @navbarInverseLinkColorHover;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar collapse button
|
||||
.btn-navbar {
|
||||
.buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user