_buttons.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. //
  2. // Base styles
  3. //
  4. .btn {
  5. display: inline-block;
  6. font-weight: $btn-font-weight;
  7. text-align: center;
  8. white-space: nowrap;
  9. vertical-align: middle;
  10. touch-action: manipulation;
  11. cursor: pointer;
  12. user-select: none;
  13. border: $border-width solid transparent;
  14. @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
  15. @include transition(all .2s ease-in-out);
  16. &,
  17. &:active,
  18. &.active {
  19. &:focus,
  20. &.focus {
  21. @include tab-focus();
  22. }
  23. }
  24. @include hover-focus {
  25. text-decoration: none;
  26. }
  27. &.focus {
  28. text-decoration: none;
  29. }
  30. &:active,
  31. &.active {
  32. background-image: none;
  33. outline: 0;
  34. @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  35. }
  36. &.disabled,
  37. &:disabled,
  38. fieldset[disabled] & {
  39. cursor: $cursor-disabled;
  40. opacity: .65;
  41. @include box-shadow(none);
  42. }
  43. }
  44. // Future-proof disabling of clicks on `<a>` elements
  45. a.btn.disaabled,
  46. fieldset[disabled] a.btn {
  47. pointer-events: none;
  48. }
  49. //
  50. // Alternate buttons
  51. //
  52. .btn-primary {
  53. @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  54. }
  55. .btn-secondary {
  56. @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
  57. }
  58. .btn-info {
  59. @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
  60. }
  61. .btn-success {
  62. @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
  63. }
  64. .btn-warning {
  65. @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
  66. }
  67. .btn-danger {
  68. @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
  69. }
  70. // Remove all backgrounds
  71. .btn-primary-outline {
  72. @include button-outline-variant($btn-primary-bg);
  73. }
  74. .btn-secondary-outline {
  75. @include button-outline-variant($btn-secondary-border);
  76. }
  77. .btn-info-outline {
  78. @include button-outline-variant($btn-info-bg);
  79. }
  80. .btn-success-outline {
  81. @include button-outline-variant($btn-success-bg);
  82. }
  83. .btn-warning-outline {
  84. @include button-outline-variant($btn-warning-bg);
  85. }
  86. .btn-danger-outline {
  87. @include button-outline-variant($btn-danger-bg);
  88. }
  89. //
  90. // Link buttons
  91. //
  92. // Make a button look and behave like a link
  93. .btn-link {
  94. font-weight: normal;
  95. color: $link-color;
  96. border-radius: 0;
  97. &,
  98. &:active,
  99. &.active,
  100. &:disabled,
  101. fieldset[disabled] & {
  102. background-color: transparent;
  103. @include box-shadow(none);
  104. }
  105. &,
  106. &:focus,
  107. &:active {
  108. border-color: transparent;
  109. }
  110. @include hover {
  111. border-color: transparent;
  112. }
  113. @include hover-focus {
  114. color: $link-hover-color;
  115. text-decoration: $link-hover-decoration;
  116. background-color: transparent;
  117. }
  118. &:disabled,
  119. fieldset[disabled] & {
  120. @include hover-focus {
  121. color: $btn-link-disabled-color;
  122. text-decoration: none;
  123. }
  124. }
  125. }
  126. //
  127. // Button Sizes
  128. //
  129. .btn-lg {
  130. // line-height: ensure even-numbered height of button next to large input
  131. @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
  132. }
  133. .btn-sm {
  134. // line-height: ensure proper height of button next to small input
  135. @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
  136. }
  137. //
  138. // Block button
  139. //
  140. .btn-block {
  141. display: block;
  142. width: 100%;
  143. }
  144. // Vertically space out multiple block buttons
  145. .btn-block + .btn-block {
  146. margin-top: 5px;
  147. }
  148. // Specificity overrides
  149. input[type="submit"],
  150. input[type="reset"],
  151. input[type="button"] {
  152. &.btn-block {
  153. width: 100%;
  154. }
  155. }