design_system 0.10.0 → 0.12.0

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

@@ -1,138 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Breadcrumb component
-///
-/// 1. Hide the breadcrumb on print stylesheets.
-/// 3. Don't show the full breadcrumb below tablet size.
-/// 4. Typography sizing mixin, see core/tools/_typography
-/// 5. and core/settings/_typography for size maps.
-///    .. but show a back to index page link.
-/// 6. Spacing to align the chevron with breadcrumb items
-///
-/// @group components
-////
-
-.nhsuk-breadcrumb {
-  padding-top: nhsuk-spacing(3);
-  @include nhsuk-print-hide; // [1]
-
-  @include nhsuk-media-query($from: tablet) {
-    padding-top: nhsuk-spacing(4);
-  }
-}
-
-.nhsuk-breadcrumb__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  @include nhsuk-font(16); // [4]
-
-  @include nhsuk-media-query($until: tablet) {
-    display: none; // [3]
-  }
-}
-
-.nhsuk-breadcrumb__item {
-  $chevron-background: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23768692' height='18' width='18' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z'%3E%3C/path%3E%3C/svg%3E";
-  $chevron-background-reverse: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aeb7bd' height='18' width='18' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z'%3E%3C/path%3E%3C/svg%3E";
-
-  display: inline-block;
-  margin-bottom: 0;
-  @include nhsuk-font(16); // [4]
-
-  &:not(:last-child)::after {
-    background: url($chevron-background) no-repeat 0 0;
-    content: "";
-    display: inline-block;
-    height: 19px; // [6]
-    margin-left: 9px; // [6]
-    margin-right: 2px; // [6]
-    vertical-align: middle; // [6]
-    width: 18px; // [6]
-  }
-
-  .nhsuk-breadcrumb--reverse &:not(:last-child)::after {
-    background-image: url($chevron-background-reverse);
-  }
-}
-
-.nhsuk-breadcrumb__link {
-  @include nhsuk-link-style-no-visited-state;
-
-  .nhsuk-breadcrumb--reverse & {
-    @include nhsuk-link-style-white;
-  }
-}
-
-.nhsuk-breadcrumb__back {
-  margin: 0;
-  line-height: 1;
-
-  @include nhsuk-media-query($from: tablet) {
-    display: none; // [5]
-  }
-}
-
-.nhsuk-breadcrumb__backlink {
-  $icon-background: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23005eb8' height='24' width='24' viewBox='8 0 24 24'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E";
-  $icon-background-hover: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237c2855' height='24' width='24' viewBox='8 0 24 24'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E";
-  $icon-background-focus: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212b32' height='24' width='24' viewBox='8 0 24 24'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E";
-  $icon-background-reverse: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' height='24' width='24' viewBox='8 0 24 24'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E";
-
-  background: none;
-  border: 0;
-  cursor: pointer;
-  display: inline-block;
-  padding: 0 0 0 16px;
-  position: relative;
-
-  @include nhsuk-link-style-no-visited-state;
-  @include nhsuk-font(16); // [4]
-
-  &::before {
-    background: url($icon-background) no-repeat 8px 0;
-    content: "";
-    display: block;
-
-    height: 24px;
-    left: -8px;
-    position: absolute;
-    top: -1px;
-    width: 24px;
-
-    @include nhsuk-media-query($from: tablet) {
-      top: 0; // [3]
-    }
-  }
-
-  .nhsuk-breadcrumb--reverse & {
-    @include nhsuk-link-style-white;
-  }
-
-  &:link,
-  .nhsuk-breadcrumb--reverse &:link {
-    text-decoration: none;
-  }
-
-  &:hover,
-  .nhsuk-breadcrumb--reverse &:hover {
-    text-decoration: underline;
-  }
-
-  &:hover::before {
-    background-image: url($icon-background-hover);
-  }
-
-  .nhsuk-breadcrumb--reverse &::before,
-  .nhsuk-breadcrumb--reverse &:active::before {
-    background-image: url($icon-background-reverse);
-  }
-
-  &:focus::before,
-  &:active::before {
-    background-image: url($icon-background-focus);
-  }
-}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/button/_button.scss

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

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

