ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,346 @@
+body {
+  overflow: hidden;
+}
+
+.user-authentication-section {
+  min-height: 90vh;
+  display: flex;
+  margin: 0px 15%;
+  justify-content: center;
+  // align-items: center;
+
+  .page-background {
+   position: absolute;
+    left: 0px;
+    top: 0px;
+    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;
+    border-radius: 4px;
+    background-color: aliceblue;
+    padding: 10px;
+    height: 40px;
+    overflow: hidden;
+  }
+
+  .customers {
+    width: 50%;
+    margin: 20px 0px;
+
+    @media only screen and (min-width: 768px) {
+      width: 50%;
+      /* margin: 20px 0px; */
+      /* float: right; */
+      // position: absolute;
+      // right: 0px;
+      // top: 20%;
+    }
+
+    @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: 16px 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: 12px;
+    background-color: white;
+    overflow: hidden;
+    border: 1px solid #e8e8e8;
+
+    width: 40%;
+
+    @media only screen and (max-width: 768px) {
+      width: 95%;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+      align-items: center;
+    }
+
+    .login-form-container {
+      border: 1px solid #e0e0e0;
+      flex-basis: 50%;
+      // border: none !important;
+      // box-shadow: none !important;
+      padding: 20px 30px;
+
+      @media only screen and (max-width: 768px) {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+        align-items: center;
+      }
+
+      .branch-switcher {
+        .branches {
+          .ant-select {
+            min-width: 150px;
+          }
+        }
+      }
+    }
+
+    .center-line {
+      border-left: 2px solid #d9d9d9;
+      height: 180px;
+    }
+
+    .center-line {
+      @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;
+      //   }
+    }
+  }
+  .ant-form {
+    // height: 100%;
+    .ant-form-item {
+      margin: 30px 0px;
+      .ant-form-item-label {
+        margin: 0 0 8px 0;
+        line-height: 0;
+        padding: 0;
+      }
+    }
+    .ant-btn-primary {
+      margin-top: 10px;
+    }
+  }
+  .ant-form-explain {
+    position: absolute;
+    font-size: 12px;
+    margin-left: 2px;
+  }
+  .ant-btn-primary {
+    // width: 100%;
+    background-color: #0c66e4;
+    // height: 35px;
+    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-input-container p {
+  margin: 20px 0 -10px 0;
+}
+
+.otp-input-container .otp-title {
+  @media only screen and (max-width: 768px) {
+    text-align: left;
+  }
+}
+
+.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-form-vertical .ant-form-item .ant-form-item-control {
+  min-width: 100%;
+}
+
+.resend-otp-link {
+  margin: auto;
+}
+
+.footer {
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  width: 50%;
+
+  @media only screen and (max-width: 768px) {
+    display: none;
+  }
+}
+
+.otp-input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.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:row;
+  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);
+// }