diff options
| author | Jacob Thornton <[email protected]> | 2011-12-22 19:15:09 -0800 |
|---|---|---|
| committer | Jacob Thornton <[email protected]> | 2011-12-22 19:15:09 -0800 |
| commit | 35fdbad24b908714ff1a1221945598527a641863 (patch) | |
| tree | 0a054ac3f3b913fb16f71731b4b04472311afc4a /lib/dropdowns.less | |
| parent | 87ac818253a26bcf09fa55f78ae3f55759c54e64 (diff) | |
| parent | 9fb380151d477f1741b7609ade7a9e7fd5450b2c (diff) | |
| download | bootstrap-35fdbad24b908714ff1a1221945598527a641863.tar.xz bootstrap-35fdbad24b908714ff1a1221945598527a641863.zip | |
Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
Conflicts:
bootstrap.css
docs/assets/js/application.js
docs/base-css.html
docs/components.html
docs/index.html
docs/javascript.html
docs/less.html
docs/scaffolding.html
docs/upgrading.html
Diffstat (limited to 'lib/dropdowns.less')
| -rw-r--r-- | lib/dropdowns.less | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/lib/dropdowns.less b/lib/dropdowns.less new file mode 100644 index 000000000..7436f6a2c --- /dev/null +++ b/lib/dropdowns.less @@ -0,0 +1,94 @@ +// 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; +} +// The link that is clicked to toggle the dropdown +.dropdown-toggle:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(30); + content: "↓"; +} +.dropdown:hover .dropdown-toggle:after { + .opacity(100); +} +// The dropdown menu (ul) +.dropdown-menu { + position: absolute; + top: 40px; + z-index: 900; + float: left; + display: none; // None by default, but block on "open" of the menu + min-width: 160px; + max-width: 220px; + _width: 160px; + padding: 6px 0; + margin-left: 0; // override default ul styles + margin-right: 0; + background-color: @white; + border-color: #999; + border-color: rgba(0,0,0,.2); + border-style: solid; + border-width: 0 1px 1px; + .border-radius(0 0 6px 6px); + .box-shadow(0 2px 4px rgba(0,0,0,.2)); + .background-clip(padding-box); + zoom: 1; // do we need this? + + // Unfloat any li's to make them stack + li { + float: none; + display: block; + background-color: none; + } + // Dividers (basically an hr) within the dropdown + .divider { + height: 1px; + margin: 5px 0; + overflow: hidden; + background-color: #eee; + border-bottom: 1px solid @white; + } +} + +.topbar .dropdown-menu, .dropdown-menu { + // Links within the dropdown menu + a { + display: block; + padding: 4px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: @gray; + text-shadow: 0 1px 0 @white; + // Hover state + &:hover { + color: @grayDark; + text-decoration: none; + #gradient > .vertical(#eeeeee, #dddddd); + @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); + .box-shadow(@shadow); + } + } +} + +// Open state for the dropdown +.dropdown.open { + .dropdown-toggle { + color: @white; + background: #ccc; + background: rgba(0,0,0,.3); + } + .dropdown-menu { + display: block; + } +} |
