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.

_buttons.scss 3.4KB

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