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.

133 lines
4.1 KiB

  1. // Button variants
  2. //
  3. // Easily pump out default styles, as well as :hover, :focus, :active,
  4. // and disabled options for all buttons
  5. // scss-docs-start btn-variant-mixin
  6. @mixin button-variant(
  7. $background,
  8. $border,
  9. $color: color-contrast($background),
  10. $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  11. $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  12. $hover-color: color-contrast($hover-background),
  13. $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  14. $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  15. $active-color: color-contrast($active-background),
  16. $disabled-background: $background,
  17. $disabled-border: $border,
  18. $disabled-color: color-contrast($disabled-background)
  19. ) {
  20. color: $color;
  21. @include gradient-bg($background);
  22. border-color: $border;
  23. @include box-shadow($btn-box-shadow);
  24. &:hover {
  25. color: $hover-color;
  26. @include gradient-bg($hover-background);
  27. border-color: $hover-border;
  28. }
  29. .btn-check:focus + &,
  30. &:focus {
  31. color: $hover-color;
  32. @include gradient-bg($hover-background);
  33. border-color: $hover-border;
  34. @if $enable-shadows {
  35. @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
  36. } @else {
  37. // Avoid using mixin so we can pass custom focus shadow properly
  38. box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
  39. }
  40. }
  41. .btn-check:checked + &,
  42. .btn-check:active + &,
  43. &:active,
  44. &.active,
  45. .show > &.dropdown-toggle {
  46. color: $active-color;
  47. background-color: $active-background;
  48. // Remove CSS gradients if they're enabled
  49. background-image: if($enable-gradients, none, null);
  50. border-color: $active-border;
  51. &:focus {
  52. @if $enable-shadows {
  53. @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
  54. } @else {
  55. // Avoid using mixin so we can pass custom focus shadow properly
  56. box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
  57. }
  58. }
  59. }
  60. &:disabled,
  61. &.disabled {
  62. color: $disabled-color;
  63. background-color: $disabled-background;
  64. // Remove CSS gradients if they're enabled
  65. background-image: if($enable-gradients, none, null);
  66. border-color: $disabled-border;
  67. }
  68. }
  69. // scss-docs-end btn-variant-mixin
  70. // scss-docs-start btn-outline-variant-mixin
  71. @mixin button-outline-variant(
  72. $color,
  73. $color-hover: color-contrast($color),
  74. $active-background: $color,
  75. $active-border: $color,
  76. $active-color: color-contrast($active-background)
  77. ) {
  78. color: $color;
  79. border-color: $color;
  80. &:hover {
  81. color: $color-hover;
  82. background-color: $active-background;
  83. border-color: $active-border;
  84. }
  85. .btn-check:focus + &,
  86. &:focus {
  87. box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  88. }
  89. .btn-check:checked + &,
  90. .btn-check:active + &,
  91. &:active,
  92. &.active,
  93. &.dropdown-toggle.show {
  94. color: $active-color;
  95. background-color: $active-background;
  96. border-color: $active-border;
  97. &:focus {
  98. @if $enable-shadows {
  99. @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
  100. } @else {
  101. // Avoid using mixin so we can pass custom focus shadow properly
  102. box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  103. }
  104. }
  105. }
  106. &:disabled,
  107. &.disabled {
  108. color: $color;
  109. background-color: transparent;
  110. }
  111. }
  112. // scss-docs-end btn-outline-variant-mixin
  113. // scss-docs-start btn-size-mixin
  114. @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  115. padding: $padding-y $padding-x;
  116. @include font-size($font-size);
  117. // Manually declare to provide an override to the browser default
  118. @include border-radius($border-radius, 0);
  119. }
  120. // scss-docs-end btn-size-mixin