buttons.less 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. //
  2. // Buttons
  3. // --------------------------------------------------
  4. // Base styles
  5. // --------------------------------------------------
  6. // Core
  7. .btn {
  8. display: inline-block;
  9. .ie7-inline-block();
  10. padding: 4px 12px;
  11. margin-bottom: 0; // For input.btn
  12. font-size: @baseFontSize;
  13. line-height: @baseLineHeight;
  14. text-align: center;
  15. vertical-align: middle;
  16. cursor: pointer;
  17. .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  18. border: 1px solid @btnBorder;
  19. *border: 0; // Remove the border to prevent IE7's black border on input:focus
  20. border-bottom-color: darken(@btnBorder, 10%);
  21. .border-radius(@baseBorderRadius);
  22. .ie7-restore-left-whitespace(); // Give IE7 some love
  23. .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
  24. // Hover/focus state
  25. &:hover,
  26. &:focus {
  27. color: @grayDark;
  28. text-decoration: none;
  29. background-position: 0 -15px;
  30. // transition is only when going to hover/focus, otherwise the background
  31. // behind the gradient (there for IE<=9 fallback) gets mismatched
  32. .transition(background-position .1s linear);
  33. }
  34. // Focus state for keyboard and accessibility
  35. &:focus {
  36. .tab-focus();
  37. }
  38. // Active state
  39. &.active,
  40. &:active {
  41. background-image: none;
  42. outline: 0;
  43. .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
  44. }
  45. // Disabled state
  46. &.disabled,
  47. &[disabled] {
  48. cursor: default;
  49. background-image: none;
  50. .opacity(65);
  51. .box-shadow(none);
  52. }
  53. }
  54. // Button Sizes
  55. // --------------------------------------------------
  56. // Large
  57. .btn-large {
  58. padding: @paddingLarge;
  59. font-size: @fontSizeLarge;
  60. .border-radius(@borderRadiusLarge);
  61. }
  62. .btn-large [class^="icon-"],
  63. .btn-large [class*=" icon-"] {
  64. margin-top: 4px;
  65. }
  66. // Small
  67. .btn-small {
  68. padding: @paddingSmall;
  69. font-size: @fontSizeSmall;
  70. .border-radius(@borderRadiusSmall);
  71. }
  72. .btn-small [class^="icon-"],
  73. .btn-small [class*=" icon-"] {
  74. margin-top: 0;
  75. }
  76. .btn-mini [class^="icon-"],
  77. .btn-mini [class*=" icon-"] {
  78. margin-top: -1px;
  79. }
  80. // Mini
  81. .btn-mini {
  82. padding: @paddingMini;
  83. font-size: @fontSizeMini;
  84. .border-radius(@borderRadiusSmall);
  85. }
  86. // Block button
  87. // -------------------------
  88. .btn-block {
  89. display: block;
  90. width: 100%;
  91. padding-left: 0;
  92. padding-right: 0;
  93. .box-sizing(border-box);
  94. }
  95. // Vertically space out multiple block buttons
  96. .btn-block + .btn-block {
  97. margin-top: 5px;
  98. }
  99. // Specificity overrides
  100. input[type="submit"],
  101. input[type="reset"],
  102. input[type="button"] {
  103. &.btn-block {
  104. width: 100%;
  105. }
  106. }
  107. // Alternate buttons
  108. // --------------------------------------------------
  109. // Provide *some* extra contrast for those who can get it
  110. .btn-primary.active,
  111. .btn-warning.active,
  112. .btn-danger.active,
  113. .btn-success.active,
  114. .btn-info.active,
  115. .btn-inverse.active {
  116. color: rgba(255,255,255,.75);
  117. }
  118. .btn-primary [class^="icon-"], .btn-primary [class*=" icon-"],
  119. .btn-warning [class^="icon-"], .btn-warning [class*=" icon-"],
  120. .btn-danger [class^="icon-"], .btn-danger [class*=" icon-"],
  121. .btn-success [class^="icon-"], .btn-success [class*=" icon-"],
  122. .btn-info [class^="icon-"], .btn-info [class*=" icon-"],
  123. .btn-inverse [class^="icon-"], .btn-inverse [class*=" icon-"] {
  124. color: @white;
  125. }
  126. // Set the backgrounds
  127. // -------------------------
  128. .btn-primary {
  129. .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
  130. }
  131. // Warning appears are orange
  132. .btn-warning {
  133. .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
  134. }
  135. // Danger and error appear as red
  136. .btn-danger {
  137. .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
  138. }
  139. // Success appears as green
  140. .btn-success {
  141. .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
  142. }
  143. // Info appears as a neutral blue
  144. .btn-info {
  145. .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
  146. }
  147. // Inverse appears as dark gray
  148. .btn-inverse {
  149. .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
  150. }
  151. // Cross-browser Jank
  152. // --------------------------------------------------
  153. button.btn,
  154. input[type="submit"].btn {
  155. // Firefox 3.6 only I believe
  156. &::-moz-focus-inner {
  157. padding: 0;
  158. border: 0;
  159. }
  160. // IE7 has some default padding on button controls
  161. *padding-top: 3px;
  162. *padding-bottom: 3px;
  163. &.btn-large {
  164. *padding-top: 7px;
  165. *padding-bottom: 7px;
  166. }
  167. &.btn-small {
  168. *padding-top: 3px;
  169. *padding-bottom: 3px;
  170. }
  171. &.btn-mini {
  172. *padding-top: 1px;
  173. *padding-bottom: 1px;
  174. }
  175. }
  176. // Link buttons
  177. // --------------------------------------------------
  178. // Make a button look and behave like a link
  179. .btn-link,
  180. .btn-link:active,
  181. .btn-link[disabled] {
  182. background-color: transparent;
  183. background-image: none;
  184. .box-shadow(none);
  185. }
  186. .btn-link {
  187. border-color: transparent;
  188. cursor: pointer;
  189. color: @linkColor;
  190. .border-radius(0);
  191. }
  192. .btn-link:hover,
  193. .btn-link:focus {
  194. color: @linkColorHover;
  195. text-decoration: underline;
  196. background-color: transparent;
  197. }
  198. .btn-link[disabled]:hover,
  199. .btn-link[disabled]:focus {
  200. color: @grayDark;
  201. text-decoration: none;
  202. }