buttons.less 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  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. // Set the backgrounds
  119. // -------------------------
  120. .btn-primary {
  121. .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
  122. }
  123. // Warning appears are orange
  124. .btn-warning {
  125. .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
  126. }
  127. // Danger and error appear as red
  128. .btn-danger {
  129. .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
  130. }
  131. // Success appears as green
  132. .btn-success {
  133. .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
  134. }
  135. // Info appears as a neutral blue
  136. .btn-info {
  137. .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
  138. }
  139. // Inverse appears as dark gray
  140. .btn-inverse {
  141. .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
  142. }
  143. // Cross-browser Jank
  144. // --------------------------------------------------
  145. button.btn,
  146. input[type="submit"].btn {
  147. // Firefox 3.6 only I believe
  148. &::-moz-focus-inner {
  149. padding: 0;
  150. border: 0;
  151. }
  152. // IE7 has some default padding on button controls
  153. *padding-top: 3px;
  154. *padding-bottom: 3px;
  155. &.btn-large {
  156. *padding-top: 7px;
  157. *padding-bottom: 7px;
  158. }
  159. &.btn-small {
  160. *padding-top: 3px;
  161. *padding-bottom: 3px;
  162. }
  163. &.btn-mini {
  164. *padding-top: 1px;
  165. *padding-bottom: 1px;
  166. }
  167. }
  168. // Link buttons
  169. // --------------------------------------------------
  170. // Make a button look and behave like a link
  171. .btn-link,
  172. .btn-link:active,
  173. .btn-link[disabled] {
  174. background-color: transparent;
  175. background-image: none;
  176. .box-shadow(none);
  177. }
  178. .btn-link {
  179. border-color: transparent;
  180. cursor: pointer;
  181. color: @linkColor;
  182. .border-radius(0);
  183. }
  184. .btn-link:hover,
  185. .btn-link:focus {
  186. color: @linkColorHover;
  187. text-decoration: underline;
  188. background-color: transparent;
  189. }
  190. .btn-link[disabled]:hover,
  191. .btn-link[disabled]:focus {
  192. color: @grayDark;
  193. text-decoration: none;
  194. }