buttons.less 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. //
  2. // Buttons
  3. // --------------------------------------------------
  4. // Base styles
  5. // --------------------------------------------------
  6. .btn {
  7. border: none;
  8. font-size: @btn-font-size-base;
  9. font-weight: @btn-font-weight;
  10. line-height: @btn-line-height-base;
  11. border-radius: @border-radius-base;
  12. padding: 10px 15px;
  13. -webkit-font-smoothing: subpixel-antialiased;
  14. transition: border .25s linear, color .25s linear, background-color .25s linear;
  15. &:hover,
  16. &:focus {
  17. outline: none;
  18. color: @btn-default-color;
  19. }
  20. &:active,
  21. &.active {
  22. outline: none;
  23. box-shadow: none;
  24. }
  25. &:focus:active {
  26. outline: none;
  27. }
  28. &.disabled,
  29. &[disabled],
  30. fieldset[disabled] & {
  31. background-color: @btn-link-disabled-color;
  32. color: fade(@btn-default-color, 75%);
  33. .opacity(.7);
  34. cursor: @cursor-disabled;
  35. }
  36. // Button icons
  37. [class^="fui-"] {
  38. margin: 0 1px;
  39. position: relative;
  40. line-height: 1;
  41. top: 1px;
  42. .btn-xs& {
  43. font-size: 11px;
  44. top: 0;
  45. }
  46. .btn-hg& {
  47. top: 2px;
  48. }
  49. }
  50. }
  51. // Alternate buttons
  52. // --------------------------------------------------
  53. .btn-default {
  54. .button-variant(@btn-default-color, @btn-default-bg, @btn-hover-bg, @btn-active-bg);
  55. }
  56. .btn-primary {
  57. .button-variant(@btn-default-color, @brand-secondary, @btn-primary-hover-bg, @btn-primary-active-bg);
  58. }
  59. .btn-info {
  60. .button-variant(@btn-default-color, @brand-info, @btn-info-hover-bg, @btn-info-active-bg);
  61. }
  62. .btn-danger {
  63. .button-variant(@btn-default-color, @brand-danger, @btn-danger-hover-bg, @btn-danger-active-bg);
  64. }
  65. .btn-success {
  66. .button-variant(@btn-default-color, @brand-success, @btn-success-hover-bg, @btn-success-active-bg);
  67. }
  68. .btn-warning {
  69. .button-variant(@btn-default-color, @brand-warning, @btn-warning-hover-bg, @btn-warning-active-bg);
  70. }
  71. .btn-inverse {
  72. .button-variant(@btn-default-color, @brand-primary, @btn-inverse-hover-bg, @btn-inverse-active-bg);
  73. }
  74. .btn-embossed {
  75. box-shadow: inset 0 -2px 0 fade(black, 15%);
  76. &.active,
  77. &:active {
  78. box-shadow: inset 0 2px 0 fade(black, 15%);
  79. }
  80. }
  81. .btn-wide {
  82. min-width: 140px;
  83. padding-left: 30px;
  84. padding-right: 30px;
  85. }
  86. // Link buttons
  87. // -------------------------
  88. // Make a button look and behave like a link
  89. .btn-link {
  90. color: @link-color;
  91. &:hover,
  92. &:focus {
  93. color: @link-hover-color;
  94. text-decoration: underline;
  95. background-color: transparent;
  96. }
  97. &[disabled],
  98. fieldset[disabled] & {
  99. &:hover,
  100. &:focus {
  101. color: @btn-link-disabled-color;
  102. text-decoration: none;
  103. }
  104. }
  105. }
  106. // Button sizes
  107. // --------------------------------------------------
  108. .btn-hg {
  109. .button-size(13px, 20px, @btn-font-size-hg, @btn-line-height-hg, @border-radius-large);
  110. }
  111. .btn-lg {
  112. .button-size(10px, 19px, @btn-font-size-lg, @btn-line-height-lg, @border-radius-large);
  113. }
  114. .btn-sm {
  115. .button-size(9px, 13px, @btn-font-size-sm, @btn-line-height-sm, @border-radius-base);
  116. }
  117. .btn-xs {
  118. .button-size(6px, 9px, @btn-font-size-xs, @btn-line-height-xs, @border-radius-small);
  119. }
  120. // Button tip
  121. .btn-tip {
  122. font-weight: 300;
  123. padding-left: 10px;
  124. font-size: 92%;
  125. }
  126. // Block button
  127. // --------------------------------------------------
  128. .btn-block {
  129. white-space: normal;
  130. }
  131. // Social Buttons
  132. // --------------------------------------------------
  133. [class*="btn-social-"] {
  134. .button-size(10px, 15px, @btn-social-font-size-base, @btn-social-line-height-base, @border-radius-base);
  135. }
  136. // Set the backgrounds
  137. // -------------------------
  138. .btn-social-pinterest {
  139. .social-button-variant(@btn-default-color, @social-pinterest);
  140. }
  141. .btn-social-linkedin {
  142. .social-button-variant(@btn-default-color, @social-linkedin)
  143. }
  144. .btn-social-stumbleupon {
  145. .social-button-variant(@btn-default-color, @social-stumbleupon);
  146. }
  147. .btn-social-googleplus {
  148. .social-button-variant(@btn-default-color, @social-googleplus);
  149. }
  150. .btn-social-facebook {
  151. .social-button-variant(@btn-default-color, @social-facebook);
  152. }
  153. .btn-social-twitter {
  154. .social-button-variant(@btn-default-color, @social-twitter);
  155. }