dxw_govuk_frontend_rails 3.14.0 → 4.6.0

data/vendor/assets/stylesheets/components/summary-list/_index.scss

@@ -6,21 +6,40 @@
       display: table;
       width: 100%;
       table-layout: fixed; // Required to allow us to wrap words that overflow.
+      border-collapse: collapse;
     }
     margin: 0; // Reset default user agent styles
     @include govuk-responsive-margin(6, "bottom");
   }
 
   .govuk-summary-list__row {
+    border-bottom: 1px solid $govuk-border-colour;
+
     @include govuk-media-query($until: tablet) {
       margin-bottom: govuk-spacing(3);
-      border-bottom: 1px solid $govuk-border-colour;
     }
     @include govuk-media-query($from: tablet) {
       display: table-row;
     }
   }
 
+  // Remove right padding from the last column in the row
+  .govuk-summary-list__row:not(.govuk-summary-list__row--no-actions) > :last-child {
+    padding-right: 0;
+  }
+
+  // Provide an empty 'cell' for rows that don't have actions – otherwise the
+  // bottom border is not drawn for that part of the row in some browsers.
+  .govuk-summary-list__row--no-actions {
+    @include govuk-media-query($from: tablet) {
+      &:after {
+        content: "";
+        display: table-cell;
+        width: 20%;
+      }
+    }
+  }
+
   .govuk-summary-list__key,
   .govuk-summary-list__value,
   .govuk-summary-list__actions {
@@ -31,7 +50,6 @@
       padding-top: govuk-spacing(2);
       padding-right: govuk-spacing(4);
       padding-bottom: govuk-spacing(2);
-      border-bottom: 1px solid $govuk-border-colour;
     }
   }
 
@@ -39,7 +57,7 @@
     margin-bottom: govuk-spacing(3);
     @include govuk-media-query($from: tablet) {
       width: 20%;
-      padding-right: 0;
+      padding-right: 0; // Needed for IE8
       text-align: right;
     }
   }
@@ -63,16 +81,6 @@
     @include govuk-media-query($until: tablet) {
       margin-bottom: govuk-spacing(3);
     }
-    @include govuk-media-query($from: tablet) {
-      width: 50%;
-    }
-  }
-
-  // Expand width when value is last column (no action)
-  .govuk-summary-list__value:last-child {
-    @include govuk-media-query($from: tablet) {
-      width: 70%;
-    }
   }
 
   .govuk-summary-list__value > p {
@@ -90,56 +98,179 @@
   }
 
   .govuk-summary-list__actions-list-item {
-    display: inline;
-    margin-right: govuk-spacing(2);
-    padding-right: govuk-spacing(2);
+    display: inline-block;
   }
 
   // In older browsers such as IE8, :last-child is not available,
   // so only show the border divider where it is available.
