fixed padding of hidden carousel dots

inovex · Oct 19, 2023 · 652adf0 · 652adf0
1 parent 5ec471c
commit 652adf0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 21 deletions.
diff --git a/src/components/Feedback/FeedbackCarousel.scss b/src/components/Feedback/FeedbackCarousel.scss
@@ -25,6 +25,7 @@
   all: unset;
   padding: 16px 8px;
   cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.7, 0.53, 0.17, 0.99);
 
   &:hover > .feedback-carousel__dot {
     transform: scale(1.4);
@@ -33,35 +34,39 @@
   &:focus-visible > .feedback-carousel__dot {
     outline: 3px solid var(--darkmode-pink);
   }
-}
 
-.feedback-carousel__dot {
-  display: block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--lightmode-pink);
-  opacity: 0.5;
-
-  transition: all 0.4s cubic-bezier(0.7, 0.53, 0.17, 0.99);
-
-  &.active {
+  &.active > .feedback-carousel__dot {
     transform: scale(1.2);
     opacity: 1;
   }
 
-  &.small {
+  &.small > .feedback-carousel__dot {
     width: 4px;
     height: 4px;
   }
 
   &.hidden {
-    width: 0px;
-    height: 0px;
-    margin: 0;
+    padding: 0;
+
+    > .feedback-carousel__dot {
+      width: 0px;
+      height: 0px;
+      margin: 0;
+    }
   }
 }
 
+.feedback-carousel__dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--lightmode-pink);
+  opacity: 0.5;
+
+  transition: all 0.4s cubic-bezier(0.7, 0.53, 0.17, 0.99);
+}
+
 .use-spring-carousel-item {
   justify-content: center;
 }

diff --git a/src/components/Feedback/FeedbackCarousel.tsx b/src/components/Feedback/FeedbackCarousel.tsx
@@ -126,16 +126,13 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
           return (
             <button
               key={index}
-              className="feedback-carousel__button"
+              className={`feedback-carousel__button ${dotState}`}
               onClick={() => {
                 slideToItem(index);
                 setActiveSlide(index);
               }}
             >
-              <div
-                className={`feedback-carousel__dot ${dotState}
-                `}
-              />
+              <div className="feedback-carousel__dot" />
             </button>
           );
         })}