refactor base modal styles

resources/assets/js/components/base/BaseInput.vue

@@ -20,7 +20,7 @@
       @blur="handleFocusOut"
     >
     <div v-if="showPassword && isAlignLeftIcon" style="cursor: pointer" @click="showPass = !showPass" >
-      <font-awesome-icon :icon="!showPass ?'eye-slash': 'eye'" class="right-icon" />
+      <font-awesome-icon :icon="!showPass ?'eye': 'eye-slash'" class="right-icon" />
     </div>
     <font-awesome-icon v-if="icon && !isAlignLeftIcon" :icon="icon" class="right-icon" />
   </div>

resources/assets/js/components/base/modal/BaseModal.vue

@@ -2,8 +2,8 @@
   <transition name="fade">
     <div v-if="modalActive" :class="'size-' + modalSize" class="base-modal">
       <div class="modal-body">
-        <div class="close-icon">
-          <font-awesome-icon class="mr-2" icon="times" @click="closeModal"/>
+        <div class="close-icon" @click="closeModal">
+          <font-awesome-icon icon="times" />
         </div>
         <div class="modal-header p-3">
           <h5 class="modal-heading">{{ modalTitle }}</h5>

resources/assets/sass/components/base-modal.scss

@@ -55,14 +55,29 @@
 
     .close-icon {
         position: absolute;
-        padding: 6px 0 0 0;
+        padding: 6px;
         top: 23px;
         right: 15px;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 20px;
         cursor: pointer;
     }
 
 }
 
 
+@media (max-width: $x-small-breakpoint) {
+    .base-modal {
 
+        .modal-body {
+            height: 100%;
+            overflow: scroll;
+            border-radius: 0px;
+
+        }
+
+    }
+}
 

resources/assets/sass/components/customer-modal.scss

@@ -36,11 +36,16 @@
 }
 
 
-@media(max-width: $x-small-breakpoint ) {
+@media (max-width: $x-small-breakpoint) {
 
     .base-modal {
 
         .customer-modal {
+            width: 100vw;
+
+            .required {
+                position: relative;
+            }
 
             .input-label {
                 text-align: left;
@@ -50,4 +55,4 @@
 
     }
 
-}
+}

resources/assets/sass/components/item-modal.scss

@@ -26,6 +26,7 @@
     .base-modal {
 
         .item-modal {
+            width: 100vw;
 
             .input-label {
                 text-align: left;
@@ -35,4 +36,4 @@
 
     }
 
-}
+}

resources/assets/sass/components/tax-type-modal.scss

@@ -31,6 +31,7 @@
     .base-modal {
 
         .tax-type-modal {
+            width: 100vw;
 
             .input-label {
                 text-align: left;

resources/assets/sass/components/template-modal.scss

@@ -38,3 +38,20 @@
         }
     }
 }
+
+@media (max-width: $x-small-breakpoint) {
+
+    .base-modal {
+
+        .template-modal {
+            width: 100vw;
+
+            .template-container {
+                justify-content: center;
+            }
+
+        }
+
+    }
+
+}

resources/assets/sass/pages/invoices/view.scss

@@ -13,7 +13,7 @@
         position: fixed;
         top: 0;
         width: 300px;
-        z-index: 30;
+        z-index: 25;
         background: #FFFFFF;
     }