_backgrounds.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. //
  2. // Mixins: Backgrounds
  3. //
  4. // Background Variant
  5. @mixin background-variant($name, $color) {
  6. .bg-#{$name} {
  7. background-color: #{$color} !important;
  8. &,
  9. > a {
  10. color: color-yiq($color) !important;
  11. }
  12. &.btn {
  13. &:hover {
  14. border-color: darken($color, 10%);
  15. color: darken(color-yiq($color), 7.5%);
  16. }
  17. &:not(:disabled):not(.disabled):active,
  18. &:not(:disabled):not(.disabled).active,
  19. &:active,
  20. &.active {
  21. background-color: darken($color, 10%) !important;
  22. border-color: darken($color, 12.5%);
  23. color: color-yiq(darken($color, 10%));
  24. }
  25. }
  26. }
  27. }
  28. // Background Gradient Variant
  29. @mixin background-gradient-variant($name, $color) {
  30. .bg-gradient-#{$name} {
  31. @include bg-gradient-variant('&', $color);
  32. color: color-yiq($color);
  33. &.btn {
  34. &.disabled,
  35. &:disabled,
  36. &:not(:disabled):not(.disabled):active,
  37. &:not(:disabled):not(.disabled).active,
  38. .show > &.dropdown-toggle {
  39. background-image: none !important;
  40. }
  41. &:hover {
  42. @include bg-gradient-variant('&', darken($color, 7.5%));
  43. border-color: darken($color, 10%);
  44. color: darken(color-yiq($color), 7.5%);
  45. }
  46. &:not(:disabled):not(.disabled):active,
  47. &:not(:disabled):not(.disabled).active,
  48. &:active,
  49. &.active {
  50. @include bg-gradient-variant('&', darken($color, 10%));
  51. border-color: darken($color, 12.5%);
  52. color: color-yiq(darken($color, 10%));
  53. }
  54. }
  55. }
  56. }