ui-soxo-bootstrap-core 2.6.5 → 2.6.6

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

@@ -1,344 +1,344 @@
-// 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;
-  justify-content: center;
-  padding: 0 15%;
-
-  @media (max-width: 1200px) {
-    margin: 0 5%;
-    padding: 0 5%;
-  }
-
-  @media (max-width: 768px) {
-    margin: 0 10px;
-    padding-top: 20px;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  @media only screen and (min-width: 608px) {
-    justify-content: center;
-    align-items: center;
-  }
-
-  .page-background {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 40vh;
-    width: 100%;
-  }
-
-  .homescreen {
-    width: 100%;
-    margin: 10px 0;
-    border-radius: 4px;
-    background-color: aliceblue;
-    padding: 10px;
-    height: 40px;
-    overflow: hidden;
-  }
-
-  .customers,
-  .customers2 {
-    width: 50%;
-    margin: 20px 0;
-
-    @media only screen and (min-width: 768px) {
-      width: 50%;
-    }
-    @media only screen and (max-width: 768px) {
-      width: 85%;
-    }
-  }
-
-  .customers {
-    @media only screen and (min-width: 769px) {
-      display: none;
-    }
-  }
-
-  .customers2 {
-    padding: 0 20px;
-    @media only screen and (min-width: 768px) {
-      width: 40%;
-    }
-    @media only screen and (max-width: 768px) {
-      display: none;
-    }
-  }
-
-  .auth-form-wrapper {
-    box-sizing: border-box;
-    border-radius: 16px;
-    background-color: $white;
-    overflow: hidden;
-    // 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;
-      flex-direction: column;
-    }
-
-    .login-form-container {
-      // border: 1px solid $border-color-medium;
-      flex-basis: 50%;
-      padding: 20px;
-      // padding-top: 2px;
-
-      @media only screen and (max-width: 768px) {
-        padding: 16px;
-      }
-
-      .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;
-          }
-        }
-      }
-    }
-
-    .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;
-      }
-    }
-  }
-
-  // Scoped Ant Design Overrides
-  .ant-form {
-    .ant-form-item:not(:last-child) {
-      margin: 20px 0;
-    }
-    .ant-form-item {
-      margin: 20px 0;
-
-      .ant-form-item-label {
-        margin: 0 0 8px 0;
-        line-height: 0;
-        padding: 0;
-
-        > label {
-          color: var(--custom-text-color);
-        }
-      }
-    }
-
-    .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 {
-    margin-top: 10px;
-    background-color: $primary-color;
-    border-radius: 4px;
-    width: 100%;
-  }
-
-  .ant-btn-secondary {
-    width: 100%;
-  }
-
-  .ant-divider-horizontal {
-    margin-bottom: 16px;
-    margin-top: 2px;
-  }
-
-  .ant-input {
-    background-color: transparent !important;
-  }
-
-  input {
-    border: 1px solid $border-color-dark;
-    border-radius: 2px;
-
-    &:focus {
-      border-color: $white !important;
-    }
-  }
-}
-
-.footer {
-  position: absolute;
-  bottom: 20px;
-  display: flex;
-  width: 50%;
-
-  @media only screen and (max-width: 768px) {
-    display: none;
-  }
-
-  .footer-logo {
-    width: 180px;
-    padding: 4px;
-    border-radius: 2px;
-    margin: 20px 0 30px;
-  }
-}
+// 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;
+  justify-content: center;
+  padding: 0 15%;
+
+  @media (max-width: 1200px) {
+    margin: 0 5%;
+    padding: 0 5%;
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 10px;
+    padding-top: 20px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  @media only screen and (min-width: 608px) {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .page-background {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 40vh;
+    width: 100%;
+  }
+
+  .homescreen {
+    width: 100%;
+    margin: 10px 0;
+    border-radius: 4px;
+    background-color: aliceblue;
+    padding: 10px;
+    height: 40px;
+    overflow: hidden;
+  }
+
+  .customers,
+  .customers2 {
+    width: 50%;
+    margin: 20px 0;
+
+    @media only screen and (min-width: 768px) {
+      width: 50%;
+    }
+    @media only screen and (max-width: 768px) {
+      width: 85%;
+    }
+  }
+
+  .customers {
+    @media only screen and (min-width: 769px) {
+      display: none;
+    }
+  }
+
+  .customers2 {
+    padding: 0 20px;
+    @media only screen and (min-width: 768px) {
+      width: 40%;
+    }
+    @media only screen and (max-width: 768px) {
+      display: none;
+    }
+  }
+
+  .auth-form-wrapper {
+    box-sizing: border-box;
+    border-radius: 16px;
+    background-color: $white;
+    overflow: hidden;
+    // 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;
+      flex-direction: column;
+    }
+
+    .login-form-container {
+      // border: 1px solid $border-color-medium;
+      flex-basis: 50%;
+      padding: 20px;
+      // padding-top: 2px;
+
+      @media only screen and (max-width: 768px) {
+        padding: 16px;
+      }
+
+      .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;
+          }
+        }
+      }
+    }
+
+    .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;
+      }
+    }
+  }
+
+  // Scoped Ant Design Overrides
+  .ant-form {
+    .ant-form-item:not(:last-child) {
+      margin: 20px 0;
+    }
+    .ant-form-item {
+      margin: 20px 0;
+
+      .ant-form-item-label {
+        margin: 0 0 8px 0;
+        line-height: 0;
+        padding: 0;
+
+        > label {
+          color: var(--custom-text-color);
+        }
+      }
+    }
+
+    .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 {
+    margin-top: 10px;
+    background-color: $primary-color;
+    border-radius: 4px;
+    width: 100%;
+  }
+
+  .ant-btn-secondary {
+    width: 100%;
+  }
+
+  .ant-divider-horizontal {
+    margin-bottom: 16px;
+    margin-top: 2px;
+  }
+
+  .ant-input {
+    background-color: transparent !important;
+  }
+
+  input {
+    border: 1px solid $border-color-dark;
+    border-radius: 2px;
+
+    &:focus {
+      border-color: $white !important;
+    }
+  }
+}
+
+.footer {
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  width: 50%;
+
+  @media only screen and (max-width: 768px) {
+    display: none;
+  }
+
+  .footer-logo {
+    width: 180px;
+    padding: 4px;
+    border-radius: 2px;
+    margin: 20px 0 30px;
+  }
+}