design_system 0.10.0 → 0.12.0

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/tables/_index.scss

@@ -0,0 +1,205 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Table component
+///
+/// @group components/table
+////
+
+@include nhsuk-exports("nhsuk/components/table") {
+  // Table container is used to ensure the table does not break the container.
+  //
+  // 1. Margin is removed so there isn't double spacing.
+  // 2. XS size not added because it matches the table header, so it'd be bad for hierarchy
+
+  .nhsuk-table-container {
+    box-sizing: border-box;
+    display: block;
+
+    width: 100%;
+
+    overflow-x: auto;
+
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+
+    @include nhsuk-responsive-margin(7, "bottom");
+
+    .nhsuk-table,
+    .nhsuk-table-responsive {
+      margin: 0; // [1]
+    }
+  }
+
+  .nhsuk-table,
+  .nhsuk-table-responsive {
+    box-sizing: border-box;
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    @include nhsuk-font($size: 19);
+    @include nhsuk-responsive-margin(7, "bottom");
+  }
+
+  .nhsuk-table__caption {
+    display: table-caption;
+    margin-bottom: nhsuk-spacing(3) - nhsuk-spacing(2);
+    @include nhsuk-font($size: 22, $weight: bold);
+
+    @include nhsuk-media-query($from: tablet) {
+      margin-bottom: nhsuk-spacing(4) - nhsuk-spacing(3);
+    }
+  }
+
+  .nhsuk-table__caption--xl {
+    margin-bottom: nhsuk-spacing(6) - nhsuk-spacing(2);
+    @include nhsuk-font-size(48);
+
+    @include nhsuk-media-query($from: tablet) {
+      margin-bottom: nhsuk-spacing(7) - nhsuk-spacing(3);
+    }
+  }
+
+  .nhsuk-table__caption--l {
+    @include nhsuk-font-size(36);
+  }
+
+  .nhsuk-table__caption--m {
+    @include nhsuk-font-size(26);
+  }
+
+  .nhsuk-table__caption--s {
+    @include nhsuk-font-size(22);
+  }
+
+  // [2]
+
+  // Table row hover
+  //
+  // Table row hover is used to aid readability for users.
+
+  .nhsuk-table__row {
+    &:hover {
+      background-color: nhsuk-colour("grey-5");
+    }
+  }
+
+  // Table panel with tab heading
+  //
+  // 1. Margin is removed so there isn't double spacing.
+
+  .nhsuk-table__panel-with-heading-tab {
+    @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-border-colour);
+
+    .nhsuk-table,
+    .nhsuk-table-container,
+    .nhsuk-table-responsive {
+      margin: 0; // [1]
+    }
+  }
+
+  .nhsuk-table__heading-tab {
+    @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);
+  }
+
+  // Responsive table
+  //
+  // 1. Hide the thead until desktop
+  // 2. Removing default screen reader behaviour
+  // 3. Assigning role of table-row on desktop to give default screen reader behaviour
+  // 4. Using justify content to space out elements in the row on mobile
+  // 5. Assigning a minimum width in case of black cell
+  // 6. Aligning content to the right on mobile
+  // 7. Aligning mobile header to left to split it from the data
+  // 8. Hiding mobile specific header from desktop view
+  // 9. Adding a display block value due to IE 11 not having full flex support
+
+  .nhsuk-table-responsive {
+    thead {
+      @include nhsuk-media-query($until: desktop) {
+        @include nhsuk-visually-hidden; // [1]
+      }
+    }
+
+    .nhsuk-table__body {
+      .nhsuk-table-responsive__heading {
+        @include nhsuk-typography-weight-bold;
+        padding-right: nhsuk-spacing(3);
+        text-align: left; // [7]
+      }
+
+      .nhsuk-table__row {
+        display: block; // [2]
+        margin-bottom: nhsuk-spacing(4);
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .nhsuk-table__row th,
+      .nhsuk-table__row td {
+        display: block; // For browsers that don't support flexbox
+        display: flex;
+        justify-content: space-between; // [4]
+        min-width: 1px; // [5]
+      }
+
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        .nhsuk-table__row th,
+        .nhsuk-table__row td {
+          display: block; // [9]
+        }
+      }
+
+      @include nhsuk-media-query($until: desktop) {
+        .nhsuk-table__row th {
+          font-weight: $nhsuk-font-weight-normal;
+        }
+
+        .nhsuk-table__row th,
+        .nhsuk-table__row td {
+          padding-right: 0;
+          text-align: right; // [6]
+
+          &:last-child {
+            border-bottom: 3px solid $nhsuk-border-colour;
+          }
+        }
+      }
+
+      @include nhsuk-media-query($from: desktop) {
+        .nhsuk-table-responsive__heading {
+          display: none; // [8]
+        }
+
+        .nhsuk-table__row {
+          display: table-row; // [3]
+        }
+
+        .nhsuk-table__row th {
+          text-align: left;
+        }
+
+        .nhsuk-table__row th,
+        .nhsuk-table__row td {
+          display: table-cell;
+        }
+      }
+    }
+  }
+
+  // Numeric tables
+  //
+  // Right aligns table cells for numeric tables.
+
+  .nhsuk-table__header--numeric,
+  .nhsuk-table__cell--numeric {
+    text-align: right;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/tables/_tables.scss

@@ -0,0 +1,3 @@
+@forward ".";
+
+/*# sourceMappingURL=_tables.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/tabs/_index.scss

@@ -0,0 +1,138 @@
+@forward "../../core/nhsuk-frontend-properties";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Tabs component
+///
+/// @group components/tabs
+////
+
+@include nhsuk-exports("nhsuk/components/tabs") {
+  .nhsuk-tabs {
+    @include nhsuk-responsive-margin(1, "top");
+    @include nhsuk-responsive-margin(6, "bottom");
+    @include nhsuk-font($size: 19);
+  }
+
+  .nhsuk-tabs__title {
+    margin-bottom: nhsuk-spacing(2);
+
+    // Set the size and weight again because this element is a heading and the
+    // user agent font size overrides the inherited font size
+    @include nhsuk-text-colour;
+    @include nhsuk-font($size: 19);
+  }
+
+  .nhsuk-tabs__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    @include nhsuk-responsive-margin(6, "bottom");
+  }
+
+  .nhsuk-tabs__list-item {
+    @include nhsuk-shape-dash;
+  }
+
+  .nhsuk-tabs__tab {
+    display: inline-block;
+  }
+
+  .nhsuk-tabs__panel {
+    @include nhsuk-responsive-margin(8, "bottom");
+  }
+
+  // NHS.UK frontend JavaScript enabled
+  .nhsuk-frontend-supported {
+    @include nhsuk-media-query($from: tablet) {
+      .nhsuk-tabs__list {
+        margin-bottom: 0;
+        border-bottom: 1px solid $nhsuk-border-colour;
+        @include nhsuk-clearfix;
+      }
+
+      .nhsuk-tabs__title {
+        display: none;
+      }
+
+      .nhsuk-tabs__list-item {
+        position: relative;
+
+        margin-right: nhsuk-spacing(1);
+        margin-bottom: 0;
+        margin-left: 0;
+        padding: nhsuk-spacing(2) nhsuk-spacing(4);
+
+        float: left;
+
+        background-color: nhsuk-colour("grey-4");
+
+        text-align: center;
+
+        &::before {
+          content: none;
+        }
+      }
+
+      .nhsuk-tabs__list-item--selected {
+        $border-width: 1px;
+
+        position: relative;
+
+        margin-top: nhsuk-spacing(-1);
+
+        // Compensation for border (otherwise we get a shift)
+        margin-bottom: -$border-width;
+        padding-top: (nhsuk-spacing(2) * 1.5) - $border-width;
+        padding-right: nhsuk-spacing(4) - $border-width;
+        padding-bottom: (nhsuk-spacing(2) * 1.5) + $border-width;
+        padding-left: nhsuk-spacing(4) - $border-width;
+
+        border: $border-width solid $nhsuk-border-colour;
+        border-bottom: 0;
+
+        background-color: $nhsuk-card-background-colour;
+
+        .nhsuk-tabs__tab {
+          text-decoration: none;
+        }
+      }
+
+      .nhsuk-tabs__tab {
+        margin-bottom: 0;
+
+        @include nhsuk-link-style-text;
+
+        &::after {
+          content: "";
+
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+      }
+
+      .nhsuk-tabs__panel {
+        padding: nhsuk-spacing(6) nhsuk-spacing(4);
+        border: 1px solid $nhsuk-border-colour;
+        border-top: 0;
+        background-color: $nhsuk-card-background-colour;
+        @include nhsuk-responsive-margin(0, "bottom");
+
+        & > :last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .nhsuk-tabs__panel--hidden {
+        display: none;
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/tabs/_tabs.scss

@@ -0,0 +1,3 @@
+@forward ".";
+
+/*# sourceMappingURL=_tabs.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/tag/_index.scss

@@ -0,0 +1,101 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Tag component
+///
+/// @group components/tag
+////
+
+@include nhsuk-exports("nhsuk/components/tag") {
+  .nhsuk-tag {
+    display: inline-block;
+
+    padding-top: nhsuk-spacing(1);
+    padding-right: nhsuk-spacing(2);
+    padding-bottom: nhsuk-spacing(1);
+    padding-left: nhsuk-spacing(2);
+
+    border: 1px solid nhsuk-shade(nhsuk-colour("blue"), 10%);
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
+    color: nhsuk-colour("white");
+    background-color: nhsuk-shade(nhsuk-colour("blue"), 10%);
+
+    text-decoration: none;
+
+    @include nhsuk-font($size: 16, $weight: bold, $line-height: 1);
+  }
+
+  // Colour variants
+
+  .nhsuk-tag--white {
+    border-color: nhsuk-colour("black");
+    color: nhsuk-colour("black");
+    background-color: nhsuk-colour("white");
+  }
+
+  .nhsuk-tag--grey {
+    border-color: nhsuk-shade(nhsuk-colour("grey-1"), 30%);
+    color: nhsuk-shade(nhsuk-colour("grey-1"), 30%);
+    background-color: nhsuk-tint(nhsuk-colour("grey-1"), 80%);
+  }
+
+  .nhsuk-tag--green {
+    border-color: nhsuk-shade(nhsuk-colour("green"), 40%);
+    color: nhsuk-shade(nhsuk-colour("green"), 40%);
+    background-color: nhsuk-tint(nhsuk-colour("green"), 80%);
+  }
+
+  .nhsuk-tag--aqua-green {
+    border-color: nhsuk-shade(nhsuk-colour("aqua-green"), 50%);
+    color: nhsuk-shade(nhsuk-colour("aqua-green"), 50%);
+    background-color: nhsuk-tint(nhsuk-colour("aqua-green"), 80%);
+  }
+
+  .nhsuk-tag--blue {
+    border-color: nhsuk-shade(nhsuk-colour("blue"), 30%);
+    color: nhsuk-shade(nhsuk-colour("blue"), 30%);
+    background-color: nhsuk-tint(nhsuk-colour("blue"), 80%);
+  }
+
+  .nhsuk-tag--purple {
+    border-color: nhsuk-shade(nhsuk-colour("purple"), 30%);
+    color: nhsuk-shade(nhsuk-colour("purple"), 30%);
+    background-color: nhsuk-tint(nhsuk-colour("purple"), 80%);
+  }
+
+  .nhsuk-tag--pink {
+    border-color: nhsuk-shade(nhsuk-colour("pink"), 50%);
+    color: nhsuk-shade(nhsuk-colour("pink"), 50%);
+    background-color: nhsuk-tint(nhsuk-colour("pink"), 80%);
+  }
+
+  .nhsuk-tag--red {
+    border-color: nhsuk-shade(nhsuk-colour("red"), 50%);
+    color: nhsuk-shade(nhsuk-colour("red"), 50%);
+    background-color: nhsuk-tint(nhsuk-colour("red"), 80%);
+  }
+
+  .nhsuk-tag--orange {
+    border-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
+    color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
+    background-color: nhsuk-tint(nhsuk-colour("warm-yellow"), 50%);
+  }
+
+  .nhsuk-tag--yellow {
+    border-color: nhsuk-shade(nhsuk-colour("yellow"), 70%);
+    color: nhsuk-shade(nhsuk-colour("yellow"), 70%);
+    background-color: nhsuk-tint(nhsuk-colour("yellow"), 50%);
+  }
+
+  // Remove tag border
+
+  .nhsuk-tag--no-border {
+    border: 0;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/tag/_tag.scss

@@ -0,0 +1,3 @@
+@forward ".";
+
+/*# sourceMappingURL=_tag.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/task-list/_index.scss

@@ -0,0 +1,111 @@
+@use "sass:color";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Task list component
+///
+/// @group components/task-list
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+////
+
+// NHS pages have a grey background, so we need a slightly darker colour for the hover
+// This produces 1.1:1 contrast, the same as GOV.UK’s
+$nhsuk-task-list-hover-colour: color.adjust(nhsuk-colour("grey-5"), $lightness: -6%);
+
+// @deprecated To be removed in v11.0
+$nhsuk-task-list-hover-color: $nhsuk-task-list-hover-colour;
+
+@include nhsuk-exports("nhsuk/components/task-list") {
+  .nhsuk-task-list {
+    margin-top: 0;
+    padding: 0;
+    list-style-type: none;
+
+    @include nhsuk-font($size: 19);
+    @include nhsuk-responsive-margin(5, "bottom");
+  }
+
+  // This uses table layout so that the task name and status always appear side-by-side, with the width of
+  // each 'column' being flexible depending upon the length of the task names and statuses.
+  //
+  // The position is set to 'relative' so than an absolutely-positioned transparent element box
+  // can be added within the link so that the whole row can be clickable.
+  .nhsuk-task-list__item {
+    display: table;
+
+    position: relative;
+
+    width: 100%;
+    margin-bottom: 0;
+    padding-top: nhsuk-spacing(2) + 4px;
+    padding-bottom: nhsuk-spacing(2) + 4px;
+
+    border-bottom: 1px solid $nhsuk-border-colour;
+  }
+
+  .nhsuk-task-list__item:first-child {
+    border-top: 1px solid $nhsuk-border-colour;
+  }
+
+  // This class is added to the <li> elements where the task name is a link.
+  // The background hover colour is added to help indicate that the whole row is clickable, rather
+  // than just the visible link text.
+  .nhsuk-task-list__item--with-link:hover {
+    background: $nhsuk-task-list-hover-colour;
+  }
+
+  .nhsuk-task-list__name-and-hint {
+    display: table-cell;
+    color: $nhsuk-text-colour;
+    vertical-align: top;
+  }
+
+  .nhsuk-task-list__status {
+    display: table-cell;
+    padding-left: nhsuk-spacing(2);
+    color: $nhsuk-text-colour;
+    text-align: right;
+    vertical-align: top;
+  }
+
+  // This replicates some of the styling and spacing of tags so that these non-tag
+  // statuses don’t look out of place with them. Longer term we may want to look to
+  // adjusting the tag styles to be closer to body text.
+  .nhsuk-task-list__status--completed,
+  .nhsuk-task-list__status--cannot-start-yet {
+    padding-top: nhsuk-spacing(1) + 2px; // to match the spacing on tags
+    padding-bottom: nhsuk-spacing(1);
+    padding-left: nhsuk-spacing(2);
+    text-decoration: none;
+
+    @include nhsuk-font($size: 16, $weight: normal, $line-height: 1);
+  }
+
+  .nhsuk-task-list__status--cannot-start-yet {
+    color: $nhsuk-secondary-text-colour;
+  }
+
+  // This adds an empty transparent box covering the whole row, including the task status and
+  // any hint text. Because this is generated within the link element, this allows the whole area
+  // to be clickable.
+  .nhsuk-task-list__link::after {
+    content: "";
+
+    display: block;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .nhsuk-task-list__hint {
+    margin-top: nhsuk-spacing(1);
+    color: $nhsuk-secondary-text-colour;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/task-list/_task-list.scss

@@ -0,0 +1,3 @@
+@forward ".";
+
+/*# sourceMappingURL=_task-list.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/textarea/_index.scss

@@ -0,0 +1,52 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
+
+////
+/// Textarea component
+///
+/// @group components/textarea
+////
+
+@include nhsuk-exports("nhsuk/components/textarea") {
+  .nhsuk-textarea {
+    box-sizing: border-box;
+
+    display: block;
+
+    width: 100%;
+    min-height: nhsuk-px-to-rem(40px);
+    padding: nhsuk-px-to-rem(nhsuk-spacing(1));
+
+    resize: vertical;
+
+    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+
+            appearance: none;
+
+    @include nhsuk-responsive-margin(5, "bottom");
+    @include nhsuk-font($size: 19);
+
+    &:focus {
+      @include nhsuk-focused-input;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      background-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+
+  .nhsuk-textarea--error {
+    border-color: $nhsuk-error-colour;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/textarea/_textarea.scss

@@ -0,0 +1,3 @@
+@forward ".";
+
+/*# sourceMappingURL=_textarea.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/warning-callout/_index.scss

@@ -0,0 +1,22 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../card";
+
+////
+/// Warning callout component
+///
+/// @group components/warning-callout
+////
+
+@include nhsuk-exports("nhsuk/components/warning-callout") {
+  .nhsuk-warning-callout {
+    @include nhsuk-panel-with-label(nhsuk-colour("pale-yellow"), $nhsuk-text-colour, nhsuk-colour("yellow")); // [1]
+  }
+
+  .nhsuk-warning-callout__label {
+    @include nhsuk-heading-label(nhsuk-colour("yellow"), $nhsuk-text-colour); // [2]
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/warning-callout/_warning-callout.scss

@@ -0,0 +1,3 @@
+@forward ".";
+
+/*# sourceMappingURL=_warning-callout.scss.map */

data/app/assets/stylesheets/design_system/{nhsuk-frontend-9.6.4 → nhsuk-frontend-10.3.1}/core/_index.scss

@@ -4,8 +4,12 @@
 
 @forward "settings";
 @forward "tools";
+@forward "helpers";
+@forward "nhsuk-frontend-properties";
 @forward "generic";
 @forward "elements";
 @forward "objects";
 @forward "styles";
 @forward "utilities";
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/core/_nhsuk-frontend-properties.scss

@@ -0,0 +1,28 @@
+@use "sass:meta";
+@use "settings" as *;
+@use "settings/colours-applied";
+@use "tools" as *;
+@use "helpers" as *;
+
+:root {
+  // This variable is automatically overwritten during builds and releases.
+  // It doesn't need to be updated manually.
+  --nhsuk-frontend-version: "10.3.1";
+
+  // CSS custom property for each breakpoint
+  @each $name, $value in $nhsuk-breakpoints {
+    --nhsuk-breakpoint-#{$name}: #{nhsuk-px-to-rem($value)};
+  }
+
+  // CSS custom property for each palette colour
+  @each $name, $value in $nhsuk-colours {
+    --nhsuk-#{$name}-colour: #{nhsuk-colour-compatible($value)};
+  }
+
+  // CSS custom property for each applied colour
+  @each $name, $value in meta.module-variables("colours-applied") {
+    --#{$name}: #{nhsuk-colour-compatible($value)};
+  }
+}
+
+/*# sourceMappingURL=_nhsuk-frontend-properties.scss.map */