aboutsummaryrefslogtreecommitdiff
path: root/lib/dropdowns.less
diff options
context:
space:
mode:
authorJacob Thornton <[email protected]>2011-12-22 19:15:09 -0800
committerJacob Thornton <[email protected]>2011-12-22 19:15:09 -0800
commit35fdbad24b908714ff1a1221945598527a641863 (patch)
tree0a054ac3f3b913fb16f71731b4b04472311afc4a /lib/dropdowns.less
parent87ac818253a26bcf09fa55f78ae3f55759c54e64 (diff)
parent9fb380151d477f1741b7609ade7a9e7fd5450b2c (diff)
downloadbootstrap-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.less94
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: "&darr;";
+}
+.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;
+ }
+}