design_system 0.7.0

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

@@ -0,0 +1,77 @@
+@import "../tag/index";
+
+@include govuk-exports("govuk/component/task-list") {
+  $govuk-task-list-hover-colour: govuk-colour("light-grey");
+
+  .govuk-task-list {
+    @include govuk-font($size: 19);
+    margin-top: 0;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: 0;
+    list-style-type: none;
+  }
+
+  // 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.
+  .govuk-task-list__item {
+    display: table;
+    position: relative;
+    width: 100%;
+    margin-bottom: 0;
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(2);
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-task-list__item:first-child {
+    border-top: 1px solid $govuk-border-colour;
+  }
+
+  // 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.
+  .govuk-task-list__item--with-link:hover {
+    background: $govuk-task-list-hover-colour;
+  }
+
+  .govuk-task-list__name-and-hint {
+    display: table-cell;
+    vertical-align: top;
+    @include govuk-text-colour;
+  }
+
+  .govuk-task-list__status {
+    display: table-cell;
+    padding-left: govuk-spacing(2);
+    text-align: right;
+    vertical-align: top;
+    @include govuk-text-colour;
+  }
+
+  .govuk-task-list__status--cannot-start-yet {
+    color: $govuk-secondary-text-colour;
+  }
+
+  // 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.
+  .govuk-task-list__link::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .govuk-task-list__hint {
+    margin-top: govuk-spacing(1);
+    color: $govuk-secondary-text-colour;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/task-list/_task-list.scss

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

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

@@ -0,0 +1,48 @@
+@import "../error-message/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/textarea") {
+  .govuk-textarea {
+    @include govuk-font($size: 19, $line-height: 1.25);
+
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    min-height: 40px;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: govuk-spacing(1);
+
+    resize: vertical;
+
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border-radius: 0;
+
+    -webkit-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` to do
+      // this instead of changing `border-width` (which changes element size)
+      // and since `outline` 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-textarea--error {
+    border-color: $govuk-error-colour;
+
+    &:focus {
+      border-color: $govuk-input-border-colour;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/textarea/_textarea.scss

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

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

@@ -0,0 +1,64 @@
+@include govuk-exports("govuk/component/warning-text") {
+  .govuk-warning-text {
+    @include govuk-font($size: 19);
+    @include govuk-responsive-margin(6, "bottom");
+    @include govuk-typography-weight-bold;
+    position: relative;
+    padding: govuk-spacing(2) 0;
+  }
+
+  .govuk-warning-text__icon {
+    box-sizing: border-box;
+
+    display: inline-block;
+
+    position: absolute;
+    left: 0;
+
+    min-width: 35px;
+    min-height: 35px;
+    margin-top: -7px;
+
+    @include govuk-media-query($from: tablet) {
+      margin-top: -5px;
+    }
+
+    // When a user customises their colours the background colour will often be
+    // removed. Adding a border to the component keeps it's shape as a circle.
+    border: 3px solid $govuk-text-colour;
+    border-radius: 50%;
+
+    color: $govuk-body-background-colour;
+    background: $govuk-text-colour;
+
+    font-size: 30px;
+    line-height: 29px;
+
+    text-align: center;
+
+    // Prevent the exclamation mark from being included when the warning text
+    // is copied, for example.
+    -webkit-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    // Improve rendering in Windows High Contrast Mode (Edge), where a
+    // readability backplate behind the exclamation mark obscures the circle
+    forced-color-adjust: none;
+
+    @media screen and (forced-colors: active) {
+      border-color: windowText;
+      color: windowText;
+      background: transparent;
+    }
+  }
+
+  .govuk-warning-text__text {
+    @include govuk-text-colour;
+    display: block;
+    padding-left: 45px;
+    // While `<strong>` is styled `bold` or `bolder` by user-agents
+    // this can be reset by the app's stylesheet
+    font-weight: inherit;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/warning-text/_warning-text.scss

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

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/core/_all.scss

@@ -0,0 +1,8 @@
+@import "../settings/warnings";
+@import "index";
+
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/core/all' is deprecated. Update your import statement to import 'govuk/core/index'.",
+  $silence-further-warnings: false
+);

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/core/_global-styles.scss

@@ -0,0 +1,18 @@
+@import "links";
+@import "typography";
+
+@mixin govuk-global-styles {
+  a {
+    @extend %govuk-link;
+  }
+
+  p {
+    @extend %govuk-body-m;
+  }
+}
+
+@include govuk-exports("govuk/core/global-styles") {
+  @if $govuk-global-styles == true {
+    @include govuk-global-styles;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/core/_govuk-frontend-properties.scss

@@ -0,0 +1,13 @@
+:root {
+  // This variable is automatically overwritten during builds and releases.
+  // It doesn't need to be updated manually.
+  --govuk-frontend-version: "5.11.1";
+
+  // CSS custom property for each breakpoint
+  @each $name, $value in $govuk-breakpoints {
+    --govuk-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
+
+    // Deprecated, use `--govuk-breakpoint-[name]` instead
+    --govuk-frontend-breakpoint-#{$name}: var(--govuk-breakpoint-#{$name});
+  }
+}

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

@@ -0,0 +1,6 @@
+@import "govuk-frontend-properties";
+@import "links";
+@import "lists";
+@import "typography";
+@import "section-break";
+@import "global-styles";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/core/_links.scss

@@ -0,0 +1,40 @@
+@include govuk-exports("govuk/core/links") {
+  %govuk-link {
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+    @include govuk-link-print-friendly;
+  }
+
+  .govuk-link {
+    @extend %govuk-link;
+  }
+
+  // Variant classes should always be used in conjunction with the .govuk-link
+  // class, so we do not need the common link styles as they will be inherited.
+
+  .govuk-link--muted {
+    @include govuk-link-style-muted;
+  }
+
+  .govuk-link--text-colour {
+    @include govuk-link-style-text;
+  }
+
+  .govuk-link--inverse {
+    @include govuk-link-style-inverse;
+  }
+
+  .govuk-link--no-underline {
+    @include govuk-link-style-no-underline;
+  }
+
+  .govuk-link--no-visited-state {
+    @include govuk-link-style-no-visited-state;
+  }
+
+  // Links that only contain images
+
+  .govuk-link-image {
+    @include govuk-link-image;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/core/_lists.scss

@@ -0,0 +1,65 @@
+@include govuk-exports("govuk/core/lists") {
+  %govuk-list {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    margin-top: 0;
+    @include govuk-responsive-margin(4, "bottom");
+    padding-left: 0;
+    list-style-type: none;
+
+    // Add a top margin for nested lists
+    %govuk-list {
+      margin-top: govuk-spacing(2);
+    }
+  }
+
+  %govuk-list > li {
+    // Lists without numbers or bullets should always have extra space between
+    // list items. Lists with numbers or bullets only have this extra space on
+    // tablet and above
+    margin-bottom: govuk-spacing(1);
+  }
+
+  .govuk-list {
+    @extend %govuk-list;
+  }
+
+  %govuk-list--bullet {
+    padding-left: govuk-spacing(4);
+    list-style-type: disc;
+  }
+
+  %govuk-list--number {
+    padding-left: govuk-spacing(4);
+    list-style-type: decimal;
+  }
+
+  %govuk-list--bullet > li,
+  %govuk-list--number > li {
+    margin-bottom: 0;
+
+    @include govuk-media-query($from: tablet) {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  %govuk-list--spaced > li {
+    margin-bottom: govuk-spacing(2);
+
+    @include govuk-media-query($from: tablet) {
+      margin-bottom: govuk-spacing(3);
+    }
+  }
+
+  .govuk-list--bullet {
+    @extend %govuk-list--bullet;
+  }
+
+  .govuk-list--number {
+    @extend %govuk-list--number;
+  }
+
+  .govuk-list--spaced {
+    @extend %govuk-list--spaced;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/core/_section-break.scss

@@ -0,0 +1,49 @@
+@include govuk-exports("govuk/core/section-break") {
+  %govuk-section-break {
+    margin: 0;
+    border: 0;
+  }
+
+  .govuk-section-break {
+    @extend %govuk-section-break;
+  }
+
+  // Sizes
+
+  %govuk-section-break--xl {
+    @include govuk-responsive-margin(8, "top");
+    @include govuk-responsive-margin(8, "bottom");
+  }
+
+  .govuk-section-break--xl {
+    @extend %govuk-section-break--xl;
+  }
+
+  %govuk-section-break--l {
+    @include govuk-responsive-margin(6, "top");
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-section-break--l {
+    @extend %govuk-section-break--l;
+  }
+
+  %govuk-section-break--m {
+    @include govuk-responsive-margin(4, "top");
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-section-break--m {
+    @extend %govuk-section-break--m;
+  }
+
+  // Visible variant
+
+  %govuk-section-break--visible {
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-section-break--visible {
+    @extend %govuk-section-break--visible;
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/core/_typography.scss

@@ -0,0 +1,187 @@
+@include govuk-exports("govuk/core/typography") {
+  // Headings
+
+  %govuk-heading-xl {
+    @include govuk-text-colour;
+    @include govuk-font($size: 48, $weight: bold);
+
+    display: block;
+
+    margin-top: 0;
+    @include govuk-responsive-margin(8, "bottom");
+  }
+
+  .govuk-heading-xl {
+    @extend %govuk-heading-xl;
+  }
+
+  %govuk-heading-l {
+    @include govuk-text-colour;
+    @include govuk-font($size: 36, $weight: bold);
+
+    display: block;
+
+    margin-top: 0;
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-heading-l {
+    @extend %govuk-heading-l;
+  }
+
+  %govuk-heading-m {
+    @include govuk-text-colour;
+    @include govuk-font($size: 24, $weight: bold);
+
+    display: block;
+
+    margin-top: 0;
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-heading-m {
+    @extend %govuk-heading-m;
+  }
+
+  %govuk-heading-s {
+    @include govuk-text-colour;
+    @include govuk-font($size: 19, $weight: bold);
+
+    display: block;
+
+    margin-top: 0;
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-heading-s {
+    @extend %govuk-heading-s;
+  }
+
+  // Captions to be used inside headings
+
+  .govuk-caption-xl {
+    @include govuk-font($size: 27);
+
+    display: block;
+
+    margin-bottom: govuk-spacing(1);
+
+    color: $govuk-secondary-text-colour;
+  }
+
+  .govuk-caption-l {
+    @include govuk-font($size: 24);
+
+    display: block;
+
+    margin-bottom: govuk-spacing(1);
+    color: $govuk-secondary-text-colour;
+
+    @include govuk-media-query($from: tablet) {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-caption-m {
+    @include govuk-font($size: 19);
+
+    display: block;
+
+    color: $govuk-secondary-text-colour;
+  }
+
+  // Body (paragraphs)
+
+  %govuk-body-l {
+    @include govuk-text-colour;
+    @include govuk-font($size: 24);
+
+    margin-top: 0;
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-body-l {
+    @extend %govuk-body-l;
+  }
+
+  %govuk-body-m {
+    @include govuk-text-colour;
+    @include govuk-font($size: 19);
+
+    margin-top: 0;
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-body-m {
+    @extend %govuk-body-m;
+  }
+
+  %govuk-body-s {
+    @include govuk-text-colour;
+    @include govuk-font($size: 16);
+
+    margin-top: 0;
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-body-s {
+    @extend %govuk-body-s;
+  }
+
+  // @deprecated
+  %govuk-body-xs {
+    @include govuk-text-colour;
+    @include govuk-font($size: _14);
+
+    margin-top: 0;
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  // @deprecated
+  .govuk-body-xs {
+    @extend %govuk-body-xs;
+  }
+
+  // Usage aliases
+
+  // Using extend to alias means we also inherit any contextual adjustments that
+  // refer to the 'original' class name
+
+  .govuk-body-lead {
+    @extend %govuk-body-l;
+  }
+
+  .govuk-body {
+    @extend %govuk-body-m;
+  }
+
+  // Contextual adjustments
+  // Add top padding to headings that appear directly after paragraphs.
+
+  %govuk-body-l + %govuk-heading-l {
+    padding-top: govuk-spacing(1);
+
+    @include govuk-media-query($from: tablet) {
+      padding-top: govuk-spacing(2);
+    }
+  }
+
+  %govuk-body-m + %govuk-heading-l,
+  %govuk-body-s + %govuk-heading-l,
+  %govuk-list + %govuk-heading-l {
+    @include govuk-responsive-padding(4, "top");
+  }
+
+  %govuk-body-m + %govuk-heading-m,
+  %govuk-body-s + %govuk-heading-m,
+  %govuk-list + %govuk-heading-m,
+  %govuk-body-m + %govuk-heading-s,
+  %govuk-body-s + %govuk-heading-s,
+  %govuk-list + %govuk-heading-s {
+    padding-top: govuk-spacing(1);
+
+    @include govuk-media-query($from: tablet) {
+      padding-top: govuk-spacing(2);
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/helpers/_all.scss

@@ -0,0 +1,8 @@
+@import "../settings/warnings";
+@import "index";
+
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/helpers/all' is deprecated. Update your import statement to import 'govuk/helpers/index'.",
+  $silence-further-warnings: false
+);

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/helpers/_clearfix.scss

@@ -0,0 +1,15 @@
+////
+/// @group helpers/layout
+////
+
+/// Clear floated content within a container using a pseudo element
+///
+/// @access public
+
+@mixin govuk-clearfix {
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}