vendor/toolkit/twitter/bootstrap/navbar.less in twitter-bootstrap-rails-2.2.8 vs vendor/toolkit/twitter/bootstrap/navbar.less in twitter-bootstrap-rails-3.2.0
- old
+ new
@@ -1,497 +1,655 @@
//
-// Navbars (Redux)
+// Navbars
// --------------------------------------------------
-// COMMON STYLES
-// -------------
+// Wrapper and base class
+//
+// Provide a static navbar from which we expand to create full-width, fixed, and
+// other navbar variations.
-// Base class and wrapper
.navbar {
- overflow: visible;
- margin-bottom: @baseLineHeight;
+ position: relative;
+ min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
+ margin-bottom: @navbar-margin-bottom;
+ border: 1px solid transparent;
- // 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(@baseBorderRadius);
- .box-shadow(0 1px 4px rgba(0,0,0,.065));
-
// Prevent floats from breaking the navbar
- .clearfix();
-}
+ &:extend(.clearfix all);
-// Set width to auto for default container
-// We then reset it for fixed navbars in the #gridSystem mixin
-.navbar .container {
- width: auto;
+ @media (min-width: @grid-float-breakpoint) {
+ border-radius: @navbar-border-radius;
+ }
}
-// Override the default collapsed state
-.nav-collapse.collapse {
- height: auto;
- overflow: visible;
-}
+// Navbar heading
+//
+// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
+// styling of responsive aspects.
-// Brand: website or project name
-// -------------------------
-.navbar .brand {
- float: left;
- display: block;
- // Vertically center the text given @navbarHeight
- padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 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,
- &:focus {
- text-decoration: none;
+.navbar-header {
+ &:extend(.clearfix all);
+
+ @media (min-width: @grid-float-breakpoint) {
+ float: left;
}
}
-// Plain text in topbar
-// -------------------------
-.navbar-text {
- margin-bottom: 0;
- line-height: @navbarHeight;
- color: @navbarText;
-}
-// Janky solution for now to account for links outside the .nav
-// -------------------------
-.navbar-link {
- color: @navbarLinkColor;
- &:hover,
- &:focus {
- color: @navbarLinkColorHover;
+// Navbar collapse (body)
+//
+// Group your navbar content into this for easy collapsing and expanding across
+// various device sizes. By default, this content is collapsed when <768px, but
+// will expand past that for a horizontal display.
+//
+// To start (on mobile devices) the navbar links, forms, and buttons are stacked
+// vertically and include a `max-height` to overflow in case you have too much
+// content for the user's viewport.
+
+.navbar-collapse {
+ overflow-x: visible;
+ padding-right: @navbar-padding-horizontal;
+ padding-left: @navbar-padding-horizontal;
+ border-top: 1px solid transparent;
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
+ &:extend(.clearfix all);
+ -webkit-overflow-scrolling: touch;
+
+ &.in {
+ overflow-y: auto;
}
-}
-// Dividers in navbar
-// -------------------------
-.navbar .divider-vertical {
- height: @navbarHeight;
- margin: 0 9px;
- border-left: 1px solid @navbarBackground;
- border-right: 1px solid @navbarBackgroundHighlight;
-}
+ @media (min-width: @grid-float-breakpoint) {
+ width: auto;
+ border-top: 0;
+ box-shadow: none;
-// Buttons in navbar
-// -------------------------
-.navbar .btn,
-.navbar .btn-group {
- .navbarVerticalAlign(30px); // Vertically center in navbar
-}
-.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
-}
+ &.collapse {
+ display: block !important;
+ height: auto !important;
+ padding-bottom: 0; // Override default setting
+ overflow: visible !important;
+ }
-// Navbar forms
-// -------------------------
-.navbar-form {
- margin-bottom: 0; // remove default bottom margin
- .clearfix();
- input,
- select,
- .radio,
- .checkbox {
- .navbarVerticalAlign(30px); // 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: 5px;
- 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
+ &.in {
+ overflow-y: visible;
}
+
+ // Undo the collapse side padding for navbars with containers to ensure
+ // alignment of right-aligned contents.
+ .navbar-fixed-top &,
+ .navbar-static-top &,
+ .navbar-fixed-bottom & {
+ padding-left: 0;
+ padding-right: 0;
+ }
}
}
-// 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
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+ .navbar-collapse {
+ max-height: @navbar-collapse-max-height;
+
+ @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
+ max-height: 200px;
+ }
}
}
+// Both navbar header and collapse
+//
+// When a container is present, change the behavior of the header and collapse.
-// Static navbar
-// -------------------------
+.container,
+.container-fluid {
+ > .navbar-header,
+ > .navbar-collapse {
+ margin-right: -@navbar-padding-horizontal;
+ margin-left: -@navbar-padding-horizontal;
-.navbar-static-top {
- position: static;
- margin-bottom: 0; // remove 18px margin for default navbar
- .navbar-inner {
- .border-radius(0);
+ @media (min-width: @grid-float-breakpoint) {
+ margin-right: 0;
+ margin-left: 0;
+ }
}
}
+//
+// Navbar alignment options
+//
+// Display the navbar across the entirety of the page or fixed it to the top or
+// bottom of the page.
-// Fixed navbar
-// -------------------------
+// Static top (unfixed, but 100% wide) navbar
+.navbar-static-top {
+ z-index: @zindex-navbar;
+ border-width: 0 0 1px;
-// Shared (top/bottom) styles
+ @media (min-width: @grid-float-breakpoint) {
+ border-radius: 0;
+ }
+}
+
+// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
- z-index: @zindexFixedNavbar;
- margin-bottom: 0; // remove 18px margin for default navbar
+ z-index: @zindex-navbar-fixed;
+ .translate3d(0, 0, 0);
+
+ // Undo the rounded corners
+ @media (min-width: @grid-float-breakpoint) {
+ border-radius: 0;
+ }
}
-.navbar-fixed-top .navbar-inner,
-.navbar-static-top .navbar-inner {
+.navbar-fixed-top {
+ top: 0;
border-width: 0 0 1px;
}
-.navbar-fixed-bottom .navbar-inner {
+.navbar-fixed-bottom {
+ bottom: 0;
+ margin-bottom: 0; // override .navbar defaults
border-width: 1px 0 0;
}
-.navbar-fixed-top .navbar-inner,
-.navbar-fixed-bottom .navbar-inner {
- padding-left: 0;
- padding-right: 0;
- .border-radius(0);
-}
-// Reset container width
-// Required here as we reset the width earlier on and the grid mixins don't override early enough
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
- #grid > .core > .span(@gridColumns);
-}
-// Fixed to top
-.navbar-fixed-top {
- top: 0;
-}
-.navbar-fixed-top,
-.navbar-static-top {
- .navbar-inner {
- .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
+// Brand/project name
+
+.navbar-brand {
+ float: left;
+ padding: @navbar-padding-vertical @navbar-padding-horizontal;
+ font-size: @font-size-large;
+ line-height: @line-height-computed;
+ height: @navbar-height;
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
}
-}
-// Fixed to bottom
-.navbar-fixed-bottom {
- bottom: 0;
- .navbar-inner {
- .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
+ > img {
+ display: block;
}
+
+ @media (min-width: @grid-float-breakpoint) {
+ .navbar > .container &,
+ .navbar > .container-fluid & {
+ margin-left: -@navbar-padding-horizontal;
+ }
+ }
}
+// Navbar toggle
+//
+// Custom button for toggling the `.navbar-collapse`, powered by the collapse
+// JavaScript plugin.
-// NAVIGATION
-// ----------
-
-.navbar .nav {
+.navbar-toggle {
position: relative;
- left: 0;
- display: block;
- float: left;
- margin: 0 10px 0 0;
-}
-.navbar .nav.pull-right {
- float: right; // redeclare due to specificity
- margin-right: 0; // remove margin on float right nav
-}
-.navbar .nav > li {
- float: left;
-}
+ float: right;
+ margin-right: @navbar-padding-horizontal;
+ padding: 9px 10px;
+ .navbar-vertical-align(34px);
+ background-color: transparent;
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+ border: 1px solid transparent;
+ border-radius: @border-radius-base;
-// Links
-.navbar .nav > li > a {
- float: none;
- // Vertically center the text given @navbarHeight
- padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
- color: @navbarLinkColor;
- text-decoration: none;
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
-}
-.navbar .nav .dropdown-toggle .caret {
- margin-top: 8px;
-}
+ // We remove the `outline` here, but later compensate by attaching `:hover`
+ // styles to `:focus`.
+ &:focus {
+ outline: 0;
+ }
-// Hover/focus
-.navbar .nav > li > a:focus,
-.navbar .nav > li > a:hover {
- background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
- color: @navbarLinkColorHover;
- text-decoration: none;
-}
+ // Bars
+ .icon-bar {
+ display: block;
+ width: 22px;
+ height: 2px;
+ border-radius: 1px;
+ }
+ .icon-bar + .icon-bar {
+ margin-top: 4px;
+ }
-// 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;
- .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
+ @media (min-width: @grid-float-breakpoint) {
+ display: none;
+ }
}
-// 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;
-}
+// Navbar nav links
+//
+// Builds on top of the `.nav` components with its own modifier class to make
+// the nav the full height of the horizontal nav (above 768px).
+.navbar-nav {
+ margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
-// Dropdown menus
-// --------------
+ > li > a {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ line-height: @line-height-computed;
+ }
-// Menu position and menu carets
-.navbar .nav > li > .dropdown-menu {
- &:before {
- content: '';
- display: inline-block;
- border-left: 7px solid transparent;
- border-right: 7px solid transparent;
- border-bottom: 7px solid #ccc;
- border-bottom-color: @dropdownBorder;
- position: absolute;
- top: -7px;
- left: 9px;
+ @media (max-width: @grid-float-breakpoint-max) {
+ // Dropdowns get custom display when collapsed
+ .open .dropdown-menu {
+ position: static;
+ float: none;
+ width: auto;
+ margin-top: 0;
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+ > li > a,
+ .dropdown-header {
+ padding: 5px 15px 5px 25px;
+ }
+ > li > a {
+ line-height: @line-height-computed;
+ &:hover,
+ &:focus {
+ background-image: none;
+ }
+ }
+ }
}
- &: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;
+
+ // Uncollapse the nav
+ @media (min-width: @grid-float-breakpoint) {
+ float: left;
+ margin: 0;
+
+ > li {
+ float: left;
+ > a {
+ padding-top: @navbar-padding-vertical;
+ padding-bottom: @navbar-padding-vertical;
+ }
+ }
}
}
-// 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: @dropdownBorder;
- border-bottom: 0;
- bottom: -7px;
- top: auto;
+
+
+// Navbar form
+//
+// Extension of the `.form-inline` with some extra flavor for optimum display in
+// our navbars.
+
+.navbar-form {
+ margin-left: -@navbar-padding-horizontal;
+ margin-right: -@navbar-padding-horizontal;
+ padding: 10px @navbar-padding-horizontal;
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+ .box-shadow(@shadow);
+
+ // Mixin behavior for optimum display
+ .form-inline();
+
+ .form-group {
+ @media (max-width: @grid-float-breakpoint-max) {
+ margin-bottom: 5px;
+ }
}
- &:after {
- border-top: 6px solid @dropdownBackground;
- border-bottom: 0;
- bottom: -6px;
- top: auto;
+
+ // Vertically center in expanded, horizontal navbar
+ .navbar-vertical-align(@input-height-base);
+
+ // Undo 100% width for pull classes
+ @media (min-width: @grid-float-breakpoint) {
+ width: auto;
+ border: 0;
+ margin-left: 0;
+ margin-right: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ .box-shadow(none);
}
}
-// 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: @navbarLinkColorHover;
- border-bottom-color: @navbarLinkColorHover;
-}
-// 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;
+// Dropdown menus
+
+// Menu position and menu carets
+.navbar-nav > li > .dropdown-menu {
+ margin-top: 0;
+ .border-top-radius(0);
}
-.navbar .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarLinkColor;
- border-bottom-color: @navbarLinkColor;
+// Menu position and menu caret support for dropups via extra dropup class
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
+ .border-bottom-radius(0);
}
-.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 > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
- left: auto;
- right: 0;
- &:before {
- left: auto;
- right: 12px;
+
+// Buttons in navbars
+//
+// Vertically center a button within a navbar (when *not* in a form).
+
+.navbar-btn {
+ .navbar-vertical-align(@input-height-base);
+
+ &.btn-sm {
+ .navbar-vertical-align(@input-height-small);
}
- &:after {
- left: auto;
- right: 13px;
+ &.btn-xs {
+ .navbar-vertical-align(22);
}
- .dropdown-menu {
- left: auto;
- right: 100%;
- margin-left: 0;
- margin-right: -1px;
- .border-radius(6px 0 6px 6px);
+}
+
+
+// Text in navbars
+//
+// Add a class to make any element properly align itself vertically within the navbars.
+
+.navbar-text {
+ .navbar-vertical-align(@line-height-computed);
+
+ @media (min-width: @grid-float-breakpoint) {
+ float: left;
+ margin-left: @navbar-padding-horizontal;
+ margin-right: @navbar-padding-horizontal;
}
}
-// Inverted navbar
-// -------------------------
+// Component alignment
+//
+// Repurpose the pull utilities as their own navbar utilities to avoid specificity
+// issues with parents and chaining. Only do this when the navbar is uncollapsed
+// though so that navbar contents properly stack and align in mobile.
+//
+// Declared after the navbar components to ensure more specificity on the margins.
-.navbar-inverse {
+@media (min-width: @grid-float-breakpoint) {
+ .navbar-left { .pull-left(); }
+ .navbar-right {
+ .pull-right();
+ margin-right: -@navbar-padding-horizontal;
- .navbar-inner {
- #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
- border-color: @navbarInverseBorder;
+ ~ .navbar-right {
+ margin-right: 0;
+ }
}
+}
- .brand,
- .nav > li > a {
- color: @navbarInverseLinkColor;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+
+// Alternate navbars
+// --------------------------------------------------
+
+// Default navbar
+.navbar-default {
+ background-color: @navbar-default-bg;
+ border-color: @navbar-default-border;
+
+ .navbar-brand {
+ color: @navbar-default-brand-color;
&:hover,
&:focus {
- color: @navbarInverseLinkColorHover;
+ color: @navbar-default-brand-hover-color;
+ background-color: @navbar-default-brand-hover-bg;
}
}
- .brand {
- color: @navbarInverseBrandColor;
+ .navbar-text {
+ color: @navbar-default-color;
}
- .navbar-text {
- color: @navbarInverseText;
+ .navbar-nav {
+ > li > a {
+ color: @navbar-default-link-color;
+
+ &:hover,
+ &:focus {
+ color: @navbar-default-link-hover-color;
+ background-color: @navbar-default-link-hover-bg;
+ }
+ }
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: @navbar-default-link-active-color;
+ background-color: @navbar-default-link-active-bg;
+ }
+ }
+ > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ color: @navbar-default-link-disabled-color;
+ background-color: @navbar-default-link-disabled-bg;
+ }
+ }
}
- .nav > li > a:focus,
- .nav > li > a:hover {
- background-color: @navbarInverseLinkBackgroundHover;
- color: @navbarInverseLinkColorHover;
+ .navbar-toggle {
+ border-color: @navbar-default-toggle-border-color;
+ &:hover,
+ &:focus {
+ background-color: @navbar-default-toggle-hover-bg;
+ }
+ .icon-bar {
+ background-color: @navbar-default-toggle-icon-bar-bg;
+ }
}
- .nav .active > a,
- .nav .active > a:hover,
- .nav .active > a:focus {
- color: @navbarInverseLinkColorActive;
- background-color: @navbarInverseLinkBackgroundActive;
+ .navbar-collapse,
+ .navbar-form {
+ border-color: @navbar-default-border;
}
- // Inline text links
+ // Dropdown menu items
+ .navbar-nav {
+ // Remove background color from open dropdown
+ > .open > a {
+ &,
+ &:hover,
+ &:focus {
+ background-color: @navbar-default-link-active-bg;
+ color: @navbar-default-link-active-color;
+ }
+ }
+
+ @media (max-width: @grid-float-breakpoint-max) {
+ // Dropdowns get custom display when collapsed
+ .open .dropdown-menu {
+ > li > a {
+ color: @navbar-default-link-color;
+ &:hover,
+ &:focus {
+ color: @navbar-default-link-hover-color;
+ background-color: @navbar-default-link-hover-bg;
+ }
+ }
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: @navbar-default-link-active-color;
+ background-color: @navbar-default-link-active-bg;
+ }
+ }
+ > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ color: @navbar-default-link-disabled-color;
+ background-color: @navbar-default-link-disabled-bg;
+ }
+ }
+ }
+ }
+ }
+
+
+ // Links in navbars
+ //
+ // Add a class to ensure links outside the navbar nav are colored correctly.
+
.navbar-link {
- color: @navbarInverseLinkColor;
+ color: @navbar-default-link-color;
+ &:hover {
+ color: @navbar-default-link-hover-color;
+ }
+ }
+
+ .btn-link {
+ color: @navbar-default-link-color;
&:hover,
&:focus {
- color: @navbarInverseLinkColorHover;
+ color: @navbar-default-link-hover-color;
}
+ &[disabled],
+ fieldset[disabled] & {
+ &:hover,
+ &:focus {
+ color: @navbar-default-link-disabled-color;
+ }
+ }
}
+}
- // Dividers in navbar
- .divider-vertical {
- border-left-color: @navbarInverseBackground;
- border-right-color: @navbarInverseBackgroundHighlight;
+// Inverse navbar
+
+.navbar-inverse {
+ background-color: @navbar-inverse-bg;
+ border-color: @navbar-inverse-border;
+
+ .navbar-brand {
+ color: @navbar-inverse-brand-color;
+ &:hover,
+ &:focus {
+ color: @navbar-inverse-brand-hover-color;
+ background-color: @navbar-inverse-brand-hover-bg;
+ }
}
- // 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;
+ .navbar-text {
+ color: @navbar-inverse-color;
}
- .nav li.dropdown > a:hover .caret,
- .nav li.dropdown > a:focus .caret {
- border-top-color: @navbarInverseLinkColorActive;
- border-bottom-color: @navbarInverseLinkColorActive;
+
+ .navbar-nav {
+ > li > a {
+ color: @navbar-inverse-link-color;
+
+ &:hover,
+ &:focus {
+ color: @navbar-inverse-link-hover-color;
+ background-color: @navbar-inverse-link-hover-bg;
+ }
+ }
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: @navbar-inverse-link-active-color;
+ background-color: @navbar-inverse-link-active-bg;
+ }
+ }
+ > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ color: @navbar-inverse-link-disabled-color;
+ background-color: @navbar-inverse-link-disabled-bg;
+ }
+ }
}
- .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarInverseLinkColor;
- border-bottom-color: @navbarInverseLinkColor;
+
+ // Darken the responsive nav toggle
+ .navbar-toggle {
+ border-color: @navbar-inverse-toggle-border-color;
+ &:hover,
+ &:focus {
+ background-color: @navbar-inverse-toggle-hover-bg;
+ }
+ .icon-bar {
+ background-color: @navbar-inverse-toggle-icon-bar-bg;
+ }
}
- .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-collapse,
+ .navbar-form {
+ border-color: darken(@navbar-inverse-bg, 7%);
}
- // 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);
+ // Dropdowns
+ .navbar-nav {
+ > .open > a {
+ &,
+ &:hover,
+ &:focus {
+ background-color: @navbar-inverse-link-active-bg;
+ color: @navbar-inverse-link-active-color;
+ }
+ }
- // 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;
+ @media (max-width: @grid-float-breakpoint-max) {
+ // Dropdowns get custom display
+ .open .dropdown-menu {
+ > .dropdown-header {
+ border-color: @navbar-inverse-border;
+ }
+ .divider {
+ background-color: @navbar-inverse-border;
+ }
+ > li > a {
+ color: @navbar-inverse-link-color;
+ &:hover,
+ &:focus {
+ color: @navbar-inverse-link-hover-color;
+ background-color: @navbar-inverse-link-hover-bg;
+ }
+ }
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: @navbar-inverse-link-active-color;
+ background-color: @navbar-inverse-link-active-bg;
+ }
+ }
+ > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ color: @navbar-inverse-link-disabled-color;
+ background-color: @navbar-inverse-link-disabled-bg;
+ }
+ }
}
}
}
- // Navbar collapse button
- .btn-navbar {
- .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
+ .navbar-link {
+ color: @navbar-inverse-link-color;
+ &:hover {
+ color: @navbar-inverse-link-hover-color;
+ }
}
+ .btn-link {
+ color: @navbar-inverse-link-color;
+ &:hover,
+ &:focus {
+ color: @navbar-inverse-link-hover-color;
+ }
+ &[disabled],
+ fieldset[disabled] & {
+ &:hover,
+ &:focus {
+ color: @navbar-inverse-link-disabled-color;
+ }
+ }
+ }
}