@pisell/private-materials 6.0.25 → 6.2.1

package/es/components/pay/toC/WalletPassBlock/index.less

@@ -4,11 +4,16 @@
     margin-top: 8px;
     .wallet-pass-card-icon {
       font-size: 20px;
-      color: #344054;
+      color: #fff;
     }
     & > span {
       display: flex;
       align-items: center;
+      justify-content: center;
+      & > span:first-child {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
     }
   }
 
@@ -23,27 +28,45 @@
   .wallet-pass-card {
     margin-top: 20px;
     border-radius: 12px;
-    border: 1px solid var(--Gray-400, #98A2B3);
-    background: var(--Base-White, #FFF);
+    border: 1px solid var(--Gray-400, #98a2b3);
+    background: var(--Base-White, #fff);
+    .pisell-row-center {
+      width: 100%;
+    }
 
     .wallet-pass-card-title {
+      display: flex;
+      justify-content: space-between;
       color: var(--Gray-900, #101828);
       font-size: 16px;
-      font-style: normal;
       font-weight: 600;
       line-height: 20px;
+      gap: 6px;
+      .wallet-pass-card-title-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        .wallet-pass-card-title-left-icon {
+          font-size: 22px;
+        }
+      }
+      .wallet-pass-card-title-right {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+        .wallet-pass-card-title-right-icon {
+          font-size: 14px;
+        }
+      }
     }
 
     .wallet-pass-card-desc {
-      color: var(--Gray-600, #101828);
+      color: #757575;
       font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px;
-
-      .price {
-        color: var(--theme-color, #7F56D9);
-      }
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+      margin: 4px 0 0;
     }
 
     //.wallet-pass-card-icon {
@@ -73,4 +96,54 @@
     line-height: 24px;
     /* 150% */
   }
-}
+
+  .wallet-pass-card-desc-wrap {
+    .wallet-pass-card-total-savings {
+      .wallet-pass-card-total-savings-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .wallet-pass-card-total-savings-title-left {
+          color: #009951;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 28px; /* 175% */
+        }
+        .wallet-pass-card-total-savings-title-right {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          color: #757575;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 20px; /* 166.667% */
+          padding: 7px 0 7px 0px;
+          .wallet-pass-card-total-savings-title-right-icon {
+            font-size: 18px;
+            color: #344054;
+            transition: transform 0.3s ease;
+            
+            &.is-rotate {
+              transform: rotate(180deg);
+            }
+          }
+        }
+      }
+
+      .wallet-pass-card-total-savings-desc {
+        overflow: hidden;
+        opacity: 0;
+        transition: all 0.3s ease-in-out;
+        will-change: height, opacity;
+
+        &[style*="height: 0"] {
+          opacity: 0;
+        }
+
+        &:not([style*="height: 0"]) {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}