@pmidc/upyog-css 1.1.8 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmidc/upyog-css",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "license": "MIT",
   "main": "dist/index.css",
   "engines": {

package/src/components/buttons.scss

@@ -1,13 +1,44 @@
 .selector-button-primary {
-  @apply h-8 bg-primary-main text-center border-b-2 border-input-border border-solid outline-none px-lg;
+  background-color: #2947A3 !important;
+  color: #ffffff !important;
+  border: none !important;
+  border-radius: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-family: 'Noto Sans', sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: normal;      /* allow wrapping */
+  word-break: break-word;   /* break long words */
+  overflow-wrap: break-word;
+  text-align: center; 
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: auto;
+  min-height: 40px;
+  width: 30%;
+  max-height: 40px;
+  margin: 0;
 
-  &:focus {
-    @apply outline-none;
+  &:hover {
+    background-color: #1e3a8a !important;
+    opacity: 0.9;
   }
 
   h2 {
-    @apply font-rc font-medium text-legend text-white;
+    color: #ffffff !important;
+    font-size: 0.875rem !important;
+    line-height: 1.25rem !important;
+    font-weight: 500 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    width: 100%;
   }
+ 
 }
 
 .selector-button-border {

package/src/components/card.scss

@@ -343,6 +343,20 @@
   }
 }
 
+.submit-bar-back {
+  background: transparent !important;
+  color: #2563eb !important;
+  border: 1px solid #2563eb !important;
+  box-shadow: none !important;
+  margin-right: 10px;
+
+  &:hover {
+    background: rgba(37, 99, 235, 0.08) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
+  }
+}
+
 @media (min-width: 1024px) {
   .submit-bar,
   .submit-bar-disabled {

package/src/components/custombtn.scss

@@ -1,5 +1,5 @@
 .customBtn {
-  @apply bg-white text-text-primary  box-border inline-block outline-none px-sm border border-solid border-primary-main;
+  @apply bg-white box-border inline-block outline-none px-sm border border-solid border-primary-main;
   margin: 0px 4.65% 0px 0px;
   height: 30px;
   line-height: 30px;

package/src/components/navbar.scss

@@ -27,6 +27,45 @@
   }
 }
 
+.notification-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .notification-count {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: #ef4444;
+    color: white;
+    font-size: 10px;
+    font-weight: 600;
+    min-width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+  }
+
+  svg {
+    width: 22px;
+    height: 22px;
+        background: #ffdc00;
+    border-radius: 50%;
+  }
+}
+
 .img-circle {
   border-radius: 50%;
 }

package/src/components/selectdropdown.scss

@@ -24,7 +24,7 @@
 .employee-select-wrap .select {
   background-color: white;
   border-radius: 5px;
-  border-color:1px solid blue;
+  border-color: 1px solid blue;
   height: 50px;
 }
 .employee-select-wrap {
@@ -36,12 +36,11 @@
     border-color: rgb(46, 46, 236);
     height: 50px;
 
-
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
-     
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+
+      @apply absolute z-10 w-full h-full outline-none text-form-field pl-sm;
     }
 
     p {
@@ -70,8 +69,8 @@
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
-     
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+
+      @apply absolute z-10 w-full h-full outline-none text-form-field pl-sm;
     }
 
     p {
@@ -97,12 +96,13 @@
   }
 
   .options-card {
-    width: 100% !important;
+    right: 0px;
+    width: 144px;
     box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
     max-height: 250px !important;
     overflow: auto;
     z-index: 1000 !important;
-    @apply absolute z-20 mt-xs bg-white max-w-full;
+    @apply absolute z-20 mt-xs bg-white;
 
     p {
       padding-top: 14px;
@@ -156,7 +156,7 @@
       width: calc(100% - 32px);
       background-color: transparent;
 
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+      @apply absolute z-10 w-full h-full outline-none text-form-field pl-sm;
     }
 
     p {
@@ -194,8 +194,8 @@
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
-    
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
+
+      @apply absolute z-10 w-full h-full outline-none text-form-field pl-sm;
     }
 
     p {

package/src/components/textfields.scss

@@ -117,3 +117,20 @@
     box-shadow: 0 0 0 3px rgba(13, 78, 255, 0.03);
   }
 }
+
+/* Mobile Number Input Styles */
+.mobile-number-prefix {
+  position: absolute;
+  left: 12px;
+  top: 34%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  font-weight: 500;
+  color: #666;
+  pointer-events: none;
+  z-index: 0 !important;
+}
+
+.mobile-number-input-with-prefix {
+  padding-left: 45px !important;
+}

package/src/index.scss

@@ -133,6 +133,8 @@
 @import "./components/newFooter.scss";
 @import "./pages/citizen/CitizenLogin.scss";
 @import "./components/NewAccordianCitizen.scss";
+@import "./modules/rentAndLease/index.scss";
+
 @import "./modules/adv/index.scss";
 .display-none {
   display: none;

package/src/modules/rentAndLease/index.scss

@@ -0,0 +1,227 @@
+.ral-banner {
+  padding: 10px;
+}
+
+.ral-banner-header {
+  font-size: 32px;
+  word-break: break-word;
+}
+
+.ral-action-bar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: baseline;
+}
+
+.ral-error-label {
+  width: 70%;
+  margin-left: 30%;
+  margin-top: -18px;
+}
+
+.ral-applicant-container {
+  border: 1px solid #ddd;
+  padding: 12px;
+  margin-bottom: 16px;
+  border-radius: 10px;
+}
+
+.ral-applicant-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.ral-remove-btn {
+  background: transparent;
+  width: 100%;
+  max-width: 25px;
+}
+
+.ral-add-applicant-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+}
+
+.ral-add-applicant-btn {
+  border: 1px solid #2947a3;
+  background: transparent;
+  color: #2947a3;
+  width: 100%;
+  max-width: 140px;
+}
+
+.ral-back-btn {
+  border: 1px solid;
+  background: transparent;
+  color: #2947a3;
+  margin-right: 8px;
+}
+
+.ral-summary-card {
+  padding: 2px;
+}
+
+.ral-summary-section {
+  background-color: #ffffff;
+  padding: 1rem 0;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 2px 6px rgba(18, 38, 63, 0.04);
+}
+
+.ral-summary-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.ral-summary-heading {
+  font-size: 1.25rem;
+  color: #0d43a7;
+  font-weight: 500;
+  margin: 0;
+}
+
+.ral-summary-row {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  border-bottom: 1px dashed #e9eef2;
+  padding: 10px 4px;
+  align-items: center;
+}
+
+.ral-summary-label {
+  font-weight: 600;
+  color: #333;
+}
+
+.ral-summary-docs-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+
+.ral-summary-doc-card {
+  flex: 1 1 220px;
+  min-width: 180px;
+  max-width: 260px;
+  background-color: #fbfcfe;
+  padding: 0.6rem;
+  border: 1px solid #eef3f7;
+  border-radius: 6px;
+}
+
+.ral-summary-applicant-subheading {
+  padding: 6px 26px;
+  background: oldlace;
+  font-weight: 900;
+}
+
+.ral-summary-applicant-wrapper {
+  margin-bottom: 1rem;
+}
+
+.ral-doc-container {
+  margin-bottom: 24px;
+}
+
+.ral-doc-label {
+  width: 100%;
+}
+
+.ral-doc-field {
+  width: 100%;
+}
+
+.ral-doc-field-employee {
+  max-width: 500px;
+}
+
+.ral-doc-upload-msg {
+  width: 100%;
+}
+
+.ral-doc-upload-input {
+  width: 280px;
+}
+
+.ral-doc-error {
+  color: #d4351c;
+  font-size: 12px;
+  margin-top: 4px;
+  margin-bottom: 10px;
+}
+
+.ral-app-details-header {
+  margin-left: 14px;
+  max-width: 960px;
+}
+
+.ral-app-details-owner-header {
+  padding: 5px 24px 0px 24px;
+  font-weight: 600;
+}
+
+.ral-app-details-docs-card {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  gap: 30px;
+  margin-bottom: 26px;
+}
+
+.ral-my-properties-container {
+  margin-top: 16px;
+}
+
+.ral-my-properties-header {
+  margin-left: 8px;
+}
+
+.ral-my-properties-actions {
+  display: flex;
+  gap: 20px;
+}
+
+.ral-my-properties-no-result {
+  margin-left: 16px;
+  margin-top: 16px;
+}
+
+.ral-my-properties-load-more {
+  margin-left: 16px;
+  margin-top: 16px;
+}
+
+.ral-my-properties-load-more-link {
+  cursor: pointer;
+  color: #007bff;
+  font-weight: bold;
+}
+
+.ral-modal-header {
+  margin-left: 20px;
+}
+
+.ral-modal-close {
+  margin-right: 20px;
+}
+
+.ral-header-32 {
+  font-size: 32px;
+}
+
+.ral-card-subheader-24 {
+  font-size: 24px;
+}
+
+.ral-card-subheader-24-margin {
+  font-size: 24px;
+  margin-top: 30px;
+}

