@pisell/private-materials 6.9.6 → 6.10.2

package/es/components/checkout/components/PaymentDetailModal/index.less

@@ -59,432 +59,435 @@
     font-size: 14px;
     font-weight: 500;
   }
-  /* PaymentDetailModal组件样式 - 基于Figma设计 */
-  .payment-detail-modal {
-    width: 100%;
-    height: 100%;
-    background: white;
-    overflow: hidden;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
-  }
-
-  .main-content {
-    align-self: stretch;
-    padding: 16px 0;
-    background: white;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 16px;
-  }
-
-  /* Section 通用样式 */
-  .section-container {
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 6px;
-  }
-
-  .section-header {
-    align-self: stretch;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .section-title-container {
-    width: 232.5px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
-  .section-title {
-    color: #1B1B1B;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-  .section-right {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .section-amount {
-    color: black;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-  /* 折叠图标样式 */
-  .collapse-icon {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: transform 0.2s ease;
-  }
-
-  .collapse-icon.expanded {
-    transform: rotate(180deg);
-  }
-
-  /* 信息图标样式 */
-  .info-icon {
-    width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Section 内容样式 */
-  .section-content {
-    align-self: stretch;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  /* Order Details 网格布局 */
-  .order-details-grid {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .order-details-column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 4px;
-  }
-
-  .divider-vertical {
-    width: 1px;
-    align-self: stretch;
-    background: #D0D5DD;
-  }
-
-  .order-row {
-    align-self: stretch;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .order-row-left {
-    flex: 1;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .order-row-label {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
-  .order-row-label-with-icon {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .order-row-text {
-    color: black;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  .order-row-subtext {
-    color: #667085;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  .order-row-amount {
-    color: black;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  /* 水平分隔线 */
-  .divider-horizontal {
-    align-self: stretch;
-    height: 1px;
-    border-top: 1px solid black;
-  }
-
-  /* Payment Records 样式 */
-  .payment-record-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .payment-record-header {
-    align-self: stretch;
-    height: 24px;
-    border-top: 1px solid black;
-    border-bottom: 1px solid black;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .payment-record-info {
-    flex: 1;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 8px;
-  }
+}
 
-  .payment-record-text {
-    color: black;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  .payment-record-amount {
-    color: black;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-  .payment-item-header {
-    width: 100%;
-    color: black;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .payment-item {
-    align-self: stretch;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 8px;
-    margin-left: 10px;
-    margin-right: 64px;
-  }
 
-  .payment-item-bullet {
-    width: 6px;
-    height: 6px;
-    background-color: #475467;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
 
-  .payment-item-content {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .payment-item-text {
-    color: #475467;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  .payment-item-actions {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .payment-item-amount {
-    color: #475467;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  .void-button {
-    padding: 2px 16px;
-    background: #079455;
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-    border: none;
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    height: 32px;
-    color: white;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 22px;
-  }
-
-  .void-button:hover {
-    background: #065f41;
-  }
-
-  /* Balance to Pay 特殊样式 */
-  .balance-to-pay-section {
-    align-self: stretch;
-    padding-top: 4px;
-    overflow: hidden;
-    border-radius: 8px;
-    border: 1px solid #7F56DA;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .balance-to-pay-header {
-    align-self: stretch;
-    padding: 0 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .balance-to-pay-title {
-    color: #7F56DA;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-  .balance-to-pay-right {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .balance-to-pay-amount {
-    color: #7F56DA;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-  .balance-to-pay-content {
-    align-self: stretch;
-    padding: 0 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .balance-item-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 24px;
-  }
-
-  .balance-item-text {
-    color: #475467;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  .balance-item-amount {
-    color: #475467;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    word-wrap: break-word;
-  }
-
-  /* Balance Due 最终结果样式 */
-  .balance-due-section {
-    align-self: stretch;
-    padding: 4px 16px;
-    background: #5D3F9F;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .balance-due-header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .balance-due-title {
-    color: white;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-  .balance-due-amount {
-    color: white;
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 24px;
-    word-wrap: break-word;
-  }
-
-}
+/* PaymentDetailModal组件样式 - 基于Figma设计 */
+.payment-detail-modal {
+  width: 100%;
+  height: 100%;
+  background: white;
+  overflow: hidden;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.main-content {
+  align-self: stretch;
+  padding: 16px 0;
+  background: white;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+/* Section 通用样式 */
+.section-container {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.section-header {
+  align-self: stretch;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.section-title-container {
+  width: 232.5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.section-title {
+  color: #1B1B1B;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  word-wrap: break-word;
+}
+
+.section-right {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+}
+
+.section-amount {
+  color: black;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  word-wrap: break-word;
+}
+
+/* 折叠图标样式 */
+.collapse-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+.collapse-icon.expanded {
+  transform: rotate(180deg);
+}
+
+/* 信息图标样式 */
+.info-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Section 内容样式 */
+.section-content {
+  align-self: stretch;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+/* Order Details 网格布局 */
+.order-details-grid {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.order-details-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.divider-vertical {
+  width: 1px;
+  align-self: stretch;
+  background: #D0D5DD;
+}
+
+.order-row {
+  align-self: stretch;
+  height: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.order-row-left {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+}
+
+.order-row-label {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.order-row-label-with-icon {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 4px;
+}
+
+.order-row-text {
+  color: black;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+
+.order-row-subtext {
+  color: #667085;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+
+.order-row-amount {
+  color: black;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+
+/* 水平分隔线 */
+.divider-horizontal {
+  align-self: stretch;
+  height: 1px;
+  border-top: 1px solid black;
+}
+
+/* Payment Records 样式 */
+.payment-record-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.payment-record-header {
+  align-self: stretch;
+  height: 24px;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.payment-record-info {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+}
+
+.payment-record-text {
+  color: black;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+
+.payment-record-amount {
+  color: black;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+.payment-item-header {
+  width: 100%;
+  color: black;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+  display: flex;
+  justify-content: space-between;
+}
+
+.payment-item {
+  align-self: stretch;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  margin-left: 10px;
+  margin-right: 64px;
+}
+
+.payment-item-bullet {
+  width: 6px;
+  height: 6px;
+  background-color: #475467;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.payment-item-content {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.payment-item-text {
+  color: #475467;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+
+.payment-item-actions {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+}
+
+.payment-item-amount {
+  color: #475467;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+
+.void-button {
+  padding: 2px 16px;
+  background: #079455;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  border: none;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  height: 32px;
+  color: white;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.void-button:hover {
+  background: #065f41;
+}
+
+/* Balance to Pay 特殊样式 */
+.balance-to-pay-section {
+  align-self: stretch;
+  padding-top: 4px;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid #7F56DA;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.balance-to-pay-header {
+  align-self: stretch;
+  padding: 0 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.balance-to-pay-title {
+  color: #7F56DA;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  word-wrap: break-word;
+}
+
+.balance-to-pay-right {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.balance-to-pay-amount {
+  color: #7F56DA;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  word-wrap: break-word;
+}
+
+.balance-to-pay-content {
+  align-self: stretch;
+  padding: 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.balance-item-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 24px;
+}
+
+.balance-item-text {
+  color: #475467;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+
+.balance-item-amount {
+  color: #475467;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+
+/* Balance Due 最终结果样式 */
+.balance-due-section {
+  align-self: stretch;
+  padding: 4px 16px;
+  background: #5D3F9F;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.balance-due-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.balance-due-title {
+  color: white;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  word-wrap: break-word;
+}
+
+.balance-due-amount {
+  color: white;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  word-wrap: break-word;
+}