1
0

button-groups.less 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. //
  2. // Button groups
  3. // --------------------------------------------------
  4. // Make the div behave like a button
  5. .btn-group {
  6. position: relative;
  7. display: inline-block;
  8. .ie7-inline-block();
  9. font-size: 0; // remove as part 1 of font-size inline-block hack
  10. vertical-align: middle; // match .btn alignment given font-size hack above
  11. white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
  12. .ie7-restore-left-whitespace();
  13. }
  14. // Space out series of button groups
  15. .btn-group + .btn-group {
  16. margin-left: 5px;
  17. }
  18. // Optional: Group multiple button groups together for a toolbar
  19. .btn-toolbar {
  20. font-size: 0; // Hack to remove whitespace that results from using inline-block
  21. margin-top: @baseLineHeight / 2;
  22. margin-bottom: @baseLineHeight / 2;
  23. > .btn + .btn,
  24. > .btn-group + .btn,
  25. > .btn + .btn-group {
  26. margin-left: 5px;
  27. }
  28. }
  29. // Float them, remove border radius, then re-add to first and last elements
  30. .btn-group > .btn {
  31. position: relative;
  32. .border-radius(0);
  33. }
  34. .btn-group > .btn + .btn {
  35. margin-left: -1px;
  36. }
  37. .btn-group > .btn,
  38. .btn-group > .dropdown-menu,
  39. .btn-group > .popover {
  40. font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
  41. }
  42. // Reset fonts for other sizes
  43. .btn-group > .btn-mini {
  44. font-size: @fontSizeMini;
  45. }
  46. .btn-group > .btn-small {
  47. font-size: @fontSizeSmall;
  48. }
  49. .btn-group > .btn-large {
  50. font-size: @fontSizeLarge;
  51. }
  52. // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
  53. .btn-group > .btn:first-child {
  54. margin-left: 0;
  55. .border-top-left-radius(@baseBorderRadius);
  56. .border-bottom-left-radius(@baseBorderRadius);
  57. }
  58. // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
  59. .btn-group > .btn:last-child,
  60. .btn-group > .dropdown-toggle {
  61. .border-top-right-radius(@baseBorderRadius);
  62. .border-bottom-right-radius(@baseBorderRadius);
  63. }
  64. // Reset corners for large buttons
  65. .btn-group > .btn.large:first-child {
  66. margin-left: 0;
  67. .border-top-left-radius(@borderRadiusLarge);
  68. .border-bottom-left-radius(@borderRadiusLarge);
  69. }
  70. .btn-group > .btn.large:last-child,
  71. .btn-group > .large.dropdown-toggle {
  72. .border-top-right-radius(@borderRadiusLarge);
  73. .border-bottom-right-radius(@borderRadiusLarge);
  74. }
  75. // On hover/focus/active, bring the proper btn to front
  76. .btn-group > .btn:hover,
  77. .btn-group > .btn:focus,
  78. .btn-group > .btn:active,
  79. .btn-group > .btn.active {
  80. z-index: 2;
  81. }
  82. // On active and open, don't show outline
  83. .btn-group .dropdown-toggle:active,
  84. .btn-group.open .dropdown-toggle {
  85. outline: 0;
  86. }
  87. // Split button dropdowns
  88. // ----------------------
  89. // Give the line between buttons some depth
  90. .btn-group > .btn + .dropdown-toggle {
  91. padding-left: 8px;
  92. padding-right: 8px;
  93. .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
  94. *padding-top: 5px;
  95. *padding-bottom: 5px;
  96. }
  97. .btn-group > .btn-mini + .dropdown-toggle {
  98. padding-left: 5px;
  99. padding-right: 5px;
  100. *padding-top: 2px;
  101. *padding-bottom: 2px;
  102. }
  103. .btn-group > .btn-small + .dropdown-toggle {
  104. *padding-top: 5px;
  105. *padding-bottom: 4px;
  106. }
  107. .btn-group > .btn-large + .dropdown-toggle {
  108. padding-left: 12px;
  109. padding-right: 12px;
  110. *padding-top: 7px;
  111. *padding-bottom: 7px;
  112. }
  113. .btn-group.open {
  114. // The clickable button for toggling the menu
  115. // Remove the gradient and set the same inset shadow as the :active state
  116. .dropdown-toggle {
  117. background-image: none;
  118. .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
  119. }
  120. // Keep the hover's background when dropdown is open
  121. .btn.dropdown-toggle {
  122. background-color: @btnBackgroundHighlight;
  123. }
  124. .btn-primary.dropdown-toggle {
  125. background-color: @btnPrimaryBackgroundHighlight;
  126. }
  127. .btn-warning.dropdown-toggle {
  128. background-color: @btnWarningBackgroundHighlight;
  129. }
  130. .btn-danger.dropdown-toggle {
  131. background-color: @btnDangerBackgroundHighlight;
  132. }
  133. .btn-success.dropdown-toggle {
  134. background-color: @btnSuccessBackgroundHighlight;
  135. }
  136. .btn-info.dropdown-toggle {
  137. background-color: @btnInfoBackgroundHighlight;
  138. }
  139. .btn-inverse.dropdown-toggle {
  140. background-color: @btnInverseBackgroundHighlight;
  141. }
  142. }
  143. // Reposition the caret
  144. .btn .caret {
  145. margin-top: 8px;
  146. margin-left: 0;
  147. }
  148. // Carets in other button sizes
  149. .btn-large .caret {
  150. margin-top: 6px;
  151. }
  152. .btn-large .caret {
  153. border-left-width: 5px;
  154. border-right-width: 5px;
  155. border-top-width: 5px;
  156. }
  157. .btn-mini .caret,
  158. .btn-small .caret {
  159. margin-top: 8px;
  160. }
  161. // Upside down carets for .dropup
  162. .dropup .btn-large .caret {
  163. border-bottom-width: 5px;
  164. }
  165. // Account for other colors
  166. .btn-primary,
  167. .btn-warning,
  168. .btn-danger,
  169. .btn-info,
  170. .btn-success,
  171. .btn-inverse {
  172. .caret {
  173. border-top-color: @white;
  174. border-bottom-color: @white;
  175. }
  176. }
  177. // Vertical button groups
  178. // ----------------------
  179. .btn-group-vertical {
  180. display: inline-block; // makes buttons only take up the width they need
  181. .ie7-inline-block();
  182. }
  183. .btn-group-vertical > .btn {
  184. display: block;
  185. float: none;
  186. max-width: 100%;
  187. .border-radius(0);
  188. }
  189. .btn-group-vertical > .btn + .btn {
  190. margin-left: 0;
  191. margin-top: -1px;
  192. }
  193. .btn-group-vertical > .btn:first-child {
  194. .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
  195. }
  196. .btn-group-vertical > .btn:last-child {
  197. .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
  198. }
  199. .btn-group-vertical > .btn-large:first-child {
  200. .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
  201. }
  202. .btn-group-vertical > .btn-large:last-child {
  203. .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
  204. }