// Button groups
// --------------------------------------------------
-// Button carets
-//
-// Match the button text color to the arrow/caret for indicating dropdown-ness.
-
-.caret {
- .btn-default & {
- border-top-color: @btn-default-color;
- }
- .btn-primary &,
- .btn-success &,
- .btn-warning &,
- .btn-danger &,
- .btn-info & {
- border-top-color: #fff;
- }
-}
-.dropup {
- .btn-default .caret {
- border-bottom-color: @btn-default-color;
- }
- .btn-primary,
- .btn-success,
- .btn-warning,
- .btn-danger,
- .btn-info {
- .caret {
- border-bottom-color: #fff;
- }
- }
-}
-
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
height: 0;
margin-left: 2px;
vertical-align: middle;
- border-top: @caret-width-base solid @dropdown-caret-color;
+ border-top: @caret-width-base solid;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
}
// Reverse the caret
.caret {
border-top: 0;
- border-bottom: @caret-width-base solid @dropdown-caret-color;
+ border-bottom: @caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
+ .panel-collapse .panel-body {
border-top-color: @border;
}
- & > .dropdown .caret {
- border-color: @heading-text-color transparent;
- }
}
& > .panel-footer {
+ .panel-collapse .panel-body {
border-color: @navbar-default-border;
}
- // Dropdown menu items and carets
+ // Dropdown menu items
.navbar-nav {
- // Caret should match text color on hover
- > .dropdown > a:hover .caret,
- > .dropdown > a:focus .caret {
- border-top-color: @navbar-default-link-hover-color;
- border-bottom-color: @navbar-default-link-hover-color;
- }
-
// Remove background color from open dropdown
> .open > a {
&,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
- .caret {
- border-top-color: @navbar-default-link-active-color;
- border-bottom-color: @navbar-default-link-active-color;
- }
}
}
- > .dropdown > a .caret {
- border-top-color: @navbar-default-link-color;
- border-bottom-color: @navbar-default-link-color;
- }
-
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
color: @navbar-inverse-link-active-color;
}
}
- > .dropdown > a:hover .caret {
- border-top-color: @navbar-inverse-link-hover-color;
- border-bottom-color: @navbar-inverse-link-hover-color;
- }
- > .dropdown > a .caret {
- border-top-color: @navbar-inverse-link-color;
- border-bottom-color: @navbar-inverse-link-color;
- }
- > .open > a {
- &,
- &:hover,
- &:focus {
- .caret {
- border-top-color: @navbar-inverse-link-active-color;
- border-bottom-color: @navbar-inverse-link-active-color;
- }
- }
- }
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display
&:focus {
background-color: @nav-link-hover-bg;
border-color: @link-color;
-
- .caret {
- border-top-color: @link-hover-color;
- border-bottom-color: @link-hover-color;
- }
}
}
&:focus {
color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg;
-
- .caret {
- border-top-color: @nav-pills-active-link-hover-color;
- border-bottom-color: @nav-pills-active-link-hover-color;
- }
}
}
}
// Dropdowns
// -------------------------
-// Make dropdown carets use link color in navs
-.nav .caret {
- border-top-color: @link-color;
- border-bottom-color: @link-color;
-}
-.nav a:hover .caret {
- border-top-color: @link-hover-color;
- border-bottom-color: @link-hover-color;
-}
-
// Specific dropdowns
.nav-tabs .dropdown-menu {
// make dropdown border overlap tab border
@dropdown-header-color: @gray-light;
-@dropdown-caret-color: #000;
-
// COMPONENT VARIABLES
// --------------------------------------------------
@nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
-@nav-open-caret-border-color: #fff;
// Tabs
@nav-tabs-border-color: #ddd;