@pmidc/upyog-css 1.2.36-dev.1.29 → 1.2.36-dev.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmidc/upyog-css",
-  "version": "1.2.36-dev.1.29",
+  "version": "1.2.36-dev.1.30",
   "license": "MIT",
   "author": "",
   "type": "commonjs",

package/src/modules/rentAndLease/index.scss

@@ -283,6 +283,186 @@
   margin-top: 30px;
 }
 
+.ral-payment-history {
+  margin-top: 24px;
+}
+
+.ral-payment-history__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+
+.ral-payment-history__consumer {
+  margin: 4px 0 0;
+  color: #5b6b82;
+  font-size: 14px;
+}
+
+.ral-payment-history__totals {
+  display: flex;
+  gap: 12px;
+}
+
+.ral-payment-history__totals > div {
+  min-width: 126px;
+  padding: 10px 14px;
+  border: 1px solid #dbe7f5;
+  border-radius: 8px;
+  background: #f7fbff;
+}
+
+.ral-payment-history__totals span,
+.ral-payment-history__totals strong {
+  display: block;
+}
+
+.ral-payment-history__totals span {
+  color: #5b6b82;
+  font-size: 12px;
+}
+
+.ral-payment-history__totals strong {
+  margin-top: 4px;
+  color: #173f73;
+  font-size: 16px;
+}
+
+.ral-payment-history__table-wrap {
+  overflow-x: auto;
+  border: 1px solid #dbe7f5;
+  border-radius: 8px;
+}
+
+.ral-payment-history__table {
+  width: 100%;
+  min-width: 780px;
+  border-collapse: collapse;
+  color: #23354d;
+  font-size: 14px;
+}
+
+.ral-payment-history__table th,
+.ral-payment-history__table td {
+  padding: 14px 16px;
+  border-bottom: 1px solid #e4edf7;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.ral-payment-history__table th {
+  color: #5b6b82;
+  background: #f7faff;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.ral-payment-history__table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.ral-payment-history__month-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #0b63ce;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.ral-payment-history__month-button:disabled {
+  color: #23354d;
+  cursor: default;
+}
+
+.ral-payment-history__month-button span {
+  width: 10px;
+  color: #287e37;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.ral-payment-history__status {
+  display: inline-block;
+  padding: 5px 9px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.ral-payment-history__status--paid {
+  color: #16733a;
+  background: #eaf8ee;
+}
+
+.ral-payment-history__status--partially_paid {
+  color: #9a5b00;
+  background: #fff4dd;
+}
+
+.ral-payment-history__status--due {
+  color: #b42318;
+  background: #fff0ef;
+}
+
+.ral-payment-history__receipts-row td {
+  padding: 0;
+  background: #f7fbff;
+}
+
+.ral-payment-history__receipts {
+  padding: 8px 16px;
+}
+
+.ral-payment-history__receipt {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 18px;
+  padding: 10px 0;
+  border-bottom: 1px solid #e4edf7;
+}
+
+.ral-payment-history__receipt:last-child {
+  border-bottom: 0;
+}
+
+.ral-payment-history__receipt strong {
+  color: #173f73;
+}
+
+.ral-payment-history__message {
+  padding: 24px 0;
+  color: #5b6b82;
+}
+
+.ral-payment-history__message--error {
+  color: #b42318;
+}
+
+@media (max-width: 768px) {
+  .ral-payment-history__header,
+  .ral-payment-history__totals {
+    flex-direction: column;
+  }
+
+  .ral-payment-history__totals {
+    width: 100%;
+  }
+
+  .ral-payment-history__totals > div {
+    width: 100%;
+  }
+}
+
 .ral-bill-generate {
   max-width: 100%;
 }
@@ -589,3 +769,117 @@
 .ral-property-details__non-legacy--hidden {
   display: none;
 }
+
+// Keep all owner-search columns legible and scroll the result area when required.
+.ral-owner-search-results {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+
+  .ndc-new-table-wrapper {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .customTable {
+    min-width: 1480px;
+    table-layout: fixed;
+  }
+
+  .customTable th,
+  .customTable td {
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+    text-align: left;
+  }
+
+  .customTable th {
+    line-height: 1.3;
+    white-space: normal;
+  }
+
+  .customTable th:nth-child(1),
+  .customTable td:nth-child(1) {
+    width: 170px;
+  }
+
+  .customTable th:nth-child(2),
+  .customTable td:nth-child(2) {
+    width: 130px;
+    white-space: nowrap;
+  }
+
+  .customTable th:nth-child(3),
+  .customTable td:nth-child(3) {
+    width: 220px;
+  }
+
+  .customTable th:nth-child(4),
+  .customTable td:nth-child(4) {
+    width: 125px;
+    white-space: nowrap;
+  }
+
+  .customTable th:nth-child(5),
+  .customTable td:nth-child(5) {
+    width: 205px;
+  }
+
+  .customTable th:nth-child(6),
+  .customTable td:nth-child(6) {
+    width: 220px;
+  }
+
+  .customTable th:nth-child(7),
+  .customTable td:nth-child(7) {
+    width: 110px;
+    white-space: nowrap;
+  }
+
+  .customTable th:nth-child(8),
+  .customTable td:nth-child(8) {
+    width: 120px;
+    text-align: center;
+    white-space: nowrap;
+  }
+}
+
+// Prevent the wide search table from expanding the stepper or the page.
+.ral-owner-details-step {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: hidden !important;
+
+  #owner-search-form-container {
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  }
+}
+
+// A phone number does not need the full row width on desktop.
+.ral-owner-search-controls {
+  justify-content: flex-start;
+
+  .obps-page-components-layout-owner-search-modal--style-7 {
+    flex: 0 1 380px;
+    width: 380px;
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .ral-owner-search-controls {
+    .obps-page-components-layout-owner-search-modal--style-7 {
+      width: 100%;
+    }
+  }
+}