_carousel.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. // Left/right controls for nav
  2. .carousel-control-prev,
  3. .carousel-control-next {
  4. color: $carousel-control-color-alt;
  5. opacity: $carousel-control-opacity-alt;
  6. // Hover/focus state
  7. &:hover,
  8. &:focus {
  9. color: $carousel-control-color-alt;
  10. opacity: $carousel-control-hover-opacity-alt;
  11. }
  12. }
  13. .carousel-control-prev {
  14. background-image: if($enable-gradients, linear-gradient(90deg, rgba($white-alt, .25), rgba($white-alt, .001)), null);
  15. }
  16. .carousel-control-next {
  17. background-image: if($enable-gradients, linear-gradient(270deg, rgba($white, .25), rgba($white, .001)), null);
  18. }
  19. // Icons for within
  20. .carousel-control-prev-icon {
  21. background-image: escape-svg($carousel-control-prev-icon-bg-alt);
  22. }
  23. .carousel-control-next-icon {
  24. background-image: escape-svg($carousel-control-next-icon-bg-alt);
  25. }
  26. // Optional indicator pips/controls
  27. .carousel-indicators {
  28. [data-bs-target] {
  29. background-color: $carousel-indicator-active-bg-alt;
  30. opacity: $carousel-indicator-opacity-alt;
  31. }
  32. .active {
  33. opacity: $carousel-indicator-active-opacity-alt;
  34. }
  35. }
  36. // Optional captions
  37. .carousel-caption {
  38. color: $carousel-caption-color-alt;
  39. }
  40. // Dark mode carousel
  41. .carousel-dark {
  42. .carousel-control-prev-icon,
  43. .carousel-control-next-icon {
  44. filter: $carousel-dark-control-icon-filter-alt;
  45. }
  46. .carousel-indicators [data-bs-target] {
  47. background-color: $carousel-dark-indicator-active-bg-alt;
  48. }
  49. .carousel-caption {
  50. color: $carousel-dark-caption-color-alt;
  51. }
  52. }