buttons.less 3.9 KB

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