_buttons.scss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  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($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  6. color: color-yiq($background);
  7. @include gradient-bg($background);
  8. border-color: $border;
  9. @include box-shadow($btn-box-shadow);
  10. @include hover {
  11. color: color-yiq($hover-background);
  12. @include gradient-bg($hover-background);
  13. border-color: $hover-border;
  14. }
  15. &:focus,
  16. &.focus {
  17. // Avoid using mixin so we can pass custom focus shadow properly
  18. @if $enable-shadows {
  19. box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
  20. } @else {
  21. box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
  22. }
  23. }
  24. // Disabled comes first so active can properly restyle
  25. &.disabled,
  26. &:disabled {
  27. color: color-yiq($background);
  28. background-color: $background;
  29. border-color: $border;
  30. // Remove CSS gradients if they're enabled
  31. @if $enable-gradients {
  32. background-image: none;
  33. }
  34. }
  35. &:not(:disabled):not(.disabled):active,
  36. &:not(:disabled):not(.disabled).active,
  37. .show > &.dropdown-toggle {
  38. color: color-yiq($active-background);
  39. background-color: $active-background;
  40. @if $enable-gradients {
  41. background-image: none; // Remove the gradient for the pressed/active state
  42. }
  43. border-color: $active-border;
  44. &:focus {
  45. // Avoid using mixin so we can pass custom focus shadow properly
  46. @if $enable-shadows and $btn-active-box-shadow != none {
  47. box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
  48. } @else {
  49. box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
  50. }
  51. }
  52. }
  53. }
  54. @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
  55. color: $color;
  56. border-color: $color;
  57. @include hover {
  58. color: $color-hover;
  59. background-color: $active-background;
  60. border-color: $active-border;
  61. }
  62. &:focus,
  63. &.focus {
  64. box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  65. }
  66. &.disabled,
  67. &:disabled {
  68. color: $color;
  69. background-color: transparent;
  70. }
  71. &:not(:disabled):not(.disabled):active,
  72. &:not(:disabled):not(.disabled).active,
  73. .show > &.dropdown-toggle {
  74. color: color-yiq($active-background);
  75. background-color: $active-background;
  76. border-color: $active-border;
  77. &:focus {
  78. // Avoid using mixin so we can pass custom focus shadow properly
  79. @if $enable-shadows and $btn-active-box-shadow != none {
  80. box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
  81. } @else {
  82. box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  83. }
  84. }
  85. }
  86. }
  87. // Button sizes
  88. @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  89. padding: $padding-y $padding-x;
  90. @include font-size($font-size);
  91. line-height: $line-height;
  92. // Manually declare to provide an override to the browser default
  93. @include border-radius($border-radius, 0);
  94. }