dxw_govuk_frontend_rails 4.0.0 → 4.6.0

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

@@ -58,7 +58,7 @@
     position: relative;
     top: -1px;
     margin-right: 1px;
-    fill: currentColor;
+    fill: currentcolor;
     vertical-align: top;
   }
 
@@ -91,7 +91,7 @@
       text-decoration: underline;
       text-decoration-thickness: $govuk-header-link-underline-thickness;
 
-      @if ($govuk-link-underline-offset) {
+      @if $govuk-link-underline-offset {
         text-underline-offset: $govuk-link-underline-offset;
       }
     }
@@ -111,6 +111,16 @@
     font-size: 30px; // We don't have a mixin that produces 30px font size
     line-height: 1;
 
+    @include govuk-media-query($from: tablet) {
+      display: inline;
+
+      &:focus {
+        // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
+        // This is to stop the logo getting cut off by the box shadow when focused on above a product name
+        box-shadow: 0 0 $govuk-focus-colour;
+      }
+    }
+
     &:link,
     &:visited {
       text-decoration: none;
@@ -132,6 +142,9 @@
     }
   }
 
+  // The govuk-header__link--service-name class is deprecated - use
+  // govuk-header__service-name instead.
+  .govuk-header__service-name,
   .govuk-header__link--service-name {
     display: inline-block;
     margin-bottom: govuk-spacing(2);
@@ -180,7 +193,7 @@
       -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
               text-decoration: solid underline $govuk-header-link-underline-thickness;
 
-      @if ($govuk-link-underline-offset) {
+      @if $govuk-link-underline-offset {
         text-underline-offset: $govuk-link-underline-offset;
       }
     }
@@ -195,14 +208,21 @@
       margin-left: govuk-spacing(1);
     }
 
+    &[aria-expanded="true"]:after {
+      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+
     @include govuk-media-query ($from: tablet) {
       top: govuk-spacing(3);
     }
-  }
 
-  .govuk-header__menu-button--open {
-    &:after {
-      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    .js-enabled & {
+      display: block;
+    }
+
+    &[hidden],
+    .js-enabled &[hidden] {
+      display: none;
     }
   }
 
@@ -217,25 +237,9 @@
     margin: 0;
     padding: 0;
     list-style: none;
-  }
-
-  .js-enabled {
-    .govuk-header__menu-button {
-      display: block;
-      @include govuk-media-query ($from: desktop) {
-        display: none;
-      }
-    }
 
-    .govuk-header__navigation-list {
+    &[hidden] {
       display: none;
-      @include govuk-media-query ($from: desktop) {
-        display: block;
-      }
-    }
-
-    .govuk-header__navigation-list--open {
-      display: block;
     }
   }
 
@@ -247,6 +251,8 @@
     }
   }
 
+  // The govuk-header__navigation--no-service-name class is deprecated and will
+  // be removed in the next major release.
   .govuk-header__navigation--no-service-name {
     padding-top: govuk-spacing(7);
   }
@@ -276,6 +282,12 @@
         color: $govuk-header-link-active;
       }
 
+      // When printing, use the normal blue as this contrasts better with the
+      // white printing header
+      @include govuk-media-query($media-type: print) {
+        color: $govuk-brand-colour;
+      }
+
       // When focussed, the text colour needs to be darker to ensure that colour
       // contrast is still acceptable
       &:focus {

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

@@ -22,7 +22,6 @@
 
     // Disable inner shadow and remove rounded corners
     -webkit-appearance: none;
-       -moz-appearance: none;
             appearance: none;
 
     &:focus {
@@ -35,12 +34,19 @@
       // here as it 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-input::-webkit-outer-spin-button,
@@ -61,49 +67,49 @@
     }
   }
 
