design_system 0.11.0 → 0.12.0

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

@@ -0,0 +1,100 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+
+////
+/// Notification banner component
+///
+/// @group components/notification-banner
+////
+
+@include nhsuk-exports("nhsuk/components/notification-banner") {
+  .nhsuk-notification-banner {
+    box-sizing: border-box;
+    border: $nhsuk-border-width solid $nhsuk-brand-colour;
+
+    @include nhsuk-font($size: 19);
+    @include nhsuk-responsive-margin(8, "bottom");
+
+    &:focus {
+      outline: $nhsuk-focus-width solid $nhsuk-focus-colour;
+    }
+  }
+
+  .nhsuk-notification-banner__header {
+    padding: 2px nhsuk-spacing(3) nhsuk-spacing(1);
+
+    // Ensures the notification header appears separate to the notification body
+    // text in high contrast mode
+    border-bottom: 1px solid transparent;
+    background-color: $nhsuk-brand-colour;
+
+    @include nhsuk-media-query($from: tablet) {
+      padding: 2px nhsuk-spacing(4) nhsuk-spacing(1);
+    }
+  }
+
+  .nhsuk-notification-banner__title {
+    margin: 0;
+    padding: 0;
+    color: $nhsuk-reverse-text-colour;
+
+    // Set the size again because this element is a heading and the user agent
+    // font size overrides the inherited font size
+    @include nhsuk-font($size: 19, $weight: bold);
+  }
+
+  .nhsuk-notification-banner__content {
+    $padding-tablet: nhsuk-spacing(4);
+    padding: nhsuk-spacing(3);
+
+    @include nhsuk-text-colour;
+    @include nhsuk-media-query($from: tablet) {
+      padding: $padding-tablet;
+    }
+
+    // Wrap content at the same place that a 2/3 grid column ends, to maintain
+    // shorter line-lengths when the notification banner is full width
+    > * {
+      // When elements have their own padding (like lists), include the padding
+      // in the max-width calculation
+      box-sizing: border-box;
+
+      // Calculate the internal width of a two-thirds column...
+      $two-col-width: calc($nhsuk-page-width * 2 / 3) - calc($nhsuk-gutter * 1 / 3);
+
+      // ...and then factor in the left border and padding
+      $banner-exterior: ($padding-tablet + $nhsuk-border-width);
+      max-width: $two-col-width - $banner-exterior;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .nhsuk-notification-banner__heading {
+    margin: 0 0 nhsuk-spacing(3);
+    padding: 0;
+
+    @include nhsuk-font($size: 26, $weight: bold);
+  }
+
+  .nhsuk-notification-banner__link {
+    @include nhsuk-link-style-no-visited-state;
+  }
+
+  .nhsuk-notification-banner--success {
+    border-color: $nhsuk-success-colour;
+
+    .nhsuk-notification-banner__header {
+      background-color: $nhsuk-success-colour;
+    }
+
+    .nhsuk-notification-banner__link {
+      @include nhsuk-link-style-success;
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/notification-banner/_notification-banner.scss

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

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

@@ -0,0 +1,261 @@
+@use "sass:math";
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../../core/styles/icons";
+
+////
+/// 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/pagination
+////
+
+@include nhsuk-exports("nhsuk/components/pagination") {
+  $_icon-size: nhsuk-em($nhsuk-icon-size-large, 26px);
+  $_small-icon-size: nhsuk-em($nhsuk-icon-size, 19px);
+
+  .nhsuk-pagination {
+    box-sizing: border-box;
+    @include nhsuk-responsive-margin(7, "top");
+    @include nhsuk-responsive-margin(7, "bottom");
+  }
+
+  .nhsuk-pagination__list {
+    @include nhsuk-clearfix;
+  }
+
+  .nhsuk-pagination-item--previous {
+    width: 50%;
+    float: left;
+    text-align: left;
+
+    .nhsuk-icon {
+      left: nhsuk-px-to-rem(-6px);
+    }
+
+    .nhsuk-pagination__title {
+      padding-left: $_icon-size; // [1]
+    }
+  }
+
+  .nhsuk-pagination-item--next {
+    width: 50%;
+    float: right;
+    text-align: right;
+
+    .nhsuk-icon {
+      right: nhsuk-px-to-rem(-6px);
+    }
+
+    .nhsuk-pagination__title {
+      padding-right: $_icon-size; // [1]
+    }
+  }
+
+  .nhsuk-pagination__link {
+    display: block;
+    position: relative;
+    width: 100%;
+    text-decoration: none;
+
+    @include nhsuk-font-size(26);
+    @include nhsuk-print-colour {
+      @include nhsuk-link-style-text($nhsuk-print-text-colour);
+    }
+
+    .nhsuk-icon {
+      position: absolute;
+      top: 0;
+      width: $_icon-size;
+      height: $_icon-size;
+    }
+  }
+
+  .nhsuk-pagination__title {
+    display: block;
+
+    @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;
+    }
+  }
+
+  // Numbered pagination variant
+
+  // Flexbox enhancement for small screen visual design
+  // Falls back to a float: left layout on non-flex browsers
+  .nhsuk-pagination--numbered {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+
+    @include nhsuk-media-query($from: tablet) {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+  }
+
+  // Container for the list of numbered items
+  .nhsuk-pagination--numbered .nhsuk-pagination__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  // Override for the default non-numbered style
+  .nhsuk-pagination--numbered .nhsuk-pagination__list::after {
+    content: none;
+  }
+
+  .nhsuk-pagination--numbered .nhsuk-pagination__item {
+    // Hide items on small screens except the prev/next items,
+    // non-link items and the first and last items
+    display: none;
+
+    // Center align pagination links in their parent list item so that they
+    // visually sit in the middle of their touch area
+    text-align: center;
+
+    @include nhsuk-media-query($from: tablet) {
+      display: block;
+    }
+  }
+
+  // Only show first, last and non-link items on mobile
+  .nhsuk-pagination--numbered .nhsuk-pagination__item:first-child,
+  .nhsuk-pagination--numbered .nhsuk-pagination__item:last-child,
+  .nhsuk-pagination--numbered .nhsuk-pagination__item--ellipsis,
+  .nhsuk-pagination--numbered .nhsuk-pagination__item--current {
+    display: block;
+  }
+
+  // Numbered items, previous and next links
+  .nhsuk-pagination--numbered .nhsuk-pagination__item,
+  .nhsuk-pagination--numbered .nhsuk-pagination__previous,
+  .nhsuk-pagination--numbered .nhsuk-pagination__next {
+    box-sizing: border-box;
+
+    position: relative;
+
+    min-width: nhsuk-px-to-rem(45px); // Set size using rems to make the icon scale with text
+    min-height: nhsuk-px-to-rem(45px);
+    margin: 0;
+    padding: nhsuk-spacing(2);
+
+    float: left; // Float is ignored if flex is active for prev/next links
+
+    text-align: center;
+    @include nhsuk-font(19);
+
+    &:hover {
+      background-color: nhsuk-colour("grey-4");
+    }
+
+    &:focus {
+      @include nhsuk-link-style-focus;
+    }
+  }
+
+  // Previous and next links within pagination navigation
+  .nhsuk-pagination--numbered .nhsuk-pagination__previous,
+  .nhsuk-pagination--numbered .nhsuk-pagination__next {
+    // Use flex to avoid extra space being introduced when
+    // whitespace exists between the arrow svg and the link text
+    display: flex;
+    align-items: center;
+  }
+
+  .nhsuk-pagination--numbered .nhsuk-pagination__previous {
+    padding-left: 0;
+  }
+
+  .nhsuk-pagination--numbered .nhsuk-pagination__next {
+    padding-right: 0;
+  }
+
+  // Numbered item links
+  .nhsuk-pagination--numbered .nhsuk-pagination__link {
+    position: static;
+    @include nhsuk-link-style;
+    @include nhsuk-font-size(19);
+
+    // Increase the touch area for the link to the parent element.
+    @media screen {
+      &::after {
+        content: "";
+
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
+  }
+
+  // Current number
+  .nhsuk-pagination--numbered .nhsuk-pagination__item--current {
+    background-color: nhsuk-colour("blue");
+    font-weight: $nhsuk-font-weight-bold;
+
+    .nhsuk-pagination__link {
+      @include nhsuk-link-style-white;
+    }
+  }
+
+  .nhsuk-pagination--numbered .nhsuk-pagination__item--current:hover {
+    background-color: nhsuk-colour("blue");
+  }
+
+  .nhsuk-pagination--numbered .nhsuk-pagination__item--ellipsis {
+    @include nhsuk-typography-weight-bold;
+    color: $nhsuk-secondary-text-colour;
+
+    // Remove hover state for ellipsis items as they don't contain links
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  // Previous and Next labels next to arrows
+  .nhsuk-pagination--numbered .nhsuk-pagination__title {
+    display: inline;
+  }
+
+  // Arrows within numbered pagination
+  .nhsuk-pagination--numbered .nhsuk-icon {
+    width: $_small-icon-size;
+    height: $_small-icon-size;
+  }
+
+  .nhsuk-pagination--numbered .nhsuk-pagination__previous .nhsuk-icon {
+    margin-right: nhsuk-spacing(2);
+    margin-left: -0.175rem;
+  }
+
+  .nhsuk-pagination--numbered .nhsuk-pagination__next .nhsuk-icon {
+    margin-right: -0.175rem;
+    margin-left: nhsuk-spacing(2);
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,99 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" 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.
+///
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+///
+/// @group components/panel
+////
+
+$nhsuk-panel-border-width: nhsuk-spacing(1);
+
+// @deprecated To be removed in v11.0
+$nhsuk-border-width-panel: $nhsuk-panel-border-width;
+
+@include nhsuk-exports("nhsuk/components/panel") {
+  .nhsuk-panel {
+    box-sizing: border-box;
+    padding: nhsuk-spacing(5) - $nhsuk-panel-border-width; /* [2] */
+    border: $nhsuk-panel-border-width solid transparent; /* [1] */
+    color: $nhsuk-reverse-text-colour;
+    background: $nhsuk-success-colour;
+
+    @include nhsuk-font-size(26);
+    @include nhsuk-responsive-margin(4, "bottom");
+
+    @include nhsuk-media-query($until: tablet) {
+      padding: nhsuk-spacing(4) - $nhsuk-panel-border-width; /* [2] */
+      @include nhsuk-text-break-word; /* [3] */
+    }
+
+    @include nhsuk-print-colour {
+      border-color: currentcolor;
+      background: none;
+    }
+  }
+
+  .nhsuk-panel--interruption {
+    background-color: $nhsuk-brand-colour;
+
+    // Links within the Panel should use white text
+    .nhsuk-link,
+    a:not(.nhsuk-button) {
+      @include nhsuk-link-style-white;
+    }
+  }
+
+  .nhsuk-panel__title {
+    margin-top: 0;
+  }
+
+  .nhsuk-panel__title,
+  .nhsuk-panel__title--xl {
+    @include nhsuk-font-size(48);
+    @include nhsuk-responsive-margin(5, "bottom");
+  }
+
+  .nhsuk-panel__title--l {
+    @include nhsuk-font-size(36);
+    @include nhsuk-responsive-margin(3, "bottom");
+  }
+
+  .nhsuk-panel__title--m {
+    @include nhsuk-font-size(26);
+    @include nhsuk-responsive-margin(3, "bottom");
+  }
+
+  .nhsuk-panel__title:last-child {
+    margin-bottom: 0;
+  }
+
+  .nhsuk-panel__body {
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    // Deduct button group vertical gap from margin
+    > .nhsuk-button-group:last-child {
+      margin-bottom: nhsuk-spacing(-3);
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,37 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@use "../../core/helpers" as *;
+@forward "../button";
+@forward "../input";
+
+////
+/// Password input component
+///
+/// @group components/password-input
+////
+
+@include nhsuk-exports("nhsuk/components/password-input") {
+  .nhsuk-password-input__input {
+    // IE 11 and Microsoft Edge comes with its own password reveal function. We
+    // want to hide it, so that there aren't two controls presented to the user
+    // that do the same thing but aren't in sync with one another. This doesn't
+    // affect the function that allows Edge users to toggle password visibility
+    // by pressing Alt+F8, which cannot be programmatically disabled.
+    &::-ms-reveal {
+      display: none;
+    }
+  }
+
+  .nhsuk-password-input__toggle {
+    // Hide the button by default, JS removes this attribute
+    &[hidden] {
+      display: none;
+    }
+
+    @include nhsuk-media-query($from: mobile) {
+      flex-basis: 5em;
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/components/password-input/_password-input.scss

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