_buttons.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. // Button variants
  2. //
  3. // Easily pump out default styles, as well as :hover, :focus, :active,
  4. // and disabled options for all buttons
  5. @mixin button-variant($color, $background, $border) {
  6. $active-background: darken($background, 10%);
  7. $active-border: darken($border, 12%);
  8. color: $color;
  9. background-color: $background;
  10. border-color: $border;
  11. @include box-shadow($btn-box-shadow);
  12. @include hover {
  13. color: $color;
  14. background-color: $active-background;
  15. border-color: $active-border;
  16. }
  17. &:focus,
  18. &.focus {
  19. color: $color;
  20. background-color: $active-background;
  21. border-color: $active-border;
  22. }
  23. &:active,
  24. &.active,
  25. .open > &.dropdown-toggle {
  26. color: $color;
  27. background-color: $active-background;
  28. border-color: $active-border;
  29. // Remove the gradient for the pressed/active state
  30. background-image: none;
  31. @include box-shadow($btn-active-box-shadow);
  32. &:hover,
  33. &:focus,
  34. &.focus {
  35. color: $color;
  36. background-color: darken($background, 17%);
  37. border-color: darken($border, 25%);
  38. }
  39. }
  40. &.disabled,
  41. &:disabled {
  42. &:focus,
  43. &.focus {
  44. background-color: $background;
  45. border-color: $border;
  46. }
  47. @include hover {
  48. background-color: $background;
  49. border-color: $border;
  50. }
  51. }
  52. }
  53. @mixin button-outline-variant($color) {
  54. color: $color;
  55. background-image: none;
  56. background-color: transparent;
  57. border-color: $color;
  58. @include hover {
  59. color: #fff;
  60. background-color: $color;
  61. border-color: $color;
  62. }
  63. &:focus,
  64. &.focus {
  65. color: #fff;
  66. background-color: $color;
  67. border-color: $color;
  68. }
  69. &:active,
  70. &.active,
  71. .open > &.dropdown-toggle {
  72. color: #fff;
  73. background-color: $color;
  74. border-color: $color;
  75. &:hover,
  76. &:focus,
  77. &.focus {
  78. color: #fff;
  79. background-color: darken($color, 17%);
  80. border-color: darken($color, 25%);
  81. }
  82. }
  83. &.disabled,
  84. &:disabled {
  85. &:focus,
  86. &.focus {
  87. border-color: lighten($color, 20%);
  88. }
  89. @include hover {
  90. border-color: lighten($color, 20%);
  91. }
  92. }
  93. }
  94. // Button sizes
  95. @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  96. padding: $padding-y $padding-x;
  97. font-size: $font-size;
  98. @include border-radius($border-radius);
  99. }