button-groups.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. //
  2. // Button groups
  3. // --------------------------------------------------
  4. // Make the div behave like a button
  5. .btn-group,
  6. .btn-group-vertical {
  7. position: relative;
  8. display: inline-block;
  9. vertical-align: middle; // match .btn alignment given font-size hack above
  10. > .btn {
  11. position: relative;
  12. float: left;
  13. // Bring the "active" button to the front
  14. &:hover,
  15. &:focus,
  16. &:active,
  17. &.active {
  18. z-index: 2;
  19. }
  20. &:focus {
  21. // Remove focus outline when dropdown JS adds it after closing the menu
  22. outline: none;
  23. }
  24. }
  25. }
  26. // Prevent double borders when buttons are next to each other
  27. .btn-group {
  28. .btn + .btn,
  29. .btn + .btn-group,
  30. .btn-group + .btn,
  31. .btn-group + .btn-group {
  32. margin-left: -1px;
  33. }
  34. }
  35. // Optional: Group multiple button groups together for a toolbar
  36. .btn-toolbar {
  37. .clearfix();
  38. .btn-group {
  39. float: left;
  40. }
  41. // Space out series of button groups
  42. > .btn,
  43. > .btn-group {
  44. + .btn,
  45. + .btn-group {
  46. margin-left: 5px;
  47. }
  48. }
  49. }
  50. .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  51. border-radius: 0;
  52. }
  53. // 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
  54. .btn-group > .btn:first-child {
  55. margin-left: 0;
  56. &:not(:last-child):not(.dropdown-toggle) {
  57. .border-right-radius(0);
  58. }
  59. }
  60. // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
  61. .btn-group > .btn:last-child:not(:first-child),
  62. .btn-group > .dropdown-toggle:not(:first-child) {
  63. .border-left-radius(0);
  64. }
  65. // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
  66. .btn-group > .btn-group {
  67. float: left;
  68. }
  69. .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  70. border-radius: 0;
  71. }
  72. .btn-group > .btn-group:first-child {
  73. > .btn:last-child,
  74. > .dropdown-toggle {
  75. .border-right-radius(0);
  76. }
  77. }
  78. .btn-group > .btn-group:last-child > .btn:first-child {
  79. .border-left-radius(0);
  80. }
  81. // On active and open, don't show outline
  82. .btn-group .dropdown-toggle:active,
  83. .btn-group.open .dropdown-toggle {
  84. outline: 0;
  85. }
  86. // Sizing
  87. //
  88. // Remix the default button sizing classes into new ones for easier manipulation.
  89. .btn-group-xs > .btn { .btn-xs(); }
  90. .btn-group-sm > .btn { .btn-sm(); }
  91. .btn-group-lg > .btn { .btn-lg(); }
  92. // Split button dropdowns
  93. // ----------------------
  94. // Give the line between buttons some depth
  95. .btn-group > .btn + .dropdown-toggle {
  96. padding-left: 8px;
  97. padding-right: 8px;
  98. }
  99. .btn-group > .btn-lg + .dropdown-toggle {
  100. padding-left: 12px;
  101. padding-right: 12px;
  102. }
  103. // The clickable button for toggling the menu
  104. // Remove the gradient and set the same inset shadow as the :active state
  105. .btn-group.open .dropdown-toggle {
  106. .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  107. // Show no shadow for `.btn-link` since it has no other button styles.
  108. &.btn-link {
  109. .box-shadow(none);
  110. }
  111. }
  112. // Reposition the caret
  113. .btn .caret {
  114. margin-left: 0;
  115. }
  116. // Carets in other button sizes
  117. .btn-lg .caret {
  118. border-width: @caret-width-large @caret-width-large 0;
  119. border-bottom-width: 0;
  120. }
  121. // Upside down carets for .dropup
  122. .dropup .btn-lg .caret {
  123. border-width: 0 @caret-width-large @caret-width-large;
  124. }
  125. // Vertical button groups
  126. // ----------------------
  127. .btn-group-vertical {
  128. > .btn,
  129. > .btn-group,
  130. > .btn-group > .btn {
  131. display: block;
  132. float: none;
  133. width: 100%;
  134. max-width: 100%;
  135. }
  136. // Clear floats so dropdown menus can be properly placed
  137. > .btn-group {
  138. .clearfix();
  139. > .btn {
  140. float: none;
  141. }
  142. }
  143. > .btn + .btn,
  144. > .btn + .btn-group,
  145. > .btn-group + .btn,
  146. > .btn-group + .btn-group {
  147. margin-top: -1px;
  148. margin-left: 0;
  149. }
  150. }
  151. .btn-group-vertical > .btn {
  152. &:not(:first-child):not(:last-child) {
  153. border-radius: 0;
  154. }
  155. &:first-child:not(:last-child) {
  156. border-top-right-radius: @border-radius-base;
  157. .border-bottom-radius(0);
  158. }
  159. &:last-child:not(:first-child) {
  160. border-bottom-left-radius: @border-radius-base;
  161. .border-top-radius(0);
  162. }
  163. }
  164. .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  165. border-radius: 0;
  166. }
  167. .btn-group-vertical > .btn-group:first-child {
  168. > .btn:last-child,
  169. > .dropdown-toggle {
  170. .border-bottom-radius(0);
  171. }
  172. }
  173. .btn-group-vertical > .btn-group:last-child > .btn:first-child {
  174. .border-top-radius(0);
  175. }
  176. // Justified button groups
  177. // ----------------------
  178. .btn-group-justified {
  179. display: table;
  180. width: 100%;
  181. table-layout: fixed;
  182. border-collapse: separate;
  183. > .btn,
  184. > .btn-group {
  185. float: none;
  186. display: table-cell;
  187. width: 1%;
  188. }
  189. > .btn-group .btn {
  190. width: 100%;
  191. }
  192. }
  193. // Checkbox and radio options
  194. [data-toggle="buttons"] > .btn > input[type="radio"],
  195. [data-toggle="buttons"] > .btn > input[type="checkbox"] {
  196. display: none;
  197. }