_buttons.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. // Button backgrounds
  2. // ------------------
  3. @mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0px 1px 0 rgba(0, 0, 0, 0.1)) {
  4. // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  5. @include gradientBar($startColor, $endColor, $text-color, $textShadow);
  6. // in these cases the gradient won't cover the background, so we override
  7. &:hover,
  8. &:focus,
  9. &:active,
  10. &.active,
  11. &.disabled,
  12. &[disabled] {
  13. color: $text-color;
  14. background-image: none;
  15. background-color: $startColor;
  16. }
  17. }
  18. // Button sizes
  19. @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  20. padding: $padding-y $padding-x;
  21. font-size: $font-size;
  22. //box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15);
  23. @include border-radius($border-radius);
  24. }
  25. @mixin button-outline-variant($color) {
  26. color: $white;
  27. background-image: none;
  28. background-color: transparent;
  29. border: 1px solid $white;
  30. @include hover {
  31. color: $white;
  32. background-color: $color;
  33. }
  34. &:focus,
  35. &.focus {
  36. color: $white;
  37. background-color: $color;
  38. }
  39. &:active,
  40. &.active,
  41. .open > &.dropdown-toggle {
  42. color: $white;
  43. background-color: $color;
  44. &:hover,
  45. &:focus,
  46. &.focus {
  47. color: $white;
  48. background-color: darken($color, 17%);
  49. border-color: darken($color, 25%);
  50. }
  51. }
  52. &.disabled,
  53. &:disabled {
  54. &:focus,
  55. &.focus {
  56. border-color: lighten($color, 20%);
  57. }
  58. @include hover {
  59. border-color: lighten($color, 20%);
  60. }
  61. }
  62. }