_buttons.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
  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(inset 0 3px 5px rgba(0,0,0,.125));
  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. &:focus,
  59. &.focus,
  60. &:active,
  61. &.active,
  62. .open > &.dropdown-toggle {
  63. color: #fff;
  64. background-color: $color;
  65. border-color: $color;
  66. }
  67. @include hover {
  68. color: #fff;
  69. background-color: $color;
  70. border-color: $color;
  71. }
  72. &.disabled,
  73. &:disabled {
  74. &:focus,
  75. &.focus {
  76. border-color: lighten($color, 20%);
  77. }
  78. @include hover {
  79. border-color: lighten($color, 20%);
  80. }
  81. }
  82. }
  83. // Button sizes
  84. @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  85. padding: $padding-y $padding-x;
  86. font-size: $font-size;
  87. line-height: $line-height;
  88. @include border-radius($border-radius);
  89. }