design_system 0.7.0

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

@@ -0,0 +1,166 @@
+@import "../error-message/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/input") {
+  .govuk-input {
+    @include govuk-font($size: 19);
+
+    box-sizing: border-box;
+    width: 100%;
+    height: govuk-px-to-rem(40px);
+    margin-top: 0;
+    padding: govuk-spacing(1);
+    // Setting any background-color makes text invisible when changing colours
+    // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
+    // background-color and color need to always be set together, color should
+    // not be set either
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border-radius: 0;
+
+    // Disable inner shadow and remove rounded corners
+    -webkit-appearance: none;
+            appearance: none;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      // Double the border by adding its width again. Use `box-shadow` for this
+      // instead of changing `border-width` - this is for consistency with
+      // components such as textarea where we avoid changing `border-width` as
+      // it will change the element size. Also, `outline` cannot be utilised
+      // here as it is already used for the yellow focus state.
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      background-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+
+  .govuk-input::-webkit-outer-spin-button,
+  .govuk-input::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .govuk-input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  .govuk-input--error {
+    border-color: $govuk-error-colour;
+
+    &:focus {
+      border-color: $govuk-input-border-colour;
+    }
+  }
+
+  .govuk-input--extra-letter-spacing {
+    @include govuk-font-tabular-numbers;
+    letter-spacing: 0.05em;
+  }
+
+  // em measurements are based on the point size of the typeface
+  // Extra space is added on the right to allow for the Safari prefill icon
+
+  .govuk-input--width-30 {
+    max-width: 29.5em;
+  }
+
+  .govuk-input--width-20 {
+    max-width: 20.5em;
+  }
+
+  .govuk-input--width-10 {
+    max-width: 11.5em;
+  }
+
+  .govuk-input--width-5 {
+    max-width: 5.5em;
+  }
+
+  .govuk-input--width-4 {
+    max-width: 4.5em;
+  }
+
+  .govuk-input--width-3 {
+    max-width: 3.75em;
+  }
+
+  .govuk-input--width-2 {
+    max-width: 2.75em;
+  }
+
+  .govuk-input__wrapper {
+    display: flex;
+
+    .govuk-input {
+      flex: 0 1 auto;
+    }
+
+    .govuk-input:focus {
+      // Hack to stop focus style being overlapped by the suffix
+      z-index: 1;
+    }
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include govuk-media-query($until: mobile) {
+      display: block;
+
+      .govuk-input {
+        // Set max-width to override potential width override class on the input
+        max-width: 100%;
+      }
+    }
+  }
+
+  .govuk-input__prefix,
+  .govuk-input__suffix {
+    @include govuk-font($size: 19);
+    box-sizing: border-box;
+    // Use flexbox to align text within the prefix and suffix
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: govuk-px-to-rem(40px);
+    height: govuk-px-to-rem(40px);
+    padding: govuk-spacing(1);
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    background-color: govuk-colour("light-grey");
+    text-align: center;
+    white-space: nowrap;
+    // Emphasise non-editable status of prefixes and suffixes
+    cursor: default;
+    flex: 0 0 auto;
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include govuk-media-query($until: mobile) {
+      display: block;
+      height: 100%;
+      white-space: normal;
+    }
+  }
+
+  .govuk-input__prefix {
+    @include govuk-media-query($until: mobile) {
+      border-bottom: 0;
+    }
+    @include govuk-media-query($from: mobile) {
+      border-right: 0;
+    }
+  }
+
+  // Split prefix/suffix onto separate lines on narrow screens
+  .govuk-input__suffix {
+    @include govuk-media-query($until: mobile) {
+      border-top: 0;
+    }
+    @include govuk-media-query($from: mobile) {
+      border-left: 0;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/input/_input.scss

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

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

@@ -0,0 +1,24 @@
+@include govuk-exports("govuk/component/inset-text") {
+  .govuk-inset-text {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    padding: govuk-spacing(3);
+    // Margin top intended to collapse
+    // This adds an additional 10px to the paragraph above
+    @include govuk-responsive-margin(6, "top");
+    @include govuk-responsive-margin(6, "bottom");
+
+    clear: both;
+
+    border-left: $govuk-border-width-wide solid $govuk-border-colour;
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :only-child,
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/inset-text/_inset-text.scss

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

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

@@ -0,0 +1,44 @@
+@include govuk-exports("govuk/component/label") {
+  .govuk-label {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    display: block;
+
+    margin-bottom: govuk-spacing(1);
+  }
+
+  // Modifiers that make labels look more like their equivalent headings
+  .govuk-label--xl,
+  .govuk-label--l,
+  .govuk-label--m {
+    @include govuk-typography-weight-bold;
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-label--xl {
+    @include govuk-font-size($size: 48);
+  }
+
+  .govuk-label--l {
+    @include govuk-font-size($size: 36);
+  }
+
+  .govuk-label--m {
+    @include govuk-font-size($size: 24);
+  }
+
+  .govuk-label--s {
+    @include govuk-typography-weight-bold;
+  }
+
+  // When the label is nested inside a heading, override the heading so that it
+  // does not have a margin. Effectively we want to be able to treat the heading
+  // as if it is not there.
+  //
+  // This breaks BEM conventions because it exists as a parent of the 'block',
+  // so we can't really consider an element.
+  .govuk-label-wrapper {
+    margin: 0;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/label/_label.scss

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

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

@@ -0,0 +1,91 @@
+@include govuk-exports("govuk/component/notification-banner") {
+  .govuk-notification-banner {
+    @include govuk-font($size: 19);
+    @include govuk-responsive-margin(8, "bottom");
+
+    border: $govuk-border-width solid $govuk-brand-colour;
+
+    background-color: $govuk-brand-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+    }
+  }
+
+  .govuk-notification-banner__header {
+    padding: 2px govuk-spacing(3) govuk-spacing(1);
+
+    // Ensures the notification header appears separate to the notification body
+    // text in high contrast mode
+    border-bottom: 1px solid transparent;
+
+    @include govuk-media-query($from: tablet) {
+      padding: 2px govuk-spacing(4) govuk-spacing(1);
+    }
+  }
+
+  .govuk-notification-banner__title {
+    // Set the size again because this element is a heading and the user agent
+    // font size overrides the inherited font size
+    @include govuk-font-size($size: 19);
+    @include govuk-typography-weight-bold;
+    margin: 0;
+    padding: 0;
+    color: govuk-colour("white");
+  }
+
+  .govuk-notification-banner__content {
+    $padding-tablet: govuk-spacing(4);
+    @include govuk-text-colour;
+    padding: govuk-spacing(3);
+
+    background-color: $govuk-body-background-colour;
+
+    @include govuk-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: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);
+
+      // ...and then factor in the left border and padding
+      $banner-exterior: ($padding-tablet + $govuk-border-width);
+      max-width: $two-col-width - $banner-exterior;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-notification-banner__heading {
+    @include govuk-font-size($size: 24);
+    @include govuk-typography-weight-bold;
+
+    margin: 0 0 govuk-spacing(3);
+
+    padding: 0;
+  }
+
+  .govuk-notification-banner__link {
+    @include govuk-link-common;
+    @include govuk-link-style-no-visited-state;
+  }
+
+  .govuk-notification-banner--success {
+    border-color: $govuk-success-colour;
+
+    background-color: $govuk-success-colour;
+
+    .govuk-notification-banner__link {
+      @include govuk-link-style-success;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/notification-banner/_notification-banner.scss

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

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

@@ -0,0 +1,226 @@
+@include govuk-exports("govuk/component/pagination") {
+  // Flexbox enhancement for small screen visual design
+  // Falls back to a float: left layout on non-flex browsers
+  .govuk-pagination {
+    @include govuk-responsive-margin(6, "bottom");
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+
+    @include govuk-media-query($from: tablet) {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+  }
+
+  .govuk-pagination__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .govuk-pagination__item,
+  .govuk-pagination__next,
+  .govuk-pagination__prev {
+    @include govuk-font(19);
+    box-sizing: border-box;
+    position: relative;
+    min-width: 45px;
+    min-height: 45px;
+    padding: govuk-spacing(2) govuk-spacing(3);
+    float: left; // Float is ignored if flex is active for prev/next links
+
+    &:hover {
+      background-color: govuk-colour("light-grey");
+    }
+  }
+
+  .govuk-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 govuk-media-query($from: tablet) {
+      display: block;
+    }
+  }
+
+  .govuk-pagination__prev,
+  .govuk-pagination__next {
+    @include govuk-typography-weight-bold;
+
+    // Use flex to avoid extra space being introduced when whitespace exists
+    // between the arrow svg and the link text
+    .govuk-pagination__link {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .govuk-pagination__prev {
+    padding-left: 0;
+  }
+
+  .govuk-pagination__next {
+    padding-right: 0;
+  }
+
+  // Only show first, last and non-link items on mobile
+  .govuk-pagination__item--current,
+  .govuk-pagination__item--ellipses,
+  .govuk-pagination__item:first-child,
+  .govuk-pagination__item:last-child {
+    display: block;
+  }
+
+  .govuk-pagination__item--current {
+    @include govuk-typography-weight-bold;
+    outline: 1px solid transparent;
+    background-color: $govuk-link-colour;
+
+    &:hover {
+      background-color: $govuk-link-colour;
+    }
+
+    .govuk-pagination__link {
+      @include govuk-link-style-inverse;
+    }
+  }
+
+  .govuk-pagination__item--ellipses {
+    @include govuk-typography-weight-bold;
+    color: $govuk-secondary-text-colour;
+
+    // Remove hover state for ellipsis items as they don't contain links
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .govuk-pagination__link {
+    display: block;
+    min-width: govuk-spacing(3);
+
+    // 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;
+      }
+    }
+
+    // Add link hover decoration to prev/next text if no label present on
+    // prev/next only mode,  so that we have a hover state in all cases
+    &:hover,
+    &:active {
+      .govuk-pagination__link-title--decorated {
+        @include govuk-link-decoration;
+      }
+
+      .govuk-pagination__link-label,
+      .govuk-pagination__link-title--decorated {
+        @include govuk-link-hover-decoration;
+      }
+    }
+
+    &:focus {
+      .govuk-pagination__icon {
+        color: $govuk-focus-text-colour;
+      }
+
+      .govuk-pagination__link-label {
+        text-decoration: none;
+      }
+
+      .govuk-pagination__link-title--decorated {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .govuk-pagination__link-label {
+    @include govuk-typography-weight-regular;
+    @include govuk-link-decoration;
+    display: inline-block;
+  }
+
+  .govuk-pagination__icon {
+    // Set size using rems to make the icon scale with text
+    width: govuk-px-to-rem(15px);
+    height: govuk-px-to-rem(13px);
+    color: $govuk-secondary-text-colour;
+    fill: currentcolor;
+    forced-color-adjust: auto;
+  }
+
+  .govuk-pagination__icon--prev {
+    margin-right: govuk-spacing(3);
+  }
+
+  .govuk-pagination__icon--next {
+    margin-left: govuk-spacing(3);
+  }
+
+  // Block mode - position previous and next links above and below numbers
+  .govuk-pagination--block {
+    display: block;
+
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
+      padding-left: 0;
+      float: none;
+
+      .govuk-pagination__link {
+        display: inline-block;
+      }
+    }
+
+    .govuk-pagination__next {
+      padding-right: govuk-spacing(3);
+    }
+
+    // Only apply a border between prev and next if both are present
+    .govuk-pagination__prev + .govuk-pagination__next {
+      border-top: 1px solid $govuk-border-colour;
+    }
+
+    // Set the after pseudo element to a block which makes the title visually
+    // display as block level whilst programmatically being inline. We do this
+    // to get around an NVDA quirk where adjacent block level elements are
+    // always read out separately
+    .govuk-pagination__link-title::after {
+      content: "";
+      display: block;
+    }
+
+    .govuk-pagination__link {
+      padding-left: govuk-spacing(6);
+      text-align: left;
+
+      &:not(:focus) {
+        text-decoration: none;
+      }
+    }
+
+    .govuk-pagination__icon {
+      // This magic number is brought to you by the following equation:
+      // ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
+      // ((25 − 13) ÷ 2) ÷ 19 = 0.326em
+      //
+      // This could have been done programmatically but we don't have functions
+      // for grabbing the line-height of specific typography sizes just yet.
+      margin-top: 0.326em;
+      margin-left: govuk-spacing(6) * -1;
+      float: left;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/pagination/_pagination.scss

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

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

@@ -0,0 +1,56 @@
+@include govuk-exports("govuk/component/panel") {
+  .govuk-panel {
+    @include govuk-font($size: 36);
+
+    box-sizing: border-box;
+
+    margin-bottom: govuk-spacing(3);
+    padding: govuk-spacing(7) - $govuk-border-width;
+
+    border: $govuk-border-width solid transparent;
+
+    text-align: center;
+
+    @include govuk-media-query($until: tablet) {
+      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
+
+      // 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 the text remains legible.
+      overflow-wrap: break-word;
+
+      // Support IE (autoprefixer doesn't add this as it's not a prefix)
+      word-wrap: break-word;
+    }
+  }
+
+  .govuk-panel--confirmation {
+    color: govuk-colour("white");
+    background: govuk-colour("green");
+
+    @include govuk-media-query($media-type: print) {
+      border-color: currentcolor;
+      color: $govuk-print-text-colour;
+      background: none;
+    }
+  }
+
+  .govuk-panel__title {
+    @include govuk-font-size($size: 48);
+    @include govuk-typography-weight-bold;
+    margin-top: 0;
+    margin-bottom: govuk-spacing(6);
+  }
+
+  .govuk-panel__title:last-child {
+    margin-bottom: 0;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/panel/_panel.scss

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

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

@@ -0,0 +1,55 @@
+@import "../button/index";
+@import "../input/index";
+
+@include govuk-exports("govuk/component/password-input") {
+  .govuk-password-input__wrapper {
+    // This element inherits styles from .govuk-input__wrapper, including:
+    // - being display: block with contents in a stacked column below the mobile
+    //   breakpoint
+    // - being display: flex above the mobile breakpoint
+
+    @include govuk-media-query($from: mobile) {
+      flex-direction: row;
+
+      // The default of `stretch` makes the toggle button appear taller than the
+      // input, due to using box-shadow, which we don't particularly want in
+      // this situation
+      align-items: flex-start;
+    }
+  }
+
+  .govuk-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;
+    }
+  }
+
+  .govuk-password-input__toggle {
+    // Add top margin so the button doesn't obscure the input's focus style
+    margin-top: govuk-spacing(1);
+
+    // Remove default margin-bottom from button
+    margin-bottom: 0;
+
+    // Hide the button by default, JS removes this attribute
+    &[hidden] {
+      display: none;
+    }
+
+    @include govuk-media-query($from: mobile) {
+      // Buttons are normally 100% wide on mobile, but we don't want that here
+      width: auto;
+      flex-shrink: 0;
+      flex-basis: 5em;
+
+      // Move the spacing from top to the left
+      margin-top: 0;
+      margin-left: govuk-spacing(1);
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/password-input/_password-input.scss

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