-  // The ex measurements are based on the number of W's that can fit inside the input
-  // Extra space is left on the right hand side to allow for the Safari prefill icon
-  // Linear regression estimation based on visual tests: y = 1.76 + 1.81x
+  .govuk-input--extra-letter-spacing {
+    @include govuk-font(false, $tabular: true);
+    letter-spacing: .05em;
+  }
+
+  // em measurements are based on the point size of the typeface
+  // Extra space is added on the right hand side to allow for the Safari prefill icon
 
   .govuk-input--width-30 {
-    max-width: 56ex + 3ex;
+    max-width: 29.5em;
   }
 
   .govuk-input--width-20 {
-    max-width: 38ex + 3ex;
+    max-width: 20.5em;
   }
 
   .govuk-input--width-10 {
-    max-width: 20ex + 3ex;
+    max-width: 11.5em;
   }
 
   .govuk-input--width-5 {
-    max-width: 10.8ex;
+    max-width: 5.5em;
   }
 
   .govuk-input--width-4 {
-    max-width: 9ex;
+    max-width: 4.5em;
   }
 
   .govuk-input--width-3 {
-    max-width: 7.2ex;
+    max-width: 3.75em;
   }
 
   .govuk-input--width-2 {
-    max-width: 5.4ex;
+    max-width: 2.75em;
   }
 
   .govuk-input__wrapper {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 
     .govuk-input {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 1 auto;
-          -ms-flex: 0 1 auto;
-              flex: 0 1 auto;
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto;
     }
 
     .govuk-input:focus {
@@ -150,13 +156,9 @@
     // Emphasise non-editable status of prefixes and suffixes
     cursor: default;
 
-    -webkit-box-flex: 0;
-
-    -webkit-flex: 0 0 auto;
-
-        -ms-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
 
-            flex: 0 0 auto;
+        flex: 0 0 auto;
 
     // Split prefix/suffix onto separate lines on narrow screens
     @include govuk-media-query($until: mobile) {
@@ -171,7 +173,7 @@
       border-bottom: 0;
     }
     @include govuk-media-query($from: mobile) {
-      @include govuk-not-ie8 {
+      @include _govuk-not-ie8 {
         border-right: 0;
       }
     }
@@ -183,7 +185,7 @@
       border-top: 0;
     }
     @include govuk-media-query($from: mobile) {
-      @include govuk-not-ie8 {
+      @include _govuk-not-ie8 {
         border-left: 0;
       }
     }

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

@@ -0,0 +1,247 @@
+@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: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+        flex-direction: column;
+    -ms-flex-align: center;
+        align-items: center;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+
+    @include govuk-media-query($from: tablet) {
+      -ms-flex-direction: row;
+          flex-direction: row;
+      -ms-flex-align: start;
+          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", $legacy: "grey-4");
+    }
+  }
+
+  .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 get around a whitespace issue between the arrow svg and the link text
+    // without having to rely on whitespace control from backend tooling
+    .govuk-pagination__link {
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-align: center;
+          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 have links within them
+    &: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
+    // We do this so that we have a hover state in all possible instances
+    &: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-font($size: 19, $weight: "regular");
+    @include govuk-link-decoration;
+    display: inline-block;
+    padding-left: govuk-spacing(6);
+  }
+
+  .govuk-pagination__icon {
+    // Set size using rems to make the icon scale with text if user resizes text in their browser
+    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__item {
+      padding: govuk-spacing(3);
+      float: none;
+    }
+
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
+      padding-left: 0;
+      float: none;
+    }
+
+    .govuk-pagination__next {
+      padding-right: govuk-spacing(3);
+
+      .govuk-pagination__icon {
+        margin-left: 0;
+      }
+    }
+
+    // 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;
+    }
+
+    // Reset both these elements to their inline default, both to ensure that the focus state
+    // for block mode "shrink wraps" text as expected
+    .govuk-pagination__link,
+    .govuk-pagination__link-title {
+      display: inline;
+    }
+
+    // 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 {
+      text-align: left;
+
+      &:focus {
+        // apply focus styling to the label within the link as if it were being focused
+        // to get around a display issue with a focusable inline element containing a mixture
+        // of inline and inline-block level elements
+        .govuk-pagination__link-label {
+          @include govuk-focused-text;
+        }
+      }
+
+      &:not(:focus) {
+        text-decoration: none;
+      }
+    }
+
+    .govuk-pagination__icon {
+      margin-right: govuk-spacing(2);
+    }
+  }
+}

data/vendor/assets/stylesheets/components/pagination/_pagination.scss

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

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

