design_system 0.10.0 → 0.12.0

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

@@ -1,181 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Table component
-///
-/// @group components
-////
-
-/// Table container is used to ensure the table does not break the container.
-///
-/// 1. Margin is removed so there isn't double spacing.
-/// 2. XS size not added because it matches the table header, so it'd be bad for hierarchy
-
-.nhsuk-table-container {
-  display: block;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  overflow-x: auto;
-  width: 100%;
-
-  @include nhsuk-responsive-margin(7, "bottom");
-
-  .nhsuk-table,
-  .nhsuk-table-responsive {
-    margin: 0; // [1]
-  }
-}
-
-.nhsuk-table,
-.nhsuk-table-responsive {
-  width: 100%;
-
-  border-spacing: 0;
-  border-collapse: collapse;
-
-  @include nhsuk-font($size: 19);
-  @include nhsuk-responsive-margin(7, "bottom");
-}
-
-.nhsuk-table__caption--xl {
-  @include nhsuk-font-size(48);
-}
-
-.nhsuk-table__caption--l {
-  @include nhsuk-font-size(36);
-}
-
-.nhsuk-table__caption--m {
-  @include nhsuk-font-size(26);
-}
-
-.nhsuk-table__caption--s {
-  @include nhsuk-font-size(22);
-}
-
-// [2]
-
-/// Table row hover
-///
-/// Table row hover is used to aid readability for users.
-
-.nhsuk-table__row {
-  &:hover {
-    background-color: $color_nhsuk-grey-5;
-  }
-}
-
-/// Table panel with tab heading
-///
-/// 1. Margin is removed so there isn't double spacing.
-
-.nhsuk-table__panel-with-heading-tab {
-  @include nhsuk-panel-with-label($color_nhsuk-white, $nhsuk-text-color, $color_nhsuk-grey-4);
-
-  .nhsuk-table,
-  .nhsuk-table-container,
-  .nhsuk-table-responsive {
-    margin: 0; // [1]
-  }
-}
-
-.nhsuk-table__heading-tab {
-  @include nhsuk-heading-label($color_nhsuk-blue, $color_nhsuk-white);
-}
-
-/// Responsive table
-///
-/// 1. Hide the thead until desktop
-/// 2. Removing default screen reader behaviour
-/// 3. Assigning role of table-row on desktop to give default screen reader behaviour
-/// 4. Using justify content to space out elements in the row on mobile
-/// 5. Assigning a minimum width in case of black cell
-/// 6. Aligning content to the right on mobile
-/// 7. Aligning mobile header to left to split it from the data
-/// 8. Hiding mobile specific header from desktop view
-/// 9. Adding a display block value due to IE 11 not having full flex support
-
-.nhsuk-table-responsive {
-  thead {
-    @include nhsuk-media-query($until: desktop) {
-      @include nhsuk-visually-hidden; // [1]
-    }
-  }
-
-  .nhsuk-table__body {
-    .nhsuk-table-responsive__heading {
-      @include nhsuk-typography-weight-bold;
-      padding-right: nhsuk-spacing(3);
-      text-align: left; // [8]
-    }
-
-    .nhsuk-table__row {
-      display: block; // [3]
-      margin-bottom: nhsuk-spacing(4);
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .nhsuk-table__row th,
-    .nhsuk-table__row td {
-      display: block; // For browsers that don't support flexbox
-      display: flex;
-      justify-content: space-between; // [5]
-      min-width: 1px; // [6]
-    }
-
-    @media all and (-ms-high-contrast: none) {
-      .nhsuk-table__row th,
-      .nhsuk-table__row td {
-        display: block; // [10]
-      }
-    }
-
-    @include nhsuk-media-query($until: desktop) {
-      .nhsuk-table__row th {
-        font-weight: $nhsuk-font-normal;
-      }
-
-      .nhsuk-table__row th,
-      .nhsuk-table__row td {
-        padding-right: 0;
-        text-align: right; // [7]
-
-        &:last-child {
-          border-bottom: 3px solid $color_nhsuk-grey-4;
-        }
-      }
-    }
-
-    @include nhsuk-media-query($from: desktop) {
-      .nhsuk-table-responsive__heading {
-        display: none; // [9]
-      }
-
-      .nhsuk-table__row {
-        display: table-row; // [4]
-      }
-
-      .nhsuk-table__row th {
-        text-align: left;
-      }
-
-      .nhsuk-table__row th,
-      .nhsuk-table__row td {
-        display: table-cell;
-      }
-    }
-  }
-}
-
-/// Numeric tables
-///
-/// Right aligns table cells for numeric tables.
-
-.nhsuk-table__header--numeric,
-.nhsuk-table__cell--numeric {
-  text-align: right;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/tables/_tables.scss

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

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

@@ -1,120 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-.nhsuk-tabs {
-  @include nhsuk-responsive-margin(1, "top");
-  @include nhsuk-responsive-margin(6, "bottom");
-}
-
-.nhsuk-tabs__title {
-  color: $nhsuk-text-color;
-  margin-bottom: nhsuk-spacing(2);
-  @include nhsuk-font($size: 19);
-}
-
-.nhsuk-tabs__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  @include nhsuk-responsive-margin(6, "bottom");
-}
-
-.nhsuk-tabs__list-item {
-  margin-left: nhsuk-spacing(5);
-  @include nhsuk-font($size: 19);
-
-  &::before {
-    color: $nhsuk-text-color;
-    content: "\2014 "; // "— "
-    margin-left: -(nhsuk-spacing(5));
-    padding-right: nhsuk-spacing(1);
-  }
-}
-
-.nhsuk-tabs__tab {
-  display: inline-block;
-  margin-bottom: nhsuk-spacing(2);
-}
-
-.nhsuk-tabs__panel {
-  @include nhsuk-responsive-margin(8, "bottom");
-}
-
-// JavaScript enabled
-.js-enabled {
-  @include nhsuk-media-query($from: tablet) {
-    .nhsuk-tabs__list {
-      border-bottom: 1px solid $nhsuk-border-color;
-      margin-bottom: 0;
-      @include nhsuk-clearfix;
-    }
-
-    .nhsuk-tabs__title {
-      display: none;
-    }
-
-    .nhsuk-tabs__list-item {
-      background-color: $color_nhsuk-grey-4;
-      float: left;
-      margin-bottom: 0;
-      margin-left: 0;
-      margin-right: nhsuk-spacing(1);
-      padding: nhsuk-spacing(2) nhsuk-spacing(4);
-      position: relative;
-      text-align: center;
-
-      &::before {
-        content: none;
-      }
-    }
-
-    .nhsuk-tabs__list-item--selected {
-      $border-width: 1px;
-      background-color: $color_nhsuk-white;
-      border: $border-width solid $nhsuk-border-color;
-      border-bottom: 0;
-      margin-bottom: -$border-width; // Compensation for border (otherwise we get a shift)
-      margin-top: -(nhsuk-spacing(1));
-      padding-bottom: (nhsuk-spacing(2) * 1.5) + $border-width;
-      padding-left: nhsuk-spacing(4) - $border-width;
-      padding-right: nhsuk-spacing(4) - $border-width;
-      padding-top: (nhsuk-spacing(2) * 1.5) - $border-width;
-      position: relative;
-
-      .nhsuk-tabs__tab {
-        text-decoration: none;
-      }
-    }
-
-    .nhsuk-tabs__tab {
-      margin-bottom: 0;
-
-      @include nhsuk-link-style-text;
-
-      &::after {
-        bottom: 0;
-        content: "";
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-    }
-
-    .nhsuk-tabs__panel {
-      background-color: $color_nhsuk-white;
-      border: 1px solid $nhsuk-border-color;
-      border-top: 0;
-      padding: nhsuk-spacing(6) nhsuk-spacing(4);
-      @include nhsuk-responsive-margin(0, "bottom");
-
-      & > :last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .nhsuk-tabs__panel--hidden {
-      display: none;
-    }
-  }
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/tabs/_tabs.scss

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

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

@@ -1,92 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Footer component
-///
-/// @group components
-////
-
-.nhsuk-tag {
-  background-color: nhsuk-shade($color_nhsuk-blue, 10%);
-  border: 1px solid nhsuk-shade($color_nhsuk-blue, 10%);
-  color: $color_nhsuk-white;
-  display: inline-block;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  padding-bottom: nhsuk-spacing(1);
-  padding-left: nhsuk-spacing(2);
-  padding-right: nhsuk-spacing(2);
-  padding-top: nhsuk-spacing(1);
-  text-decoration: none;
-
-  @include nhsuk-font($size: 16, $weight: bold, $line-height: 1);
-}
-
-/// Colour variants
-
-.nhsuk-tag--white {
-  background-color: $color_nhsuk-white;
-  border-color: $color_nhsuk-black;
-  color: $color_nhsuk-black;
-}
-
-.nhsuk-tag--grey {
-  background-color: nhsuk-tint($color_nhsuk-grey-1, 80%);
-  border-color: nhsuk-shade($color_nhsuk-grey-1, 30%);
-  color: nhsuk-shade($color_nhsuk-grey-1, 30%);
-}
-
-.nhsuk-tag--green {
-  background-color: nhsuk-tint($color_nhsuk-green, 80%);
-  border-color: nhsuk-shade($color_nhsuk-green, 40%);
-  color: nhsuk-shade($color_nhsuk-green, 40%);
-}
-
-.nhsuk-tag--aqua-green {
-  background-color: nhsuk-tint($color_nhsuk-aqua-green, 80%);
-  border-color: nhsuk-shade($color_nhsuk-aqua-green, 50%);
-  color: nhsuk-shade($color_nhsuk-aqua-green, 50%);
-}
-
-.nhsuk-tag--blue {
-  background-color: nhsuk-tint($color_nhsuk-blue, 80%);
-  border-color: nhsuk-shade($color_nhsuk-blue, 30%);
-  color: nhsuk-shade($color_nhsuk-blue, 30%);
-}
-
-.nhsuk-tag--purple {
-  background-color: nhsuk-tint($color_nhsuk-purple, 80%);
-  border-color: nhsuk-shade($color_nhsuk-purple, 30%);
-  color: nhsuk-shade($color_nhsuk-purple, 30%);
-}
-
-.nhsuk-tag--pink {
-  background-color: nhsuk-tint($color_nhsuk-pink, 80%);
-  border-color: nhsuk-shade($color_nhsuk-pink, 50%);
-  color: nhsuk-shade($color_nhsuk-pink, 50%);
-}
-
-.nhsuk-tag--red {
-  background-color: nhsuk-tint($color_nhsuk-red, 80%);
-  border-color: nhsuk-shade($color_nhsuk-red, 50%);
-  color: nhsuk-shade($color_nhsuk-red, 50%);
-}
-
-.nhsuk-tag--orange {
-  background-color: nhsuk-tint($color_nhsuk-warm-yellow, 50%);
-  border-color: nhsuk-shade($color_nhsuk-warm-yellow, 70%);
-  color: nhsuk-shade($color_nhsuk-warm-yellow, 70%);
-}
-
-.nhsuk-tag--yellow {
-  background-color: nhsuk-tint($color_nhsuk-yellow, 50%);
-  border-color: nhsuk-shade($color_nhsuk-yellow, 70%);
-  color: nhsuk-shade($color_nhsuk-yellow, 70%);
-}
-
-/// Remove tag border
-
-.nhsuk-tag--no-border {
-  border: 0;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/tag/_tag.scss

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

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

@@ -1,101 +0,0 @@
-@use "sass:color";
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Task list component
-///
-/// @group components
-/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
-////
-
-// NHS pages have a grey background, so we need a slightly darker colour for the hover
-// This produces 1.1:1 contrast, the same as GOV.UK’s
-$nhsuk-task-list-hover-color: color.adjust($color_nhsuk-grey-5, $lightness: -6%);
-
-.nhsuk-task-list {
-  margin-top: 0;
-  padding: 0;
-  list-style-type: none;
-
-  @include nhsuk-font($size: 19);
-  @include nhsuk-responsive-margin(5, "bottom");
-}
-
-// This uses table layout so that the task name and status always appear side-by-side, with the width of
-// each 'column' being flexible depending upon the length of the task names and statuses.
-//
-// The position is set to 'relative' so than an absolutely-positioned transparent element box
-// can be added within the link so that the whole row can be clickable.
-.nhsuk-task-list__item {
-  display: table;
-  position: relative;
-  width: 100%;
-  margin-bottom: 0;
-  // stylelint-disable-next-line function-calc-no-unspaced-operator
-  padding-top: calc(nhsuk-spacing(2) + 4px);
-  // stylelint-disable-next-line function-calc-no-unspaced-operator
-  padding-bottom: calc(nhsuk-spacing(2) + 4px);
-  border-bottom: 1px solid $nhsuk-border-color;
-}
-
-.nhsuk-task-list__item:first-child {
-  border-top: 1px solid $nhsuk-border-color;
-}
-
-// This class is added to the <li> elements where the task name is a link.
-// The background hover colour is added to help indicate that the whole row is clickable, rather
-// than just the visible link text.
-.nhsuk-task-list__item--with-link:hover {
-  background: $nhsuk-task-list-hover-color;
-}
-
-.nhsuk-task-list__name-and-hint {
-  display: table-cell;
-  vertical-align: top;
-  color: $nhsuk-text-color;
-}
-
-.nhsuk-task-list__status {
-  display: table-cell;
-  padding-left: nhsuk-spacing(2);
-  text-align: right;
-  vertical-align: top;
-  color: $nhsuk-text-color;
-}
-
-// This replicates some of the styling and spacing of tags so that these non-tag
-// statuses don’t look out of place with them. Longer term we may want to look to
-// adjusting the tag styles to be closer to body text.
-.nhsuk-task-list__status--completed,
-.nhsuk-task-list__status--cannot-start-yet {
-  padding-bottom: nhsuk-spacing(1);
-  padding-left: nhsuk-spacing(2);
-  // stylelint-disable-next-line function-calc-no-unspaced-operator
-  padding-top: calc(nhsuk-spacing(1) + 2px); // to match the spacing on tags
-  text-decoration: none;
-
-  @include nhsuk-font($size: 16, $weight: regular, $line-height: 1);
-}
-
-.nhsuk-task-list__status--cannot-start-yet {
-  color: $nhsuk-secondary-text-color;
-}
-
-// This adds an empty transparent box covering the whole row, including the task status and
-// any hint text. Because this is generated within the link element, this allows the whole area
-// to be clickable.
-.nhsuk-task-list__link::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.nhsuk-task-list__hint {
-  margin-top: nhsuk-spacing(1);
-  color: $nhsuk-secondary-text-color;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/task-list/_task-list.scss

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

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

@@ -1,30 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Textarea component
-///
-/// @group components
-////
-
-.nhsuk-textarea {
-  -webkit-appearance: none;
-  border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
-  border-radius: 0;
-  box-sizing: border-box;
-  display: block;
-  min-height: 40px;
-  padding: nhsuk-spacing(1);
-  resize: vertical;
-  width: 100%;
-
-  @include nhsuk-font(19);
-
-  &:focus {
-    @include nhsuk-focused-input;
-  }
-}
-
-.nhsuk-textarea--error {
-  border: $nhsuk-border-width-form-element-error solid $nhsuk-error-color;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/textarea/_textarea.scss

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

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

@@ -1,19 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Warning callout component
-///
-/// 1. Uses @mixin panel-with-label from tools/_mixins.
-/// 2. Uses @mixin heading-label from tools/_mixins.
-///
-/// @group components
-////
-
-.nhsuk-warning-callout {
-  @include nhsuk-panel-with-label($color_nhsuk-pale-yellow, $nhsuk-text-color, $color_nhsuk-yellow); // [1]
-}
-
-.nhsuk-warning-callout__label {
-  @include nhsuk-heading-label($color_nhsuk-yellow, $nhsuk-text-color); // [2]
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/warning-callout/_warning-callout.scss

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

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/elements/_page.scss

@@ -1,43 +0,0 @@
-@use "../generic" as *;
-@use "../settings" as *;
-@use "../tools" as *;
-
-////
-/// Page
-///
-/// High-level, page-level styling.
-///
-/// 1. The reason for this is to prevent "centering jumps" when navigating back
-///    and forth between pages with enough content to have a vertical scroll bar
-///    and pages that do not.
-/// 2. Fonts on OSX will look more consistent with other systems that do not
-///    render text using sub-pixel anti-aliasing.
-/// 3. Override the user agent style margin of 8px.
-/// 4. Ensure the page always fills at least the entire height of the viewport.
-///
-/// @group elements
-////
-
-html {
-  background-color: $color_nhsuk-grey-4;
-  overflow-y: scroll; // [1]
-
-  @if $nhsuk-include-font-face {
-    @include nhsuk-font-face-frutiger;
-
-    & {
-      font-family: $nhsuk-font, $nhsuk-font-fallback;
-    }
-  }
-}
-
-body {
-  background-color: $color_nhsuk-grey-5;
-  color: $nhsuk-text-color;
-  font-size: $nhsuk-base-font-size;
-  -moz-osx-font-smoothing: grayscale; // [2]
-  -webkit-font-smoothing: antialiased; // [2]
-  line-height: nhsuk-line-height($nhsuk-base-line-height, $nhsuk-base-font-size);
-  margin: 0; // [3]
-  min-height: 100%; // [4]
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/core/objects/_form-group.scss

@@ -1,25 +0,0 @@
-@use "../settings" as *;
-@use "../tools" as *;
-
-.nhsuk-form-group {
-  @include nhsuk-responsive-margin(4, "bottom");
-
-  .nhsuk-form-group:last-of-type {
-    margin-bottom: 0; // Remove margin from last item in nested groups
-  }
-}
-
-.nhsuk-form-group--wrapper {
-  @include nhsuk-responsive-margin(5, "bottom");
-}
-
-.nhsuk-form-group--error {
-  border-left: $nhsuk-border-width-form-group-error solid $nhsuk-error-color;
-  padding-left: nhsuk-spacing(3);
-
-  .nhsuk-form-group {
-    // Reset error styles in nested form groups that might have error class
-    border: 0;
-    padding: 0;
-  }
-}