Skip to content

Commit

Permalink
Add x-govuk-summary-card styles
Browse files Browse the repository at this point in the history
This doesn't exist in the design system yet. See:
alphagov/govuk-design-system-backlog#210

We need this component in the support interface. Add its styles from:
https://github.com/x-govuk/govuk-prototype-components/tree/main/x-govuk/components/summary-card
  • Loading branch information
malcolmbaig committed Sep 20, 2022
1 parent 8c4b5e7 commit b75e067
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 0 deletions.
81 changes: 81 additions & 0 deletions app/assets/stylesheets/_x-govuk-summary-card.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
.x-govuk-summary-card {
border: 1px solid $govuk-border-colour;

// Card header
.x-govuk-summary-card__header {
align-items: center;
background-color: govuk-colour("light-grey");
padding: govuk-spacing(3);

@include govuk-media-query($from: desktop) {
display: flex;
justify-content: space-between;
align-items: start;
}
}

.x-govuk-summary-card__title {
@include govuk-font($size: 19);
margin: 0;
}

.x-govuk-summary-card__meta {
@include govuk-font($size: 16);
display: block;
margin: 0;
}

.x-govuk-summary-card__actions {
@include govuk-font($size: 19);
}

.x-govuk-summary-card__actions-list {
width: 100%;
margin: 0;
padding: 0;
}

.x-govuk-summary-card__actions-list-item {
display: block;
white-space: nowrap;

@include govuk-media-query($from: desktop) {
display: inline-block;
margin-left: govuk-spacing(2);
text-align: right;
}
}

.x-govuk-summary-card__actions-list-item:first-child {
margin-left: 0;
}

// Card body
.x-govuk-summary-card__body {
@include govuk-font($size: 19);
padding: govuk-spacing(3);
}

.govuk-summary-list {
margin-bottom: 0;
}

.govuk-summary-list__row:last-child,
.govuk-summary-list__row:last-child > * {
border-bottom: 0;
}
}

.x-govuk-summary-card--large-title .x-govuk-summary-card__title {
@include govuk-font($size: 24, $weight: bold);
}

@media print {
.x-govuk-summary-card__header {
break-inside: avoid;
}

.x-govuk-summary-card__actions {
display: none;
}
}
1 change: 1 addition & 0 deletions app/assets/stylesheets/main.sass.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ $govuk-new-link-styles: true;
@import "govuk-frontend/govuk/all";
@import "_card";
@import "_performance-table";
@import "_x-govuk-summary-card";
@import "dfe-autocomplete/src/dfe-autocomplete";

.app-\!-inherit-colour {
Expand Down

0 comments on commit b75e067

Please sign in to comment.