@ukhomeoffice/cop-react-form-renderer 5.28.1 → 5.32.0

package/dist/components/CollectionSummary/SummaryCard.scss

@@ -0,0 +1,248 @@
+$govuk-font-family: 'Roboto', arial, sans-serif;
+
+@import "node_modules/govuk-frontend/govuk/_base";
+
+.govuk-grid-column-two-thirds:has(.hods-form-summary-card) {
+  width: 100% !important;
+}
+
+.govuk-form-group:has(.hods-form-summary-card) {
+  .govuk-form-group:last-of-type {
+    margin-left: govuk-spacing(3);
+  }
+}
+
+.hods-form-summary-card {
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border: 1px solid #E5E4E2;
+  margin: 1rem 0;
+  padding: 0.75rem;
+  display: block;
+
+  &--deleting-summary-card {
+    background-color: #FCF0EE;
+  }
+
+  &__header {
+    width: auto;
+    display: flex;
+    flex-direction: row;
+    color: #0b0c0c;
+    padding: govuk-spacing(3) govuk-spacing(4) 0;
+
+    &-content,
+    &-actions {
+      display: block;
+    }
+
+    &-content {
+      width: 65%;
+      @include govuk-font($size: 24, $weight: bold);
+
+      &-title,
+      &-detail {
+        display: inline-block;
+        margin-bottom: govuk-spacing(1);
+        margin-right: govuk-spacing(2);
+      }
+
+      &-detail {
+        font-weight: normal;
+      }
+    }
+
+    &-actions {
+      width: 35%;
+
+      .hods-button--primary {
+        @extend .hods-button--primary;
+        margin-right: govuk-spacing(2);
+      }
+
+      .hods-button--secondary {
+        @extend .hods-button--secondary;
+        margin-right: govuk-spacing(2);
+      }
+    }
+  }
+
+  &__editpage {
+    margin: 0 govuk-spacing(4)
+  }
+
+  &__body {
+    display: block;
+    padding: 0 0 0 govuk-spacing(4);
+    margin-top: govuk-spacing(1);
+
+    .hods-details__summary {
+      text-decoration: underline;
+    }
+
+    .details.hods-details {
+      margin-bottom: 0;
+    }
+  }
+
+  &__section {
+    border-bottom: 2px solid #A9A9A9;
+
+    &-title {
+      font-weight: bold;
+      margin: govuk-spacing(2) 0 govuk-spacing(6) 0;
+    }
+
+    &-content {
+      display: flex;
+      flex-wrap: wrap;
+      gap: govuk-spacing(2);
+
+      .hods-form-summary-card__field {
+        box-sizing: border-box;
+        margin-bottom: govuk-spacing(4);
+
+        .govuk-label,
+        .govuk-fieldset__legend {
+          font-weight: bold;
+          margin-bottom: govuk-spacing(1) !important;
+
+          &::after {
+            content: " :";
+          }
+        }
+
+        div.govuk-form-group div:has(img){
+          display: flex;
+          flex-wrap: wrap;
+
+          .hods-readonly.hods-readonly--success {
+            font-size: 0;
+            line-height: 0;
+
+            .cop-upload-preview__thumb {
+              display: inline-block;
+              margin-right: govuk-spacing(1);
+            }
+          }
+
+        }
+      }
+
+      &--columns-1,
+      &--columns-2,
+      &--columns-3 {
+        position: relative;
+        margin-bottom: govuk-spacing(1);
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          width: 2px;
+          height: 100%;
+          background-color: #A9A9A9;
+          left: 0;
+        }
+      }
+
+      &--columns-2 {
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          width: 2px;
+          height: 100%;
+          background-color: #A9A9A9;
+          left: 50%;
+        }
+
+        .hods-form-summary-card__field {
+          flex: 0 0 calc(50% - 10px);
+        }
+      }
+
+      &--columns-3 {
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 33.333%;
+          width: 2px;
+          height: 100%;
+          background-color: #A9A9A9;
+        }
+
+        .hods-form-summary-card__field {
+          flex: 0 0 calc(33.333% - 10px);
+
+          &:nth-child(2)::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 33.333%;
+            width: 2px;
+            height: 100%;
+            background-color: #A9A9A9;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  .hods-form-summary-card {
+    &__header {
+      flex-direction: column;
+
+      &-content {
+        width: 100%;
+      }
+
+      &-actions {
+        width: 100%;
+        margin-top: govuk-spacing(2);
+      }
+    }
+
+    &__section {
+      &-content {
+        display: block;
+
+        .hods-form-summary-card__field {
+          width: 100%;
+        }
+
+        .hods-form-summary-card__field:nth-child(2)::after {
+          display: none;
+        }
+
+        &--columns-2,
+        &--columns-3 {
+          position: relative;
+          margin-bottom: govuk-spacing(1);
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background-color: #A9A9A9;
+            left: 0;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+
+        &--columns-3 {
+          .hods-form-summary-card__field:nth-child(2)::after {
+            content: none;
+          }
+        }
+      }
+    }
+  }
+}