Product Conversion

src/components/GoldDayCalculatorModal.vue

@@ -4,11 +4,11 @@
     width="400px"
     destroy-on-close
     custom-footer
-    wrap-class-name="gold-day-calc-modal"
+    wrap-class-name="app-premium-modal--scroll-tall"
   >
     <template #title>
-      <div class="gold-day-calc-modal__title">
-        <BasicIcon icon="vuesax-linear:calculator" size="20" class="gold-day-calc-modal__title-icon" />
+      <div class="app-premium-modal__title">
+        <BasicIcon icon="vuesax-linear:calculator" size="20" class="app-premium-modal__title-icon" />
         <span>ماشین حساب</span>
       </div>
     </template>
@@ -75,7 +75,7 @@
     </div>
 
     <template #footer>
-      <BasicButton type="primary" class="!w-full" size="middle" @click="recalculate">
+      <BasicButton type="primary" class="app-premium-modal__btn-primary !w-full" size="middle" @click="recalculate">
         محاسبه مجدد
       </BasicButton>
     </template>
@@ -219,99 +219,3 @@ watch(visible, async (open) => {
   display: inline-block;
 }
 </style>
-
-<style lang="less">
-.gold-day-calc-modal {
-  .ant-modal-content {
-    direction: rtl;
-    display: flex;
-    flex-direction: column;
-    max-height: min(88dvh, 640px);
-    overflow: hidden;
-  }
-
-  .ant-modal-header {
-    flex-shrink: 0;
-    direction: rtl;
-    text-align: right;
-    padding-left: 2.75rem;
-    padding-right: 1rem;
-  }
-
-  .ant-modal-title {
-    text-align: right;
-    width: 100%;
-  }
-
-  .gold-day-calc-modal__title {
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 0.5rem;
-    direction: rtl;
-    width: 100%;
-  }
-
-  .gold-day-calc-modal__title-icon {
-    flex-shrink: 0;
-    color: var(--App-secondary-color, #c9a062);
-  }
-
-  .ant-modal-close {
-    inset-inline-start: 0 !important;
-    inset-inline-end: auto !important;
-    right: auto !important;
-    left: 0 !important;
-  }
-
-  .ant-modal-body {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
-    padding-bottom: 0.25rem;
-    max-height: none;
-  }
-
-  #body {
-    max-height: min(48dvh, 360px) !important;
-    overflow-y: auto !important;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .ant-modal-footer {
-    flex-shrink: 0;
-    margin-top: 0;
-    padding-top: 0.75rem;
-    border-top: 1px solid rgba(148, 163, 184, 0.25);
-  }
-}
-
-@media screen and (max-width: 767.98px) {
-  .gold-day-calc-modal {
-    .ant-modal {
-      max-width: calc(100vw - 1.5rem);
-      margin: 0 auto;
-    }
-
-    .ant-modal-content {
-      max-height: min(86dvh, 100%);
-    }
-
-    #body {
-      max-height: min(42dvh, 280px) !important;
-    }
-
-    .ant-modal-body {
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
-    }
-  }
-}
-
-@media screen and (max-width: 400px) {
-  .gold-day-calc-modal #body {
-    max-height: min(38dvh, 240px) !important;
-  }
-}
-</style>