button-groups.less 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. // BUTTON GROUPS
  2. // -------------
  3. // Make the div behave like a button
  4. .btn-group {
  5. position: relative;
  6. .clearfix(); // clears the floated buttons
  7. .ie7-restore-left-whitespace();
  8. }
  9. // Space out series of button groups
  10. .btn-group + .btn-group {
  11. margin-left: 5px;
  12. }
  13. // Optional: Group multiple button groups together for a toolbar
  14. .btn-toolbar {
  15. margin-top: @baseLineHeight / 2;
  16. margin-bottom: @baseLineHeight / 2;
  17. .btn-group {
  18. display: inline-block;
  19. .ie7-inline-block();
  20. }
  21. }
  22. // Float them, remove border radius, then re-add to first and last elements
  23. .btn-group .btn {
  24. position: relative;
  25. float: left;
  26. margin-left: -1px;
  27. .border-radius(0);
  28. }
  29. // 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
  30. .btn-group .btn:first-child {
  31. margin-left: 0;
  32. -webkit-border-top-left-radius: 4px;
  33. -moz-border-radius-topleft: 4px;
  34. border-top-left-radius: 4px;
  35. -webkit-border-bottom-left-radius: 4px;
  36. -moz-border-radius-bottomleft: 4px;
  37. border-bottom-left-radius: 4px;
  38. }
  39. .btn-group .btn:last-child,
  40. .btn-group .dropdown-toggle {
  41. -webkit-border-top-right-radius: 4px;
  42. -moz-border-radius-topright: 4px;
  43. border-top-right-radius: 4px;
  44. -webkit-border-bottom-right-radius: 4px;
  45. -moz-border-radius-bottomright: 4px;
  46. border-bottom-right-radius: 4px;
  47. }
  48. // Reset corners for large buttons
  49. .btn-group .btn.large:first-child {
  50. margin-left: 0;
  51. -webkit-border-top-left-radius: 6px;
  52. -moz-border-radius-topleft: 6px;
  53. border-top-left-radius: 6px;
  54. -webkit-border-bottom-left-radius: 6px;
  55. -moz-border-radius-bottomleft: 6px;
  56. border-bottom-left-radius: 6px;
  57. }
  58. .btn-group .btn.large:last-child,
  59. .btn-group .large.dropdown-toggle {
  60. -webkit-border-top-right-radius: 6px;
  61. -moz-border-radius-topright: 6px;
  62. border-top-right-radius: 6px;
  63. -webkit-border-bottom-right-radius: 6px;
  64. -moz-border-radius-bottomright: 6px;
  65. border-bottom-right-radius: 6px;
  66. }
  67. // On hover/focus/active, bring the proper btn to front
  68. .btn-group .btn:hover,
  69. .btn-group .btn:focus,
  70. .btn-group .btn:active,
  71. .btn-group .btn.active {
  72. z-index: 2;
  73. }
  74. // On active and open, don't show outline
  75. .btn-group .dropdown-toggle:active,
  76. .btn-group.open .dropdown-toggle {
  77. outline: 0;
  78. }
  79. // Split button dropdowns
  80. // ----------------------
  81. // Give the line between buttons some depth
  82. .btn-group .dropdown-toggle {
  83. padding-left: 8px;
  84. padding-right: 8px;
  85. @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);
  86. .box-shadow(@shadow);
  87. *padding-top: 3px;
  88. *padding-bottom: 3px;
  89. }
  90. .btn-group .btn-mini.dropdown-toggle {
  91. padding-left: 5px;
  92. padding-right: 5px;
  93. *padding-top: 1px;
  94. *padding-bottom: 1px;
  95. }
  96. .btn-group .btn-small.dropdown-toggle {
  97. *padding-top: 4px;
  98. *padding-bottom: 4px;
  99. }
  100. .btn-group .btn-large.dropdown-toggle {
  101. padding-left: 12px;
  102. padding-right: 12px;
  103. }
  104. .btn-group.open {
  105. // IE7's z-index only goes to the nearest positioned ancestor, which would
  106. // make the menu appear below buttons that appeared later on the page
  107. *z-index: @zindexDropdown;
  108. // Reposition menu on open and round all corners
  109. .dropdown-menu {
  110. display: block;
  111. margin-top: 1px;
  112. .border-radius(5px);
  113. }
  114. .dropdown-toggle {
  115. background-image: none;
  116. @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  117. .box-shadow(@shadow);
  118. }
  119. }
  120. // Reposition the caret
  121. .btn .caret {
  122. margin-top: 7px;
  123. margin-left: 0;
  124. }
  125. .btn:hover .caret,
  126. .open.btn-group .caret {
  127. .opacity(100);
  128. }
  129. // Carets in other button sizes
  130. .btn-mini .caret {
  131. margin-top: 5px;
  132. }
  133. .btn-small .caret {
  134. margin-top: 6px;
  135. }
  136. .btn-large .caret {
  137. margin-top: 6px;
  138. border-left: 5px solid transparent;
  139. border-right: 5px solid transparent;
  140. border-top: 5px solid @black;
  141. }
  142. // Account for other colors
  143. .btn-primary,
  144. .btn-warning,
  145. .btn-danger,
  146. .btn-info,
  147. .btn-success,
  148. .btn-inverse {
  149. .caret {
  150. border-top-color: @white;
  151. border-bottom-color: @white;
  152. .opacity(75);
  153. }
  154. }