govuk_tech_docs 3.3.1 → 3.4.5

data/node_modules/govuk-frontend/govuk/components/back-link/_index.scss

@@ -1,16 +1,19 @@
 @include govuk-exports("govuk/component/back-link") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-size: 16;
 
   // Size of chevron (excluding border)
-  $chevron-size: 7px;
+  $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: 1px;
+  $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;
 
   .govuk-back-link {
-    @include govuk-typography-responsive($size: 16);
+    @include govuk-typography-responsive($size: $font-size);
     @include govuk-link-common;
     @include govuk-link-style-text;
 
@@ -21,7 +24,7 @@
     margin-bottom: govuk-spacing(3);
 
     // Allow space for the arrow
-    padding-left: 14px;
+    padding-left: govuk-em(14px, $font-size);
   }
 
   // Prepend left pointing chevron
@@ -35,14 +38,15 @@
     @if $govuk-use-legacy-font {
       // Begin adjustments for font baseline offset
       // These should be removed when legacy font support is dropped
-      top: -1px;
-      bottom: 1px;
+      $offset: govuk-em(1px, $font-size);
+      top: $offset * -1;
+      bottom: $offset;
     } @else {
       top: 0;
       bottom: 0;
     }
 
-    left: 3px;
+    left: govuk-em(3px, $font-size);
 
     width: $chevron-size;
     height: $chevron-size;
@@ -56,11 +60,18 @@
             transform: rotate(225deg);
 
     border: solid;
-    border-width: $chevron-border-width $chevron-border-width 0 0;
+    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: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+
+      // Ensure that the chevron never gets smaller than 16px
+      font-size: unquote("max(#{$font-size * 1px}, 1em)");
+    }
+
     // Fall back to a less than sign for IE8
-    @include govuk-if-ie8 {
+    @include _govuk-if-ie8 {
       content: "\003c"; // Less than sign (<)
       width: auto;
       height: auto;
@@ -86,14 +97,11 @@
     left: 0;
   }
 
-  @if $govuk-use-legacy-font {
-    // Begin adjustments for font baseline offset
-    // These should be removed when legacy font support is dropped
-    .govuk-back-link:before {
-      $offset: 1px;
+  .govuk-back-link--inverse {
+    @include govuk-link-style-inverse;
 
-      top: $offset * -1;
-      bottom: $offset;
+    &:before {
+      border-color: currentcolor;
     }
   }
 }

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_index.scss

@@ -1,10 +1,13 @@
 @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: 7px;
+  $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: 1px;
+  $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;
@@ -13,10 +16,10 @@
   // of length 8 (7px + 1px border):
   //
   // √(8² + 8²) * 0.5 ≅ 5.655
-  $chevron-altitude-calculated: 5.655px;
+  $chevron-altitude-calculated: govuk-em(5.655px, $font-size);
 
   .govuk-breadcrumbs {
-    @include govuk-font($size: 16);
+    @include govuk-font($size: $font-size);
     @include govuk-text-colour;
 
     margin-top: govuk-spacing(3);
@@ -40,8 +43,8 @@
 
     // Add both margin and padding such that the chevron appears centrally
     // between each breadcrumb item
-    margin-left: govuk-spacing(2);
-    padding-left: govuk-spacing(2) + $chevron-altitude-calculated;
+    margin-left: govuk-em(govuk-spacing(2), $font-size);
+    padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;
 
     float: left;
 
@@ -55,8 +58,9 @@
       @if $govuk-use-legacy-font {
         // Begin adjustments for font baseline offset
         // These should be removed when legacy font support is dropped
-        top: -1px;
-        bottom: 1px;
+        $offset: govuk-em(1px, $font-size);
+        top: $offset * -1;
+        bottom: $offset;
       } @else {
         top: 0;
         bottom: 0;
@@ -78,11 +82,18 @@
               transform: rotate(45deg);
 
       border: solid;
-      border-width: $chevron-border-width $chevron-border-width 0 0;
+      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: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+
+        // Ensure that the chevron never gets smaller than 16px
+        font-size: unquote("max(#{$font-size * 1px}, 1em)");
+      }
+
       // Fall back to a greater than sign for IE8
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         content: "\003e"; // Greater than sign (>)
         width: auto;
         height: auto;
@@ -122,7 +133,7 @@
         }
 
         &:before {
-          top: 6px;
+          top: govuk-em(6px, $font-size);
           margin: 0;
         }
       }
@@ -133,4 +144,16 @@
       }
     }
   }
+
+  .govuk-breadcrumbs--inverse {
+    color: govuk-colour("white");
+
+    .govuk-breadcrumbs__link {
+      @include govuk-link-style-inverse;
+    }
+
+    .govuk-breadcrumbs__list-item:before {
+      border-color: currentcolor;
+    }
+  }
 }

data/node_modules/govuk-frontend/govuk/components/button/_index.scss

@@ -18,21 +18,27 @@ $govuk-button-text-colour: govuk-colour("white") !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%);
-  $govuk-button-text-colour: $govuk-button-text-colour;
 
   // Secondary button variables
   $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
+  $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%);
-  $govuk-secondary-button-text-colour: govuk-colour("black");
 
   // 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%);
-  $govuk-warning-button-text-colour: govuk-colour("white");
+
+  // Inverse button variables
+  $govuk-inverse-button-colour: govuk-colour("white");
+  $govuk-inverse-button-text-colour: govuk-colour("blue");
+  $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
@@ -61,7 +67,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     cursor: pointer;
     -webkit-appearance: none;
 
-    @include govuk-if-ie8 {
+    @include _govuk-if-ie8 {
       border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
     }
 
@@ -92,7 +98,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
       // Bump the button down so it looks like its being pressed in
       top: $button-shadow-size;
 
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         border-bottom-width: 0;
       }
     }
@@ -103,11 +109,11 @@ $govuk-button-text-colour: govuk-colour("white") !default;
       // backgrounds and box-shadows disappear, so we need to ensure there's a
       // transparent outline which will be set to a visible colour.
       // 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;
       }
       // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         color: $govuk-focus-text-colour;
         background-color: $govuk-focus-colour;
       }
@@ -166,6 +172,8 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     }
   }
 
+  // @deprecated Disabling buttons using the .govuk-button--disabled class is
+  // deprecated and will be removed in the next major version.
   .govuk-button--disabled,
   .govuk-button[disabled="disabled"],
   .govuk-button[disabled] {
@@ -173,13 +181,13 @@ $govuk-button-text-colour: govuk-colour("white") !default;
 
     &:hover {
       background-color: $govuk-button-colour;
-      cursor: default;
+      cursor: not-allowed;
     }
 
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
-      @include govuk-if-ie8 {
+      @include _govuk-if-ie8 {
         border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
       }
     }
@@ -249,6 +257,38 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     }
   }
 
+  .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;
+    }
+
+    // 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 so
+    // so that unvisited links styled as buttons do not end up with dark blue
+    // text when focussed.
+    @include _govuk-compatibility(govuk_template) {
+      &:link:focus {
+        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-typography-responsive($size: 24, $override-line-height: 1);