design_system 0.7.0

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/header/_header-transactional.scss

@@ -0,0 +1,61 @@
+@use "../../core/tools" as *;
+
+/// These are the styles for the transactional header variants.
+
+.nhsuk-header__transactional-service-name {
+  margin-bottom: -(nhsuk-spacing(1));
+  padding-left: nhsuk-spacing(3);
+  padding-top: 2px;
+
+  @include nhsuk-media-query($until: tablet) {
+    padding-left: 0;
+    padding-top: nhsuk-spacing(2);
+    width: 100%;
+  }
+}
+
+.nhsuk-header__transactional-service-name--link {
+  @include nhsuk-link-style-white;
+  @include nhsuk-font(19);
+
+  &:link {
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.nhsuk-header__transactional {
+  .nhsuk-header__container {
+    justify-content: normal;
+  }
+
+  .nhsuk-header__link {
+    display: block;
+    @include nhsuk-logo-size-small;
+  }
+
+  .nhsuk-logo {
+    @include nhsuk-logo-size-small;
+  }
+}
+
+.nhsuk-header__transactional--logo {
+  max-width: 100%;
+
+  @include nhsuk-media-query($from: tablet) {
+    .nhsuk-header__link--service {
+      align-items: center;
+      display: flex;
+      -ms-flex-align: center;
+      margin-bottom: 0;
+      width: auto;
+    }
+
+    .nhsuk-header__service-name {
+      padding-left: nhsuk-spacing(3);
+    }
+  }
+}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/header/_header-white.scss

@@ -0,0 +1,117 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+/// These are the styles for the white header variants.
+
+.nhsuk-header--white {
+  background-color: $color_nhsuk-white;
+
+  .nhsuk-header__search-wrap {
+    margin-bottom: nhsuk-spacing(3);
+
+    @include nhsuk-media-query($until: tablet) {
+      &::after {
+        background: $color_nhsuk-white;
+      }
+    }
+  }
+
+  .nhsuk-navigation-container {
+    background-color: $color_nhsuk-blue;
+  }
+
+  .nhsuk-navigation {
+    border-top-width: 0;
+  }
+
+  .nhsuk-logo {
+    .nhsuk-logo__background {
+      fill: $color_nhsuk-blue;
+    }
+
+    .nhsuk-logo__text {
+      fill: $color_nhsuk-white;
+    }
+  }
+
+  .nhsuk-header__link {
+    &:hover {
+      color: $nhsuk-text-color;
+      text-decoration: underline;
+
+      .nhsuk-organisation-descriptor {
+        color: $nhsuk-text-color;
+      }
+    }
+  }
+
+  .nhsuk-search__submit {
+    background-color: $color_nhsuk-blue;
+
+    .nhsuk-icon__search {
+      fill: $color_nhsuk-white;
+    }
+
+    &:hover,
+    &:active {
+      background-color: $color_shade_nhsuk-blue-20;
+      border-color: $color_shade_nhsuk-blue-20;
+      box-shadow: none;
+    }
+
+    &:active {
+      background-color: $color_shade_nhsuk-blue-50;
+    }
+
+    &:focus:not(:active) {
+      @include nhsuk-focused-button;
+    }
+  }
+
+  .nhsuk-search__input:not(:focus) {
+    border: 1px solid $color_nhsuk-grey-3;
+  }
+
+  .nhsuk-header__search-form {
+    @include nhsuk-media-query($until: tablet) {
+      padding-top: 0;
+    }
+  }
+
+  .nhsuk-organisation-name {
+    color: nhsuk-shade($color_nhsuk-black, 100%);
+  }
+
+  .nhsuk-organisation-descriptor {
+    color: $color_nhsuk-blue;
+  }
+
+  .nhsuk-header__transactional-service-name--link {
+    color: $color_nhsuk-black;
+  }
+
+  .nhsuk-header__service-name {
+    color: $nhsuk-text-color;
+  }
+}
+
+.nhsuk-header--white-nav {
+  .nhsuk-navigation-container {
+    background-color: $color_nhsuk-white;
+  }
+
+  .nhsuk-navigation {
+    background-color: $color_nhsuk-white;
+    border-top: 1px solid $color_nhsuk-grey-5;
+
+    .nhsuk-header__navigation-link {
+      @include nhsuk-link-style-default;
+      @include nhsuk-link-style-no-visited-state;
+
+      &:active,
+      &:focus {
+        color: $nhsuk-focus-text-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/header/_header.scss

@@ -0,0 +1 @@
+@forward ".";

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/header/_index.scss

@@ -0,0 +1,5 @@
+@forward "header-base";
+@forward "header-organisation";
+@forward "header-service";
+@forward "header-transactional";
+@forward "header-white";

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

@@ -0,0 +1 @@
+@forward ".";

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

@@ -0,0 +1,187 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Hero component shared styles
+///
+/// 1. Position relative to support the description
+///    appearing over the image.
+/// 2. Adds a border between the header and hero, if required
+///
+/// @group components
+///
+
+.nhsuk-hero {
+  background-color: $color_nhsuk-blue;
+  color: $color_nhsuk-white;
+  position: relative; // [1]
+
+  @include nhsuk-print-color($nhsuk-print-text-color);
+
+  .nhsuk-link,
+  a:not(.nhsuk-button) {
+    @include nhsuk-link-style-white;
+  }
+
+  .nhsuk-hero--border {
+    // [2]
+    border-top: $nhsuk-hero-border solid $nhsuk-secondary-border-color;
+  }
+}
+
+.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-position: center right; // [3]
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  @media only screen {
+    // [4]
+    min-height: 200px;
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    @media only screen {
+      // [4]
+      min-height: 320px; // [5]
+
+      .nhsuk-hero__overlay {
+        height: 320px; // [6]
+      }
+    }
+  }
+
+  @media screen and (-ms-high-contrast: active) {
+    min-height: 0; // [12]
+  }
+
+  .nhsuk-hero__overlay {
+    background-color: $color_transparent_nhsuk-blue-50; // [7]
+
+    @media only screen {
+      // [4]
+      min-height: 200px; // [6]
+    }
+
+    @media screen and (-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: calc(70px + 20px + nhsuk-spacing(3)); // [16]
+
+  @include nhsuk-media-query($from: tablet) {
+    margin-bottom: calc(48px + 20px + nhsuk-spacing(4)); // [16]
+  }
+
+  .nhsuk-hero-content {
+    background-color: $color_nhsuk-blue;
+    color: $color_nhsuk-white;
+    margin-bottom: 24px;
+    padding: nhsuk-spacing(4);
+    position: relative;
+    top: 70px;
+
+    .nhsuk-hero__arrow {
+      bottom: -10px; // [8]
+      display: block;
+      height: 20px; // [8]
+      left: 32px; // [9]
+      overflow: hidden;
+      position: absolute;
+      transform: rotate(45deg);
+      width: 20px; // [8]
+      @include nhsuk-print-hide;
+    }
+
+    .nhsuk-hero__arrow::before,
+    .nhsuk-hero__arrow::after {
+      border: solid 32px $color_nhsuk-blue; // [8]
+      content: "";
+      display: block;
+      height: 0;
+      position: absolute;
+      top: 0;
+      transform: rotate(45deg); // [10]
+      width: 0;
+    }
+  }
+
+  @include nhsuk-media-query(375px) {
+    .nhsuk-hero-content {
+      width: 85%; // [15]
+    }
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    .nhsuk-hero-content {
+      bottom: -48px; // [8]
+      margin-bottom: 0;
+      max-width: 35em; // [11]
+      padding: nhsuk-spacing(5) nhsuk-spacing(6);
+      position: absolute;
+      top: auto;
+
+      @include nhsuk-top-and-bottom;
+    }
+
+    .nhsuk-hero__arrow {
+      left: 46px; // [9]
+    }
+  }
+
+  @include nhsuk-media-query($media-type: print) {
+    .nhsuk-hero-content {
+      color: $color_nhsuk-black;
+      max-width: 100%;
+      padding: 0;
+    }
+  }
+
+  @media screen and (-ms-high-contrast: active) {
+    .nhsuk-hero-content {
+      // [14]
+      bottom: 0;
+      margin-bottom: 0;
+      min-height: 0;
+      padding: nhsuk-spacing(5) 0 0;
+      position: relative;
+      top: 0;
+    }
+
+    .nhsuk-hero__arrow {
+      display: none; // [13]
+    }
+  }
+}

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

@@ -0,0 +1 @@
+@forward ".";

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

@@ -0,0 +1,51 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Hint component
+///
+/// @group components
+////
+
+.nhsuk-hint {
+  color: $nhsuk-secondary-text-color;
+  display: block;
+  margin-bottom: nhsuk-spacing(3);
+
+  @include nhsuk-font(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).
+
+.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));
+}

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

@@ -0,0 +1 @@
+@forward ".";

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

@@ -0,0 +1,48 @@
+@use "sass:math";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Image 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
+////
+
+.nhsuk-image {
+  background-color: $color_nhsuk-white;
+  border-bottom: 1px solid $color_nhsuk-grey-4;
+
+  margin-left: 0; // [1]
+  margin-right: 0; // [1]
+
+  @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);
+}

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

@@ -0,0 +1,149 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Input component
+///
+/// 1. Disable inner shadow and remove rounded corners
+/// 2. setting any background-color makes text invisible when changing colours to dark
+///    backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
+///    as background-color and color need to always be set together, color should
+///    not be set either.
+///
+/// @group components
+////
+
+.nhsuk-input {
+  -moz-appearance: none; // [1]
+  -webkit-appearance: none; // [1]
+  appearance: none; // [1]
+  border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color; // [2]
+  border-radius: 0;
+  box-sizing: border-box;
+  min-height: 40px;
+  margin-top: 0;
+  padding: nhsuk-spacing(1);
+  width: 100%;
+
+  @include nhsuk-font(19);
+
+  &:focus {
+    @include nhsuk-focused-input;
+  }
+}
+
+.nhsuk-input::-webkit-outer-spin-button,
+.nhsuk-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.nhsuk-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.nhsuk-input--error {
+  border: $nhsuk-border-width-form-element-error solid $nhsuk-error-color;
+}
+
+// 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;
+}
+
+/// Suffix and prefix
+
+.nhsuk-input__wrapper {
+  display: flex;
+
+  .nhsuk-input {
+    flex: 0 1 auto;
+  }
+
+  .nhsuk-input:focus {
+    // Hack to stop focus style being overlapped by the suffix
+    z-index: 1;
+  }
+
+  @include nhsuk-media-query($until: mobile) {
+    display: block;
+
+    .nhsuk-input {
+      // Set max-width to override potential width override class on the input
+      max-width: 100%;
+    }
+  }
+}
+
+.nhsuk-input__prefix,
+.nhsuk-input__suffix {
+  background-color: $color_nhsuk-grey-4;
+  border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
+  box-sizing: border-box;
+  cursor: default; // emphasises non-editable status of prefixes and suffixes
+  display: inline-block;
+  flex: 0 0 auto;
+  min-height: 40px;
+  min-width: nhsuk-px-to-rem(40px);
+  padding: nhsuk-spacing(1);
+  text-align: center;
+  white-space: nowrap;
+
+  @include nhsuk-font($size: 19);
+
+  @include nhsuk-media-query($until: mobile) {
+    display: block;
+    height: 100%;
+    white-space: normal;
+  }
+
+  @include nhsuk-media-query($until: tablet) {
+    line-height: 1.6;
+    font-size: 1.1875rem;
+  }
+}
+
+.nhsuk-input__prefix {
+  @include nhsuk-media-query($until: mobile) {
+    border-bottom: 0;
+  }
+  @include nhsuk-media-query($from: mobile) {
+    border-right: 0;
+  }
+}
+
+.nhsuk-input__suffix {
+  @include nhsuk-media-query($until: mobile) {
+    border-top: 0;
+  }
+  @include nhsuk-media-query($from: mobile) {
+    border-left: 0;
+  }
+}

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

@@ -0,0 +1 @@
+@forward ".";

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

@@ -0,0 +1,28 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" 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
+////
+
+.nhsuk-inset-text {
+  border-left: $nhsuk-border-width-inset-text solid $color_nhsuk-blue;
+
+  @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-color;
+  }
+}

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

@@ -0,0 +1 @@
+@forward ".";