info@53: // info@53: // Dropdown menus info@53: // -------------------------------------------------- info@53: info@53: info@53: // Dropdown arrow/caret info@53: .caret { info@53: display: inline-block; info@53: width: 0; info@53: height: 0; info@53: margin-left: 2px; info@53: vertical-align: middle; info@53: border-top: @caret-width-base solid; info@53: border-right: @caret-width-base solid transparent; info@53: border-left: @caret-width-base solid transparent; info@53: } info@53: info@53: // The dropdown wrapper (div) info@53: .dropdown { info@53: position: relative; info@53: } info@53: info@53: // Prevent the focus on the dropdown toggle when closing dropdowns info@53: .dropdown-toggle:focus { info@53: outline: 0; info@53: } info@53: info@53: // The dropdown menu (ul) info@53: .dropdown-menu { info@53: position: absolute; info@53: top: 100%; info@53: left: 0; info@53: z-index: @zindex-dropdown; info@53: display: none; // none by default, but block on "open" of the menu info@53: float: left; info@53: min-width: 160px; info@53: padding: 5px 0; info@53: margin: 2px 0 0; // override default ul info@53: list-style: none; info@53: font-size: @font-size-base; info@53: background-color: @dropdown-bg; info@53: border: 1px solid @dropdown-fallback-border; // IE8 fallback info@53: border: 1px solid @dropdown-border; info@53: border-radius: @border-radius-base; info@53: .box-shadow(0 6px 12px rgba(0,0,0,.175)); info@53: background-clip: padding-box; info@53: info@53: // Aligns the dropdown menu to right info@53: &.pull-right { info@53: right: 0; info@53: left: auto; info@53: } info@53: info@53: // Dividers (basically an hr) within the dropdown info@53: .divider { info@53: .nav-divider(@dropdown-divider-bg); info@53: } info@53: info@53: // Links within the dropdown menu info@53: > li > a { info@53: display: block; info@53: padding: 3px 20px; info@53: clear: both; info@53: font-weight: normal; info@53: line-height: @line-height-base; info@53: color: @dropdown-link-color; info@53: white-space: nowrap; // prevent links from randomly breaking onto new lines info@53: } info@53: } info@53: info@53: // Hover/Focus state info@53: .dropdown-menu > li > a { info@53: &:hover, info@53: &:focus { info@53: text-decoration: none; info@53: color: @dropdown-link-hover-color; info@53: background-color: @dropdown-link-hover-bg; info@53: } info@53: } info@53: info@53: // Active state info@53: .dropdown-menu > .active > a { info@53: &, info@53: &:hover, info@53: &:focus { info@53: color: @dropdown-link-active-color; info@53: text-decoration: none; info@53: outline: 0; info@53: background-color: @dropdown-link-active-bg; info@53: } info@53: } info@53: info@53: // Disabled state info@53: // info@53: // Gray out text and ensure the hover/focus state remains gray info@53: info@53: .dropdown-menu > .disabled > a { info@53: &, info@53: &:hover, info@53: &:focus { info@53: color: @dropdown-link-disabled-color; info@53: } info@53: } info@53: // Nuke hover/focus effects info@53: .dropdown-menu > .disabled > a { info@53: &:hover, info@53: &:focus { info@53: text-decoration: none; info@53: background-color: transparent; info@53: background-image: none; // Remove CSS gradient info@53: .reset-filter(); info@53: cursor: not-allowed; info@53: } info@53: } info@53: info@53: // Open state for the dropdown info@53: .open { info@53: // Show the menu info@53: > .dropdown-menu { info@53: display: block; info@53: } info@53: info@53: // Remove the outline when :focus is triggered info@53: > a { info@53: outline: 0; info@53: } info@53: } info@53: info@53: // Dropdown section headers info@53: .dropdown-header { info@53: display: block; info@53: padding: 3px 20px; info@53: font-size: @font-size-small; info@53: line-height: @line-height-base; info@53: color: @dropdown-header-color; info@53: } info@53: info@53: // Backdrop to catch body clicks on mobile, etc. info@53: .dropdown-backdrop { info@53: position: fixed; info@53: left: 0; info@53: right: 0; info@53: bottom: 0; info@53: top: 0; info@53: z-index: @zindex-dropdown - 10; info@53: } info@53: info@53: // Right aligned dropdowns info@53: .pull-right > .dropdown-menu { info@53: right: 0; info@53: left: auto; info@53: } info@53: info@53: // Allow for dropdowns to go bottom up (aka, dropup-menu) info@53: // info@53: // Just add .dropup after the standard .dropdown class and you're set, bro. info@53: // TODO: abstract this so that the navbar fixed styles are not placed here? info@53: info@53: .dropup, info@53: .navbar-fixed-bottom .dropdown { info@53: // Reverse the caret info@53: .caret { info@53: border-top: 0; info@53: border-bottom: @caret-width-base solid; info@53: content: ""; info@53: } info@53: // Different positioning for bottom up menu info@53: .dropdown-menu { info@53: top: auto; info@53: bottom: 100%; info@53: margin-bottom: 1px; info@53: } info@53: } info@53: info@53: info@53: // Component alignment info@53: // info@53: // Reiterate per navbar.less and the modified component alignment there. info@53: info@53: @media (min-width: @grid-float-breakpoint) { info@53: .navbar-right { info@53: .dropdown-menu { info@53: .pull-right > .dropdown-menu(); info@53: } info@53: } info@53: } info@53: