diff options
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss')
-rw-r--r-- | xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss new file mode 100644 index 0000000..085b5c3 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss @@ -0,0 +1,126 @@ +// DROPDOWN MENUS +// -------------- + +// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns +.dropdown { + position: relative; +} +.dropdown-toggle { + // The caret makes the toggle a bit too tall in IE7 + *margin-bottom: -3px; +} +.dropdown-toggle:active, .open .dropdown-toggle { + outline: 0; +} +// Dropdown arrow/caret +.caret { + display: inline-block; + width: 0; + height: 0; + text-indent: -99999px; + // IE7 won't do the border trick if there's a text indent, but it doesn't + // do the content that text-indent is hiding, either, so we're ok. + *text-indent: 0; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid $black; + @include opacity(0.3); + content: "\2193"; +} +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; +} +.dropdown:hover .caret, .open.dropdown .caret { + @include opacity(1); +} +// The dropdown menu (ul) +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: $zindexDropdown; + float: left; + display: none; // none by default, but block on "open" of the menu + min-width: 160px; + _width: 160px; + padding: 4px 0; + margin: 0; // override default ul + list-style: none; + background-color: $white; + border-color: #ccc; + border-color: rgba(0,0,0,.2); + border-style: solid; + border-width: 1px; + @include border-radius(0 0 5px 5px); + @include box-shadow(0 5px 10px rgba(0,0,0,.2)); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + *border-right-width: 2px; + *border-bottom-width: 2px; + + // Allow for dropdowns to go bottom up (aka, dropup-menu) + &.bottom-up { + top: auto; + bottom: 100%; + margin-bottom: 2px; + } + + // Dividers (basically an hr) within the dropdown + .divider { + height: 1px; + margin: 5px 1px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid $white; + + // IE7 needs a set width since we gave a height. Restricting just + // to IE7 to keep the 1px left/right space in other browsers. + // It is unclear where IE is getting the extra space that we need + // to negative-margin away, but so it goes. + *width: 100%; + *margin: -5px 0 5px; + } + + // Links within the dropdown menu + a { + display: block; + padding: 3px 15px; + clear: both; + font-weight: normal; + line-height: $baseLineHeight; + color: $gray; + white-space: nowrap; + } +} + +// Hover state +.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { + color: $white; + text-decoration: none; + background-color: $linkColor; +} + +// Open state for the dropdown +.dropdown.open { + // IE7's z-index only goes to the nearest positioned ancestor, which would + // make the menu appear below buttons that appeared later on the page + *z-index: $zindexDropdown; + + .dropdown-toggle { + color: $white; + background: #ccc; + background: rgba(0,0,0,.3); + } + .dropdown-menu { + display: block; + } +} + +// Typeahead +.typeahead { + margin-top: 2px; // give it some space to breathe + @include border-radius(4px); +} |