💄 Adjust carousel arrows (per Figma design)

fernandams · May 27, 2024 · 690e79a · 690e79a
1 parent 8a6deaf
commit 690e79a
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/img/Next.svg b/img/Next.svg
diff --git a/img/Prev.svg b/img/Prev.svg
diff --git a/styles/carrossel.css b/styles/carrossel.css
@@ -88,10 +88,43 @@
     .swiper {
         width: 60%;
     }
+
+    .swiper-pagination-bullet {
+        width: 10px;
+        height: 10px;
+        opacity: 0.4;
+    }
+
+    .swiper-pagination-bullet-active {
+        opacity: 1;
+    }
+
     .swiper-button-prev,
     .swiper-button-next {
         display: block;
         top: 60%;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        background-color: var(--azul);
+        cursor: pointer;
+        color: var(--branco);
+        background-position: center;
+        padding: 8px 16px;
+        border-radius: 100%;
+        background-repeat: no-repeat;
+    }
+
+    .swiper-button-prev {
+        background-image: url("../img/Prev.svg");
+    }
+
+    .swiper-button-next {
+        background-image: url("../img/Next.svg");
+    }
+
+    .swiper-button-next::after,
+    .swiper-button-prev::after {
+        content: "";
+        display: none;
     }
 
     .card {