_buttons.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. // Base styles
  2. .btn {
  3. color: $body-color-alt;
  4. background-color: transparent;
  5. border: $btn-border-width solid transparent;
  6. &:hover {
  7. color: $body-color-alt;
  8. }
  9. .btn-check:focus + &,
  10. &:focus {
  11. box-shadow: $btn-focus-box-shadow-alt;
  12. }
  13. .btn-check:checked + &,
  14. .btn-check:active + &,
  15. &:active,
  16. &.active {
  17. @include box-shadow($btn-active-box-shadow-alt);
  18. &:focus {
  19. @include box-shadow($btn-focus-box-shadow-alt, $btn-active-box-shadow-alt);
  20. }
  21. }
  22. &:disabled,
  23. &.disabled,
  24. fieldset:disabled & {
  25. opacity: $btn-disabled-opacity-alt;
  26. @include box-shadow(none);
  27. }
  28. }
  29. // Alternate buttons
  30. @each $color, $value in $theme-colors-alt {
  31. .btn-#{$color} {
  32. @include button-variant-alt($value, $value);
  33. }
  34. }
  35. @each $color, $value in $theme-colors-alt {
  36. .btn-outline-#{$color} {
  37. @include button-outline-variant-alt($value);
  38. }
  39. }
  40. // Link buttons
  41. // Make a button look and behave like a link
  42. .btn-link {
  43. color: $btn-link-color-alt;
  44. &:hover {
  45. color: $btn-link-hover-color-alt;
  46. }
  47. &:disabled,
  48. &.disabled {
  49. color: $btn-link-disabled-color-alt;
  50. }
  51. }