-  .govuk-summary-list__actions-list-item:not(:last-child) {
-    border-right: 1px solid $govuk-border-colour;
+  @include govuk-media-query($until: tablet) {
+    .govuk-summary-list__actions-list-item {
+      margin-right: govuk-spacing(2);
+      padding-right: govuk-spacing(2);
+    }
+
+    .govuk-summary-list__actions-list-item:not(:last-child) {
+      border-right: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:last-child {
+      margin-right: 0;
+      padding-right: 0;
+      border: 0;
+    }
   }
 
-  .govuk-summary-list__actions-list-item:last-child {
-    margin-right: 0;
-    padding-right: 0;
-    border: 0;
+  @include govuk-media-query($from: tablet) {
+    .govuk-summary-list__actions-list-item {
+      margin-left: govuk-spacing(2);
+      padding-left: govuk-spacing(2);
+    }
+
+    .govuk-summary-list__actions-list-item:not(:first-child) {
+      border-left: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:first-child {
+      margin-left: 0;
+      padding-left: 0;
+      border: 0;
+    }
   }
 
   // No border on entire summary list
   .govuk-summary-list--no-border {
-    @include govuk-media-query($until: tablet) {
-      .govuk-summary-list__row {
-        border: 0;
-      }
+    .govuk-summary-list__row {
+      border: 0;
     }
 
+    // Increase padding by 1px to compensate for 'missing' border
     @include govuk-media-query($from: tablet) {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
-        // Remove 1px border, add 1px height back on
         padding-bottom: govuk-spacing(2) + 1px;
-        border: 0;
       }
     }
   }
 
   // No border on specific rows
   .govuk-summary-list__row--no-border {
-    @include govuk-media-query($until: tablet) {
-      border: 0;
-    }
+    border: 0;
 
+    // Increase padding by 1px to compensate for 'missing' border
     @include govuk-media-query($from: tablet) {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
-        // Remove 1px border, add 1px height back on
         padding-bottom: govuk-spacing(2) + 1px;
-        border: 0;
       }
     }
   }
+
+  // Additional block for the summary card
+  .govuk-summary-card {
+    @include govuk-responsive-margin(6, "bottom");
+    border: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-summary-card__title-wrapper {
+    padding: govuk-spacing(3);
+
+    // Ensures the card header appears separate to the summary list in forced colours mode
+    border-bottom: 1px solid transparent;
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+
+    @include govuk-media-query($from: "tablet") {
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+      padding: govuk-spacing(3) govuk-spacing(4);
+    }
+  }
+
+  .govuk-summary-card__title {
+    @include govuk-font($size: 19, $weight: bold);
+    margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
+
+    @include govuk-media-query($from: "tablet") {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  .govuk-summary-card__actions {
+    @include govuk-font($size: 19, $weight: bold);
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    row-gap: 10px;
+    margin: govuk-spacing(1) 0;
+    padding: 0;
+    list-style: none;
+
+    @include govuk-media-query($from: "tablet") {
+      -ms-flex-pack: right;
+          justify-content: right;
+      text-align: right;
+    }
+  }
+
+  .govuk-summary-card__action {
+    display: inline;
+    margin: 0 govuk-spacing(2) 0 0;
+    padding-right: govuk-spacing(2);
+    border-right: 1px solid $govuk-border-colour;
+
+    @include govuk-media-query($from: "tablet") {
+      margin-right: 0;
+    }
+
+    // We use the following media query to target IE11 and 10 only to add margin
+    // between actions.
+    //
+    // We do this because we're using row-gap to create space between actions on
+    // more evergreen browsers which IE doesn't support. @supports currently isn't
+    // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.
+    //
+    // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
+    // which also includes an explanation of why this works
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  .govuk-summary-card__action:last-child {
+    margin: 0;
+    padding-right: 0;
+    border-right: none;
+
+    @include govuk-media-query($from: "tablet") {
+      padding-left: govuk-spacing(2);
+    }
+
+    // See above comment for why this is here
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-summary-card__content {
+    padding: govuk-spacing(3) govuk-spacing(3) 0;
+
+    @include govuk-media-query($from: "tablet") {
+      padding: govuk-spacing(3) govuk-spacing(4);
+    }
+
+    .govuk-summary-list {
+      margin-bottom: 0;
+    }
+
+    .govuk-summary-list__row:last-of-type {
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+  }
 }

data/vendor/assets/stylesheets/components/table/_index.scss

@@ -21,7 +21,7 @@
     vertical-align: top;
     // GOV.UK Elements sets the font-size and line-height for all headers and cells
     // in tables.
-    @include govuk-compatibility(govuk_elements) {
+    @include _govuk-compatibility(govuk_elements) {
       font-size: inherit;
       line-height: inherit;
     }

data/vendor/assets/stylesheets/components/tabs/_index.scss

@@ -24,7 +24,7 @@
     &:before {
       @include govuk-text-colour;
       content: "\2014 "; // "— "
-      margin-left: - govuk-spacing(5);
+      margin-left: govuk-spacing(-5);
       padding-right: govuk-spacing(1);
     }
   }
@@ -77,7 +77,7 @@
 
         position: relative;
 
-        margin-top: - govuk-spacing(1);
+        margin-top: govuk-spacing(-1);
 
         // Compensation for border (otherwise we get a shift)
         margin-bottom: -$border-width;

data/vendor/assets/stylesheets/components/tag/_index.scss

@@ -34,53 +34,48 @@
     }
   }
 
-  // Deprecated. We'll remove this class in a future release. Use `.govuk-tag--grey` instead.
-  .govuk-tag--inactive {
-    background-color: govuk-colour("dark-grey", $legacy: "grey-1");
-  }
-
   .govuk-tag--grey {
-    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
-    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
+    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30%);
+    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90%);
   }
 
   .govuk-tag--purple {
-    color: govuk-shade(govuk-colour("purple"), 20);
-    background: govuk-tint(govuk-colour("purple"), 80);
+    color: govuk-shade(govuk-colour("purple"), 20%);
+    background: govuk-tint(govuk-colour("purple"), 80%);
   }
 
   .govuk-tag--turquoise {
-    color: govuk-shade(govuk-colour("turquoise"), 60);
-    background: govuk-tint(govuk-colour("turquoise"), 70);
+    color: govuk-shade(govuk-colour("turquoise"), 60%);
+    background: govuk-tint(govuk-colour("turquoise"), 70%);
   }
 
   .govuk-tag--blue {
-    color: govuk-shade(govuk-colour("blue"), 30);
-    background: govuk-tint(govuk-colour("blue"), 80);
+    color: govuk-shade(govuk-colour("blue"), 30%);
+    background: govuk-tint(govuk-colour("blue"), 80%);
   }
 
   .govuk-tag--yellow {
-    color: govuk-shade(govuk-colour("yellow"), 65);
-    background: govuk-tint(govuk-colour("yellow"), 75);
+    color: govuk-shade(govuk-colour("yellow"), 65%);
+    background: govuk-tint(govuk-colour("yellow"), 75%);
   }
 
   .govuk-tag--orange {
-    color: govuk-shade(govuk-colour("orange"), 55);
-    background: govuk-tint(govuk-colour("orange"), 70);
+    color: govuk-shade(govuk-colour("orange"), 55%);
+    background: govuk-tint(govuk-colour("orange"), 70%);
   }
 
   .govuk-tag--red {
-    color: govuk-shade(govuk-colour("red"), 30);
-    background: govuk-tint(govuk-colour("red"), 80);
+    color: govuk-shade(govuk-colour("red"), 30%);
+    background: govuk-tint(govuk-colour("red"), 80%);
   }
 
   .govuk-tag--pink {
-    color: govuk-shade(govuk-colour("pink"), 40);
-    background: govuk-tint(govuk-colour("pink"), 80);
+    color: govuk-shade(govuk-colour("pink"), 40%);
+    background: govuk-tint(govuk-colour("pink"), 80%);
   }
 
   .govuk-tag--green {
-    color: govuk-shade(govuk-colour("green"), 20);
-    background: govuk-tint(govuk-colour("green"), 80);
+    color: govuk-shade(govuk-colour("green"), 20%);
+    background: govuk-tint(govuk-colour("green"), 80%);
   }
 }

data/vendor/assets/stylesheets/components/textarea/_index.scss

@@ -29,16 +29,23 @@
       // since `outline` is already used for the yellow focus state.
       box-shadow: inset 0 0 0 $govuk-border-width-form-element;
 
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         // IE8 doesn't support `box-shadow` so double the border with
         // `border-width`.
         border-width: $govuk-border-width-form-element * 2;
       }
     }
+
+    &:disabled {
+      opacity: .5;
+      color: inherit;
+      background-color: transparent;
+      cursor: not-allowed;
+    }
   }
 
   .govuk-textarea--error {
-    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+    border-color: $govuk-error-colour;
 
     &:focus {
       border-color: $govuk-input-border-colour;

data/vendor/assets/stylesheets/core/_all.scss

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

data/vendor/assets/stylesheets/core/_global-styles.scss

@@ -1,9 +1,3 @@
-@if not mixin-exists("govuk-exports") {
-  @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
-}
-
-@import "../base";
-
 @import "links";
 @import "typography";
 

data/vendor/assets/stylesheets/core/_govuk-frontend-version.scss

@@ -0,0 +1,5 @@
+:root {
+  // This variable is automatically overwritten during builds and releases.
+  // It doesn't need to be updated manually.
+  --govuk-frontend-version: "4.6.0";
+}

data/vendor/assets/stylesheets/core/_links.scss

@@ -1,9 +1,3 @@
-@if not mixin-exists("govuk-exports") {
-  @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
-}
-
-@import "../base";
-
 @include govuk-exports("govuk/core/links") {
 
   %govuk-link {

data/vendor/assets/stylesheets/core/_lists.scss

@@ -1,9 +1,3 @@
-@if not mixin-exists("govuk-exports") {
-  @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
-}
-
-@import "../base";
-
 @include govuk-exports("govuk/core/lists") {
 
   %govuk-list {

data/vendor/assets/stylesheets/core/_section-break.scss

@@ -1,9 +1,3 @@
-@if not mixin-exists("govuk-exports") {
-  @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
-}
-
-@import "../base";
-
 @include govuk-exports("govuk/core/section-break") {
 
   %govuk-section-break {
@@ -12,7 +6,7 @@
 
     // fix double-width section break and forced visible section break
     // when combined with styles from alphagov/elements
-    @include govuk-compatibility(govuk_elements) {
+    @include _govuk-compatibility(govuk_elements) {
       height: 0;
     }
   }

data/vendor/assets/stylesheets/core/_typography.scss

@@ -1,9 +1,3 @@
-@if not mixin-exists("govuk-exports") {
-  @warn "Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.";
-}
-
-@import "../base";
-
 @include govuk-exports("govuk/core/typography") {
 
   // Headings

data/vendor/assets/stylesheets/helpers/_colour.scss

@@ -8,7 +8,7 @@
 
 /// Get colour
 ///
-/// @param {String} $colour - Name of colour from the colour palette
+/// @param {String | Colour} $colour - Name of colour from the colour palette
 ///   (`$govuk-colours`)
 /// @param {String} $legacy - Either the name of colour from the legacy palette
 ///   or a colour literal, to return instead when in 'legacy mode' - matching
@@ -29,14 +29,17 @@
 /// @access public
 
 @function govuk-colour($colour, $legacy: false) {
-  @if ($govuk-use-legacy-palette and $legacy) {
-    @if (type-of($legacy) == "color") {
+  @if $govuk-use-legacy-palette and $legacy {
+    @if type-of($legacy) == "color" {
       @return $legacy;
     }
     $colour: $legacy;
   }
 
-  $colour: quote($colour);
+  @if type-of($colour) == "color" {
+    // stylelint-disable-next-line scss/function-quote-no-quoted-strings-inside
+    $colour: quote("#{$colour}");
+  }
 
   @if not map-has-key($govuk-colours, $colour) {
     @error "Unknown colour `#{$colour}`";
@@ -65,7 +68,7 @@
 
   $org-colour: map-get($govuk-colours-organisations, $organisation);
 
-  @if ($websafe and map-has-key($org-colour, colour-websafe)) {
+  @if $websafe and map-has-key($org-colour, colour-websafe) {
     @return map-get($org-colour, colour-websafe);
   } @else {
     @return map-get($org-colour, colour);
@@ -75,7 +78,7 @@
 /// Make a colour darker by mixing it with black
 ///
 /// @param {Colour} $colour - colour to shade
-/// @param {Number} $percentage - percentage of `$colour` in returned colour
+/// @param {Number} $percentage - percentage of black to mix with $colour
 /// @return {Colour}
 /// @access public
 
@@ -86,7 +89,7 @@
 /// Make a colour lighter by mixing it with white
 ///
 /// @param {Colour} $colour - colour to tint
-/// @param {Number} $percentage - percentage of `$colour` in returned colour
+/// @param {Number} $percentage - percentage of white to mix with $colour
 /// @return {Colour}
 /// @access public
 

data/vendor/assets/stylesheets/helpers/_focused.scss

@@ -16,7 +16,7 @@
 
   // Since Internet Explorer 8 does not support box-shadow, we want to force the
   // user-agent outlines
-  @include govuk-not-ie8 {
+  @include _govuk-not-ie8 {
     outline: $govuk-focus-width solid transparent;
   }
   color: $govuk-focus-text-colour;
@@ -25,4 +25,9 @@
   // When link is focussed, hide the default underline since the
   // box shadow adds the "underline"
   text-decoration: none;
+
+  // When a focused box is broken by e.g. a line break, ensure that the
+  // box-shadow is applied to each fragment independently.
+  -webkit-box-decoration-break: clone;
+          box-decoration-break: clone;
 }

data/vendor/assets/stylesheets/helpers/_font-faces.scss

@@ -12,7 +12,7 @@
 /// @access private
 
 @mixin _govuk-font-face-gds-transport {
-  @include govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
+  @include _govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
     @include govuk-exports("govuk/helpers/font-faces") {
       @at-root {
         /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud  */

data/vendor/assets/stylesheets/helpers/_links.scss

@@ -30,12 +30,12 @@
 @mixin govuk-link-decoration {
   text-decoration: underline;
 
-  @if ($govuk-new-link-styles) {
-    @if ($govuk-link-underline-thickness) {
+  @if $govuk-new-link-styles {
+    @if $govuk-link-underline-thickness {
       text-decoration-thickness: $govuk-link-underline-thickness;
     }
 
-    @if ($govuk-link-underline-offset) {
+    @if $govuk-link-underline-offset {
       text-underline-offset: $govuk-link-underline-offset;
     }
   }
@@ -50,7 +50,7 @@
 /// @access public
 
 @mixin govuk-link-hover-decoration {
-  @if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
+  @if $govuk-new-link-styles and $govuk-link-hover-underline-thickness {
     text-decoration-thickness: $govuk-link-hover-underline-thickness;
     // Disable ink skipping on underlines on hover. Browsers haven't
     // standardised on this part of the spec yet, so set both properties
@@ -104,7 +104,7 @@
   // we need to override the text colour for that combination of selectors so
   // so that unvisited links styled as buttons do not end up with dark blue
   // text when focussed.
-  @include govuk-compatibility(govuk_template) {
+  @include _govuk-compatibility(govuk_template) {
     &:link:focus {
       color: $govuk-focus-text-colour;
     }
@@ -152,7 +152,7 @@
   // we need to override the text colour for that combination of selectors so
   // so that unvisited links styled as buttons do not end up with dark blue
   // text when focussed.
-  @include govuk-compatibility(govuk_template) {
+  @include _govuk-compatibility(govuk_template) {
     &:link:focus {
       color: $govuk-focus-text-colour;
     }
@@ -200,7 +200,7 @@
   // we need to override the text colour for that combination of selectors so
   // so that unvisited links styled as buttons do not end up with dark blue
   // text when focussed.
-  @include govuk-compatibility(govuk_template) {
+  @include _govuk-compatibility(govuk_template) {
     &:link:focus {
       color: $govuk-focus-text-colour;
     }
@@ -243,7 +243,7 @@
   // alphagov/govuk_template includes a specific a:link:focus selector designed
   // to make unvisited links a slightly darker blue when focussed, so we need to
   // override the text colour for that combination of selectors.
-  @include govuk-compatibility(govuk_template) {
+  @include _govuk-compatibility(govuk_template) {
     &:link:focus {
       @include govuk-text-colour;
     }
@@ -275,7 +275,9 @@
   // Force a colour change on hover to work around a bug in Safari
   // https://bugs.webkit.org/show_bug.cgi?id=224483
   &:hover {
-    color: rgba($govuk-text-colour, .99);
+    @if type-of($govuk-text-colour) == color {
+      color: rgba($govuk-text-colour, .99);
+    }
   }
 
   &:active,
@@ -286,7 +288,7 @@
   // alphagov/govuk_template includes a specific a:link:focus selector designed
   // to make unvisited links a slightly darker blue when focussed, so we need to
   // override the text colour for that combination of selectors.
-  @include govuk-compatibility(govuk_template) {
+  @include _govuk-compatibility(govuk_template) {
     &:link:focus {
       @include govuk-text-colour;
     }
@@ -329,7 +331,7 @@
   // alphagov/govuk_template includes a specific a:link:focus selector designed
   // to make unvisited links a slightly darker blue when focussed, so we need to
   // override the text colour for that combination of selectors.
-  @include govuk-compatibility(govuk_template) {
+  @include _govuk-compatibility(govuk_template) {
     &:link:focus {
       color: $govuk-focus-text-colour;
     }

data/vendor/assets/stylesheets/helpers/_media-queries.scss

@@ -12,7 +12,7 @@ $mq-static-breakpoint: if(variable-exists(govuk-ie8-breakpoint), $govuk-ie8-brea
 
 $mq-show-breakpoints: ();
 
-@if (variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints) {
+@if variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints {
   $mq-show-breakpoints: map-keys($govuk-breakpoints);
 }
 
@@ -20,7 +20,7 @@ $mq-show-breakpoints: ();
 // 'rasterize' any media queries.
 
 $mq-responsive: true;
-@if (variable-exists(govuk-is-ie8) and $govuk-is-ie8) {
+@if variable-exists(govuk-is-ie8) and $govuk-is-ie8 {
   $mq-responsive: false;
 }