_buttons.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. // scss-lint:disable QualifyingElement
  2. //
  3. // Base styles
  4. //
  5. .btn {
  6. display: inline-block;
  7. font-weight: $btn-font-weight;
  8. line-height: $btn-line-height;
  9. text-align: center;
  10. white-space: nowrap;
  11. vertical-align: middle;
  12. cursor: pointer;
  13. user-select: none;
  14. border: $input-btn-border-width solid transparent;
  15. @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
  16. @include transition(all .2s ease-in-out);
  17. &,
  18. &:active,
  19. &.active {
  20. &:focus,
  21. &.focus {
  22. @include tab-focus();
  23. }
  24. }
  25. @include hover-focus {
  26. text-decoration: none;
  27. }
  28. &.focus {
  29. text-decoration: none;
  30. }
  31. &:active,
  32. &.active {
  33. background-image: none;
  34. outline: 0;
  35. @include box-shadow($btn-active-box-shadow);
  36. }
  37. &.disabled,
  38. &: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.disabled,
  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-outline-primary {
  72. @include button-outline-variant($btn-primary-bg);
  73. }
  74. .btn-outline-secondary {
  75. @include button-outline-variant($btn-secondary-border);
  76. }
  77. .btn-outline-info {
  78. @include button-outline-variant($btn-info-bg);
  79. }
  80. .btn-outline-success {
  81. @include button-outline-variant($btn-success-bg);
  82. }
  83. .btn-outline-warning {
  84. @include button-outline-variant($btn-warning-bg);
  85. }
  86. .btn-outline-danger {
  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. background-color: transparent;
  102. @include box-shadow(none);
  103. }
  104. &,
  105. &:focus,
  106. &:active {
  107. border-color: transparent;
  108. }
  109. @include hover {
  110. border-color: transparent;
  111. }
  112. @include hover-focus {
  113. color: $link-hover-color;
  114. text-decoration: $link-hover-decoration;
  115. background-color: transparent;
  116. }
  117. &:disabled {
  118. @include hover-focus {
  119. color: $btn-link-disabled-color;
  120. text-decoration: none;
  121. }
  122. }
  123. }
  124. //
  125. // Button Sizes
  126. //
  127. .btn-lg {
  128. // line-height: ensure even-numbered height of button next to large input
  129. @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
  130. }
  131. .btn-sm {
  132. // line-height: ensure proper height of button next to small input
  133. @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
  134. }
  135. //
  136. // Block button
  137. //
  138. .btn-block {
  139. display: block;
  140. width: 100%;
  141. }
  142. // Vertically space out multiple block buttons
  143. .btn-block + .btn-block {
  144. margin-top: $btn-block-spacing-y;
  145. }
  146. // Specificity overrides
  147. input[type="submit"],
  148. input[type="reset"],
  149. input[type="button"] {
  150. &.btn-block {
  151. width: 100%;
  152. }
  153. }