@djb25/digit-ui-css 1.0.44 → 1.0.46

package/src/pages/citizen/Register.scss

@@ -1,6 +1,5 @@
 .Citizen_register {
   &.registration-page-container {
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     min-height: calc(100vh - 83px);
     display: flex;
     align-items: center;
@@ -8,6 +7,9 @@
     padding: 40px 20px;
     font-family: "Roboto", sans-serif;
     width: 100%;
+    @media (max-width: 640px) {
+      padding-top: 86px;
+    }
 
     /* Global overrides for this page */
     .digit-button,
@@ -38,12 +40,11 @@
   .registration-card {
     display: flex;
     width: 100%;
-    max-width: 1000px;
+    max-width: 768px;
     background-color: #fff;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     overflow: hidden;
-    min-height: 600px;
   }
 
   .registration-sidebar {
@@ -102,39 +103,11 @@
       }
     }
 
-    .sidebar-footer {
-      margin-top: auto;
-      font-size: 12px;
-      opacity: 0.6;
-    }
-
     /* Success state specific */
     .success-icon-wrapper {
       text-align: center;
       margin-top: 40px;
 
-      .icon-outer {
-        width: 120px;
-        height: 120px;
-        border-radius: 50%;
-        background-color: rgba(255, 255, 255, 0.2);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 auto 30px auto;
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
-      }
-
-      .icon-inner {
-        width: 90px;
-        height: 90px;
-        border-radius: 50%;
-        background-color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
       h2 {
         font-size: 24px;
         font-weight: 700;
@@ -149,6 +122,13 @@
     }
   }
 
+  .sidebar-footer {
+    margin-top: auto;
+    font-size: 10.5px;
+    font-weight: 500;
+    color: rgb(0, 112, 180);
+  }
+
   .registration-content {
     flex: 1;
     padding: 60px;
@@ -167,6 +147,7 @@
         font-weight: 700;
         color: #1e293b;
         margin-bottom: 16px;
+        word-wrap: anywhere;
       }
 
       p {
@@ -209,77 +190,54 @@
   }
 
   /*SelectMobileNumber specific styles*/
-  .select-mobile-number-wrapper {
-    .prefix-container {
-      display: flex;
-      align-items: center;
-      padding: 0 10px;
-      border-right: 1px solid #e1e1e1;
-      color: #505a5f;
-      font-weight: bold;
-    }
 
-    .error-text {
-      color: #d83a2f;
-      font-size: 14px;
-      margin-top: 4px;
-    }
+  .or-separator-container {
+    margin: 40px 0 24px 0;
+    border-top: 1px solid #e5e7eb;
+    padding-top: 32px;
+    text-align: center;
+    position: relative;
 
-    .privacy-link {
-      color: #1a67a3;
-      cursor: pointer;
-      font-weight: 600;
+    .or-text {
+      position: absolute;
+      top: -10px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #fff;
+      padding: 0 16px;
+      color: #6b7280;
       font-size: 14px;
+      font-weight: 500;
     }
+  }
 
-    .or-separator-container {
-      margin: 40px 0 0 0;
-      border-top: 1px solid #e5e7eb;
-      padding-top: 32px;
-      text-align: center;
-      position: relative;
-
-      .or-text {
-        position: absolute;
-        top: -10px;
-        left: 50%;
-        transform: translateX(-50%);
-        background: #fff;
-        padding: 0 16px;
-        color: #6b7280;
-        font-size: 14px;
-        font-weight: 500;
-      }
+  .digilocker-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 14px;
+    background-color: #fff;
+    border: 1px solid #d1d5db;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    gap: "12px";
+    font-size: 16px;
+    font-weight: 600;
+    color: #374151;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:hover {
+      background-color: #f9fafb;
+      border-color: #9ca3af;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     }
 
-    .digilocker-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      padding: 14px;
-      background-color: #fff;
-      border: 1px solid #d1d5db;
-      border-radius: 12px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      gap: "12px";
-      font-size: 16px;
-      font-weight: 600;
-      color: #374151;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-      &:hover {
-        background-color: #f9fafb;
-        border-color: #9ca3af;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-      }
-
-      img {
-        width: 28px;
-        height: 28px;
-        margin-right: 12px;
-      }
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 12px;
     }
   }
 
@@ -304,3 +262,567 @@
     }
   }
 }
