Carousel update for SharePoint video sizing (adobecom#3265)

* Adding video fill variant * PR feedback, css clean up * Fixing code conflicts with adobecom#3053 --------- Co-authored-by: Ryan Clayton <rclayton@adobe.com>
nishantka · Dec 13, 2024 · 8c579e2 · 8c579e2
1 parent e3ef854
commit 8c579e2
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/libs/blocks/carousel/carousel.css b/libs/blocks/carousel/carousel.css
@@ -373,36 +373,38 @@ html[dir="rtl"] .carousel-slides .section.carousel-slide {
   width: unset;
 }
 
-.carousel.rounded-corners .carousel-slide,
-.carousel.rounded-corners .carousel-slide > div :is(p):has(> picture) img {
+.carousel:is(.rounded-corners, .m-rounded-corners) .carousel-slide,
+.carousel:is(.rounded-corners, .m-rounded-corners) .carousel-slide > div :is(p > picture img, p > video, p > .milo-video, p > .video-holder video) {
   border-radius: var(--m-rounded-corners);
 }
 
-.carousel.l-rounded-corners .carousel-slide,
-.carousel.l-rounded-corners .carousel-slide > div :is(p):has(> picture) img {
-  border-radius: var(--l-rounded-corners);
+.carousel[class*='rounded-corners'] .carousel-slide,
+.carousel[class*='rounded-corners'] .carousel-slide > div :is(p > video, p > .milo-video, p > .video-holder video) {
+  overflow: hidden;
 }
 
 .carousel.s-rounded-corners .carousel-slide,
-.carousel.s-rounded-corners .carousel-slide > div :is(p):has(> picture) img {
+.carousel.s-rounded-corners .carousel-slide > div :is(p > picture img, p > video, p > .milo-video, p > .video-holder video) {
   border-radius: var(--s-rounded-corners);
 }
 
-.carousel.full-rounded-corners .carousel-slide,
-.carousel.full-rounded-corners .carousel-slide > div :is(p):has(> picture) img {
-  border-radius: var(--full-rounded-corners);
+.carousel.l-rounded-corners .carousel-slide,
+.carousel.l-rounded-corners .carousel-slide > div :is(p > picture img, p > video, p > .milo-video, p > .video-holder video) {
+  border-radius: var(--l-rounded-corners);
 }
 
-.carousel[class*='rounded-corners'] .carousel-slide {
-  overflow: hidden;
+.carousel.full-rounded-corners .carousel-slide,
+.carousel.full-rounded-corners .carousel-slide > div :is(p > picture img, p > video, p > .milo-video, p > .video-holder video) {
+  border-radius: var(--full-rounded-corners);
 }
 
-.carousel .carousel-slide > div p :is(.video-holder, video) {
+.carousel.video-fill .carousel-slide > div p :is(.video-holder, video),
+.carousel .carousel-slide.video-fill > div p :is(.video-holder, video) {
   width: 100%;
   height: auto;
 }
 
-.carousel[class*='rounded-corners'] .carousel-slide > div :is(p):has(> video, > picture, > .milo-video, > .modal-img-link) {
+.carousel[class*='rounded-corners'] .carousel-slide > div :is(p):has(> video, > picture, > .milo-video, > .modal-img-link, > .video-holder) {
   margin-top: 0;
   margin-bottom: 0;
   line-height: 0;