@pmidc/upyog-css 1.1.4 → 1.1.6

package/src/pages/citizen/citizenNewLogin.scss

@@ -1,193 +1,357 @@
-.login-container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-}
-
-.login-page-cover {
-    background: linear-gradient(0deg, rgba(41, 71, 163, 0.9), rgba(41, 71, 163, 0.9)),
-        url("https://sdc-uat.lgpunjab.gov.in/filestore/v1/files/viewfile/?name=pb%2Fproperty-upload%2FOctober%2F16%2F1760620815250vZVIeEsyde.jpeg");
-    background-size: cover;
-    background-position: center;
-    height: 100vh;
-    width: 100%;
-}
-
-.login-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    background-color: rgba(255, 255, 255, 1);
-    margin: 8px;
-    padding: 2rem;
-    box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
-    border-radius: 4px;
-    width: 35%;
-    max-width: 100vw;
-    height: 750px;
-    position: relative;
-}
-.register-login-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    background-color: rgba(255, 255, 255, 1);
-    margin: 8px;
-    padding: 2rem;
-    box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
-    border-radius: 4px;
-    width: 35%;
-    max-width: 100vw;
-    height: 900px;
-    position: relative;
-}
-.login-title {
-    width: 100%;
-    max-width: 525px;
-    font-size: 2.5rem;
-    color: #0b0c0c;
-    font-weight: 600;
-    text-align: center;
-    padding: 2rem 0rem;
-}
-
-.lag-loc-wrapper {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    max-width: 540px;
-    gap: 30px;
-}
-
-.location-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-}
-
-/* The inner select div */
-.location-wrapper .select {
-    display: flex;
-    align-items: center;
-    border: 1px solid #b4b4b4 !important;
-    background-color: rgba(255, 255, 255, var(--bg-opacity));
-    border-radius: 8px;
-}
-
-.location-wrapper .select-active {
-    border-radius: 8px !important;
-}
-
-.language-wrapper {
-    width: 100%;
-    max-width: 260px;
-}
-
-.label {
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 25px;
-    color: #686677;
-
-    span {
-        color: #ff1515;
-    }
-}
-
-.input-wrapper {
-    width: 100%;
-    max-width: 540px;
-}
-
-.input-wrapper .submit-bar,
-.input-wrapper .submit-bar-disabled {
-    width: 100%;
-    max-width: 540px;
-}
-
-.input-wrapper .card-label {
-    font-weight: 500 !important;
-    font-size: 16px !important;
-    line-height: 25px !important;
-    color: #686677 !important;
-}
-
-.input-wrapper.hide-submit-buttons+.submit-bar,
-.input-wrapper.hide-submit-buttons+.submit-bar-disabled {
-    display: none !important;
-}
-
-.account-link {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 25px;
-    text-align: center;
-}
-
-.link {
-    color: #1778ff;
-    text-decoration: underline;
-}
-
-.resendIn {
-    font-size: 16px;
-    font-weight: 500;
-    color: #686677;
-    text-align: right;
-
-    span {
-        color: #1778ff;
-    }
-}
-
-.resend {
-    text-align: right;
-    cursor: pointer;
-    font-weight: 700;
-}
-
-.login-circle {
-    width: 75px;
-    height: 75px;
-    border-radius: 50%;
-    background-color: #2947a3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 24px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-    cursor: pointer;
-    position: absolute;
-    top: -30px;
-}
-
-@media (max-width: 768px) {
-    .lag-loc-wrapper {
-        flex-direction: column;
-        gap: 0px;
-    }
-    .login-wrapper{
-        width: 60%;
-    }
-    .register-login-wrapper{
-         width: 60%;
-    }
-}
-@media (min-width: 769px) and (max-width : 1024px) {
-    .lag-loc-wrapper {
-        flex-direction: column;
-        gap: 0px;
-    }
-    .login-wrapper{
-        width: 60%;
-    }
-    .register-login-wrapper{
-         width: 60%;
-    }
-}
+/* Main Container - Full height viewport */
+.login-page-cover {
+  width: 100%;
+  height: 90vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Removed overflow: hidden to prevent scrolling issues */
+}
+
+/* Container - Full height split layout */
+.login-container {
+  width: 100%;
+  height: 100vh;
+  max-width: 100%;
+  display: flex;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+/* Left Panel - Hero Section takes full height */
+.login-hero-panel {
+  flex: 1;
+  background: linear-gradient(135deg, #5b68f0 0%, #7b5fc7 100%);
+  color: white;
+  padding: 60px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+}
+
+.hero-content {
+  max-width: 500px;
+  text-align: center;
+}
+
+.hero-icon-circle {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 30px;
+  backdrop-filter: blur(10px);
+}
+
+.hero-icon-circle svg {
+  width: 50px;
+  height: 50px;
+  color: white;
+}
+
+.hero-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 20px;
+  line-height: 1.2;
+}
+
+.hero-description {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  margin-bottom: 50px;
+  opacity: 0.95;
+}
+
+.hero-features {
+  display: flex;
+  justify-content: space-around;
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.feature-icon {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.feature-icon:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+  transform: translateY(-5px);
+}
+
+.feature-icon svg {
+  color: white;
+}
+
+.feature-text {
+  font-size: 0.95rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Right Panel - Login Form with scrollable content */
+.login-form-panel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* Login Wrapper - Matches reference image design */
+.login-wrapper {
+  width: 100%;
+  max-width: 480px;
+  background-color: #ffffff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+}
+
+.login-form-header {
+  margin-bottom: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    border-radius: 4px;
+    position: relative;
+}
+.register-login-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    background-color: rgba(255, 255, 255, 1);
+    margin: 8px;
+    padding: 2rem;
+    box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
+    border-radius: 4px;
+    width: 35%;
+    max-width: 100vw;
+    height: 900px;
+    position: relative;
+}
+
+.login-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #0b0c0c;
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  font-size: 0.95rem;
+  color: #686677;
+  margin: 0;
+}
+
+/* Form Elements */
+.label {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 25px;
+  color: #686677;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.label span {
+  color: #ff1515;
+}
+
+.language-wrapper,
+.location-wrapper,
+.input-wrapper {
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+.location-wrapper .select {
+  display: flex;
+  align-items: center;
+  border: 1px solid #b4b4b4 !important;
+  background-color: rgba(255, 255, 255, var(--bg-opacity));
+  border-radius: 8px;
+}
+
+.location-wrapper .select-active {
+  border-radius: 8px !important;
+}
+
+.input-wrapper .submit-bar,
+.input-wrapper .submit-bar-disabled {
+  width: 100%;
+}
+
+.input-wrapper .card-label {
+  font-weight: 500 !important;
+  font-size: 16px !important;
+  line-height: 25px !important;
+  color: #686677 !important;
+}
+
+.input-wrapper.hide-submit-buttons + .submit-bar,
+.input-wrapper.hide-submit-buttons + .submit-bar-disabled {
+  display: none !important;
+}
+
+/* Account Link */
+.account-link {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 25px;
+  text-align: center;
+  margin-top: 24px;
+  color: #0b0c0c;
+}
+
+.link {
+  color: #5b68f0;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.link:hover {
+  color: #7b5fc7;
+  text-decoration: underline;
+}
+
+/* OTP Section */
+.resendIn {
+  font-size: 16px;
+  font-weight: 500;
+  color: #686677;
+  text-align: right;
+}
+
+.resendIn span {
+  color: #5b68f0;
+}
+
+.resend {
+  text-align: right;
+  cursor: pointer;
+  font-weight: 700;
+  color: #5b68f0;
+}
+
+/* Register Login Wrapper - For registration page with same left panel */
+.register-login-wrapper {
+  width: 100%;
+  max-width: 480px;
+  background-color: #ffffff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+}
+
+/* Responsive Design - Hide left panel on tablets and mobile */
+@media (max-width: 1024px) {
+  .login-hero-panel {
+    display: none;
+  }
+
+  .login-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  }
+
+  .login-form-panel {
+    background: transparent;
+  }
+
+  .login-wrapper,
+  .register-login-wrapper {
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  }
+}
+
+@media (max-width: 768px) {
+  .login-wrapper,
+  .register-login-wrapper {
+    padding: 30px 24px;
+    max-width: 95%;
+  }
+
+  .login-title {
+    font-size: 1.75rem;
+  }
+
+  .login-subtitle {
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-wrapper,
+  .register-login-wrapper {
+    padding: 24px 20px;
+  }
+
+  .login-title {
+    font-size: 1.5rem;
+  }
+
+  .login-form-header {
+    margin-bottom: 24px;
+  }
+
+  .language-wrapper,
+  .location-wrapper,
+  .input-wrapper {
+    margin-bottom: 20px;
+  }
+
+  .label,
+  .account-link {
+    font-size: 14px;
+  }
+    .lag-loc-wrapper {
+        flex-direction: column;
+        gap: 0px;
+    }
+    .login-wrapper{
+        width: 60%;
+    }
+    .register-login-wrapper{
+         width: 60%;
+    }
+}
+@media (min-width: 769px) and (max-width : 1024px) {
+    .lag-loc-wrapper {
+        flex-direction: column;
+        gap: 0px;
+    }
+    .login-wrapper{
+        width: 60%;
+    }
+    .register-login-wrapper{
+         width: 60%;
+    }
+}

package/src/pages/citizen/container.scss

@@ -1,23 +1,33 @@
-.citizen-home-footer {
-  @apply flex  w-full  h-10 bg-grey-bg pb-md pt-sm justify-center;
-  img {
-    @apply ml-sm;
-  }
-}
-
-.employee .citizen-home-footer {
-  @apply fixed bottom-0;
-}
-.fill-path-primary-main {
-  path {
-    fill: #1359C8;
-  }
-}
-
-.obps-search {
-  margin: 8px;
-}
-.font-Weigth-bold {
-  font-weight: 600 !important;
-      margin-top: 20px !important;
+.citizen-home-footer {
+  @apply flex  w-full  h-10 bg-grey-bg pb-md pt-sm justify-center;
+  img {
+    @apply ml-sm;
+  }
+}
+
+.employee .citizen-home-footer {
+  @apply fixed bottom-0;
+}
+.fill-path-primary-main {
+  path {
+    fill: #1359C8;
+  }
+}
+
+.obps-search {
+  margin: 8px;
+}
+.font-Weigth-bold {
+  font-weight: 600 !important;
+      margin-top: 20px !important;
+}
+
+.obps-citizen-search-header{
+  background:#ffffff;
+  padding: 20px 0px;
+  color: #00000099;
+  padding: 10px;
+}
+.obps-citizen-card-paragraph{
+  text-align: center;
 }