dropdowns.less 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. // DROPDOWN MENUS
  2. // --------------
  3. // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
  4. .dropdown {
  5. position: relative;
  6. }
  7. .dropdown-toggle {
  8. // The caret makes the toggle a bit too tall in IE7
  9. *margin-bottom: -3px;
  10. }
  11. .dropdown-toggle:active,
  12. .open .dropdown-toggle {
  13. outline: 0;
  14. }
  15. // Dropdown arrow/caret
  16. // --------------------
  17. .caret {
  18. display: inline-block;
  19. width: 0;
  20. height: 0;
  21. vertical-align: top;
  22. border-left: 4px solid transparent;
  23. border-right: 4px solid transparent;
  24. border-top: 4px solid @black;
  25. .opacity(30);
  26. content: "";
  27. }
  28. // Place the caret
  29. .dropdown .caret {
  30. margin-top: 8px;
  31. margin-left: 2px;
  32. }
  33. .dropdown:hover .caret,
  34. .open.dropdown .caret {
  35. .opacity(100);
  36. }
  37. // The dropdown menu (ul)
  38. // ----------------------
  39. .dropdown-menu {
  40. position: absolute;
  41. top: 100%;
  42. left: 0;
  43. z-index: @zindexDropdown;
  44. float: left;
  45. display: none; // none by default, but block on "open" of the menu
  46. min-width: 160px;
  47. padding: 4px 0;
  48. margin: 0; // override default ul
  49. list-style: none;
  50. background-color: @dropdownBackground;
  51. border-color: #ccc;
  52. border-color: rgba(0,0,0,.2);
  53. border-style: solid;
  54. border-width: 1px;
  55. .border-radius(0 0 5px 5px);
  56. .box-shadow(0 5px 10px rgba(0,0,0,.2));
  57. -webkit-background-clip: padding-box;
  58. -moz-background-clip: padding;
  59. background-clip: padding-box;
  60. *border-right-width: 2px;
  61. *border-bottom-width: 2px;
  62. // Aligns the dropdown menu to right
  63. &.pull-right {
  64. right: 0;
  65. left: auto;
  66. }
  67. // Dividers (basically an hr) within the dropdown
  68. .divider {
  69. .nav-divider();
  70. }
  71. // Links within the dropdown menu
  72. a {
  73. display: block;
  74. padding: 3px 15px;
  75. clear: both;
  76. font-weight: normal;
  77. line-height: @baseLineHeight;
  78. color: @dropdownLinkColor;
  79. white-space: nowrap;
  80. }
  81. }
  82. // Hover state
  83. // -----------
  84. .dropdown-menu li > a:hover,
  85. .dropdown-menu .active > a,
  86. .dropdown-menu .active > a:hover {
  87. color: @dropdownLinkColorHover;
  88. text-decoration: none;
  89. background-color: @dropdownLinkBackgroundHover;
  90. }
  91. // Open state for the dropdown
  92. // ---------------------------
  93. .dropdown.open {
  94. // IE7's z-index only goes to the nearest positioned ancestor, which would
  95. // make the menu appear below buttons that appeared later on the page
  96. *z-index: @zindexDropdown;
  97. .dropdown-toggle {
  98. color: @white;
  99. background: #ccc;
  100. background: rgba(0,0,0,.3);
  101. }
  102. .dropdown-menu {
  103. display: block;
  104. }
  105. }
  106. // Right aligned dropdowns
  107. .pull-right .dropdown-menu {
  108. left: auto;
  109. right: 0;
  110. }
  111. // Allow for dropdowns to go bottom up (aka, dropup-menu)
  112. // ------------------------------------------------------
  113. // Just add .dropup after the standard .dropdown class and you're set, bro.
  114. // TODO: abstract this so that the navbar fixed styles are not placed here?
  115. .dropup,
  116. .navbar-fixed-bottom .dropdown {
  117. // Reverse the caret
  118. .caret {
  119. border-top: 0;
  120. border-bottom: 4px solid @black;
  121. content: "\2191";
  122. }
  123. // Different positioning for bottom up menu
  124. .dropdown-menu {
  125. top: auto;
  126. bottom: 100%;
  127. margin-bottom: 1px;
  128. }
  129. }
  130. // Typeahead
  131. // ---------
  132. .typeahead {
  133. margin-top: 2px; // give it some space to breathe
  134. .border-radius(4px);
  135. }