design_system 0.11.0 → 0.12.0

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

@@ -0,0 +1,526 @@
+@use "sass:math";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../../core/styles/icons";
+
+////
+/// 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 as added to container by nhsuk-panel-with-label mixin.
+/// 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
+////
+
+$nhsuk-card-border-width: 1px;
+$nhsuk-card-border-bottom-width: nhsuk-spacing(1);
+$nhsuk-card-border-colour: $nhsuk-border-colour;
+$nhsuk-card-border-hover-colour: $nhsuk-border-hover-colour;
+
+// @deprecated To be removed in v11.0
+$card-border-width: $nhsuk-card-border-width;
+$card-border-bottom-width: $nhsuk-card-border-bottom-width;
+$card-border-color: $nhsuk-card-border-colour;
+$card-border-colour: $nhsuk-card-border-colour;
+$card-border-hover-color: $nhsuk-card-border-hover-colour;
+$card-border-hover-colour: $nhsuk-card-border-hover-colour;
+
+@include nhsuk-exports("nhsuk/components/card") {
+  .nhsuk-card {
+    box-sizing: border-box;
+    position: relative; // [1]
+    width: 100%;
+
+    @include nhsuk-panel($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);
+  }
+
+  .nhsuk-card__img,
+  .nhsuk-card .nhsuk-image {
+    display: block;
+    width: 100%;
+    margin: 0;
+    border-bottom: $nhsuk-card-border-width solid nhsuk-colour("grey-5"); // [2]
+  }
+
+  .nhsuk-card__content {
+    @include nhsuk-top-and-bottom;
+    @include nhsuk-responsive-padding(5);
+  }
+
+  .nhsuk-card .nhsuk-image__caption {
+    @include nhsuk-responsive-padding(5, "left");
+    @include nhsuk-responsive-padding(5, "right");
+  }
+
+  .nhsuk-card__heading {
+    flex-basis: 0;
+    flex-grow: 999;
+
+    &:has(+ .nhsuk-icon) {
+      margin-bottom: 0;
+    }
+  }
+
+  .nhsuk-card__heading-container,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-card--care__heading-container {
+    @include nhsuk-responsive-padding(5);
+  }
+
+  .nhsuk-card__heading-container {
+    &:last-child {
+      @include nhsuk-top-and-bottom;
+    }
+
+    &:not(:last-child) {
+      padding-bottom: 0;
+    }
+
+    + .nhsuk-card__content {
+      padding-top: 0;
+    }
+
+    @include nhsuk-media-query($from: tablet) {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: baseline;
+      justify-content: space-between;
+
+      &:has(.nhsuk-card__actions:only-child) {
+        justify-content: right;
+      }
+    }
+  }
+
+  .nhsuk-card__actions {
+    display: flex;
+
+    flex-wrap: wrap;
+    row-gap: 10px;
+
+    margin: nhsuk-spacing(-1) 0 nhsuk-spacing(3);
+    padding: 0;
+
+    list-style: none;
+    @include nhsuk-font(19, $weight: bold);
+
+    @include nhsuk-media-query($from: tablet) {
+      justify-content: right;
+      margin: 0 0 nhsuk-spacing(3) nhsuk-spacing(3);
+      text-align: right;
+
+      &:only-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .nhsuk-card__action {
+    display: inline-block;
+
+    // We use the following media query to target IE11 and 10 only to add margin
+    // between actions.
+    //
+    // We do this because we're using row-gap to create space between actions on
+    // more evergreen browsers which IE doesn't support. @supports currently isn't
+    // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.
+    //
+    // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
+    // which also includes an explanation of why this works
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: nhsuk-spacing(1);
+    }
+  }
+
+  .nhsuk-card__action:last-child {
+    // See above comment for why this is here
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: 0;
+    }
+  }
+
+  @include nhsuk-media-query($until: tablet) {
+    .nhsuk-card__action {
+      margin-right: nhsuk-spacing(2);
+      padding-right: nhsuk-spacing(2);
+      border-right: 1px solid $nhsuk-border-colour;
+    }
+
+    .nhsuk-card__action:last-child {
+      margin-right: 0;
+      padding-right: 0;
+      border: 0;
+    }
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    .nhsuk-card__action {
+      margin-bottom: 0;
+      margin-left: nhsuk-spacing(2);
+      padding-left: nhsuk-spacing(2);
+    }
+
+    .nhsuk-card__action:not(:first-child) {
+      border-left: 1px solid $nhsuk-border-colour;
+    }
+
+    .nhsuk-card__action:first-child {
+      margin-left: 0;
+      padding-left: 0;
+      border: 0;
+    }
+  }
+
+  .nhsuk-card__description {
+    margin-bottom: 0;
+  }
+
+  // Clickable card
+
+  .nhsuk-card--clickable {
+    border-bottom-width: $nhsuk-card-border-bottom-width;
+
+    .nhsuk-card__heading a,
+    .nhsuk-card__link {
+      &::before {
+        content: "";
+
+        display: block;
+
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        background-color: rgba(255, 255, 255, 0); // [17]
+      }
+    }
+
+    &:active {
+      bottom: -$nhsuk-card-border-width; // [3]
+      border-color: $nhsuk-card-border-hover-colour;
+    }
+  }
+
+  // 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 {
+    margin-bottom: 0;
+    list-style-type: none;
+
+    @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 panel shared styles
+
+  .nhsuk-card--feature > .nhsuk-card__heading-container,
+  .nhsuk-card--feature > .nhsuk-card__content,
+  .nhsuk-card--warning > .nhsuk-card__heading-container,
+  .nhsuk-card--warning > .nhsuk-card__content,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-card__content--feature {
+    padding: 0; // [7]
+  }
+
+  .nhsuk-card--feature > .nhsuk-card__heading-container,
+  .nhsuk-card--warning > .nhsuk-card__heading-container {
+    @include nhsuk-media-query($from: tablet) {
+      align-items: flex-start;
+    }
+
+    .nhsuk-card__actions {
+      margin-top: 0;
+
+      @include nhsuk-media-query($from: tablet) {
+        padding-top: nhsuk-spacing(4);
+      }
+    }
+  }
+
+  // Card feature
+
+  .nhsuk-card--feature {
+    @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);
+  }
+
+  .nhsuk-card--feature > .nhsuk-card__heading-container > .nhsuk-card__heading,
+  .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-card__heading--feature {
+    flex-basis: auto;
+    flex-grow: 0;
+    @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);
+  }
+
+  // Card warning
+
+  .nhsuk-card--warning {
+    @include nhsuk-panel-with-label(nhsuk-colour("pale-yellow"), $nhsuk-text-colour, nhsuk-colour("yellow"));
+  }
+
+  .nhsuk-card--warning > .nhsuk-card__heading-container > .nhsuk-card__heading,
+  .nhsuk-card--warning > .nhsuk-card__content > .nhsuk-card__heading {
+    flex-basis: auto;
+    flex-grow: 0;
+    @include nhsuk-heading-label(nhsuk-colour("yellow"), $nhsuk-text-colour);
+  }
+
+  // Care card
+
+  .nhsuk-card--care {
+    @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px); // [8]
+    @include nhsuk-responsive-margin(7, "top");
+  }
+
+  .nhsuk-card--care > .nhsuk-card__heading-container,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-card--care__heading-container {
+    position: relative;
+    padding-top: nhsuk-spacing(3);
+    padding-bottom: nhsuk-spacing(3) - $nhsuk-card-border-width;
+    border-bottom: $nhsuk-card-border-width solid transparent;
+  }
+
+  .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-card--care__heading {
+    margin: 0;
+    padding-top: 0; // [13]
+
+    @include nhsuk-font(26, $weight: bold);
+    @include nhsuk-print-colour;
+  }
+
+  .nhsuk-card--care__arrow {
+    display: block;
+
+    position: absolute;
+    bottom: nhsuk-px-to-rem(-11px); // [9]
+    left: nhsuk-px-to-rem(30px); // [10]
+
+    width: nhsuk-px-to-rem(20px); // [9]
+    height: nhsuk-px-to-rem(20px); // [9]
+
+    overflow: hidden;
+
+    transform: rotate(45deg);
+    @include nhsuk-print-hide;
+
+    @include nhsuk-media-query($from: tablet) {
+      left: nhsuk-px-to-rem(38px); // [10]
+    }
+
+    &::before,
+    &::after {
+      content: "";
+
+      display: block;
+
+      position: absolute;
+      top: 0;
+
+      width: 0;
+      height: 0;
+
+      transform: rotate(45deg); // [12]
+
+      border: solid nhsuk-px-to-rem(32px) $nhsuk-brand-colour; // [9]
+    }
+  }
+
+  .nhsuk-card--care .nhsuk-card__content {
+    @include nhsuk-responsive-padding(5, "top");
+  }
+
+  .nhsuk-card--care--urgent > .nhsuk-card__heading-container,
+  .nhsuk-card--care--non-urgent > .nhsuk-card__heading-container,
+  .nhsuk-card--care--emergency > .nhsuk-card__heading-container {
+    .nhsuk-card__actions {
+      margin-top: nhsuk-spacing(3);
+      margin-bottom: 0;
+
+      @include nhsuk-media-query($from: tablet) {
+        align-self: center;
+        margin-top: 0;
+      }
+    }
+
+    .nhsuk-card__action {
+      border-color: $nhsuk-secondary-border-colour;
+    }
+
+    .nhsuk-card__action a {
+      @include nhsuk-link-style-white;
+    }
+  }
+
+  .nhsuk-card--care--urgent {
+    @include nhsuk-care-card(nhsuk-colour("red"), $nhsuk-reverse-text-colour, 6px);
+
+    .nhsuk-card--care__arrow {
+      &::before,
+      &::after {
+        border-color: nhsuk-colour("red");
+      }
+    }
+  }
+
+  .nhsuk-card--care--emergency {
+    @include nhsuk-care-card(nhsuk-colour("red"), $nhsuk-reverse-text-colour, 8px);
+
+    .nhsuk-card--care__arrow {
+      &::before,
+      &::after {
+        border-color: nhsuk-colour("red");
+      }
+    }
+
+    .nhsuk-card__content {
+      position: static; // [15]
+      border: 0;
+      color: $nhsuk-reverse-text-colour;
+      background-color: nhsuk-colour("black");
+
+      a:not(.nhsuk-action-link):not(.nhsuk-button) {
+        @include nhsuk-link-style-white;
+      }
+
+      @include nhsuk-print-colour {
+        background-color: $nhsuk-card-background-colour;
+      }
+    }
+
+    .nhsuk-details,
+    .nhsuk-details__summary {
+      color: $nhsuk-reverse-text-colour;
+    }
+
+    .nhsuk-details__summary {
+      &:hover {
+        color: $nhsuk-reverse-text-colour;
+      }
+
+      &:focus {
+        color: $nhsuk-focus-text-colour;
+      }
+    }
+
+    .nhsuk-action-link__link .nhsuk-icon {
+      fill: $nhsuk-reverse-text-colour; // [14]
+    }
+  }
+
+  // Card primary
+
+  .nhsuk-card--primary > .nhsuk-card__content,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-card__content--primary {
+    @include nhsuk-responsive-spacing(
+      5,
+      "padding",
+      $direction: "right",
+      $adjustment: nhsuk-px-to-rem(nhsuk-spacing(7))
+    );
+
+    @include nhsuk-media-query($from: desktop) {
+      height: 100%;
+    }
+  }
+
+  .nhsuk-card--primary,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-card__content--primary {
+    .nhsuk-icon {
+      display: block;
+
+      position: absolute;
+      top: 50%;
+
+      width: nhsuk-px-to-rem($nhsuk-icon-size-large);
+      height: nhsuk-px-to-rem($nhsuk-icon-size-large);
+      margin-top: nhsuk-px-to-rem(math.floor(math.div($nhsuk-icon-size-large, -2)));
+
+      pointer-events: none;
+
+      fill: $nhsuk-link-colour;
+      @include nhsuk-responsive-spacing(5, "right");
+    }
+  }
+
+  // Card secondary
+
+  .nhsuk-card--secondary {
+    border-top: 0;
+    border-right: 0;
+    border-bottom: $nhsuk-card-border-bottom-width solid $nhsuk-card-border-colour;
+    border-left: 0;
+    background: transparent;
+  }
+
+  .nhsuk-card--secondary > .nhsuk-card__heading-container,
+  .nhsuk-card--secondary > .nhsuk-card__content,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-card__content--secondary {
+    padding-top: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,54 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
+@forward "../textarea";
+
+////
+/// Character count component
+///
+/// @group components/character-count
+////
+
+@include nhsuk-exports("nhsuk/components/character-count") {
+  .nhsuk-character-count {
+    @include nhsuk-responsive-margin(5, "bottom");
+
+    .nhsuk-form-group,
+    .nhsuk-textarea {
+      margin-bottom: nhsuk-spacing(1);
+    }
+
+    // If the textarea enters the error state whilst the user is focused on it,
+    // show the error state. This presents feedback to the user that the value
+    // has become invalid without needing to see the counter.
+    .nhsuk-textarea--error:focus {
+      border-color: $nhsuk-error-colour;
+      box-shadow: inset 0 0 0 $nhsuk-border-width-form-element $nhsuk-error-colour;
+    }
+  }
+
+  .nhsuk-character-count__message,
+  .nhsuk-character-count__status {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    &::after {
+      // Zero-width space that will reserve vertical space when no hint is
+      // provided as:
+      // - setting a min-height is not possible without a magic number because
+      //   the line-height is set by the `nhsuk-font` call above
+      // - using `:empty` is not possible as the hint macro outputs line breaks
+      content: "\200B";
+    }
+  }
+
+  .nhsuk-character-count__status--disabled,
+  // Deprecated, to be removed in v11.0
+  .nhsuk-character-count__message--disabled {
+    visibility: hidden;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

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