govuk_tech_docs 3.3.1 → 3.4.5

data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss

@@ -166,4 +166,111 @@
       }
     }
   }
+
+  // Additional block for the summary card
+  .govuk-summary-card {
+    @include govuk-responsive-margin(6, "bottom");
+    border: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-summary-card__title-wrapper {
+    padding: govuk-spacing(3);
+
+    // Ensures the card header appears separate to the summary list in forced colours mode
+    border-bottom: 1px solid transparent;
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+
+    @include govuk-media-query($from: "tablet") {
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+      padding: govuk-spacing(3) govuk-spacing(4);
+    }
+  }
+
+  .govuk-summary-card__title {
+    @include govuk-font($size: 19, $weight: bold);
+    margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
+
+    @include govuk-media-query($from: "tablet") {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  .govuk-summary-card__actions {
+    @include govuk-font($size: 19, $weight: bold);
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    row-gap: 10px;
+    margin: govuk-spacing(1) 0;
+    padding: 0;
+    list-style: none;
+
+    @include govuk-media-query($from: "tablet") {
+      -ms-flex-pack: right;
+          justify-content: right;
+      text-align: right;
+    }
+  }
+
+  .govuk-summary-card__action {
+    display: inline;
+    margin: 0 govuk-spacing(2) 0 0;
+    padding-right: govuk-spacing(2);
+    border-right: 1px solid $govuk-border-colour;
+
+    @include govuk-media-query($from: "tablet") {
+      margin-right: 0;
+    }
+
+    // We use the following media query to target IE11 and 10 only to add margin
+    // between actions.
+    //
+    // We do this because we're using row-gap to create space between actions on
+    // more evergreen browsers which IE doesn't support. @supports currently isn't
+    // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.
+    //
+    // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
+    // which also includes an explanation of why this works
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  .govuk-summary-card__action:last-child {
+    margin: 0;
+    padding-right: 0;
+    border-right: none;
+
+    @include govuk-media-query($from: "tablet") {
+      padding-left: govuk-spacing(2);
+    }
+
+    // See above comment for why this is here
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-summary-card__content {
+    padding: govuk-spacing(3) govuk-spacing(3) 0;
+
+    @include govuk-media-query($from: "tablet") {
+      padding: govuk-spacing(3) govuk-spacing(4);
+    }
+
+    .govuk-summary-list {
+      margin-bottom: 0;
+    }
+
+    .govuk-summary-list__row:last-of-type {
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+  }
 }