design_system 0.10.0 → 0.12.0

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

@@ -1,321 +0,0 @@
-@use "sass:math";
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Card component
-///
-/// 1. Is needed for the :active top positioning, and invisible clickable overlay.
-/// 2. Border is used to create a divider between the white content
-///    box and an image.
-/// 3. Creates the 'pressed down' effect when clicked.
-/// 4. Removes padding-top from headings directly after the card group.
-/// 5. Includes the border width to achieve the correct left alignment.
-/// 6. Stops the heading from spanning the full width of the card.
-/// 7. Removes padding top for the feature heading positioning.
-/// 8. Default care card colour set to blue (non-urgent care card) -
-///    using the @mixin care-card tools/_mixins.scss.
-///    The same mixin is used for each care card, setting the background
-///    colour,text colour and print border width with the variables.
-/// 9. 'Random number' for the heading triangle.
-/// 10. 'Random number' for the heading triangle positioning.
-/// 11. 'Random number' used for spacing to compensate for the triangle.
-/// 12. Needed to enable the triangle to show correctly in high contrast mode.
-/// 13. Prevent additional padding on headings
-/// 14. Give the action link icon sufficient contrast when used in the emergency variant
-/// 15. Reset the positioning to the default [1] to display heading triangle on a coloured background.
-/// 16. Emergency care card <a> needs to be white because the background colour is black.
-/// 17. Trick IE10 into rendering the invisible clickable area. Without this it does not.
-///
-/// @group components
-////
-
-$card-border-width: 1px;
-$card-border-bottom-width: nhsuk-spacing(1);
-$card-border-color: $color_nhsuk-grey-4;
-$card-border-hover-color: $color_nhsuk-grey-3;
-
-.nhsuk-card {
-  background: $color_nhsuk-white;
-  border: $card-border-width solid $card-border-color;
-  position: relative; // [1]
-  width: 100%;
-
-  @include nhsuk-responsive-margin(7, "bottom");
-}
-
-.nhsuk-card__img {
-  border-bottom: $card-border-width solid $color_nhsuk-grey-5; // [2]
-  display: block;
-  width: 100%;
-
-  @include nhsuk-print-hide;
-}
-
-.nhsuk-card__content {
-  @include nhsuk-top-and-bottom;
-  @include nhsuk-responsive-padding(5);
-}
-
-.nhsuk-card__heading {
-  margin-bottom: nhsuk-spacing(3);
-
-  &:has(+ .nhsuk-icon) {
-    margin-bottom: 0;
-  }
-}
-
-.nhsuk-card__description {
-  margin-bottom: 0;
-}
-
-/// Clickable card
-
-.nhsuk-card--clickable {
-  border-bottom-width: $card-border-bottom-width;
-
-  .nhsuk-card__heading a,
-  .nhsuk-card__link {
-    &::before {
-      background-color: rgba(255, 255, 255, 0); // [17]
-      bottom: 0;
-      content: "";
-      display: block;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-
-  &:active {
-    border-color: $card-border-hover-color;
-    bottom: -$card-border-width; // [3]
-  }
-}
-
-/// Card group
-///
-/// Allows you to have a row of cards.
-/// Flexbox is used to make each card in a row the same height.
-
-.nhsuk-card-group {
-  margin-bottom: nhsuk-spacing(3);
-  padding: 0;
-
-  @include nhsuk-flex;
-
-  @include nhsuk-media-query($until: desktop) {
-    margin-bottom: nhsuk-spacing(6);
-  }
-
-  + h2,
-  + .nhsuk-heading-l,
-  + h3,
-  + .nhsuk-heading-m {
-    padding-top: 0; // [4]
-  }
-}
-
-.nhsuk-card-group__item {
-  list-style-type: none;
-  margin-bottom: 0;
-
-  @include nhsuk-flex-item;
-
-  .nhsuk-card {
-    margin-bottom: nhsuk-spacing(5);
-  }
-
-  @include nhsuk-media-query($until: desktop) {
-    .nhsuk-card {
-      margin-bottom: nhsuk-spacing(3);
-    }
-
-    &:last-child .nhsuk-card {
-      margin-bottom: 0;
-    }
-  }
-}
-
-/// Card feature
-
-.nhsuk-card--feature {
-  @include nhsuk-responsive-margin(7, "top");
-}
-
-.nhsuk-card__heading--feature {
-  background: $color_nhsuk-blue;
-  color: $color_nhsuk-white;
-  display: inline-block;
-  left: -(nhsuk-spacing(4) + $card-border-width); // [5]
-  margin-bottom: nhsuk-spacing(2);
-  margin-right: -(nhsuk-spacing(4)); // [6]
-  padding: nhsuk-spacing(2) nhsuk-spacing(4);
-  position: relative;
-  top: -(nhsuk-spacing(2));
-
-  @include nhsuk-media-query($from: tablet) {
-    left: -(nhsuk-spacing(5) + $card-border-width); // [5]
-    margin-right: -(nhsuk-spacing(5)); // [6]
-    padding: nhsuk-spacing(2) nhsuk-spacing(5);
-    top: -(nhsuk-spacing(3));
-  }
-}
-
-.nhsuk-card__content--feature {
-  // stylelint-disable-next-line declaration-no-important
-  padding-top: 0 !important; // [7]
-}
-
-/// Care card
-
-.nhsuk-card--care {
-  @include nhsuk-care-card($color_nhsuk-blue, $color_nhsuk-white, 4px); // [8]
-  @include nhsuk-responsive-margin(7, "top");
-}
-
-.nhsuk-card--care__heading-container {
-  padding-bottom: nhsuk-spacing(3);
-  padding-top: nhsuk-spacing(3);
-  position: relative;
-
-  @include nhsuk-responsive-padding(5, "left");
-  @include nhsuk-responsive-padding(5, "right");
-}
-
-.nhsuk-card--care__heading {
-  margin: 0;
-  padding-top: 0; // [13]
-
-  @include nhsuk-font(26, $weight: bold);
-  @include nhsuk-print-color($nhsuk-print-text-color);
-}
-
-.nhsuk-card--care__arrow {
-  bottom: -10px; // [9]
-  display: block;
-  height: 20px; // [9]
-  left: 30px; // [10]
-  overflow: hidden;
-  position: absolute;
-  transform: rotate(45deg);
-  width: 20px; // [9]
-  @include nhsuk-print-hide;
-
-  @include nhsuk-media-query($from: tablet) {
-    left: 38px; // [10]
-  }
-
-  &::before,
-  &::after {
-    border: solid 32px $color_nhsuk-blue; // [9]
-    content: "";
-    display: block;
-    height: 0;
-    position: absolute;
-    top: 0;
-    transform: rotate(45deg); // [12]
-    width: 0;
-  }
-}
-
-.nhsuk-card--care--urgent {
-  @include nhsuk-care-card($color_nhsuk-red, $color_nhsuk-white, 6px);
-
-  .nhsuk-card--care__arrow {
-    &::before,
-    &::after {
-      border-color: $color_nhsuk-red;
-    }
-  }
-}
-
-.nhsuk-card--care--emergency {
-  @include nhsuk-care-card($color_nhsuk-red, $color_nhsuk-white, 8px);
-
-  .nhsuk-card--care__arrow {
-    &::before,
-    &::after {
-      border-color: $color_nhsuk-red;
-    }
-  }
-
-  .nhsuk-card__content {
-    background-color: $color_nhsuk-black;
-    border: 0;
-    color: $color_nhsuk-white;
-    position: static; // [15]
-
-    a {
-      @include nhsuk-link-style-white;
-    }
-
-    @include nhsuk-media-query($media-type: print) {
-      background-color: $color_nhsuk-white;
-      color: $nhsuk-print-text-color;
-    }
-  }
-
-  .nhsuk-details,
-  .nhsuk-details__summary {
-    color: $color_nhsuk-white;
-  }
-
-  .nhsuk-details__summary {
-    &:hover {
-      color: $color_nhsuk-white;
-    }
-
-    &:focus {
-      color: $color_nhsuk-black;
-    }
-  }
-
-  .nhsuk-action-link__link {
-    .nhsuk-icon__arrow-right-circle {
-      fill: $color_nhsuk-white; // [14]
-    }
-  }
-}
-
-/// Card primary
-
-.nhsuk-card__content--primary {
-  $icon-width: 27px;
-  $icon-height: 27px;
-
-  @include nhsuk-responsive-spacing(5, "padding", $direction: "right", $adjustment: $icon-width + nhsuk-spacing(4));
-
-  @include nhsuk-media-query($from: desktop) {
-    height: 100%;
-  }
-
-  .nhsuk-icon {
-    display: block;
-    width: $icon-width;
-    height: $icon-height;
-    fill: $color_nhsuk-blue;
-    margin-top: -(math.floor(math.div($icon-height, 2)));
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-    @include nhsuk-responsive-spacing(5, "right");
-  }
-}
-
-/// Card secondary
-
-.nhsuk-card--secondary {
-  background: transparent;
-  border-bottom: $card-border-bottom-width solid $card-border-color;
-  border-left: 0;
-  border-right: 0;
-  border-top: 0;
-}
-
-.nhsuk-card__content--secondary {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/character-count/_character-count.scss

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

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

@@ -1,19 +0,0 @@
-@use "../../core/tools" as *;
-
-.nhsuk-character-count {
-  @include nhsuk-responsive-margin(6, "bottom");
-
-  .nhsuk-form-group,
-  .nhsuk-textarea {
-    margin-bottom: nhsuk-spacing(1);
-  }
-}
-
-.nhsuk-character-count__message {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-.nhsuk-character-count__message--disabled {
-  visibility: hidden;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/checkboxes/_checkboxes.scss

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

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

@@ -1,155 +0,0 @@
-@use "sass:math";
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Checkboxes component
-///
-/// 1. remove 300ms pause on mobile.
-/// 2. Fix bug in IE11 caused by transform rotate (-45deg).
-///
-/// @group components
-////
-
-$nhsuk-checkboxes-size: nhsuk-spacing(6);
-$nhsuk-checkboxes-label-padding-left-right: 12px;
-
-.nhsuk-checkboxes__item {
-  clear: left;
-  display: block;
-  margin-bottom: nhsuk-spacing(2);
-  min-height: $nhsuk-checkboxes-size;
-  padding: 0 0 0 $nhsuk-checkboxes-size;
-  position: relative;
-
-  @include nhsuk-font(19);
-}
-
-.nhsuk-checkboxes__item:last-child,
-.nhsuk-checkboxes__item:last-of-type {
-  margin-bottom: 0;
-}
-
-.nhsuk-checkboxes__input {
-  cursor: pointer;
-  height: $nhsuk-checkboxes-size;
-  left: 0;
-  margin: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  width: $nhsuk-checkboxes-size;
-  z-index: 1;
-}
-
-.nhsuk-checkboxes__label {
-  cursor: pointer;
-  display: inline-block;
-  margin-bottom: 0;
-  padding: 8px $nhsuk-checkboxes-label-padding-left-right nhsuk-spacing(1);
-  -ms-touch-action: manipulation; // [1]
-  touch-action: manipulation;
-}
-
-.nhsuk-checkboxes__hint {
-  display: block;
-  padding-left: $nhsuk-checkboxes-label-padding-left-right;
-  padding-right: $nhsuk-checkboxes-label-padding-left-right;
-}
-
-.nhsuk-checkboxes__input + .nhsuk-checkboxes__label::before {
-  background: $nhsuk-form-element-background-color;
-  border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
-  box-sizing: border-box;
-  content: "";
-  height: $nhsuk-checkboxes-size;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: $nhsuk-checkboxes-size;
-}
-
-.nhsuk-checkboxes__input + .nhsuk-checkboxes__label::after {
-  background: transparent;
-  border: solid;
-  border-top-color: transparent;
-  border-width: 0 0 $nhsuk-border-width $nhsuk-border-width;
-  content: "";
-  height: 10px;
-  left: 10px;
-  opacity: 0; // [2]
-  position: absolute;
-  top: 13px;
-  -ms-transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  width: 22px;
-}
-
-/// 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-checkboxes__input:focus + .nhsuk-checkboxes__label::before {
-  @include nhsuk-focused-checkbox;
-}
-
-/// Selected state
-
-.nhsuk-checkboxes__input:checked + .nhsuk-checkboxes__label::after {
-  opacity: 1;
-}
-
-/// Disabled state
-
-.nhsuk-checkboxes__input:disabled,
-.nhsuk-checkboxes__input:disabled + .nhsuk-checkboxes__label {
-  cursor: default;
-}
-
-.nhsuk-checkboxes__input:disabled + .nhsuk-checkboxes__label {
-  opacity: 0.5;
-}
-
-/// Divider variant
-
-.nhsuk-checkboxes__divider {
-  $nhsuk-divider-size: $nhsuk-checkboxes-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 checkbox.
-/// 2. Move the border centered with the checkbox.
-/// 3. Move the contents of the conditional inline with the label.
-
-.nhsuk-checkboxes__conditional {
-  $conditional-border-width: $nhsuk-border-width-mobile;
-  $conditional-border-padding: math.div($nhsuk-checkboxes-size, 2) - math.div($conditional-border-width, 2); // [1]
-  $conditional-margin-left: $conditional-border-padding; // [2]
-  $conditional-padding-left: $conditional-border-padding + $nhsuk-checkboxes-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-checkboxes__conditional--hidden {
-  display: none;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/contents-list/_contents-list.scss

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

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

@@ -1,40 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Contents list component
-///
-/// 1. Creates a grey line before each list
-///    item using a ASCII number for the symbol.
-///
-/// @group components
-////
-
-.nhsuk-contents-list {
-  @include nhsuk-responsive-margin(7, "bottom");
-}
-
-.nhsuk-contents-list__list {
-  list-style: none;
-  padding: 0;
-}
-
-.nhsuk-contents-list__item {
-  background: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__emdash' xmlns='http://www.w3.org/2000/svg' fill='%23aeb7bd' width='19' height='1' aria-hidden='true'%3E%3Cpath d='M0 0h19v1H0z'%3E%3C/path%3E%3C/svg%3E")
-    left nhsuk-px-to-rem(12px) no-repeat;
-  padding: 0 0 0 nhsuk-spacing(5);
-  position: relative;
-
-  @include nhsuk-media-query($from: tablet) {
-    background: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__emdash' xmlns='http://www.w3.org/2000/svg' fill='%23aeb7bd' width='16' height='1' aria-hidden='true'%3E%3Cpath d='M0 0h19v1H0z'%3E%3C/path%3E%3C/svg%3E")
-      left nhsuk-px-to-rem(14px) no-repeat;
-  }
-}
-
-.nhsuk-contents-list__link {
-  display: inline-block;
-}
-
-.nhsuk-contents-list__current {
-  font-weight: $nhsuk-font-bold;
-}

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

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

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

@@ -1,29 +0,0 @@
-@use "../../core/tools" as *;
-
-////
-/// Date input component
-///
-/// 1. font-size: 0 removes whitespace caused by inline-block
-///
-/// @group components
-////
-
-.nhsuk-date-input {
-  font-size: 0; // [1]
-
-  @include nhsuk-clearfix;
-}
-
-.nhsuk-date-input__item {
-  display: inline-block;
-  margin-bottom: 0;
-  margin-right: nhsuk-spacing(4);
-}
-
-.nhsuk-date-input__label {
-  display: block;
-}
-
-.nhsuk-date-input__input {
-  margin-bottom: 0;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/details/_details.scss

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