design_system 0.10.0 → 0.12.0

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

@@ -1,211 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Details component
-///
-/// 1. Style the summary to look like a link...
-/// 2. Make the focus outline shrink-wrap the text content of the summary
-/// 3. Absolutely position the marker against this element
-/// 3. Allow for absolutely positioned marker and align with disclosed text
-/// 4. Only underline the text, not the arrow
-/// 5. Remove the default details marker so we can style our own consistently and
-///    ensure it displays in Firefox
-/// 6. Custom padding to left align the details text with the summary
-///
-/// @group components
-/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
-////
-
-.nhsuk-details {
-  display: block;
-  @include nhsuk-text-color;
-  @include nhsuk-font-size(19);
-  @include nhsuk-responsive-margin(4, "bottom");
-}
-
-.nhsuk-details__summary {
-  color: $color_nhsuk-blue; // [1]
-  cursor: pointer;
-  display: inline-block; // [2]
-  padding-left: nhsuk-spacing(4);
-  position: relative; // [3]
-
-  &:hover {
-    color: $nhsuk-link-hover-color;
-  }
-
-  &::before {
-    bottom: 0;
-    content: "";
-    left: 0;
-    margin: auto;
-    position: absolute;
-    top: 0;
-
-    @include nhsuk-shape-arrow($direction: right, $base: 14px);
-  }
-
-  &:focus {
-    @include nhsuk-focused-text;
-  }
-
-  &:hover,
-  &:focus {
-    .nhsuk-details__summary-text {
-      text-decoration: none;
-    }
-  }
-}
-
-.nhsuk-details[open] > .nhsuk-details__summary::before {
-  @include nhsuk-shape-arrow($direction: down, $base: 14px);
-}
-
-.nhsuk-details__summary-text {
-  text-decoration: underline; // [4]
-}
-
-.nhsuk-details__summary::-webkit-details-marker {
-  display: none; // [5]
-}
-
-.nhsuk-details__text {
-  border-left: nhsuk-spacing(1) solid $color_nhsuk-grey-4;
-  margin-top: nhsuk-spacing(2);
-  padding: nhsuk-spacing(3);
-  padding-left: 20px; // [6]
-  @include nhsuk-top-and-bottom;
-}
-
-/// Expander variation.
-///
-/// 1. !important used because the icon is populated
-///    by the JavaScript polyfill
-/// 2. Remove the default hover, focus and active
-///    styles for this component.
-/// 3. -2px left margin to align the icon to the content.
-/// 4. When a group of details is used reduce the
-///    margin between them so they sit together.
-
-$expander-border-width: 1px;
-$expander-border-bottom-width: nhsuk-spacing(1);
-$expander-border-color: $color_nhsuk-grey-4;
-$expander-border-hover-color: $color_nhsuk-grey-3;
-
-.nhsuk-expander {
-  background-color: $color_nhsuk-white;
-  border: $expander-border-width solid $expander-border-color;
-  border-bottom-width: $expander-border-bottom-width;
-
-  &:hover {
-    border-color: $expander-border-hover-color;
-  }
-
-  .nhsuk-details__summary {
-    background-color: $color_nhsuk-white;
-    border-top: $nhsuk-focus-width solid transparent;
-    display: block;
-    padding: nhsuk-spacing(5) - $nhsuk-focus-width nhsuk-spacing(5) nhsuk-spacing(5);
-
-    @include nhsuk-media-query($until: tablet) {
-      padding: nhsuk-spacing(4) - $nhsuk-focus-width nhsuk-spacing(4) nhsuk-spacing(4);
-    }
-
-    &::before {
-      // stylelint-disable-next-line declaration-no-important
-      display: none !important; // [1]
-    }
-
-    &:hover {
-      .nhsuk-details__summary-text {
-        color: $nhsuk-link-hover-color;
-      }
-    }
-
-    &:focus {
-      box-shadow: none;
-
-      .nhsuk-details__summary-text {
-        @include nhsuk-focused-text;
-      }
-
-      .nhsuk-details__summary-text::before {
-        background: $nhsuk-focus-color
-          url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__plus' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' aria-hidden='true'%3E%3Ccircle cx='12' cy='12' r='10' fill='002f5c'%3E%3C/circle%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M12 8v8M8 12h8'%3E%3C/path%3E%3C/svg%3E%0A")
-          left -2px center no-repeat;
-      }
-    }
-  }
-
-  .nhsuk-details__summary-text {
-    color: $color_nhsuk-blue;
-    cursor: pointer;
-    display: inline-block;
-    padding: nhsuk-spacing(1) nhsuk-spacing(1) nhsuk-spacing(1) 38px;
-    position: relative;
-  }
-
-  .nhsuk-details__summary-text::before {
-    background: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__plus' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' aria-hidden='true'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23005eb8'%3E%3C/circle%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M12 8v8M8 12h8'%3E%3C/path%3E%3C/svg%3E%0A")
-      left -2px center no-repeat;
-    content: "";
-    display: inline-block;
-    height: 32px;
-    left: 0;
-    position: absolute;
-    top: calc(50% - 16px);
-    width: 32px;
-  }
-
-  .nhsuk-details__text {
-    border-left: 0;
-    margin-left: 0;
-    margin-top: 0;
-
-    @include nhsuk-responsive-padding(5, "bottom");
-    @include nhsuk-responsive-padding(5, "left");
-    @include nhsuk-responsive-padding(5, "right");
-    @include nhsuk-responsive-padding(0, "top");
-  }
-}
-
-.nhsuk-expander[open] {
-  border-bottom-width: $expander-border-width;
-
-  .nhsuk-details__summary {
-    &:focus {
-      &:hover {
-        .nhsuk-details__summary-text {
-          text-decoration: none;
-        }
-      }
-
-      .nhsuk-details__summary-text::before {
-        background: $nhsuk-focus-color
-          url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__minus' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' aria-hidden='true'%3E%3Ccircle cx='12' cy='12' r='10' fill='002f5c'%3E%3C/circle%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M8 12h8'%3E%3C/path%3E%3C/svg%3E%0A")
-          left -2px center no-repeat; // [3]
-      }
-    }
-  }
-
-  .nhsuk-details__summary-text::before {
-    background: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__minus' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' aria-hidden='true'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23005eb8'%3E%3C/circle%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M8 12h8'%3E%3C/path%3E%3C/svg%3E%0A")
-      left -2px center no-repeat; // [3]
-  }
-}
-
-.nhsuk-expander-group {
-  // [4]
-
-  @include nhsuk-responsive-margin(4, "bottom");
-
-  > .nhsuk-details {
-    @include nhsuk-responsive-margin(2, "bottom");
-  }
-}
-
-.nhsuk-details + h2,
-.nhsuk-details + .nhsuk-heading-l {
-  @include nhsuk-responsive-padding(4, "top");
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/do-dont-list/_do-dont-list.scss

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

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

@@ -1,23 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Do and Don't list component
-///
-/// Do and Don't lists help users understand more easily what they should
-/// and shouldn't do.
-///
-/// 1. Uses @mixin panel-with-label from tools/_mixins.
-/// 2. Uses @mixin heading-label from tools/_mixins.
-///
-/// @group components
-////
-
-.nhsuk-do-dont-list {
-  @include nhsuk-panel-with-label($color_nhsuk-white, $nhsuk-text-color, $color_nhsuk-grey-4); // [1]
-}
-
-.nhsuk-do-dont-list__label {
-  @include nhsuk-heading-label($color_nhsuk-blue, $color_nhsuk-white); // [2]
-  @include nhsuk-print-color($nhsuk-print-text-color);
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/error-message/_error-message.scss

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

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

@@ -1,17 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Error message component
-///
-/// @group components
-////
-
-.nhsuk-error-message {
-  clear: both;
-  color: $nhsuk-error-color;
-  display: block;
-  margin-bottom: nhsuk-spacing(3);
-
-  @include nhsuk-font(19, $weight: bold);
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/error-summary/_error-summary.scss

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

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

@@ -1,72 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Error summary component
-///
-/// 1. Cross-component class - adjusts styling of list component.
-/// 2. Override default link styling to use error colour
-///
-/// @group components
-////
-
-.nhsuk-error-summary {
-  // Not using responsive spacing as we want smaller margin on mobile
-  margin-bottom: nhsuk-spacing(5);
-
-  border: $nhsuk-border-width-mobile solid $nhsuk-error-color;
-
-  @include nhsuk-responsive-padding(4);
-
-  @include nhsuk-media-query($from: tablet) {
-    margin-bottom: nhsuk-spacing(7);
-  }
-
-  @include nhsuk-media-query($from: tablet) {
-    border: $nhsuk-border-width solid $nhsuk-error-color;
-  }
-
-  &:focus {
-    border: $nhsuk-focus-width solid $nhsuk-focus-text-color;
-    box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color;
-    outline: $nhsuk-focus-width solid transparent;
-  }
-}
-
-.nhsuk-error-summary__title {
-  margin-top: 0;
-
-  @include nhsuk-font(26, $weight: bold);
-  @include nhsuk-responsive-margin(4, "bottom");
-}
-
-.nhsuk-error-summary__body {
-  @include nhsuk-font(19);
-
-  p {
-    margin-top: 0;
-    @include nhsuk-responsive-margin(4, "bottom");
-  }
-}
-
-.nhsuk-error-summary__list {
-  // [1]
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-.nhsuk-error-summary__list a {
-  @include nhsuk-typography-weight-bold;
-
-  // [2]
-  &:link,
-  &:visited,
-  &:hover,
-  &:active {
-    color: $nhsuk-error-color;
-  }
-
-  &:focus {
-    @include nhsuk-focused-text;
-  }
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/fieldset/_fieldset.scss

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

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

@@ -1,65 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Fieldset component
-///
-/// 1. Fix legend text wrapping in Edge and IE versions:
-/// 2. IE9-11 & Edge 12-13
-/// 3. Hack to let legends or elements within legends have margins in webkit browsers.
-/// 4. When the legend contains an H1, we want the H1 to inherit all styles from
-///    the legend. Effectively we want to be able to treat the heading as if it is
-///    not there.
-///
-/// @group components
-////
-
-.nhsuk-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
-
-  @include nhsuk-clearfix;
-}
-
-.nhsuk-fieldset__legend {
-  box-sizing: border-box; // [1]
-  color: $color_nhsuk-black;
-  display: table; // [2]
-  margin-bottom: nhsuk-spacing(2);
-  margin-top: 0;
-  max-width: 100%; // [1]
-  padding: 0;
-  white-space: normal; // [3]
-
-  @include nhsuk-font(19);
-}
-
-/// Heading modifiers
-
-.nhsuk-fieldset__legend--xl {
-  margin-bottom: nhsuk-spacing(3);
-  @include nhsuk-font($size: 48, $weight: bold);
-}
-
-.nhsuk-fieldset__legend--l {
-  margin-bottom: nhsuk-spacing(3);
-  @include nhsuk-font($size: 36, $weight: bold);
-}
-
-.nhsuk-fieldset__legend--m {
-  margin-bottom: nhsuk-spacing(3);
-  @include nhsuk-font($size: 26, $weight: bold);
-}
-
-.nhsuk-fieldset__legend--s {
-  margin-bottom: nhsuk-spacing(3);
-  @include nhsuk-font($size: 19, $weight: bold);
-}
-
-.nhsuk-fieldset__heading {
-  // [5]
-  font-size: inherit;
-  font-weight: inherit;
-  margin: 0;
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/footer/_footer.scss

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

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

@@ -1,87 +0,0 @@
-@use "sass:math";
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Footer component
-///
-/// @group components
-////
-
-.nhsuk-footer-container {
-  background-color: $color_nhsuk-grey-4;
-  border-top: nhsuk-spacing(1) solid $color_nhsuk-blue;
-
-  @include nhsuk-clearfix;
-  @include nhsuk-print-hide;
-  @include nhsuk-responsive-padding(5, bottom);
-  @include nhsuk-responsive-padding(5, top);
-}
-
-.nhsuk-footer {
-  background-color: $color_nhsuk-grey-4;
-  margin-bottom: 15px;
-
-  @include nhsuk-media-query($from: desktop) {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-.nhsuk-footer__list {
-  list-style-type: none;
-  margin-bottom: 25px;
-  padding-left: nhsuk-spacing(0);
-
-  @include nhsuk-responsive-padding(4, bottom);
-
-  &:last-child {
-    margin-bottom: 15px;
-  }
-
-  @include nhsuk-media-query($from: desktop) {
-    float: left;
-    padding-bottom: 0;
-    padding-right: 40px;
-    width: math.percentage(math.div(3, 4));
-
-    &:last-child {
-      padding-right: 0;
-    }
-  }
-}
-
-.nhsuk-footer__list-item {
-  @include nhsuk-font(16);
-
-  @include nhsuk-media-query($from: desktop) {
-    float: none;
-    margin-right: 0;
-  }
-}
-
-.nhsuk-footer-default__list-item {
-  @include nhsuk-media-query($from: desktop) {
-    float: left;
-    margin-right: nhsuk-spacing(5);
-  }
-}
-
-.nhsuk-footer__list-item-link,
-.nhsuk-footer__list-item-link:visited {
-  color: $nhsuk-footer-link-text-color;
-}
-
-.nhsuk-footer__copyright {
-  color: $nhsuk-footer-copyright-text-color;
-  margin-bottom: 0;
-
-  @include nhsuk-font(16);
-}
-
-.nhsuk-footer__meta {
-  @include nhsuk-media-query($until: desktop) {
-    border-top: 1px solid $color_nhsuk-grey-5;
-    padding-top: 35px;
-  }
-}