@@ -33,7 +33,7 @@
     background: govuk-colour("green", $legacy: "turquoise");
 
     @include govuk-media-query($media-type: print) {
-      border-color: currentColor;
+      border-color: currentcolor;
       color: $govuk-print-text-colour;
       background: none;
     }

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

@@ -39,7 +39,7 @@
 
     // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
     // elements there.
-    @include govuk-not-ie8 {
+    @include _govuk-not-ie8 {
       position: absolute;
 
       z-index: 1;
@@ -53,7 +53,7 @@
       opacity: 0;
     }
 
-    @include govuk-if-ie8 {
+    @include _govuk-if-ie8 {
       margin-top: 10px;
       margin-right: $govuk-radios-size / -2;
       margin-left: $govuk-radios-size / -2;
@@ -87,7 +87,7 @@
     width: $govuk-radios-size;
     height: $govuk-radios-size;
 
-    border: $govuk-border-width-form-element solid currentColor;
+    border: $govuk-border-width-form-element solid currentcolor;
     border-radius: 50%;
     background: transparent;
   }
@@ -106,10 +106,10 @@
     width: 0;
     height: 0;
 
-    border: govuk-spacing(2) solid currentColor;
+    border: govuk-spacing(2) solid currentcolor;
     border-radius: 50%;
     opacity: 0;
-    background: currentColor;
+    background: currentcolor;
   }
 
   .govuk-radios__hint {
@@ -146,10 +146,11 @@
   // Disabled state
   .govuk-radios__input:disabled,
   .govuk-radios__input:disabled + .govuk-radios__label {
-    cursor: default;
+    cursor: not-allowed;
   }
 
-  .govuk-radios__input:disabled + .govuk-radios__label {
+  .govuk-radios__input:disabled + .govuk-radios__label,
+  .govuk-radios__input:disabled ~ .govuk-hint {
     opacity: .5;
   }
 
@@ -167,14 +168,6 @@
         clear: none;
       }
     }
-
-    // Prevent inline modifier being used with conditional reveals
-    &.govuk-radios--conditional {
-      .govuk-radios__item {
-        margin-right: 0;
-        float: none;
-      }
-    }
   }
 
   // =========================================================
@@ -246,11 +239,11 @@
     //  ▲┆└─ Radio pseudo element, aligned with margin
     //  └─── Touch target (invisible input), shifted into the margin
     .govuk-radios__input {
-      @include govuk-not-ie8 {
+      @include _govuk-not-ie8 {
         left: $input-offset * -1;
       }
 
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         margin-left: $govuk-small-radios-size * -1;
       }
     }

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

@@ -7,6 +7,12 @@
     @include govuk-font($size: 19, $line-height: 1.25);
 
     box-sizing: border-box; // should this be global?
+
+    // This min-width was chosen because:
+    // - it makes the Select noticeably wider than it is taller (which is what users expect)
+    // - 11.5em matches the 'length-10' variant of the input component
+    // - it fits comfortably on screens as narrow as 240px wide
+    min-width: 11.5em;
     max-width: 100%;
     height: 40px;
     @if $govuk-typography-use-rem {
@@ -15,6 +21,11 @@
     padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
 
+    // Default user agent colours for selects can have low contrast,
+    // and may look disabled (#2435)
+    color: $govuk-text-colour;
+    background-color: govuk-colour("white");
+
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Ensure outline appears outside of the element
@@ -24,12 +35,18 @@
       // 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;
+      cursor: not-allowed;
+    }
   }
 
   .govuk-select option:active,

data/vendor/assets/stylesheets/components/skip-link/_index.scss

@@ -11,9 +11,7 @@
 
     // Respect 'display cutout' safe area (avoids notches and rounded corners)
     @supports (padding: unquote("max(calc(0px))")) {
-      $padding-safe-area-right: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
       $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
-      $padding-safe-area-left: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
       $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
 
       // Use max() to pick largest padding, default or with safe area
@@ -28,7 +26,7 @@
       background-color: $govuk-focus-colour;
 
       // Undo unwanted changes when global styles are enabled
-      @if ($govuk-global-styles) {
+      @if $govuk-global-styles {
         box-shadow: none;
       }
     }