+
+/* WRAPPER */
+.registration__wrapper {
+  display: flex;
+  width: 100%;
+  background: #fff;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+}
+
+@media (max-width: 768px) {
+  .registration__wrapper {
+    flex-direction: column;
+  }
+}
+
+/* SIDEBAR */
+.registration__sidebar {
+  width: 280px;
+  padding: 24px;
+  background: linear-gradient(to bottom, #e8f0f8, #ffffff);
+  border-right: 1px solid #f1f5f9;
+  border-radius: 0px 36px 36px 0;
+
+  .icon-outer {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.2);
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 30px auto;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+  }
+
+  .icon-inner {
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    background-color: #fff;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .registration__sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #f1f5f9;
+  }
+}
+
+.registration__sidebar-title {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #64748b;
+  margin-bottom: 32px;
+}
+
+/* STEP */
+.registration__step {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .registration__step {
+    margin-bottom: 32px;
+  }
+  .registration__step:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.registration__step-line {
+  position: absolute;
+  left: 16px;
+  top: 32px;
+  width: 2px;
+  height: 48px;
+  transform: translateX(-50%);
+  background: #e2e8f0;
+}
+
+.registration__step-line--completed {
+  background: #22c55e;
+}
+
+.registration__step-circle {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #e2e8f0;
+  color: #94a3b8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  z-index: 1;
+}
+
+.registration__step-circle--active {
+  background: #3b82f6;
+  color: #fff;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
+}
+
+.registration__step-circle--completed {
+  background: #22c55e;
+  color: #fff;
+}
+
+.registration__step-content {
+  margin-left: 16px;
+}
+
+.registration__step-label {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.registration__step-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #94a3b8;
+}
+
+.registration__step-title--active {
+  color: #2563eb;
+}
+
+.registration__step-title--completed {
+  color: #16a34a;
+}
+
+/* CONTENT */
+.registration__content {
+  flex: 1;
+  padding: 40px 32px;
+}
+
+.registration__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.registration__title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.registration__step-count {
+  font-size: 14px;
+  color: #94a3b8;
+}
+
+.registration__description {
+  color: #475569;
+  margin-bottom: 32px;
+}
+
+/* INPUTS */
+.registration__field {
+  margin-bottom: 24px;
+}
+
+.registration__label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #334155;
+  margin-bottom: 8px;
+}
+
+.registration__input-group {
+  display: flex;
+  gap: 12px;
+}
+
+.registration__select {
+  height: 48px;
+  border-radius: 12px;
+  border: 2px solid #e2e8f0;
+  padding-left: 12px;
+  font-size: 18px;
+  background: #fff;
+}
+
+.registration__input-group {
+  & select {
+    width: fit-content !important;
+  }
+  & input {
+    width: fit-content !important;
+  }
+}
+
+.registration__select:focus {
+  border-color: #3b82f6;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.registration__input {
+  flex: 1;
+  height: 48px;
+  border-radius: 12px;
+  border: 2px solid #e2e8f0;
+  padding: 0 16px;
+  font-size: 18px;
+  width: 100%;
+  position: relative;
+  .phone {
+    position: absolute;
+    height: 100%;
+    left: 55px;
+    width: calc(100% - 55px);
+    border-radius: 0 12px 12px 0;
+    padding-left: 8px;
+  }
+}
+
+.date-picker {
+  position: relative;
+  width: 100%;
+}
+
+.date-picker input[readonly] {
+  height: 48px;
+  width: 100%;
+  border-radius: 8px;
+  border: 2px solid #e2e8f0 !important;
+  padding: 0 16px;
+  font-size: 18px;
+  width: 100%;
+  position: relative;
+  padding: 10px 40px 10px 12px; /* space for icon */
+  background-color: #ffffff;
+
+  cursor: pointer; /* important */
+  transition: all 0.2s ease;
+}
+
+.date-picker input[readonly]:focus-within {
+  outline: none;
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
+}
+
+.date-picker input:disabled {
+  background-color: #f3f4f6 !important;
+  border-color: #e5e7eb !important;
+  color: #9ca3af !important;
+  cursor: not-allowed !important;
+}
+
+.date-picker input[readonly]:disabled {
+  background-color: #f3f4f6 !important;
+  color: #9ca3af !important;
+  cursor: not-allowed !important;
+}
+
+.date-picker .calendar-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #6b7280;
+  pointer-events: auto;
+}
+
+.date-picker input:disabled + .calendar-icon {
+  color: #d1d5db !important;
+  cursor: not-allowed !important;
+}
+
+.lucide-phone {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.registration__input .phone {
+  flex: 1;
+  height: 100%;
+  border: none;
+  outline: none;
+  font-size: 18px;
+}
+
+.registration__input:focus-within {
+  border-color: #3b82f6;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.registration__hint {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+/* OTP */
+.registration__otp-group {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.registration__otp-input {
+  width: 56px;
+  height: 64px;
+  text-align: center;
+  font-size: 20px;
+  border-radius: 12px;
+  border: 2px solid #e2e8f0;
+}
+
+.registration__otp-input:focus {
+  border-color: #3b82f6;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.registration__otp-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 32px;
+  font-size: 14px;
+  color: #64748b;
+}
+
+.registration__resend--active {
+  color: #2563eb;
+  cursor: pointer;
+}
+
+.registration__resend--disabled {
+  color: #cbd5f5;
+  cursor: not-allowed;
+}
+
+/* BUTTON */
+.registration__button {
+  width: 100%;
+  height: 48px;
+  border-radius: 12px;
+  border: none;
+  background: #0070b4;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.registration__button:hover {
+  background: #298bc8;
+}
+
+.registration__button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* PROGRESS */
+.registration__progress {
+  margin-top: 40px;
+}
+
+.registration__progress-track {
+  height: 6px;
+  background: #f1f5f9;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.registration__progress-bar {
+  height: 100%;
+  background: #3b82f6;
+  border-radius: 999px;
+  transition: width 0.4s ease;
+}
+
+.btn-tooltip-wrapper {
+  position: relative;
+
+  /* allow hover on wrapper instead of button */
+  .registration__button:disabled {
+    pointer-events: none;
+  }
+}
+
+.btn-tooltip {
+  position: absolute;
+  bottom: 110%;
+  left: 50%;
+  transform: translateX(-50%) translateY(5px);
+  background: #111827;
+  color: #fff;
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  white-space: nowrap;
+  opacity: 0;
+  transition: all 0.2s ease;
+  pointer-events: none;
+}
+
+/* show tooltip on hover */
+.btn-tooltip-wrapper:hover .btn-tooltip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.prefix-container {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  border-right: 1px solid #e1e1e1;
+  color: #505a5f;
+  font-weight: bold;
+}
+
+.error-text {
+  color: #d83a2f;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.privacy-link {
+  color: #1a67a3;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.registration__change-phone {
+  margin-top: 6px;
+  margin-bottom: 12px;
+}
+
+.registration__change-phone-btn {
+  background: none;
+  border: none;
+  color: #2563eb;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+}
+
+.registration__change-phone-btn:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  /* WRAPPER */
+  .registration__wrapper {
+    flex-direction: column;
+    border-radius: 12px;
+  }
+
+  /* SIDEBAR */
+  .registration__sidebar {
+    width: 100%;
+    padding: 16px;
+    border-radius: 0;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .registration__sidebar__content {
+    padding: 8px;
+  }
+
+  .registration__sidebar-title {
+    display: none;
+    font-size: 11px;
+    margin-bottom: 16px;
+    text-align: center;
+  }
+
+  /* STEPS CONTAINER */
+  .registration__step {
+    align-items: center;
+  }
+
+  /* LINE (shorter for mobile) */
+  .registration__step-line {
+    left: 14px;
+    height: 32px;
+    top: 28px;
+  }
+
+  /* CIRCLE (smaller) */
+  .registration__step-circle {
+    width: 26px;
+    height: 26px;
+    font-size: 12px;
+  }
+
+  /* TEXT CONTENT */
+  .registration__step-content {
+    margin-left: 12px;
+  }
+
+  .registration__step-label {
+    font-size: 10px;
+  }
+
+  .registration__step-title {
+    font-size: 12px;
+    line-height: 1.3;
+  }
+
+  /* OPTIONAL: make steps scrollable horizontally (premium feel) */
+  .registration__sidebar > div > div:first-child {
+    display: flex;
+    overflow-x: auto;
+    gap: 16px;
+    padding-bottom: 10px;
+  }
+
+  .registration__step {
+    flex: 0 0 auto;
+    min-width: 140px;
+  }
+
+  /* Hide vertical line for horizontal layout */
+  .registration__step-line {
+    display: none;
+  }
+
+  /* FOOTER */
+  .sidebar-footer {
+    display: none;
+    text-align: center;
+    font-size: 9px;
+    margin-top: 12px;
+  }
+
+  /* CONTENT */
+  .registration__content {
+    padding: 20px 16px;
+  }
+
+  .registration__title {
+    font-size: 20px;
+  }
+
+  .registration__description {
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+}