design_system 0.10.0 → 0.12.0

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

@@ -1,61 +0,0 @@
-@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

@@ -1,117 +0,0 @@
-@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

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

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

@@ -1,5 +0,0 @@
-@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

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

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

@@ -1,187 +0,0 @@
-@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

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

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

@@ -1,51 +0,0 @@
-@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

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

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

@@ -1,48 +0,0 @@
-@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

@@ -1,149 +0,0 @@
-@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

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

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

@@ -1,28 +0,0 @@
-@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

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