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.

111 lines
2.2 KiB

  1. //
  2. // Base styles
  3. //
  4. .btn {
  5. display: inline-block;
  6. font-family: $btn-font-family;
  7. font-weight: $btn-font-weight;
  8. line-height: $btn-line-height;
  9. color: $body-color;
  10. text-align: center;
  11. text-decoration: if($link-decoration == none, null, none);
  12. white-space: $btn-white-space;
  13. vertical-align: middle;
  14. cursor: if($enable-button-pointers, pointer, null);
  15. user-select: none;
  16. background-color: transparent;
  17. border: $btn-border-width solid transparent;
  18. @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
  19. @include transition($btn-transition);
  20. &:hover {
  21. color: $body-color;
  22. text-decoration: if($link-hover-decoration == underline, none, null);
  23. }
  24. .btn-check:focus + &,
  25. &:focus {
  26. outline: 0;
  27. box-shadow: $btn-focus-box-shadow;
  28. }
  29. .btn-check:checked + &,
  30. .btn-check:active + &,
  31. &:active,
  32. &.active {
  33. @include box-shadow($btn-active-box-shadow);
  34. &:focus {
  35. @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  36. }
  37. }
  38. &:disabled,
  39. &.disabled,
  40. fieldset:disabled & {
  41. pointer-events: none;
  42. opacity: $btn-disabled-opacity;
  43. @include box-shadow(none);
  44. }
  45. }
  46. //
  47. // Alternate buttons
  48. //
  49. // scss-docs-start btn-variant-loops
  50. @each $color, $value in $theme-colors {
  51. .btn-#{$color} {
  52. @include button-variant($value, $value);
  53. }
  54. }
  55. @each $color, $value in $theme-colors {
  56. .btn-outline-#{$color} {
  57. @include button-outline-variant($value);
  58. }
  59. }
  60. // scss-docs-end btn-variant-loops
  61. //
  62. // Link buttons
  63. //
  64. // Make a button look and behave like a link
  65. .btn-link {
  66. font-weight: $font-weight-normal;
  67. color: $btn-link-color;
  68. text-decoration: $link-decoration;
  69. &:hover {
  70. color: $btn-link-hover-color;
  71. text-decoration: $link-hover-decoration;
  72. }
  73. &:focus {
  74. text-decoration: $link-hover-decoration;
  75. }
  76. &:disabled,
  77. &.disabled {
  78. color: $btn-link-disabled-color;
  79. }
  80. // No need for an active state here
  81. }
  82. //
  83. // Button Sizes
  84. //
  85. .btn-lg {
  86. @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
  87. }
  88. .btn-sm {
  89. @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
  90. }