ui-soxo-bootstrap-core 2.4.25 → 2.4.26

package/core/lib/pages/login/login.scss

@@ -5,17 +5,29 @@ body {
 .user-authentication-section {
   min-height: 90vh;
   display: flex;
-  margin: 0px 15%;
+  // margin: 0px 15%;
   justify-content: center;
+  padding: 0px 15%;
   // align-items: center;
 
+  @media (max-width: 1200px) {
+    margin: 0 5%;
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 10px;
+    padding-top: 20px;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .page-background {
-   position: absolute;
+    position: absolute;
     left: 0px;
     top: 0px;
-    height:40vh;
+    height: 40vh;
     width: 100%;
-    
+
     // background-image:url("./../../../assets/images/vector.png"); /* Set Image */ ;
     // background: url("./../../../assets/images/vector.png"),
     //             linear-gradient(to right, #D5F1FB, #24AEB8);
@@ -121,7 +133,7 @@ body {
     border: 1px solid #b7b7b7;
     text-align: center;
     border-radius: 2px;
-    margin: 16px 0px;
+    margin: 22px 0px;
     padding: 4px;
 
     img {
@@ -144,21 +156,22 @@ body {
     // box-shadow: 0 2px 4px rgba(104, 97, 97, 0.5);
     // display: flex;
     // align-items: center;
-    border-radius: 12px;
+    border-radius: 16px;
     background-color: white;
     overflow: hidden;
     border: 1px solid #e8e8e8;
 
-    width: 40%;
+    width: 42%;
 
     @media only screen and (max-width: 768px) {
-      width: 95%;
+      width: 100%;
+      padding: 0 16px;
 
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      text-align: center;
-      align-items: center;
+      // display: flex;
+      // flex-direction: column;
+      // justify-content: center;
+      // text-align: center;
+      // align-items: center;
     }
 
     .login-form-container {
@@ -166,20 +179,24 @@ body {
       flex-basis: 50%;
       // border: none !important;
       // box-shadow: none !important;
-      padding: 20px 30px;
+      // padding: 20px 30px;
+      padding: 20px;
+      padding-top: 2px;
 
       @media only screen and (max-width: 768px) {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        text-align: center;
-        align-items: center;
+        padding: 16px;
+        // display: flex;
+        // flex-direction: column;
+        // justify-content: center;
+        // text-align: center;
+        // align-items: center;
       }
 
       .branch-switcher {
         .branches {
           .ant-select {
-            min-width: 150px;
+            min-width: auto !important;
+            width: 100%;
           }
         }
       }
@@ -217,7 +234,7 @@ body {
   .ant-form {
     // height: 100%;
     .ant-form-item {
-      margin: 30px 0px;
+      margin: 20px 0px;
       .ant-form-item-label {
         margin: 0 0 8px 0;
         line-height: 0;
@@ -249,9 +266,13 @@ body {
     width: 100%;
   }
 }
+.otp-container {
+  display: flex;
+}
 
 .otp-input-container p {
-  margin: 20px 0 -10px 0;
+  margin: 12px 0 0 0;
+  font-size: 12px;
 }
 
 .otp-input-container .otp-title {
@@ -259,13 +280,17 @@ body {
     text-align: left;
   }
 }
+.ant-divider-horizontal {
+  margin-bottom: 16px;
+  margin-top: 2px;
+}
 
 .otp-input-container .resend-otp-link {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
-  margin-top: -10px;
+  // margin-top: -10px;
   color: #0c66e4;
   margin-bottom: 10px;
 }
@@ -292,7 +317,62 @@ body {
 .otp-input-container {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 2px;
+}
+.otp-actions {
+  background-color: #f5f5f5; // light gray
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  // margin-top: 6px;
+}
+.resend-action {
+  margin-bottom: 8px;
+  display: flex;
+  gap: 6px;
+}
+.otp-method-section {
+  // margin-top: 10px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  .otp-method-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+
+  .otp-method-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    gap: 30px;
+    font-size: 12px;
+  }
+  .otp-icon {
+  position: relative;
+  top: 2px;
+}
+
+  .ant-radio-wrapper {
+    display: flex;
+    // align-items: center;
+    gap: 6px;
+
+    svg {
+      font-size: 18px;
+      opacity: 0.8;
+    }
+  }
+
+  .otp-mode-error {
+    margin: 5px;
+    font-size: 13px;
+    color: red;
+  }
 }
 
 .otp-mode-text {
@@ -308,25 +388,25 @@ input {
 input:focus {
   border-color: #fff !important;
 }
-.otp-container{
+.otp-container {
   display: flex;
-  flex-direction:row;
+  flex-direction: column;
   gap: 7px;
 }
 
-.otp-container input[type="text"]:focus {
+.otp-container input[type='text']:focus {
   border-color: #fff !important;
 }
 
 .full-page {
   height: 100vh;
-  background-color: "cover"; // Ensures full coverage
+  background-color: 'cover'; // Ensures full coverage
   background-position: 'bottom center'; // Aligns image at the bottom
-  background-size: '100% auto';// image spans full width
-  background-repeat:no-repeat ;
-  
+  background-size: '100% auto'; // image spans full width
+  background-repeat: no-repeat;
+
   min-height: 100vh; // Ensures full height
-  width: 100%, // Covers the full width
+  width: 100%; // Covers the full width
 }
 .ant-input {
   background-color: transparent !important;
@@ -344,3 +424,35 @@ input:focus {
 //   background-color: var(--custom-input-bg-color);
 //   color: var(--custom-input-color);
 // }
+/* Mobile: stack OTP radio options in separate rows */
+/* Mobile phones (iPhone) – stack in one column */
+@media only screen and (max-width: 600px) {
+  .otp-method-group {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    gap: 12px !important;
+  }
+}
+
+/* iPad Mini + Tablets (600px to 1024px) – show in row */
+@media only screen and (min-width: 601px) and (max-width: 1024px) {
+  .otp-method-group {
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    gap: 20px !important;
+    width: 100%;
+  }
+
+  .otp-method-group .ant-radio-wrapper {
+    flex: 1; /* evenly spaced columns */
+  }
+}
+
+/* Desktop – normal layout */
+@media only screen and (min-width: 1025px) {
+  .otp-method-group {
+    flex-direction: row;
+    gap: 30px;
+  }
+}