design_system 0.11.0 → 0.12.0

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

@@ -0,0 +1,374 @@
+@use "sass:math";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Details component
+///
+/// 1. Style the summary to look like a link...
+/// 2. Make the focus outline shrink-wrap the text content of the summary
+/// 3. Absolutely position the marker against this element
+/// 3. Allow for absolutely positioned marker and align with disclosed text
+/// 4. Only underline the text, not the arrow
+/// 5. Remove the default details marker so we can style our own consistently
+///    and ensure it displays in Firefox
+/// 6. Custom padding to left align the details text with the summary
+///
+/// @group components/details
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+////
+
+$nhsuk-expander-border-width: 1px;
+$nhsuk-expander-border-bottom-width: nhsuk-spacing(1);
+$nhsuk-expander-border-colour: $nhsuk-border-colour;
+$nhsuk-expander-border-hover-colour: $nhsuk-border-hover-colour;
+$nhsuk-expander-icon-size: 27px; // 19px font size + 4px summary text padding
+
+// @deprecated To be removed in v11.0
+$expander-border-width: $nhsuk-expander-border-width;
+$expander-border-bottom-width: $nhsuk-expander-border-bottom-width;
+$expander-border-color: $nhsuk-expander-border-colour;
+$expander-border-colour: $nhsuk-expander-border-colour;
+$expander-border-hover-color: $nhsuk-expander-border-hover-colour;
+$expander-border-hover-colour: $nhsuk-expander-border-hover-colour;
+$expander-icon-size: $nhsuk-expander-icon-size;
+
+@include nhsuk-exports("nhsuk/components/details") {
+  .nhsuk-details {
+    display: block;
+    @include nhsuk-text-colour;
+    @include nhsuk-font-size(19);
+    @include nhsuk-responsive-margin(4, "bottom");
+  }
+
+  .nhsuk-details__summary {
+    display: block;
+  }
+
+  .nhsuk-details__text {
+    @include nhsuk-top-and-bottom;
+  }
+
+  // Hack to support Internet Explorer 11
+  @media screen\0 {
+    .nhsuk-details {
+      margin-top: nhsuk-spacing(2);
+      padding: nhsuk-spacing(3) 0;
+      padding-left: nhsuk-px-to-rem(20px); // [6]
+      border-left: nhsuk-spacing(1) solid $nhsuk-border-colour;
+    }
+
+    .nhsuk-details__summary-text {
+      display: block;
+      font-weight: $nhsuk-font-weight-bold;
+      @include nhsuk-responsive-margin(4, "bottom");
+    }
+  }
+
+  // Use a feature query to style the <details> element in newer browsers,
+  // leaving older browsers to only show the content
+  //
+  // Additionally, -ms-ime-align is only supported by Edge 12 - 18
+  //
+  // This ensures we don't use these styles in browsers which:
+  //   - support ES6 modules but not the <details> element (Edge 16 - 18)
+  //   - do not support ES6 modules or the <details> element (eg, IE8+)
+  @supports not (-ms-ime-align: auto) {
+    .nhsuk-details__summary {
+      position: relative; // [3]
+      width: -webkit-fit-content;
+      width: fit-content; // [2]
+      padding-left: nhsuk-px-to-rem(nhsuk-spacing(4));
+      color: $nhsuk-link-colour; // [1]
+      cursor: pointer;
+
+      &:hover {
+        color: $nhsuk-link-hover-colour;
+      }
+
+      &:focus {
+        @include nhsuk-focused-text;
+      }
+
+      &:hover,
+      &:focus {
+        .nhsuk-details__summary-text {
+          text-decoration: none;
+        }
+      }
+
+      &::-webkit-details-marker {
+        display: none; // [5]
+      }
+
+      &::before {
+        content: "";
+
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+
+        margin: auto;
+
+        @include nhsuk-shape-arrow($direction: right, $base: 14px);
+      }
+
+      .nhsuk-details[open] > &::before {
+        @include nhsuk-shape-arrow($direction: down, $base: 14px);
+      }
+    }
+
+    .nhsuk-details__summary-text {
+      text-decoration: underline; // [4]
+    }
+
+    .nhsuk-details__text {
+      margin-top: nhsuk-spacing(2);
+      padding: nhsuk-spacing(3) 0;
+      padding-right: 0;
+      padding-left: 20px; // [6]
+      border-left: nhsuk-spacing(1) solid $nhsuk-border-colour;
+    }
+  }
+
+  // Expander variant
+
+  .nhsuk-expander {
+    border: $nhsuk-expander-border-width solid $nhsuk-expander-border-colour;
+    background-color: $nhsuk-card-background-colour;
+
+    .nhsuk-details__summary {
+      display: block;
+      width: auto;
+      padding: nhsuk-spacing(4) - $nhsuk-focus-width nhsuk-spacing(4) 0;
+      border-top: $nhsuk-focus-width solid transparent;
+      background-color: $nhsuk-card-background-colour;
+
+      @include nhsuk-media-query($from: tablet) {
+        padding: nhsuk-spacing(5) - $nhsuk-focus-width nhsuk-spacing(5) 0;
+      }
+    }
+
+    .nhsuk-details__text {
+      margin-top: 0;
+      margin-left: 0;
+      border-left: 0;
+
+      @include nhsuk-responsive-padding(5, "bottom");
+      @include nhsuk-responsive-padding(5, "left");
+      @include nhsuk-responsive-padding(5, "right");
+      @include nhsuk-responsive-padding(0, "top");
+    }
+
+    // Hack to support Internet Explorer 11
+    @media screen\0 {
+      margin-top: 0;
+      padding: 0;
+
+      .nhsuk-details__summary-text {
+        display: block;
+        font-weight: $nhsuk-font-weight-bold;
+        @include nhsuk-font-size(26);
+        @include nhsuk-responsive-margin(4, "bottom");
+      }
+    }
+
+    // Use a feature query to style the <details> element in newer browsers,
+    // leaving older browsers to show the content in a card style box
+    @supports not (-ms-ime-align: auto) {
+      border-bottom-width: $nhsuk-expander-border-bottom-width;
+
+      &:hover {
+        border-color: $nhsuk-expander-border-hover-colour;
+      }
+
+      .nhsuk-details__summary {
+        padding-bottom: nhsuk-spacing(4);
+      }
+
+      @include nhsuk-media-query($from: tablet) {
+        .nhsuk-details__summary {
+          padding-bottom: nhsuk-spacing(5);
+        }
+      }
+
+      .nhsuk-details__summary::before {
+        display: none;
+      }
+
+      .nhsuk-details__summary:focus {
+        box-shadow: none;
+      }
+
+      .nhsuk-details__summary-text {
+        display: inline-block;
+
+        position: relative;
+
+        padding: nhsuk-spacing(1);
+        padding-left: $nhsuk-expander-icon-size + nhsuk-spacing(2);
+
+        color: $nhsuk-link-colour;
+
+        cursor: pointer;
+      }
+
+      .nhsuk-details__summary:hover .nhsuk-details__summary-text {
+        color: $nhsuk-link-hover-colour;
+      }
+
+      .nhsuk-details__summary:focus .nhsuk-details__summary-text {
+        @include nhsuk-focused-text;
+      }
+
+      // Internet Explorer 11 doesn’t support clip-path, but we don’t show the
+      // ::before pseudo element to users of that browser
+      .nhsuk-details__summary-text::before {
+        content: "";
+
+        position: absolute;
+        top: calc(50% - math.div($nhsuk-expander-icon-size, 2));
+        left: 0;
+
+        width: $nhsuk-expander-icon-size;
+        height: $nhsuk-expander-icon-size;
+
+        -webkit-clip-path: path(
+          "M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm0 6c-.8 0-1.5.7-1.5 1.5V12H8.5c-.8 0-1.4.6-1.5 1.4v.1c0 .8.7 1.5 1.5 1.5H12v3.5c0 .8.6 1.4 1.4 1.5h.1c.8 0 1.5-.7 1.5-1.5V15h3.5c.8 0 1.4-.6 1.5-1.4v-.1c0-.8-.7-1.5-1.5-1.5H15V8.5c0-.8-.6-1.4-1.4-1.5Z"
+        );
+
+                clip-path: path(
+          "M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm0 6c-.8 0-1.5.7-1.5 1.5V12H8.5c-.8 0-1.4.6-1.5 1.4v.1c0 .8.7 1.5 1.5 1.5H12v3.5c0 .8.6 1.4 1.4 1.5h.1c.8 0 1.5-.7 1.5-1.5V15h3.5c.8 0 1.4-.6 1.5-1.4v-.1c0-.8-.7-1.5-1.5-1.5H15V8.5c0-.8-.6-1.4-1.4-1.5Z"
+        ); // Plus icon
+
+        background-color: currentcolor;
+      }
+
+      &[open] {
+        border-bottom-width: $nhsuk-expander-border-width;
+      }
+
+      &[open] .nhsuk-details__summary-text::before {
+        -webkit-clip-path: path(
+          "M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm5 11h-10a1.5 1.5 0 0 0 0 3h10a1.5 1.5 0 0 0 0-3Z"
+        );
+                clip-path: path(
+          "M13.5 1a12.5 12.5 0 1 1 0 25 12.5 12.5 0 0 1 0-25Zm5 11h-10a1.5 1.5 0 0 0 0 3h10a1.5 1.5 0 0 0 0-3Z"
+        ); // Minus icon
+      }
+
+      // Use a feature query to check for scalable clip-path support,
+      // replacing fixed pixel sizes with rems for text-only zooming
+      @supports ((-webkit-clip-path: shape(from 0% 0%, line to 100% 100%)) or (clip-path: shape(from 0% 0%, line to 100% 100%))) {
+        .nhsuk-details__summary-text {
+          padding-left: nhsuk-px-to-rem($nhsuk-expander-icon-size + nhsuk-spacing(2));
+        }
+
+        .nhsuk-details__summary-text::before {
+          top: calc(50% - nhsuk-px-to-rem(math.div($nhsuk-expander-icon-size, 2)));
+          width: nhsuk-px-to-rem($nhsuk-expander-icon-size);
+          height: nhsuk-px-to-rem($nhsuk-expander-icon-size);
+          -webkit-clip-path: shape(
+            from 50% 3.7%,
+            arc by 0% 92.6% of 46.3% 46.3% large cw,
+            arc by 0% -92.6% of 46.3% 46.3% small cw,
+            close,
+            move by 0% 22.22%,
+            curve by -5.56% 5.56% with -2.96% 0% / -5.56% 2.59%,
+            vline to 44.44%,
+            hline to 31.48%,
+            curve by -5.56% 5.19% with -2.96% 0% / -5.19% 2.22%,
+            vline by 0.37%,
+            curve by 5.56% 5.56% with 0% 2.96% / 2.59% 5.56%,
+            hline to 44.44%,
+            vline by 12.96%,
+            curve by 5.19% 5.56% with 0% 2.96% / 2.22% 5.19%,
+            hline by 0.37%,
+            curve by 5.56% -5.56% with 2.96% 0% / 5.56% -2.59%,
+            vline to 55.56%,
+            hline by 12.96%,
+            curve by 5.56% -5.19% with 2.96% 0% / 5.19% -2.22%,
+            vline by -0.37%,
+            curve by -5.56% -5.56% with 0% -2.96% / -2.59% -5.56%,
+            hline to 55.56%,
+            vline to 31.48%,
+            curve by -5.19% -5.56% with 0% -2.96% / -2.22% -5.19%,
+            close
+          );
+                  clip-path: shape(
+            from 50% 3.7%,
+            arc by 0% 92.6% of 46.3% 46.3% large cw,
+            arc by 0% -92.6% of 46.3% 46.3% small cw,
+            close,
+            move by 0% 22.22%,
+            curve by -5.56% 5.56% with -2.96% 0% / -5.56% 2.59%,
+            vline to 44.44%,
+            hline to 31.48%,
+            curve by -5.56% 5.19% with -2.96% 0% / -5.19% 2.22%,
+            vline by 0.37%,
+            curve by 5.56% 5.56% with 0% 2.96% / 2.59% 5.56%,
+            hline to 44.44%,
+            vline by 12.96%,
+            curve by 5.19% 5.56% with 0% 2.96% / 2.22% 5.19%,
+            hline by 0.37%,
+            curve by 5.56% -5.56% with 2.96% 0% / 5.56% -2.59%,
+            vline to 55.56%,
+            hline by 12.96%,
+            curve by 5.56% -5.19% with 2.96% 0% / 5.19% -2.22%,
+            vline by -0.37%,
+            curve by -5.56% -5.56% with 0% -2.96% / -2.59% -5.56%,
+            hline to 55.56%,
+            vline to 31.48%,
+            curve by -5.19% -5.56% with 0% -2.96% / -2.22% -5.19%,
+            close
+          ); // Plus icon, scalable
+        }
+
+        &[open] .nhsuk-details__summary-text::before {
+          -webkit-clip-path: shape(
+            from 50% 3.7%,
+            arc by 0% 92.6% of 46.3% 46.3% large cw,
+            arc by 0% -92.6% of 46.3% 46.3% small cw,
+            close,
+            move by 18.52% 40.74%,
+            hline by -37.04%,
+            arc by 0% 11.11% of 5.56% 5.56% small ccw,
+            hline by 37.04%,
+            arc by 0% -11.11% of 5.56% 5.56% small ccw,
+            close
+          );
+                  clip-path: shape(
+            from 50% 3.7%,
+            arc by 0% 92.6% of 46.3% 46.3% large cw,
+            arc by 0% -92.6% of 46.3% 46.3% small cw,
+            close,
+            move by 18.52% 40.74%,
+            hline by -37.04%,
+            arc by 0% 11.11% of 5.56% 5.56% small ccw,
+            hline by 37.04%,
+            arc by 0% -11.11% of 5.56% 5.56% small ccw,
+            close
+          ); // Minus icon, scalable
+        }
+      }
+    }
+  }
+
+  // Reduce margin between a group of expanders so they sit together
+  .nhsuk-expander-group {
+    @include nhsuk-responsive-margin(4, "bottom");
+
+    > .nhsuk-details {
+      @include nhsuk-responsive-margin(2, "bottom");
+    }
+  }
+
+  .nhsuk-details + h2,
+  .nhsuk-details + .nhsuk-heading-l {
+    @include nhsuk-responsive-padding(4, "top");
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/do-dont-list/_do-dont-list.scss

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

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

@@ -0,0 +1,37 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../../core/styles/icons";
+@forward "../../core/styles/lists";
+
+////
+/// Do and Don't list component
+///
+/// Do and Don't lists help users understand more easily what they should
+/// and shouldn't do.
+///
+/// @group components/do-dont-list
+////
+
+@include nhsuk-exports("nhsuk/components/do-dont-list") {
+  .nhsuk-do-dont-list {
+    @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-border-colour); // [1]
+
+    .nhsuk-icon__cross,
+    .nhsuk-icon--cross {
+      fill: nhsuk-colour("red");
+    }
+
+    .nhsuk-icon__tick,
+    .nhsuk-icon--tick {
+      fill: nhsuk-colour("green");
+    }
+  }
+
+  .nhsuk-do-dont-list__label {
+    @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour); // [2]
+    @include nhsuk-print-colour;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/error-message/_error-message.scss

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

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

@@ -0,0 +1,22 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Error message component
+///
+/// @group components/error-message
+////
+
+@include nhsuk-exports("nhsuk/components/error-message") {
+  .nhsuk-error-message {
+    display: block;
+    margin-top: 0; // Reset any default browser margins for paragraphs
+    margin-bottom: nhsuk-spacing(3);
+    clear: both;
+    color: $nhsuk-error-colour;
+
+    @include nhsuk-font(19, $weight: bold);
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/error-summary/_error-summary.scss

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

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

@@ -0,0 +1,75 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@forward "../../core/styles/lists";
+
+////
+/// Error summary component
+///
+/// @group components/error-summary
+////
+
+@include nhsuk-exports("nhsuk/components/error-summary") {
+  .nhsuk-error-summary {
+    border: $nhsuk-border-width solid $nhsuk-error-colour;
+
+    @include nhsuk-text-colour;
+    @include nhsuk-font($size: 19);
+    @include nhsuk-responsive-padding(4);
+    @include nhsuk-responsive-margin(8, "bottom");
+
+    &:focus {
+      border: $nhsuk-focus-width solid $nhsuk-focus-text-colour;
+      outline: $nhsuk-focus-width solid transparent;
+      box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-colour;
+    }
+  }
+
+  .nhsuk-error-summary__title {
+    margin-top: 0;
+
+    @include nhsuk-font(26, $weight: bold);
+    @include nhsuk-responsive-margin(4, "bottom");
+  }
+
+  .nhsuk-error-summary__body {
+    p {
+      margin-bottom: 0;
+    }
+
+    > * + * {
+      @include nhsuk-responsive-margin(4, "top");
+    }
+
+    > :last-child {
+      @include nhsuk-responsive-margin(1, "bottom");
+    }
+  }
+
+  // Cross-component class - adjusts styling of list component
+  .nhsuk-error-summary__list {
+    margin-bottom: 0;
+  }
+
+  // Remove the bottom margin from the last list item
+  .nhsuk-error-summary__list li:last-child {
+    margin-bottom: 0;
+  }
+
+  .nhsuk-error-summary__list a {
+    @include nhsuk-typography-weight-bold;
+
+    // Override default link styling to use error colour
+    &:link,
+    &:visited,
+    &:hover,
+    &:active {
+      color: $nhsuk-error-colour;
+    }
+
+    &:focus {
+      @include nhsuk-focused-text;
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/fieldset/_fieldset.scss

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

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

@@ -0,0 +1,81 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Fieldset component
+///
+/// @group components/fieldset
+////
+
+@include nhsuk-exports("nhsuk/components/fieldset") {
+  .nhsuk-fieldset {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    @include nhsuk-clearfix;
+  }
+
+  // Fix for Firefox < 53 (https://bugzil.la/504622)
+  // stylelint-disable selector-type-no-unknown -- Ignore 'x:-moz-any-link'
+  @supports not (caret-color: auto) {
+    .nhsuk-fieldset,
+    x:-moz-any-link {
+      display: table-cell;
+    }
+  }
+  // stylelint-enable selector-type-no-unknown
+
+  .nhsuk-fieldset__legend {
+    // Fix legend text wrapping in Edge and IE
+    // 1. IE9-11 & Edge 12-13
+    // 2. IE8-11
+    box-sizing: border-box; // 1
+
+    display: table; // 2
+
+    max-width: 100%; // 1
+    margin-bottom: nhsuk-spacing(2);
+    padding: 0;
+
+    white-space: normal; // 1
+
+    @include nhsuk-text-colour;
+    @include nhsuk-font($size: 19);
+  }
+
+  // Modifiers that make legends look more like their equivalent headings
+  .nhsuk-fieldset__legend--xl,
+  .nhsuk-fieldset__legend--l,
+  .nhsuk-fieldset__legend--m {
+    margin-bottom: nhsuk-spacing(3);
+    @include nhsuk-typography-weight-bold;
+  }
+
+  .nhsuk-fieldset__legend--xl {
+    @include nhsuk-font-size($size: 48);
+  }
+
+  .nhsuk-fieldset__legend--l {
+    @include nhsuk-font-size($size: 36);
+  }
+
+  .nhsuk-fieldset__legend--m {
+    @include nhsuk-font-size($size: 26);
+  }
+
+  .nhsuk-fieldset__legend--s {
+    @include nhsuk-typography-weight-bold;
+  }
+
+  // When the legend contains an H1, we want the H1 to inherit all styles from
+  // the legend. Effectively treat the heading as if it is not there.
+  .nhsuk-fieldset__heading {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/file-upload/_file-upload.scss

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