ui-soxo-bootstrap-core 2.6.1-dev.1 → 2.6.1-dev.11

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

@@ -1,17 +1,35 @@
+// Variables
+$primary-color: #0c66e4;
+$bg-color-light: #f5f5f5;
+$border-color-light: #e8e8e8;
+$border-color-medium: #e0e0e0;
+$border-color-dark: #d9d9d9;
+$text-color-dark: #071822;
+$white: #ffffff;
+$error-color: red;
+
 body {
   overflow: hidden;
 }
 
+.full-page {
+  height: 100vh;
+  min-height: 100vh;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+  background-size: 100% auto;
+}
+
 .user-authentication-section {
   min-height: 90vh;
   display: flex;
-  // margin: 0px 15%;
   justify-content: center;
-  padding: 0px 15%;
-  // align-items: center;
+  padding: 0 15%;
 
   @media (max-width: 1200px) {
     margin: 0 5%;
+    padding: 0 5%;
   }
 
   @media (max-width: 768px) {
@@ -21,63 +39,22 @@ body {
     align-items: center;
   }
 
+  @media only screen and (min-width: 608px) {
+    justify-content: center;
+    align-items: center;
+  }
+
   .page-background {
     position: absolute;
-    left: 0px;
-    top: 0px;
+    left: 0;
+    top: 0;
     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);
-    // background-size: cover;
-    // background-position: center;
-    // background: linear-gradient(to right, #7ddafac2, #24AEB8); /* Gradient */
-    // url("./../../../assets/images/vector.png"),
-    // /* Background image */ linear-gradient(to right, #7ddafac2, #10c7ef61); /* Gradient */
-
-    // background: #00b4db; /* fallback for old browsers */
-    // background: -webkit-linear-gradient(to right, #0083b0, #00b4db); /* Chrome 10-25, Safari 5.1-6 */
-    // background: linear-gradient(
-    //   to right,
-    //   #0083b0,
-    //   #00b4db
-    // ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-
-    // background: rgb(131, 58, 180);
-    // background: -moz-linear-gradient(
-    //   90deg,
-    //   rgba(131, 58, 180, 1) 0%,
-    //   rgba(253, 29, 29, 1) 50%,
-    //   rgba(252, 176, 69, 1) 100%
-    // );
-    // background: -webkit-linear-gradient(
-    //   90deg,
-    //   rgba(131, 58, 180, 1) 0%,
-    //   rgba(253, 29, 29, 1) 50%,
-    //   rgba(252, 176, 69, 1) 100%
-    // );
-
-    // background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
-    // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#fcb045",GradientType=1);
-
-    // background-image: linear-gradient(to right top, #051937, #384164, #6b6e95, #a09ec9, #d9d1ff);
-    // background: #BAD7FF;
-  }
-
-  @media screen and (max-width: 1200px) {
-    margin: 0px 5%;
-  }
-
-  @media only screen and (min-width: 608px) {
-    justify-content: center;
-    align-items: center;
   }
 
   .homescreen {
     width: 100%;
-    margin: 10px 0px;
+    margin: 10px 0;
     border-radius: 4px;
     background-color: aliceblue;
     padding: 10px;
@@ -85,222 +62,276 @@ body {
     overflow: hidden;
   }
 
-  .customers {
+  .customers,
+  .customers2 {
     width: 50%;
-    margin: 20px 0px;
+    margin: 20px 0;
 
     @media only screen and (min-width: 768px) {
       width: 50%;
-      /* margin: 20px 0px; */
-      /* float: right; */
-      // position: absolute;
-      // right: 0px;
-      // top: 20%;
     }
+    @media only screen and (max-width: 768px) {
+      width: 85%;
+    }
+  }
 
+  .customers {
     @media only screen and (min-width: 769px) {
       display: none;
     }
-
-    @media only screen and (max-width: 768px) {
-      width: 85%;
-    }
   }
 
   .customers2 {
-    width: 50%;
-    margin: 20px 0px;
     padding: 0 20px;
-
     @media only screen and (min-width: 768px) {
       width: 40%;
-      /* margin: 20px 0px; */
-      /* float: right; */
-      // position: absolute;
-      // right: 0px;
-      // top: 20%;
     }
-
     @media only screen and (max-width: 768px) {
       display: none;
     }
   }
-  .brand-logo {
-    width: 80px;
-    box-shadow:
-      1px 0 8px 0 rgba(0, 0, 0, 0.05),
-      8px 8px 18px 0 rgba(0, 0, 0, 0.05);
-    border: 1px solid #b7b7b7;
-    text-align: center;
-    border-radius: 2px;
-    margin: 22px 0px;
-    padding: 4px;
-
-    img {
-      width: 80px;
-    }
-  }
-
-  .footer-logo {
-    width: 180px;
-    // box-shadow: 1px 0 8px 0 rgba(0, 0, 0, 0.05), 8px 8px 18px 0 rgba(0, 0, 0, 0.05);
-    // border: 1px solid #b7b7b7;
-    padding: 4px;
-    border-radius: 2px;
-    margin: 20px 0px 30px;
-  }
 
   .auth-form-wrapper {
-    // padding: 15px 10px;
     box-sizing: border-box;
-    // box-shadow: 0 2px 4px rgba(104, 97, 97, 0.5);
-    // display: flex;
-    // align-items: center;
     border-radius: 16px;
-    background-color: white;
+    background-color: $white;
     overflow: hidden;
-    border: 1px solid #e8e8e8;
-
-    width: 42%;
+    // border: 1px solid $border-color-light;
+    width: 40%;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 
     @media only screen and (max-width: 768px) {
       width: 100%;
       padding: 0 16px;
-
-      // display: flex;
-      // flex-direction: column;
-      // justify-content: center;
-      // text-align: center;
-      // align-items: center;
+      flex-direction: column;
     }
 
     .login-form-container {
-      border: 1px solid #e0e0e0;
+      // border: 1px solid $border-color-medium;
       flex-basis: 50%;
-      // border: none !important;
-      // box-shadow: none !important;
-      // padding: 20px 30px;
       padding: 20px;
-      padding-top: 2px;
+      // padding-top: 2px;
 
       @media only screen and (max-width: 768px) {
         padding: 16px;
-        // display: flex;
-        // flex-direction: column;
-        // justify-content: center;
-        // text-align: center;
-        // align-items: center;
       }
 
-      .branch-switcher {
-        .branches {
-          .ant-select {
-            min-width: auto !important;
-            width: 100%;
+      .branch-switcher .branches .ant-select {
+        min-width: auto !important;
+        width: 100%;
+      }
+
+      .brand-logo {
+        width: 80px;
+        box-shadow:
+          1px 0 8px 0 rgba(0, 0, 0, 0.05),
+          8px 8px 18px 0 rgba(0, 0, 0, 0.05);
+        border: 1px solid #b7b7b7;
+        text-align: center;
+        border-radius: 2px;
+        // margin: 22px 0;
+        padding: 4px;
+
+        img {
+          width: 80px;
+        }
+      }
+
+      .otp-form {
+        margin-top: 20px;
+        .otp-input-container {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+
+          p {
+            margin: 12px 0 0 0;
+            font-size: 12px;
+          }
+
+          .otp-title {
+            @media only screen and (max-width: 768px) {
+              text-align: left;
+            }
+          }
+
+          .otp-method-section {
+            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;
+
+              .ant-radio-wrapper {
+                display: flex;
+                gap: 6px;
+
+                svg {
+                  font-size: 18px;
+                  opacity: 0.8;
+                }
+              }
+
+              @media only screen and (max-width: 600px) {
+                flex-direction: column !important;
+                align-items: flex-start !important;
+                gap: 12px !important;
+              }
+
+              @media only screen and (min-width: 601px) and (max-width: 1024px) {
+                flex-direction: row !important;
+                align-items: center !important;
+                justify-content: space-between !important;
+                gap: 20px !important;
+                width: 100%;
+
+                .ant-radio-wrapper {
+                  flex: 1;
+                }
+              }
+            }
+
+            .otp-mode-error {
+              margin: 5px;
+              font-size: 13px;
+              color: $error-color;
+            }
+
+            .otp-icon {
+              position: relative;
+              top: 2px;
+            }
+          }
+
+          .otp-container {
+            display: flex;
+            flex-direction: column;
+            gap: 7px;
+
+            input[type='text']:focus {
+              border-color: $white !important;
+            }
+          }
+
+          .otp-mode-text {
+            text-transform: capitalize;
+          }
+        }
+
+        .forgot-password {
+          margin-top: 8px;
+          text-align: center;
+
+          a {
+            color: #204b7e;
           }
         }
       }
     }
 
-    .center-line {
-      border-left: 2px solid #d9d9d9;
-      height: 180px;
+    .otp-actions {
+      background-color: $bg-color-light;
+      padding: 12px 16px;
+      display: flex;
+      justify-content: space-between;
+      gap: 6px;
+
+      .resend-action {
+        margin-bottom: 8px;
+        display: flex;
+        gap: 6px;
+
+        .resend-otp-link {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          color: $primary-color;
+          margin-bottom: 10px;
+          margin: auto;
+        }
+      }
     }
 
     .center-line {
+      border-left: 2px solid $border-color-dark;
+      height: 180px;
+
       @media only screen and (max-width: 768px) {
         display: none;
       }
     }
-
-    @media only screen and (max-width: 768px) {
-      padding: 0;
-      // min-width: 275px;
-      flex-direction: column;
-    }
-    .form-title {
-      // h4 {
-      //   color: #071822;
-      //   font-weight: 600;
-      //   // size: 13px;
-      //   margin: 10px 0px;
-      //   font-size: 20px;
-
-      //   @media only screen and (max-width: 1400px) {
-      //     line-height: 30px;
-      //   }
-    }
   }
+
+  // Scoped Ant Design Overrides
   .ant-form {
-    // height: 100%;
+    .ant-form-item:not(:last-child) {
+      margin: 20px 0;
+    }
     .ant-form-item {
-      margin: 20px 0px;
+      margin: 20px 0;
+
       .ant-form-item-label {
         margin: 0 0 8px 0;
         line-height: 0;
         padding: 0;
+
+        > label {
+          color: var(--custom-text-color);
+        }
       }
     }
-    .ant-btn-primary {
-      margin-top: 10px;
+
+    .ant-form-explain {
+      position: absolute;
+      font-size: 12px;
+      margin-left: 2px;
     }
   }
-  .ant-form-explain {
-    position: absolute;
-    font-size: 12px;
-    margin-left: 2px;
+
+  .ant-form-vertical .ant-form-item .ant-form-item-control {
+    min-width: 100%;
   }
+
   .ant-btn-primary {
-    // width: 100%;
-    background-color: #0c66e4;
-    // height: 35px;
+    margin-top: 10px;
+    background-color: $primary-color;
     border-radius: 4px;
     width: 100%;
-    @media only screen and (max-width: 768px) {
-      width: 100%;
-      background-color: #0c66e4;
-      // min-width: 275px;
-    }
   }
+
   .ant-btn-secondary {
     width: 100%;
   }
-}
-.otp-container {
-  display: flex;
-}
 
-.otp-input-container p {
-  margin: 12px 0 0 0;
-  font-size: 12px;
-}
-
-.otp-input-container .otp-title {
-  @media only screen and (max-width: 768px) {
-    text-align: left;
+  .ant-divider-horizontal {
+    margin-bottom: 16px;
+    margin-top: 2px;
   }
-}
-.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;
-  color: #0c66e4;
-  margin-bottom: 10px;
-}
+  .ant-input {
+    background-color: transparent !important;
+  }
 
-.ant-form-vertical .ant-form-item .ant-form-item-control {
-  min-width: 100%;
-}
+  input {
+    border: 1px solid $border-color-dark;
+    border-radius: 2px;
 
-.resend-otp-link {
-  margin: auto;
+    &:focus {
+      border-color: $white !important;
+    }
+  }
 }
 
 .footer {
@@ -312,147 +343,11 @@ body {
   @media only screen and (max-width: 768px) {
     display: none;
   }
-}
-
-.otp-input-container {
-  display: flex;
-  flex-direction: column;
-  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 {
-  text-transform: capitalize;
-}
-
-input {
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  // padding: 30px;
-}
-
-input:focus {
-  border-color: #fff !important;
-}
-.otp-container {
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-}
-
-.otp-container input[type='text']:focus {
-  border-color: #fff !important;
-}
-
-.full-page {
-  height: 100vh;
-  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;
-
-  min-height: 100vh; // Ensures full height
-  width: 100%; // Covers the full width
-}
-.ant-input {
-  background-color: transparent !important;
-}
-
-.ant-form-item-label > label {
-  color: var(--custom-text-color);
-}
-
-// .user-authentication-section .auth-form-wrapper .ant-btn-primary {
-//   background-color: var(--custom-bg-color);
-//   color: var(--custom-btn-text-color);
-// }
-// .ant-input {
-//   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;
+  .footer-logo {
+    width: 180px;
+    padding: 4px;
+    border-radius: 2px;
+    margin: 20px 0 30px;
   }
 }