wizard responsive

public/css/app.css

@@ -54098,6 +54098,10 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
     .full-width-mobile {
         width: 100% !important;
     }
+
+    .full-height-mobile {
+        height: 100% !important;
+    }
  }
  /* full-width for mobile. Some component use inline styling for width */
 
@@ -56931,6 +56935,10 @@ body{
     margin-left: 2rem;
   }
 
+  .sm\:mt-6{
+    margin-top: 1.5rem;
+  }
+
   .sm\:block{
     display: block;
   }
@@ -57100,6 +57108,10 @@ body{
     padding: 1.75rem;
   }
 
+  .sm\:p-10{
+    padding: 2.5rem;
+  }
+
   .sm\:px-0{
     padding-left: 0px;
     padding-right: 0px;
@@ -57110,11 +57122,41 @@ body{
     padding-right: 0.5rem;
   }
 
+  .sm\:py-10{
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+
   .sm\:text-6xl{
     font-size: 2.5rem;
     line-height: 2.75rem;
   }
 
+  .sm\:text-xs{
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .sm\:text-base{
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .sm\:text-lg{
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .sm\:text-xl{
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .sm\:text-2xl{
+    font-size: 1.375rem;
+    line-height: 1.5rem;
+  }
+
   .sm\:text-purple{
     --tw-text-opacity: 1;
     color: rgb(85 88 139 / var(--tw-text-opacity));
@@ -57124,6 +57166,10 @@ body{
     right: 1rem;
   }
 
+  [dir="ltr"] .sm\:ltr\:pl-10{
+    padding-left: 2.5rem;
+  }
+
   [dir="rtl"] .sm\:rtl\:left-4{
     left: 1rem;
   }
@@ -57131,6 +57177,10 @@ body{
   [dir="rtl"] .sm\:rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 1;
   }
+
+  [dir="rtl"] .sm\:rtl\:pr-10{
+    padding-right: 2.5rem;
+  }
 }
 
 @media (min-width: 768px){

resources/assets/js/views/wizard/Company.vue

@@ -1,15 +1,15 @@
 <template>
     <div>
-        <div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
+        <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
             <WizardSteps :active_state="active"></WizardSteps>
 
             <form ref="form" class="w-full">
                 <div class="relative">
                     <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
-                        <span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
+                        <span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
                     </div>
 
-                    <div class="flex flex-col justify-between">
+                    <div class="flex flex-col justify-between -mt-5 sm:mt-0">
                         <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 menu-scroll gap-10">
                             <div class="sm:col-span-6">
                                 <base-input

resources/assets/js/views/wizard/Currencies.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
+    <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:p-10 full-height-mobile" style="height:675px;">
         <WizardSteps :active_state="active"></WizardSteps>
 
-        <div class="flex flex-col justify-between overflow-y-auto" style="height: calc(100% - 53px)">
+        <div class="flex flex-col justify-between -mt-5 sm:mt-0 overflow-y-auto" style="height: calc(100% - 53px)">
             <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
                 <span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
             </div>

resources/assets/js/views/wizard/Finish.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="relative bg-body z-10 rounded-lg shadow-2xl py-10 ltr:pl-10 rtl:pr-10 overflow-hidden">
+    <div class="relative bg-body z-10 rounded-lg shadow-2xl p-5 sm:py-10 sm:ltr:pl-10 sm:rtl:pr-10 overflow-hidden">
         <div class="pr-10">
             <WizardSteps :active_state="active"></WizardSteps>
         </div>
 
-        <div modal-container class="flex flex-col justify-between" style="height:565px;">
+        <div modal-container class="flex flex-col justify-between -mt-5 sm:mt-0" style="height:565px;">
             <div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
                 <span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
             </div>

resources/assets/js/views/wizard/Steps.vue

@@ -2,7 +2,7 @@
     <div>
         <nav aria-label="Progress">
         	<ol role="list" class="flex mb-10">
-                <li class="w-1/4">
+                <li class="w-1/3">
                 	<span class="pr-6 flex flex-col">
                         <span
                           	:class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]"
@@ -15,7 +15,7 @@
                 	</span>
               	</li>
 
-                <li class="w-1/4">
+                <li class="w-1/3">
                     <span class="px-3 flex flex-col">
                         <span
                             :class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]"
@@ -28,7 +28,7 @@
                     </span>
                 </li>
 
-                <li class="w-1/4">
+                <li class="w-1/3">
                     <span class="pl-6 flex flex-col">
                         <span
                             :class="[{'bg-purple': active_state == 3}]"

resources/assets/sass/app.css

@@ -605,6 +605,10 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
     .full-width-mobile {
         width: 100% !important;
     }
+
+    .full-height-mobile {
+        height: 100% !important;
+    }
  }
  /* full-width for mobile. Some component use inline styling for width */
 

safelist.txt

@@ -18,6 +18,16 @@ sm:min-h-500
 sm:max-w-4xl
 sm:space-x-4
 sm:text-purple
+sm:text-xs
+sm:text-base
+sm:text-lg
+sm:text-xl
+sm:text-2xl
+sm:p-10
+sm:py-10
+sm:ltr:pl-10
+sm:rtl:pr-10
+sm:mt-6
 md:grid-cols-2
 lg:mt-2
 lg:mt-4