_carousels.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. // Carousels
  2. .carousel {
  3. .carousel-control-prev-icon,
  4. .carousel-control-next-icon {
  5. width: $carousel-control-icon-width;
  6. height: $carousel-control-icon-height;
  7. }
  8. .carousel-control-prev-icon {
  9. background-image: $carousel-control-prev-icon;
  10. }
  11. .carousel-control-next-icon {
  12. background-image: $carousel-control-next-icon;
  13. }
  14. .carousel-indicators {
  15. li {
  16. width: $carousel-indicators-width;
  17. height: $carousel-indicators-height;
  18. border-radius: $carousel-indicators-border-radius;
  19. cursor: pointer;
  20. }
  21. }
  22. }
  23. .carousel-fade {
  24. .carousel-item {
  25. opacity: 0;
  26. transition-duration: $carousel-transition-duration;
  27. transition-property: opacity;
  28. }
  29. .carousel-item.active,
  30. .carousel-item-next.carousel-item-left,
  31. .carousel-item-prev.carousel-item-right {
  32. opacity: 1;
  33. }
  34. .carousel-item-left,
  35. .carousel-item-right {
  36. &.active {
  37. opacity: 0;
  38. }
  39. }
  40. .carousel-item-next,
  41. .carousel-item-prev,
  42. .carousel-item.active,
  43. .carousel-item-left.active,
  44. .carousel-item-prev.active {
  45. transform: $carousel-item-transform;
  46. @supports (transform-style: preserve-3d) {
  47. transform: $carousel-item-transform-2;
  48. }
  49. }
  50. }