Fix CSS conflict with swiper

Related to #113
sebastienbarbier · Jun 28, 2023 · 1182e9b · 1182e9b
1 parent 5e5dd0b
commit 1182e9b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/app/components/Transactions.js b/src/app/components/Transactions.js
@@ -288,7 +288,7 @@ export default function Transactions(props) {
         <div className="indicators hideModalSize">
           <swiper-container
             space-between="0"
-            class="metrics"
+            class="metrics transactions_swiper"
             slides-per-view="auto"
             style={{ padding: "0 40vw 0 24px" }}
           >

diff --git a/src/app/components/Transactions.scss b/src/app/components/Transactions.scss
@@ -20,9 +20,9 @@ div.layout, form.layout {
     }
   }
 
-  swiper-slide {
+  .transactions_swiper swiper-slide {
     font-size: 12px;
-    max-width: 180px;
+    max-width: 200px;
   }
 
   .transactions_two_columns {
@@ -48,7 +48,17 @@ div.layout, form.layout {
       h2 {
         font-size: 30px;
       }
-
+      .metrics {
+        display: flex;
+        justify-content: center;
+        background: rgba(170, 170, 170, 0.1);
+        padding-bottom: 10px;
+        .incomes_expenses {
+          p {
+            margin-right: 10px;
+          }
+        }
+      }
     }
 
     @media screen and (min-width: $smallScreen) {