design_system 0.10.0 → 0.12.0

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

@@ -1,53 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Label component
-///
-/// @group components
-////
-
-.nhsuk-label {
-  display: block;
-  margin-bottom: nhsuk-spacing(1);
-
-  @include nhsuk-font(19);
-}
-
-// Modifiers that make labels look more like their equivalent headings
-.nhsuk-label--xl,
-.nhsuk-label--l,
-.nhsuk-label--m {
-  font-weight: $nhsuk-font-bold;
-  margin-top: 0;
-  margin-bottom: nhsuk-spacing(3);
-}
-
-.nhsuk-label--xl {
-  @include nhsuk-font-size(48);
-}
-
-.nhsuk-label--l {
-  @include nhsuk-font-size(36);
-}
-
-.nhsuk-label--m {
-  @include nhsuk-font-size(26);
-}
-
-.nhsuk-label--s {
-  font-weight: $nhsuk-font-bold;
-  margin-top: 0;
-
-  @include nhsuk-font-size(19);
-}
-
-// 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;
-}

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

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

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

@@ -1,95 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Pagination component
-///
-/// 1. Padding to give the icon spacing.
-/// 2. Append the word 'page' after next and
-///    previous on print stylesheets to make it easier
-///    to understand in print context.
-///
-/// @group components
-////
-
-.nhsuk-pagination {
-  @include nhsuk-responsive-margin(7, "top");
-  @include nhsuk-responsive-margin(7, "bottom");
-}
-
-.nhsuk-pagination__list {
-  @include nhsuk-clearfix;
-}
-
-.nhsuk-pagination-item--previous {
-  float: left;
-  text-align: left;
-  width: 50%;
-
-  .nhsuk-icon {
-    left: -6px;
-  }
-
-  .nhsuk-pagination__title {
-    padding-left: nhsuk-spacing(5); // [1]
-  }
-}
-
-.nhsuk-pagination-item--next {
-  float: right;
-  text-align: right;
-  width: 50%;
-
-  .nhsuk-icon {
-    right: -6px;
-  }
-
-  .nhsuk-pagination__title {
-    padding-right: nhsuk-spacing(5); // [1]
-  }
-}
-
-.nhsuk-pagination__link {
-  display: block;
-  position: relative;
-  text-decoration: none;
-  width: 100%;
-
-  @include nhsuk-media-query($media-type: print) {
-    color: $color_nhsuk-black;
-  }
-
-  .nhsuk-icon {
-    position: absolute;
-    top: -2px;
-
-    @include nhsuk-media-query($media-type: print) {
-      color: $color_nhsuk-black;
-      margin-top: 0;
-    }
-  }
-}
-
-.nhsuk-pagination__title {
-  display: block;
-
-  @include nhsuk-font-size(26);
-
-  @include nhsuk-media-query($media-type: print) {
-    &::after {
-      content: " page"; // [2]
-    }
-  }
-}
-
-.nhsuk-pagination__page {
-  display: block;
-  text-decoration: underline;
-
-  @include nhsuk-font-size(16);
-
-  .nhsuk-pagination__link:hover &,
-  .nhsuk-pagination__link:focus & {
-    text-decoration: none;
-  }
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/pagination/_pagination.scss

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

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

@@ -1,57 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Panel component
-///
-/// 1. Adds a transparent border for high contrast modes
-/// 2. This subtracts the transparent border width from the padding (because the border
-///    visually adds to the total padding)
-/// 3. This is an if-all-else-fails attempt to stop long words from overflowing the container
-///    on very narrow viewports by forcing them to break and wrap instead. This
-///    overflowing is more likely to happen when user increases text size on a mobile eg. using
-///    iOS Safari text resize controls.
-
-///    The overflowing is a particular problem with the panel component since it uses white
-///    text: when the text overflows the container, it is invisible on the white (page)
-///    background. When the text in our other components overflow, the user might have to scroll
-///    horizontally to view it but the text remains legible.
-///
-/// @group components
-/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
-////
-
-$nhsuk-border-width-panel: nhsuk-spacing(1);
-
-.nhsuk-panel {
-  background: $color_nhsuk-green;
-  border: $nhsuk-border-width-panel solid transparent; /* [1] */
-  box-sizing: border-box;
-  color: $color_nhsuk-white;
-  padding: nhsuk-spacing(5) - $nhsuk-border-width-panel; /* [2] */
-
-  @include nhsuk-font-size(26);
-  @include nhsuk-responsive-margin(4, "bottom");
-
-  @include nhsuk-media-query($until: tablet) {
-    padding: nhsuk-spacing(4) - $nhsuk-border-width-panel; /* [2] */
-    @include nhsuk-text-break-word; /* [3] */
-  }
-
-  @include nhsuk-media-query($media-type: print) {
-    border-color: currentcolor;
-    color: $nhsuk-print-text-color;
-    background: none;
-  }
-}
-
-.nhsuk-panel__title {
-  margin-top: 0;
-
-  @include nhsuk-font-size(48);
-  @include nhsuk-responsive-margin(5, "bottom");
-}
-
-.nhsuk-panel__title:last-child {
-  margin-bottom: 0;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/panel/_panel.scss

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

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

@@ -1,180 +0,0 @@
-@use "sass:math";
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Radios component
-///
-/// 1. remove 300ms pause on mobile.
-/// 2. Fix bug in IE11 caused by transform rotate (-45deg).
-///
-/// @group components
-////
-
-$nhsuk-radios-size: nhsuk-spacing(6);
-$nhsuk-radios-label-padding-left-right: 12px;
-// When the default focus width is used on a curved edge it looks visually smaller.
-// So for the circular radios we bump the default to make it look visually consistent.
-$nhsuk-radios-focus-width: $nhsuk-focus-width + 1px;
-
-.nhsuk-radios__item {
-  clear: left;
-  display: block;
-  margin-bottom: nhsuk-spacing(2);
-  min-height: $nhsuk-radios-size;
-  padding: 0 0 0 $nhsuk-radios-size;
-  position: relative;
-
-  @include nhsuk-font(19);
-}
-
-.nhsuk-radios__item:last-child,
-.nhsuk-radios__item:last-of-type {
-  margin-bottom: 0;
-}
-
-.nhsuk-radios__input {
-  cursor: pointer;
-  height: $nhsuk-radios-size;
-  left: 0;
-  margin: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  width: $nhsuk-radios-size;
-  z-index: 1;
-}
-
-.nhsuk-radios__label {
-  cursor: pointer;
-  display: inline-block;
-  margin-bottom: 0;
-  padding: 8px $nhsuk-radios-label-padding-left-right nhsuk-spacing(1);
-  -ms-touch-action: manipulation; // [1]
-  touch-action: manipulation; // [1]
-}
-
-.nhsuk-radios__hint {
-  display: block;
-  padding-left: $nhsuk-radios-label-padding-left-right;
-  padding-right: $nhsuk-radios-label-padding-left-right;
-}
-
-.nhsuk-radios__input + .nhsuk-radios__label::before {
-  background: $nhsuk-form-element-background-color;
-  border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
-  border-radius: 50%;
-  box-sizing: border-box;
-  content: "";
-  height: $nhsuk-radios-size;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: $nhsuk-radios-size;
-}
-
-.nhsuk-radios__input + .nhsuk-radios__label::after {
-  background: $nhsuk-form-border-color;
-  border: 10px solid $nhsuk-text-color;
-  border-radius: 50%;
-  content: "";
-  height: 0;
-  left: 10px;
-  opacity: 0;
-  position: absolute;
-  top: 10px;
-  width: 0;
-}
-
-/// Focus state
-///
-/// 1. Since box-shadows are removed when users customise their colours
-///    We set a transparent outline that is shown instead.
-///
-/// @link https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
-
-.nhsuk-radios__input:focus + .nhsuk-radios__label::before {
-  @include nhsuk-focused-radio;
-}
-
-/// Selected state
-
-.nhsuk-radios__input:checked + .nhsuk-radios__label::after {
-  opacity: 1;
-}
-
-/// Disabled state
-
-.nhsuk-radios__input:disabled,
-.nhsuk-radios__input:disabled + .nhsuk-radios__label {
-  cursor: default;
-}
-
-.nhsuk-radios__input:disabled + .nhsuk-radios__label {
-  opacity: 0.5;
-}
-
-/// Inline variant
-///
-/// 1. Prevent inline modifier being used with conditional reveals
-
-.nhsuk-radios--inline {
-  @include nhsuk-media-query($from: tablet) {
-    @include nhsuk-clearfix;
-
-    .nhsuk-radios__item {
-      clear: none;
-      float: left;
-      margin-right: nhsuk-spacing(4);
-    }
-  }
-
-  &.nhsuk-radios--conditional {
-    // [1]
-    .nhsuk-radios__item {
-      float: none;
-      margin-right: 0;
-    }
-  }
-}
-
-/// Divider variant
-
-.nhsuk-radios__divider {
-  $nhsuk-divider-size: $nhsuk-radios-size !default;
-
-  color: $nhsuk-text-color;
-  margin-bottom: nhsuk-spacing(2);
-  text-align: center;
-  width: $nhsuk-divider-size;
-
-  @include nhsuk-font(19);
-}
-
-/// Conditional
-///
-/// 1. Calculate the amount of padding needed to keep the border
-///    centered against the radio.
-/// 2. Move the border centered with the radio.
-/// 3. Move the contents of the conditional inline with the label.
-
-.nhsuk-radios__conditional {
-  $conditional-border-width: $nhsuk-border-width-mobile;
-  $conditional-border-padding: math.div($nhsuk-radios-size, 2) - math.div($conditional-border-width, 2); // [2]
-  $conditional-margin-left: $conditional-border-padding; // [2]
-  $conditional-padding-left: $conditional-border-padding + $nhsuk-radios-label-padding-left-right; // [3]
-
-  border-left: $conditional-border-width solid $nhsuk-form-border-color;
-  margin-left: $conditional-margin-left;
-  padding-left: $conditional-padding-left;
-
-  @include nhsuk-responsive-margin(4, "bottom");
-
-  & > :last-child {
-    margin-bottom: 0;
-  }
-}
-
-.js-enabled .nhsuk-radios__conditional--hidden {
-  display: none;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/radios/_radios.scss

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

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

@@ -1,44 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Select component
-///
-/// Input sizing:
-///
-/// 1. Uses rems so that safari input scales with font size
-/// 2. This min-width was chosen because:
-///    - it makes the Select wider than it is tall (which is what users expect)
-///    - 20ex + 3ex matches the 'width-10' variant of the input component
-///    - it fits comfortably on screens as narrow as 240px wide
-///
-/// @group components
-////
-
-.nhsuk-select {
-  background-color: $color_nhsuk-white;
-  border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
-  box-sizing: border-box;
-  color: $color_nhsuk-black;
-  height: 2.5rem; // [1]
-  min-width: 20ex + 3ex; // [2]
-  max-width: 100%;
-  padding: nhsuk-spacing(1);
-
-  @include nhsuk-font(19);
-
-  &:focus {
-    @include nhsuk-focused-input;
-  }
-}
-
-.nhsuk-select option:active,
-.nhsuk-select option:checked,
-.nhsuk-select:focus::-ms-value {
-  background-color: $color_nhsuk-blue;
-  color: $color_nhsuk-white;
-}
-
-.nhsuk-select--error {
-  border: $nhsuk-border-width-form-element-error solid $nhsuk-error-color;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/select/_select.scss

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

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

@@ -1,34 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Skip link component
-///
-/// 1. Hide until the skip link gains focus from keyboard tabbing.
-///
-/// @group components
-////
-
-.nhsuk-skip-link {
-  position: absolute;
-  z-index: 2;
-  left: nhsuk-spacing(3);
-  top: nhsuk-spacing(3);
-  padding: nhsuk-spacing(2);
-  @include nhsuk-visually-hidden-focusable; // [1]
-}
-
-.nhsuk-skip-link-focused-element {
-  &:focus {
-    // Remove the native visible focus indicator when the element is
-    // programmatically focused.
-    //
-    // We set the focus on the linked element (this is usually the <main>
-    // element) when the skip link is activated to improve screen reader
-    // announcements. However, we remove the visible focus indicator from the
-    // linked element because the user cannot interact with it.
-    //
-    // A related discussion: https://github.com/w3c/wcag/issues/1001
-    outline: none;
-  }
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/skip-link/_skip-link.scss

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

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

@@ -1,183 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Summary list component
-///
-/// 1. Required to allow us to wrap words that overflow.
-/// 2. Reset default user agent styles
-/// 3. Automatic wrapping for unbreakable text (e.g. URLs)
-///
-/// @group components
-/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
-////
-
-.nhsuk-summary-list {
-  margin: 0; // [2]
-
-  @include nhsuk-font($size: 19);
-  @include nhsuk-responsive-margin(6, "bottom");
-
-  @include nhsuk-media-query($from: tablet) {
-    border-collapse: collapse;
-    display: table;
-    table-layout: fixed; // [1]
-    width: 100%;
-  }
-}
-
-.nhsuk-summary-list__row {
-  border-bottom: 1px solid $nhsuk-border-color;
-
-  @include nhsuk-media-query($until: tablet) {
-    margin-bottom: nhsuk-spacing(3);
-  }
-  @include nhsuk-media-query($from: tablet) {
-    display: table-row;
-  }
-}
-
-// Remove right padding from the last column in the row
-.nhsuk-summary-list__row:not(.nhsuk-summary-list__row--no-actions) > :last-child {
-  padding-right: 0;
-}
-
-// Provide an empty 'cell' for rows that don't have actions – otherwise the
-// bottom border is not drawn for that part of the row in some browsers.
-.nhsuk-summary-list__row--no-actions {
-  @include nhsuk-media-query($from: tablet) {
-    &::after {
-      content: "";
-      display: table-cell;
-      width: 20%;
-    }
-  }
-}
-
-.nhsuk-summary-list__key,
-.nhsuk-summary-list__value,
-.nhsuk-summary-list__actions {
-  margin: 0; // [2]
-  vertical-align: top;
-
-  @include nhsuk-media-query($from: tablet) {
-    display: table-cell;
-    padding-bottom: nhsuk-spacing(2);
-    padding-right: nhsuk-spacing(4);
-    padding-top: nhsuk-spacing(2);
-  }
-}
-
-.nhsuk-summary-list__actions {
-  margin-bottom: nhsuk-spacing(3);
-
-  @include nhsuk-media-query($from: tablet) {
-    text-align: right;
-    width: 20%;
-  }
-}
-
-.nhsuk-summary-list__key,
-.nhsuk-summary-list__value {
-  @include nhsuk-text-break-word; // [3]
-}
-
-.nhsuk-summary-list__key {
-  margin-bottom: nhsuk-spacing(1);
-
-  @include nhsuk-typography-weight-bold;
-
-  @include nhsuk-media-query($from: tablet) {
-    width: 30%;
-  }
-}
-
-.nhsuk-summary-list__value {
-  @include nhsuk-media-query($until: tablet) {
-    margin-bottom: nhsuk-spacing(3);
-  }
-}
-
-.nhsuk-summary-list__value > p {
-  margin-bottom: 12px;
-}
-
-.nhsuk-summary-list__value > :last-child {
-  margin-bottom: 0;
-}
-
-.nhsuk-summary-list__actions-list {
-  margin: 0; // [2]
-  padding: 0; // [2]
-  width: 100%;
-}
-
-.nhsuk-summary-list__actions-list-item {
-  display: inline-block;
-
-  @include nhsuk-media-query($until: tablet) {
-    border-right: 1px solid $nhsuk-border-color;
-    margin-right: nhsuk-spacing(2);
-    padding-right: nhsuk-spacing(2);
-
-    &:last-child {
-      border: 0;
-      margin-right: 0;
-      padding-right: 0;
-    }
-  }
-
-  @include nhsuk-media-query($from: tablet) {
-    margin-left: nhsuk-spacing(2);
-    padding-left: nhsuk-spacing(2);
-
-    &:first-child {
-      border: 0;
-      margin-left: 0;
-      padding-left: 0;
-    }
-
-    &:not(:first-child) {
-      border-left: 1px solid $nhsuk-border-color;
-    }
-  }
-}
-
-// Large groups of action links may wrap onto multiple lines. Because the link
-// focus styles are applied outside of the link's bounding box, there are
-// situations where the focus style on a link can be overlapped by subsequent
-// links. We don't want this, so let's create a new stacking context on focus
-// so the link always appears to be 'on top'.
-.nhsuk-summary-list__actions-list-item .nhsuk-link:focus {
-  isolation: isolate;
-}
-
-// No border on entire summary list
-.nhsuk-summary-list--no-border {
-  .nhsuk-summary-list__row {
-    border: 0;
-  }
-
-  // Increase padding by 1px to compensate for 'missing' border
-  @include nhsuk-media-query($from: tablet) {
-    .nhsuk-summary-list__key,
-    .nhsuk-summary-list__value,
-    .nhsuk-summary-list__actions {
-      padding-bottom: nhsuk-spacing(2) + 1px;
-    }
-  }
-}
-
-// No border on specific rows
-.nhsuk-summary-list__row--no-border {
-  border: 0;
-
-  // Increase padding by 1px to compensate for 'missing' border
-  @include nhsuk-media-query($from: tablet) {
-    .nhsuk-summary-list__key,
-    .nhsuk-summary-list__value,
-    .nhsuk-summary-list__actions {
-      padding-bottom: nhsuk-spacing(2) + 1px;
-    }
-  }
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/summary-list/_summary-list.scss

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