design_system 0.7.0

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/breadcrumbs/_index.scss

@@ -0,0 +1,132 @@
+@include govuk-exports("govuk/component/breadcrumbs") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-size: 16;
+
+  // Size of chevron (excluding border)
+  $chevron-size: govuk-em(7px, $font-size);
+
+  // Size of chevron border
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
+
+  // Colour of chevron
+  $chevron-border-colour: $govuk-secondary-text-colour;
+
+  // Calculated altitude (△↕) of the right-angled isosceles chevron with sides
+  // of length 8 (7px + 1px border):
+  //
+  // √(8² + 8²) * 0.5 ≅ 5.655
+  $chevron-altitude-calculated: govuk-em(5.655px, $font-size);
+
+  .govuk-breadcrumbs {
+    @include govuk-font($size: $font-size);
+    @include govuk-text-colour;
+
+    margin-top: govuk-spacing(3);
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-breadcrumbs__list {
+    @include govuk-clearfix;
+
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .govuk-breadcrumbs__list-item {
+    display: inline-block;
+    position: relative;
+
+    margin-bottom: govuk-spacing(1);
+
+    // Add both margin and padding such that the chevron appears centrally
+    // between each breadcrumb item
+    margin-left: govuk-em(govuk-spacing(2), $font-size);
+    padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;
+
+    float: left;
+
+    // Create a chevron using a box with borders on two sides, rotated 45deg.
+    &::before {
+      content: "";
+      display: block;
+
+      position: absolute;
+      top: 0;
+      bottom: 0;
+
+      // Offset by the difference between the width of the non-rotated square
+      // and its width when rotated
+      left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width);
+
+      width: $chevron-size;
+      height: $chevron-size;
+
+      margin: auto 0;
+
+      transform: rotate(45deg);
+
+      border: solid;
+      border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
+      border-color: $chevron-border-colour;
+
+      @supports (border-width: unquote("max(0px)")) {
+        $border-width-eval: "max(#{$chevron-border-min-width}, #{$chevron-border-width})";
+
+        // Ensure that the chevron never gets smaller than 16px
+        border-width: unquote($border-width-eval) unquote($border-width-eval) 0 0;
+        font-size: unquote("max(#{$font-size * 1px}, 1em)");
+      }
+    }
+
+    &:first-child {
+      margin-left: 0;
+      padding-left: 0;
+
+      &::before {
+        content: none;
+        display: none;
+      }
+    }
+  }
+
+  .govuk-breadcrumbs__link {
+    @include govuk-link-common;
+    @include govuk-link-style-text;
+  }
+
+  .govuk-breadcrumbs--collapse-on-mobile {
+    @include govuk-media-query($until: tablet) {
+      .govuk-breadcrumbs__list-item {
+        display: none;
+
+        &:first-child,
+        &:last-child {
+          display: inline-block;
+        }
+
+        &::before {
+          top: govuk-em(6px, $font-size);
+          margin: 0;
+        }
+      }
+
+      .govuk-breadcrumbs__list {
+        display: flex;
+      }
+    }
+  }
+
+  .govuk-breadcrumbs--inverse {
+    color: govuk-colour("white");
+
+    .govuk-breadcrumbs__link {
+      @include govuk-link-style-inverse;
+    }
+
+    .govuk-breadcrumbs__list-item::before {
+      border-color: currentcolor;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/button/_button.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/button/_index.scss

@@ -0,0 +1,260 @@
+////
+/// @group components/button
+////
+
+/// Button component background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-button-background-colour: govuk-colour("green") !default;
+
+/// Button component text colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-button-text-colour: govuk-colour("white") !default;
+
+/// Inverted button component background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-inverse-button-background-colour: govuk-colour("white") !default;
+
+/// Inverted button component text colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-inverse-button-text-colour: $govuk-brand-colour !default;
+
+@include govuk-exports("govuk/component/button") {
+  $govuk-button-colour: $govuk-button-background-colour;
+  $govuk-button-text-colour: $govuk-button-text-colour;
+  $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
+  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
+
+  // Secondary button variables
+  $govuk-secondary-button-colour: govuk-colour("light-grey");
+  $govuk-secondary-button-text-colour: govuk-colour("black");
+  $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
+  $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
+
+  // Warning button variables
+  $govuk-warning-button-colour: govuk-colour("red");
+  $govuk-warning-button-text-colour: govuk-colour("white");
+  $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
+  $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
+
+  // Inverse button variables
+  $govuk-inverse-button-colour: $govuk-inverse-button-background-colour;
+  $govuk-inverse-button-text-colour: $govuk-inverse-button-text-colour;
+  $govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%);
+  $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);
+
+  // 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 (s1) and
+  // increase the bottom margin to include it (s2).
+  $button-shadow-size: $govuk-border-width-form-element;
+
+  .govuk-button {
+    @include govuk-font($size: 19, $line-height: 19px);
+
+    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
+    @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
+    padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2)
+      (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
+    border: $govuk-border-width-form-element solid transparent;
+    border-radius: 0;
+    color: $govuk-button-text-colour;
+    background-color: $govuk-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+    text-align: center;
+    vertical-align: top;
+    cursor: pointer;
+    -webkit-appearance: none;
+
+    @include govuk-media-query($from: tablet) {
+      width: auto;
+    }
+
+    // Ensure that any global link styles are overridden
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-button-text-colour;
+      text-decoration: none;
+    }
+
+    // Fix unwanted button padding in Firefox
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+
+    &:hover {
+      background-color: $govuk-button-hover-colour;
+    }
+
+    &:active {
+      // Bump the button down so it looks like its being pressed in
+      top: $button-shadow-size;
+    }
+
+    &:focus {
+      border-color: $govuk-focus-colour;
+      outline: $govuk-focus-width solid transparent;
+      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+    }
+
+    &:focus:not(:active):not(:hover) {
+      border-color: $govuk-focus-colour;
+      color: $govuk-focus-text-colour;
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 2px 0 $govuk-focus-text-colour;
+    }
+
+    // The following adjustments do not work for <input type="button"> as
+    // non-container elements cannot include pseudo elements (i.e. ::before).
+
+    // 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.
+    &::before {
+      content: "";
+      display: block;
+
+      position: absolute;
+
+      top: -$govuk-border-width-form-element;
+      right: -$govuk-border-width-form-element;
+      bottom: -($govuk-border-width-form-element + $button-shadow-size);
+      left: -$govuk-border-width-form-element;
+
+      background: 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: -($govuk-border-width-form-element + $button-shadow-size);
+    }
+  }
+
+  .govuk-button[disabled] {
+    opacity: (0.5);
+
+    &:hover {
+      background-color: $govuk-button-colour;
+      cursor: not-allowed;
+    }
+
+    &:active {
+      top: 0;
+      box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+    }
+  }
+
+  .govuk-button--secondary {
+    background-color: $govuk-secondary-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-secondary-button-text-colour;
+    }
+
+    &:hover {
+      background-color: $govuk-secondary-button-hover-colour;
+
+      &[disabled] {
+        background-color: $govuk-secondary-button-colour;
+      }
+    }
+  }
+
+  .govuk-button--warning {
+    background-color: $govuk-warning-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-warning-button-text-colour;
+    }
+
+    &:hover {
+      background-color: $govuk-warning-button-hover-colour;
+
+      &[disabled] {
+        background-color: $govuk-warning-button-colour;
+      }
+    }
+  }
+
+  .govuk-button--inverse {
+    background-color: $govuk-inverse-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-inverse-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-inverse-button-text-colour;
+    }
+
+    &:hover {
+      background-color: $govuk-inverse-button-hover-colour;
+
+      &[disabled] {
+        background-color: $govuk-inverse-button-colour;
+      }
+    }
+  }
+
+  .govuk-button--start {
+    @include govuk-typography-weight-bold;
+    @include govuk-font-size($size: 24, $line-height: 1);
+
+    display: inline-flex;
+    min-height: auto;
+
+    justify-content: center;
+  }
+
+  .govuk-button__start-icon {
+    margin-left: govuk-spacing(1);
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(2);
+    }
+    vertical-align: middle;
+    flex-shrink: 0;
+    align-self: center;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/character-count/_character-count.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/character-count/_index.scss

@@ -0,0 +1,42 @@
+@import "../error-message/index";
+@import "../hint/index";
+@import "../label/index";
+@import "../textarea/index";
+
+@include govuk-exports("govuk/component/character-count") {
+  .govuk-character-count {
+    @include govuk-responsive-margin(6, "bottom");
+
+    .govuk-form-group,
+    .govuk-textarea {
+      margin-bottom: govuk-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.
+    .govuk-textarea--error:focus {
+      border-color: $govuk-error-colour;
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element $govuk-error-colour;
+    }
+  }
+
+  .govuk-character-count__message {
+    @include govuk-font-tabular-numbers;
+    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 `govuk-font` call above
+      // - using `:empty` is not possible as the hint macro outputs line breaks
+      content: "\200B";
+    }
+  }
+
+  .govuk-character-count__message--disabled {
+    visibility: hidden;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/checkboxes/_checkboxes.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";