package/src/pages/common/newApplicationTimeline.scss

@@ -1,9 +1,7 @@
 .custom-timeline-container {
-  width: 100%;
   padding: 24px;
-  background-color: #f9fafb;
-  margin-left: 16px;
-  border-radius: 12px;
+  background: linear-gradient(135deg, #fff, #f8fafb);
+  border-radius: 14px;
 }
 
 .custom-timeline-header {
@@ -131,6 +129,8 @@
 .custom-card-top {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
   padding: 20px 24px;
 }
 
@@ -141,7 +141,6 @@
 
 .custom-card-right {
   flex-shrink: 0;
-  text-align: right;
 }
 
 .custom-action-title {
@@ -151,13 +150,6 @@
   margin-bottom: 8px;
 }
 
-.custom-actions-label {
-  font-size: 12px;
-  color: #6b7280;
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
 .custom-status-text {
   font-size: 14px;
   font-weight: 600;
@@ -185,6 +177,13 @@
 }
 
 .custom-comments-section {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  border-top: 1px solid #e5e7eb;
+  padding: 16px 24px 20px;
+}
+.custom-assignee-section {
   border-top: 1px solid #e5e7eb;
   padding: 16px 24px 20px;
 }
@@ -201,3 +200,120 @@
   color: #374151;
   line-height: 1.6;
 }
+
+.custom-doc-container {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.custom-doc-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #2563eb;
+  text-decoration: none;
+
+  span {
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
+.custom-comments-section-no-border {
+  padding: 16px 24px 20px;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .custom-timeline-container {
+    padding: 16px;
+  }
+
+  .custom-tracking-line {
+    width: 40px;
+  }
+
+  .custom-timeline-title {
+    font-size: 20px;
+    white-space: normal;
+  }
+
+  .custom-blue-bar {
+    height: 40px;
+    min-width: 30px;
+  }
+
+  .custom-vertical-line {
+    left: 24px;
+  }
+
+  .custom-icon-container {
+    margin-left: 0;
+  }
+
+  .custom-circular-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .custom-date-badge {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  .custom-entry-content {
+    gap: 16px;
+  }
+
+  .custom-card-top {
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .custom-card-left {
+    padding-right: 0;
+    width: 100%;
+  }
+
+  .custom-card-right {
+    width: 100%;
+  }
+
+  .custom-comments-section {
+    padding: 12px 16px;
+    gap: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .custom-tracking-line {
+    display: none;
+  }
+
+  .custom-title-bar-row {
+    gap: 12px;
+  }
+
+  .custom-timeline-title {
+    font-size: 18px;
+  }
+
+  .custom-vertical-line {
+    left: 20px;
+  }
+
+  .custom-circular-icon {
+    width: 36px;
+    height: 36px;
+  }
+
+  .custom-icon-container {
+    margin-left: 2px;
+  }
+
+  .custom-entry-content {
+    gap: 12px;
+  }
+}

package/src/pages/employee/header.scss

@@ -140,7 +140,7 @@
 
 .employee-header-header-btn-login {
   background-color: transparent;
-  color: #2947a3;
+
   border: 2px solid #2947a3;
 }