You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. // BUTTON STYLES
  2. // -------------
  3. // Base styles
  4. // --------------------------------------------------
  5. // Core
  6. .btn {
  7. display: inline-block;
  8. padding: 4px 10px 4px;
  9. font-size: @baseFontSize;
  10. line-height: @baseLineHeight;
  11. color: @grayDark;
  12. text-align: center;
  13. text-shadow: 0 1px 1px rgba(255,255,255,.75);
  14. #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
  15. border: 1px solid #ccc;
  16. border-bottom-color: #bbb;
  17. .border-radius(4px);
  18. @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  19. .box-shadow(@shadow);
  20. cursor: pointer;
  21. // Give IE7 some love
  22. .ie7-restore-left-whitespace();
  23. }
  24. // Hover state
  25. .btn:hover {
  26. color: @grayDark;
  27. text-decoration: none;
  28. background-color: darken(@white, 10%);
  29. background-position: 0 -15px;
  30. // transition is only when going to hover, 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. .btn:focus {
  36. .tab-focus();
  37. }
  38. // Active state
  39. .btn.active,
  40. .btn:active {
  41. background-image: none;
  42. @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  43. .box-shadow(@shadow);
  44. background-color: darken(@white, 10%);
  45. background-color: darken(@white, 15%) e("\9");
  46. color: rgba(0,0,0,.5);
  47. outline: 0;
  48. }
  49. // Disabled state
  50. .btn.disabled,
  51. .btn[disabled] {
  52. cursor: default;
  53. background-image: none;
  54. background-color: darken(@white, 10%);
  55. .opacity(65);
  56. .box-shadow(none);
  57. }
  58. // Button Sizes
  59. // --------------------------------------------------
  60. // Large
  61. .btn-large {
  62. padding: 9px 14px;
  63. font-size: @baseFontSize + 2px;
  64. line-height: normal;
  65. .border-radius(5px);
  66. }
  67. .btn-large .icon {
  68. margin-top: 1px;
  69. }
  70. // Small
  71. .btn-small {
  72. padding: 5px 9px;
  73. font-size: @baseFontSize - 2px;
  74. line-height: @baseLineHeight - 2px;
  75. }
  76. .btn-small .icon {
  77. margin-top: -1px;
  78. }
  79. // Alternate buttons
  80. // --------------------------------------------------
  81. // Set text color
  82. // -------------------------
  83. .btn-primary,
  84. .btn-primary:hover,
  85. .btn-warning,
  86. .btn-warning:hover,
  87. .btn-danger,
  88. .btn-danger:hover,
  89. .btn-success,
  90. .btn-success:hover,
  91. .btn-info,
  92. .btn-info:hover {
  93. text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  94. color: @white;
  95. }
  96. // Provide *some* extra contrast for those who can get it
  97. .btn-primary.active,
  98. .btn-warning.active,
  99. .btn-danger.active,
  100. .btn-success.active,
  101. .btn-info.active {
  102. color: rgba(255,255,255,.75);
  103. }
  104. // Set the backgrounds
  105. // -------------------------
  106. .btn-primary {
  107. .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
  108. }
  109. // Warning appears are orange
  110. .btn-warning {
  111. .buttonBackground(lighten(@orange, 15%), @orange);
  112. }
  113. // Danger and error appear as red
  114. .btn-danger {
  115. .buttonBackground(#ee5f5b, #bd362f);
  116. }
  117. // Success appears as green
  118. .btn-success {
  119. .buttonBackground(#62c462, #51a351);
  120. }
  121. // Info appears as a neutral blue
  122. .btn-info {
  123. .buttonBackground(#5bc0de, #2f96b4);
  124. }
  125. // Cross-browser Jank
  126. // --------------------------------------------------
  127. button.btn,
  128. input[type="submit"].btn {
  129. &::-moz-focus-inner {
  130. padding: 0;
  131. border: 0;
  132. }
  133. // IE7 has some default padding on button controls
  134. *padding-top: 2px;
  135. *padding-bottom: 2px;
  136. &.large {
  137. *padding-top: 7px;
  138. *padding-bottom: 7px;
  139. }
  140. &.small {
  141. *padding-top: 3px;
  142. *padding-bottom: 3px;
  143. }
  144. }