design_system 0.10.0 → 0.12.0

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/hero/_hero.scss

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

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

@@ -0,0 +1,205 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Hero component
+///
+/// 1. Position relative to support the description
+///    appearing over the image.
+/// 2. Adds a border between the header and hero, if required
+///
+/// @group components/hero
+///
+
+@include nhsuk-exports("nhsuk/components/hero") {
+  .nhsuk-hero {
+    box-sizing: border-box;
+    position: relative; // [1]
+    color: $nhsuk-reverse-text-colour;
+    background-color: $nhsuk-brand-colour;
+
+    @include nhsuk-print-colour;
+
+    .nhsuk-link,
+    a:not(.nhsuk-button) {
+      @include nhsuk-link-style-white;
+    }
+
+    .nhsuk-hero--border {
+      // [2]
+      border-top: $nhsuk-hero-border solid $nhsuk-secondary-border-colour;
+    }
+  }
+
+  .nhsuk-hero__wrapper {
+    @include nhsuk-responsive-padding(8, top);
+    @include nhsuk-responsive-padding(8, bottom);
+  }
+
+  .nhsuk-hero__heading {
+    @include nhsuk-responsive-margin(3, bottom);
+  }
+
+  //  Hero component image styles
+  //
+  // 3. Center the background image.
+  // 4. Stop the height affecting print stylesheets.
+  // 5. Show more of the image for larger screen sizes
+  // 6. Overlay must be min same height as .nhsuk-hero--image to cover the image.
+  // 7. Darken the background image with an overlay.
+  // 12. Remove any heights/min heights in Windows high contrast mode.
+
+  .nhsuk-hero--image {
+    background-repeat: no-repeat;
+    background-position: center right; // [3]
+    background-size: cover;
+
+    @media only screen {
+      // [4]
+      min-height: nhsuk-px-to-rem(200px);
+    }
+
+    @include nhsuk-media-query($from: tablet) {
+      @media only screen {
+        // [4]
+        min-height: nhsuk-px-to-rem(320px); // [5]
+
+        .nhsuk-hero__overlay {
+          height: nhsuk-px-to-rem(320px); // [6]
+        }
+      }
+    }
+
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      min-height: 0; // [12]
+    }
+
+    .nhsuk-hero__overlay {
+      background-color: rgba(nhsuk-shade($nhsuk-brand-colour, 50%), 0.1); // [7]
+
+      @media only screen {
+        // [4]
+        min-height: nhsuk-px-to-rem(200px); // [6]
+      }
+
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+        height: auto; // [12]
+        min-height: 0; // [12]
+      }
+    }
+  }
+
+  //  Hero component description styles.
+  //
+  // 8. 'Random number' for the triangle.
+  // 9. 'Random number' for the triangle positioning.
+  // 10. Needed to enable the triangle to show correctly in high contrast mode.
+  // 11. Give the description box a max width.
+  // 13. Remove the arrow in Windows high contrast mode.
+  // 14. Reduce spacing and change positioning for Windows high contrast mode.
+  // 15. Prevent text breaking out of box on smaller sizes
+  // 16. Prevent overlap using safe area: box offset + arrow height + spacing
+
+  .nhsuk-hero--image-description {
+    margin-bottom: nhsuk-px-to-rem(70px + 20px + nhsuk-spacing(3)); // [16]
+
+    @include nhsuk-media-query($from: tablet) {
+      margin-bottom: nhsuk-px-to-rem(48px + 20px + nhsuk-spacing(4)); // [16]
+    }
+
+    .nhsuk-hero-content {
+      position: relative;
+      top: nhsuk-px-to-rem(70px);
+
+      margin-bottom: nhsuk-px-to-rem(24px);
+      padding: nhsuk-spacing(4);
+
+      color: $nhsuk-reverse-text-colour;
+      background-color: $nhsuk-brand-colour;
+
+      .nhsuk-hero__arrow {
+        display: block;
+
+        position: absolute;
+        bottom: nhsuk-px-to-rem(-10px); // [8]
+        left: nhsuk-px-to-rem(32px); // [9]
+
+        width: nhsuk-px-to-rem(20px); // [8]
+        height: nhsuk-px-to-rem(20px); // [8]
+
+        overflow: hidden;
+
+        transform: rotate(45deg);
+        @include nhsuk-print-hide;
+      }
+
+      .nhsuk-hero__arrow::before,
+      .nhsuk-hero__arrow::after {
+        content: "";
+
+        display: block;
+
+        position: absolute;
+        top: 0;
+
+        width: 0;
+        height: 0;
+
+        transform: rotate(45deg); // [10]
+
+        border: solid nhsuk-px-to-rem(32px) $nhsuk-brand-colour; // [8]
+      }
+
+      @include nhsuk-print-colour {
+        max-width: 100%;
+        padding: 0;
+      }
+    }
+
+    @include nhsuk-media-query(375px) {
+      .nhsuk-hero-content {
+        width: 85%; // [15]
+      }
+    }
+
+    @include nhsuk-media-query($from: tablet) {
+      .nhsuk-hero-content {
+        box-sizing: border-box;
+
+        position: absolute;
+        top: auto;
+        bottom: nhsuk-px-to-rem(-48px); // [8]
+
+        max-width: nhsuk-em(560); // [11]
+        margin-bottom: 0;
+        padding: nhsuk-spacing(5) nhsuk-spacing(6);
+
+        @include nhsuk-top-and-bottom;
+      }
+
+      .nhsuk-hero__arrow {
+        left: nhsuk-px-to-rem(46px); // [9]
+      }
+    }
+
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      .nhsuk-hero-content {
+        position: relative;
+        top: 0;
+        // [14]
+        bottom: 0;
+
+        min-height: 0;
+        margin-bottom: 0;
+        padding: nhsuk-spacing(5) 0 0;
+      }
+
+      .nhsuk-hero__arrow {
+        display: none; // [13]
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/hint/_hint.scss

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

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

@@ -0,0 +1,53 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Hint component
+///
+/// @group components/hint
+////
+
+@include nhsuk-exports("nhsuk/components/hint") {
+  .nhsuk-hint {
+    margin-bottom: nhsuk-spacing(3);
+    color: $nhsuk-secondary-text-colour;
+
+    @include nhsuk-font($size: 19);
+  }
+
+  // Reduces margin-bottom of hint when used after the default label (no class)
+  // or nhsuk-label--s for better vertical alignment.
+
+  // This adjustment will not work when the label is inside the <h1>, however it
+  // is unlikely that the default or nhsuk-label--s class would be used in this
+  // case.
+
+  // This adjustment will not work in browsers that do not support :not().
+  // Users with these browsers will see the default size margin (5px larger).
+
+  .nhsuk-label:not(.nhsuk-label--m):not(.nhsuk-label--l):not(.nhsuk-label--xl) + .nhsuk-hint {
+    margin-bottom: nhsuk-spacing(2);
+  }
+
+  // Reduces margin-bottom of hint when used after the default legend (no class)
+  // or nhsuk-fieldset__legend--s for better vertical alignment.
+
+  // This adjustment will not work when the legend is outside the <h1>, however
+  // it is unlikely that the default or nhsuk-fieldset__legend--s class would be
+  // used in this case.
+
+  // This adjustment will not work in browsers that do not support :not().
+  // Users with these browsers will see the default size margin (5px larger).
+
+  // prettier-ignore
+  .nhsuk-fieldset__legend:not(.nhsuk-fieldset__legend--m):not(.nhsuk-fieldset__legend--l):not(.nhsuk-fieldset__legend--xl) + .nhsuk-hint {
+    margin-bottom: nhsuk-spacing(2);
+  }
+
+  // Reduces visual spacing of legend when there is a hint
+  .nhsuk-fieldset__legend + .nhsuk-hint {
+    margin-top: nhsuk-spacing(-1);
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/images/_images.scss

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

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

@@ -0,0 +1,53 @@
+@use "sass:math";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Images component
+///
+/// 1. Overrides default browser margin values.
+/// 2. Makes the image width two thirds of its container for desktop.
+/// 3. Avoid image printing full width of a page.
+/// 4. Removes top margin from subsequent nhsuk-image.
+///
+/// @group components/images
+////
+
+@include nhsuk-exports("nhsuk/components/images") {
+  .nhsuk-image {
+    box-sizing: border-box;
+    margin-right: 0; // [1]
+    margin-left: 0; // [1]
+    border-bottom: 1px solid $nhsuk-border-colour;
+    background-color: $nhsuk-card-background-colour;
+
+    @include nhsuk-responsive-margin(6, "bottom");
+    @include nhsuk-responsive-margin(6, "top");
+
+    @include nhsuk-media-query($from: desktop) {
+      width: math.percentage(math.div(2, 3)); // [2]
+    }
+
+    @include nhsuk-media-query($media-type: print) {
+      width: math.percentage(math.div(1, 2)); // [3]
+    }
+
+    & + .nhsuk-image {
+      @include nhsuk-responsive-margin(0, "top"); // [4]
+    }
+  }
+
+  .nhsuk-image__img {
+    display: block;
+    width: 100%;
+  }
+
+  .nhsuk-image__caption {
+    padding: nhsuk-spacing(3);
+
+    @include nhsuk-font-size(16);
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,184 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../../core/objects/input-wrapper";
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
+
+////
+/// Input component
+///
+/// @group components/input
+////
+
+@include nhsuk-exports("nhsuk/components/input") {
+  .nhsuk-input {
+    box-sizing: border-box;
+
+    width: 100%;
+    height: nhsuk-px-to-rem(40px);
+    margin-top: 0;
+    padding: nhsuk-px-to-rem(nhsuk-spacing(1));
+    // Setting any background-color makes text invisible when changing colours
+    // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
+    // background-color and color need to always be set together, color should
+    // not be set either
+    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
+    border-radius: 0;
+
+    // Disable inner shadow and remove rounded corners
+    -webkit-appearance: none;
+            appearance: none;
+
+    @include nhsuk-font($size: 19);
+
+    &:focus {
+      @include nhsuk-focused-input;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      background-color: transparent;
+      cursor: not-allowed;
+    }
+
+    &:-ms-input-placeholder {
+      opacity: 1; // Fixes low contrast of placeholder text in firefox
+      color: nhsuk-colour("grey-1");
+    }
+
+    &::placeholder {
+      opacity: 1; // Fixes low contrast of placeholder text in firefox
+      color: nhsuk-colour("grey-1");
+    }
+  }
+
+  .nhsuk-input::-webkit-outer-spin-button,
+  .nhsuk-input::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .nhsuk-input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  .nhsuk-input--error {
+    border-color: $nhsuk-error-colour;
+  }
+
+  // Codes and sequences
+
+  .nhsuk-input--code {
+    font-family: $nhsuk-code-font;
+    letter-spacing: 0.1em;
+  }
+
+  // The ex measurements are based on the number of W's that can fit inside the input
+  // Extra space is left on the right hand side to allow for the Safari prefill icon
+  // Linear regression estimation based on visual tests: y = 1.76 + 1.81x
+
+  .nhsuk-input--width-30 {
+    max-width: 56ex + 3ex;
+  }
+
+  .nhsuk-input--width-20 {
+    max-width: 38ex + 3ex;
+  }
+
+  .nhsuk-input--width-10 {
+    max-width: 20ex + 3ex;
+  }
+
+  .nhsuk-input--width-5 {
+    max-width: 10.8ex;
+  }
+
+  .nhsuk-input--width-4 {
+    max-width: 9ex;
+  }
+
+  .nhsuk-input--width-3 {
+    max-width: 7.2ex;
+  }
+
+  .nhsuk-input--width-2 {
+    max-width: 5.4ex;
+  }
+
+  .nhsuk-input-wrapper__prefix,
+  .nhsuk-input-wrapper__suffix,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-input__prefix,
+  .nhsuk-input__suffix {
+    box-sizing: border-box;
+
+    // Use flexbox to align text within the prefix and suffix
+    display: flex;
+
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+
+    min-width: nhsuk-px-to-rem(40px);
+    height: nhsuk-px-to-rem(40px);
+    padding: nhsuk-px-to-rem(nhsuk-spacing(1));
+
+    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
+
+    background-color: nhsuk-colour("grey-4");
+
+    text-align: center;
+    white-space: nowrap;
+    // Emphasise non-editable status of prefixes and suffixes
+    cursor: default;
+
+    @include nhsuk-font($size: 19);
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include nhsuk-media-query($until: mobile) {
+      display: block;
+      height: 100%;
+      white-space: normal;
+    }
+  }
+
+  .nhsuk-input-wrapper__prefix,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-input__prefix {
+    @include nhsuk-media-query($until: mobile) {
+      border-bottom: 0;
+
+      // Remove top margin when preceded by a prefix
+      + .nhsuk-input {
+        margin-top: 0;
+      }
+    }
+
+    @include nhsuk-media-query($from: mobile) {
+      border-right: 0;
+
+      // Remove left margin when preceded by a prefix
+      + .nhsuk-input {
+        margin-left: 0;
+      }
+    }
+  }
+
+  // Split prefix/suffix onto separate lines on narrow screens
+  .nhsuk-input-wrapper__suffix,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-input__suffix {
+    @include nhsuk-media-query($until: mobile) {
+      border-top: 0;
+    }
+
+    @include nhsuk-media-query($from: mobile) {
+      border-left: 0;
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/input/_input.scss

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

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

@@ -0,0 +1,34 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Inset text component
+///
+/// 1. Removes top margin from first element and bottom margin from last,
+///    to ensure correct spacing within the component.
+/// 2. Restricts the width of the text to optimise the line length for
+///    readability.
+///
+/// @group components/inset-text
+////
+
+@include nhsuk-exports("nhsuk/components/inset-text") {
+  .nhsuk-inset-text {
+    box-sizing: border-box;
+    border-left: $nhsuk-border-width-inset-text solid $nhsuk-brand-colour;
+
+    @include nhsuk-reading-width; // [2]
+    @include nhsuk-top-and-bottom; // [1]
+
+    @include nhsuk-responsive-margin(7, "bottom");
+    @include nhsuk-responsive-margin(7, "top");
+    @include nhsuk-responsive-padding(4);
+
+    @include nhsuk-media-query($media-type: print) {
+      border-color: $nhsuk-print-text-colour;
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/inset-text/_inset-text.scss

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

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

@@ -0,0 +1,53 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Label component
+///
+/// @group components/label
+////
+
+@include nhsuk-exports("nhsuk/components/label") {
+  .nhsuk-label {
+    display: block;
+    margin-bottom: nhsuk-spacing(1);
+
+    @include nhsuk-font($size: 19);
+  }
+
+  // Modifiers that make labels look more like their equivalent headings
+  .nhsuk-label--xl,
+  .nhsuk-label--l,
+  .nhsuk-label--m {
+    margin-bottom: nhsuk-spacing(3);
+    @include nhsuk-typography-weight-bold;
+  }
+
+  .nhsuk-label--xl {
+    @include nhsuk-font-size($size: 48);
+  }
+
+  .nhsuk-label--l {
+    @include nhsuk-font-size($size: 36);
+  }
+
+  .nhsuk-label--m {
+    @include nhsuk-font-size($size: 26);
+  }
+
+  .nhsuk-label--s {
+    @include nhsuk-typography-weight-bold;
+  }
+
+  // When the label is nested inside a heading, override the heading so that it
+  // does not have a margin. Effectively we want to be able to treat the heading
+  // as if it is not there.
+  //
+  // This breaks BEM conventions because it exists as a parent of the 'block',
+  // so we can't really consider an element.
+  .nhsuk-label-wrapper {
+    margin: 0;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/label/_label.scss

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