@@ -1,257 +0,0 @@
-@use "sass:math";
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Button component
-///
-/// 1. Ensure that any global link styles are overridden.
-/// 2. Fix unwanted button padding in Firefox.
-/// 3. Use a pseudo element to expand the click target area to include the
-///    button's shadow as well, in case users try to click it.
-/// 4. Use a pseudo element to expand and cover the button's bounds, used to
-///    add a button shadow or border without affecting the total height
-///
-/// @group components
-////
-
-// Because the shadow (s0) is visually 'part of' the button, we need to reduce
-// the height of the button to compensate by adjusting its padding (s2) and
-// increase the bottom margin to include it (s1).
-$button-border-radius: $nhsuk-border-width-form-element * 2;
-$button-shadow-size: $button-border-radius;
-$button-padding-top-bottom-mobile: 8px;
-$button-padding-top-bottom-desktop: 12px;
-$button-padding-left-right: 16px;
-
-.nhsuk-button {
-  -webkit-appearance: none;
-  // Set shadow below the button [4]
-  box-shadow: 0 $button-shadow-size 0 $nhsuk-button-shadow-color; // s0
-  background-color: $nhsuk-button-color;
-  border: $nhsuk-border-width-form-element solid transparent;
-  border-radius: $button-border-radius;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  overflow: visible;
-  margin-top: 0;
-  padding: $button-padding-top-bottom-mobile $button-padding-left-right; // s2
-  position: relative;
-  text-align: center;
-  vertical-align: top;
-  width: auto;
-
-  @include nhsuk-font(19, $weight: bold);
-  @include nhsuk-responsive-margin(5, "bottom", $adjustment: $button-shadow-size); // s1
-
-  @include nhsuk-media-query($from: tablet) {
-    padding: $button-padding-top-bottom-desktop $button-padding-left-right; // s2
-  }
-
-  // [1]
-  &,
-  &:hover,
-  &:active {
-    text-decoration: none;
-
-    &,
-    &:visited {
-      color: $nhsuk-button-text-color;
-    }
-  }
-
-  // [2]
-  &::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-  }
-
-  &:hover {
-    background-color: $nhsuk-button-hover-color;
-  }
-
-  // Reset focus styles added to buttons as links
-  &:focus {
-    box-shadow: none;
-    outline: none;
-  }
-
-  // Add button focus styles ensuring the active "pressed" state has priority
-  &:focus:not(:active),
-  &:focus:not(:active):hover {
-    @include nhsuk-focused-button;
-
-    // stylelint-disable-next-line no-duplicate-selectors
-    & {
-      // Set shadow below the button [4]
-      box-shadow: 0 $button-shadow-size 0 $nhsuk-focus-text-color; // s0
-    }
-  }
-
-  // Remove button shadow when pressed
-  &:active,
-  &:active:focus {
-    box-shadow: none;
-    background-color: $nhsuk-button-active-color;
-    top: $button-shadow-size;
-  }
-
-  // Default pseudo element styles for [3] and [4] below
-  &::before,
-  &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: -$nhsuk-border-width-form-element;
-    right: -$nhsuk-border-width-form-element;
-    bottom: -$nhsuk-border-width-form-element;
-    left: -$nhsuk-border-width-form-element;
-    border-radius: $button-border-radius;
-  }
-
-  // Use a pseudo element to expand the click target area to include the
-  // button's shadow as well, in case users try to click it [3]
-  &::before {
-    bottom: -($nhsuk-border-width-form-element + $button-shadow-size);
-    border: $nhsuk-border-width-form-element solid transparent;
-    background-color: transparent;
-  }
-
-  // When the button is active it is shifted down by $button-shadow-size to
-  // denote a 'pressed' state. If the user happened to click at the very top
-  // of the button, their mouse is no longer over the button (because it has
-  // 'moved beneath them') and so the click event is not fired.
-  //
-  // This corrects that by shifting the top of the pseudo element so that it
-  // continues to cover the area that the user originally clicked, which means
-  // the click event is still fired.
-  &:active::before {
-    top: -($nhsuk-border-width-form-element + $button-shadow-size);
-    bottom: -$nhsuk-border-width-form-element;
-  }
-}
-
-/// Button variations
-
-.nhsuk-button--secondary,
-.nhsuk-button--secondary-solid {
-  &,
-  &:visited,
-  &:hover,
-  &:hover:visited,
-  &:active,
-  &:active:visited {
-    color: $nhsuk-secondary-button-text-color;
-  }
-
-  &:hover {
-    background-color: $nhsuk-secondary-button-hover-color;
-  }
-
-  // Set border for active state (no shadow)
-  &:active,
-  &:active:focus {
-    background-color: $nhsuk-secondary-button-active-color;
-    border-color: $nhsuk-secondary-button-border-color;
-    border-radius: $button-border-radius;
-  }
-
-  // Set border on click area for default and hover states which allows the
-  // border to render underneath the shadow and hide pixel artifacts, but
-  // ensuring the active "pressed" and focus states have priority [3]
-  &:not(:focus):not(:active)::before {
-    border-color: $nhsuk-secondary-button-border-color;
-  }
-
-  // Set shadow on both the button and the pseudo element. The button shadow
-  // remains in place to prevent any pixel gaps due to browser rounding [4]
-  &,
-  &::after {
-    box-shadow: 0 $button-shadow-size 0 $nhsuk-secondary-button-shadow-color; // s0
-  }
-
-  // Inset the pseudo element shadow away from the edges, to restore lost
-  // border radius (and its shadow) previously hidden by the 2px border [4]
-  &:not(:focus)::after {
-    left: 0;
-    right: 0;
-    border-radius: math.div($button-border-radius, 2);
-  }
-
-  // Remove the pseudo element shadow when focused or pressed
-  &:focus::after,
-  &:active::after {
-    box-shadow: none;
-  }
-}
-
-.nhsuk-button--secondary {
-  background-color: $nhsuk-secondary-button-color;
-}
-
-.nhsuk-button--secondary-solid {
-  background-color: $nhsuk-secondary-button-solid-background-color;
-}
-
-.nhsuk-button--reverse {
-  // Set shadow below the button [4]
-  box-shadow: 0 $button-shadow-size 0 $nhsuk-reverse-button-shadow-color; // s0
-  background-color: $nhsuk-reverse-button-color;
-
-  &,
-  &:visited,
-  &:hover,
-  &:hover:visited,
-  &:active,
-  &:active:visited {
-    color: $nhsuk-reverse-button-text-color;
-  }
-
-  &:hover {
-    background-color: $nhsuk-reverse-button-hover-color;
-  }
-
-  &:active,
-  &:active:focus {
-    background-color: $nhsuk-reverse-button-active-color;
-  }
-}
-
-.nhsuk-button--warning {
-  // Set shadow below the button [4]
-  box-shadow: 0 $button-shadow-size 0 $nhsuk-warning-button-shadow-color; // s0
-  background-color: $nhsuk-warning-button-color;
-
-  &:hover {
-    background-color: $nhsuk-warning-button-hover-color;
-  }
-
-  &:active,
-  &:active:focus {
-    background-color: $nhsuk-warning-button-active-color;
-  }
-}
-
-.nhsuk-button--login {
-  // Set shadow below the button [4]
-  box-shadow: 0 $button-shadow-size 0 $nhsuk-login-button-shadow-color; // s0
-  background-color: $nhsuk-login-button-color;
-
-  &:hover {
-    background-color: $nhsuk-login-button-hover-color;
-  }
-
-  &:active,
-  &:active:focus {
-    background-color: $nhsuk-login-button-active-color;
-  }
-}
-
-/// Button disabled states
-
-.nhsuk-button--disabled,
-.nhsuk-button:disabled {
-  opacity: (0.5);
-  pointer-events: none;
-}

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

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