_buttons.less 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. //
  2. // Base styles
  3. //
  4. .btn {
  5. display: inline-block;
  6. // LESS PORT: Less doesn’t strip “empty” property values so we have to check for a value first.
  7. & when not (@btn-font-family = ~"") { font-family: @btn-font-family; }
  8. font-weight: @btn-font-weight;
  9. color: @body-color;
  10. text-align: center;
  11. & when not (@link-decoration = none) { text-decoration: none; }
  12. // LESS PORT: Less doesn’t strip “empty” property values so we have to check for a value first.
  13. & when not (@btn-white-space = ~"") { white-space: @btn-white-space; }
  14. vertical-align: middle;
  15. user-select: none;
  16. background-color: transparent;
  17. border: @btn-border-width solid transparent;
  18. #button-size(@btn-padding-y, @btn-padding-x, @btn-font-size, @btn-line-height, @btn-border-radius);
  19. #transition(@btn-transition);
  20. #hover({
  21. color: @body-color;
  22. text-decoration: none;
  23. });
  24. &:focus,
  25. &.focus {
  26. outline: 0;
  27. box-shadow: @btn-focus-box-shadow;
  28. }
  29. // Disabled comes first so active can properly restyle
  30. &.disabled,
  31. &:disabled {
  32. opacity: @btn-disabled-opacity;
  33. #box-shadow(none);
  34. }
  35. &:not(:disabled):not(.disabled) {
  36. & when (@enable-pointer-cursor-for-buttons) { cursor: pointer; }
  37. &:active,
  38. &.active {
  39. #box-shadow(@btn-active-box-shadow);
  40. &:focus {
  41. #box-shadow(@btn-focus-box-shadow, @btn-active-box-shadow);
  42. }
  43. }
  44. }
  45. }
  46. // Future-proof disabling of clicks on `<a>` elements
  47. a.btn.disabled,
  48. fieldset:disabled a.btn {
  49. pointer-events: none;
  50. }
  51. //
  52. // Alternate buttons
  53. //
  54. //@each $color, $value in $theme-colors {
  55. // .btn-#{$color} {
  56. // @include button-variant($value, $value);
  57. // }
  58. //}
  59. each(@theme-colors, #(@value, @color) {
  60. .btn-@{color} {
  61. #button-variant(@value, @value);
  62. }
  63. });
  64. //@each $color, $value in $theme-colors {
  65. // .btn-outline-#{$color} {
  66. // @if $color == "light" {
  67. // @include button-outline-variant($value, $gray-900);
  68. // } @else {
  69. // @include button-outline-variant($value, $white);
  70. // }
  71. // }
  72. //}
  73. each(@theme-colors, #(@value, @color) {
  74. .btn-outline-@{color} {
  75. #button-outline-variant(@value);
  76. }
  77. });
  78. //
  79. // Link buttons
  80. //
  81. // Make a button look and behave like a link
  82. .btn-link {
  83. font-weight: @font-weight-normal;
  84. color: @link-color;
  85. text-decoration: @link-decoration;
  86. #hover({
  87. color: @link-hover-color;
  88. text-decoration: @link-hover-decoration;
  89. });
  90. &:focus,
  91. &.focus {
  92. text-decoration: @link-hover-decoration;
  93. }
  94. &:disabled,
  95. &.disabled {
  96. color: @btn-link-disabled-color;
  97. pointer-events: none;
  98. }
  99. // No need for an active state here
  100. }
  101. //
  102. // Button Sizes
  103. //
  104. .btn-lg {
  105. #button-size(@btn-padding-y-lg, @btn-padding-x-lg, @btn-font-size-lg, @btn-line-height-lg, @btn-border-radius-lg);
  106. }
  107. .btn-sm {
  108. #button-size(@btn-padding-y-sm, @btn-padding-x-sm, @btn-font-size-sm, @btn-line-height-sm, @btn-border-radius-sm);
  109. }
  110. //
  111. // Block button
  112. //
  113. .btn-block {
  114. display: block;
  115. width: 100%;
  116. // Vertically space out multiple block buttons
  117. + .btn-block {
  118. margin-top: @btn-block-spacing-y;
  119. }
  120. }
  121. // Specificity overrides
  122. input[type="submit"],
  123. input[type="reset"],
  124. input[type="button"] {
  125. &.btn-block {
  126. width: 100%;
  127. }
  128. }