govuk_tech_docs 2.2.0 → 2.4.0

data/node_modules/govuk-frontend/govuk/components/header/_header.scss

@@ -1,318 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@import "../../helpers/typography";
-
-@include govuk-exports("govuk/component/header") {
-
-  $govuk-header-background: govuk-colour("black");
-  $govuk-header-border-color: $govuk-brand-colour;
-  $govuk-header-border-width: govuk-spacing(2);
-  $govuk-header-text: govuk-colour("white");
-  $govuk-header-link: govuk-colour("white");
-  $govuk-header-link-hover: govuk-colour("white");
-  $govuk-header-link-active: #1d8feb;
-  $govuk-header-nav-item-border-color: #2e3133;
-
-  .govuk-header {
-    @include govuk-font($size: 16);
-
-    border-bottom: govuk-spacing(2) solid govuk-colour("white");
-    color: $govuk-header-text;
-    background: $govuk-header-background;
-
-  }
-
-  .govuk-header__container--full-width {
-    padding: 0 govuk-spacing(3);
-    border-color: $govuk-header-border-color;
-
-    .govuk-header__menu-button {
-      right: govuk-spacing(3);
-    }
-  }
-
-  .govuk-header__container {
-    @include govuk-clearfix;
-    position: relative;
-    margin-bottom: -$govuk-header-border-width;
-    padding-top: govuk-spacing(2);
-    border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
-  }
-
-  .govuk-header__logotype {
-    display: inline-block;
-    margin-right: govuk-spacing(1);
-  }
-
-  .govuk-header__logotype-crown {
-    position: relative;
-    top: -1px;
-    margin-right: 1px;
-    fill: currentColor;
-    vertical-align: top;
-  }
-
-  .govuk-header__logotype-crown-fallback-image {
-    width: 36px;
-    height: 32px;
-    border: 0;
-    vertical-align: middle;
-  }
-
-  .govuk-header__product-name {
-    @include govuk-font($size: 24, $line-height: 1);
-    display: inline-table;
-    padding-right: govuk-spacing(2);
-  }
-
-  .govuk-header__link {
-    text-decoration: none;
-
-    &:link,
-    &:visited {
-      color: $govuk-header-link;
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &:focus {
-      @include govuk-focused-text;
-    }
-
-    // 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) {
-      &:link:focus {
-        @include govuk-text-colour;
-      }
-    }
-  }
-
-  .govuk-header__link--homepage {
-    // Font size needs to be set on the link so that the box sizing is correct
-    // in Firefox
-    @include govuk-font($size: false, $weight: bold);
-
-    display: inline-block;
-    font-size: 30px; // We don't have a mixin that produces 30px font size
-    line-height: 1;
-
-    &:link,
-    &:visited {
-      text-decoration: none;
-    }
-
-    &:hover,
-    &:active {
-      // Negate the added border
-      margin-bottom: -1px;
-      // Omitting colour will use default value of currentColor – if we
-      // specified currentColor explicitly IE8 would ignore this rule.
-      border-bottom: 1px solid;
-    }
-
-    // Remove any borders that show when focused and hovered.
-    &:focus {
-      margin-bottom: 0;
-      border-bottom: 0;
-    }
-  }
-
-  .govuk-header__link--service-name {
-    display: inline-block;
-    margin-bottom: govuk-spacing(2);
-    @include govuk-font($size: 24, $weight: bold);
-  }
-
-  .govuk-header__logo,
-  .govuk-header__content {
-    box-sizing: border-box;
-  }
-
-  .govuk-header__logo {
-    @include govuk-responsive-margin(2, "bottom");
-    padding-right: govuk-spacing(8);
-
-    @include govuk-media-query ($from: desktop) {
-      width: 33.33%;
-      padding-right: $govuk-gutter-half;
-      float: left;
-      vertical-align: top;
-    }
-  }
-
-  .govuk-header__content {
-    @include govuk-media-query ($from: desktop) {
-      width: 66.66%;
-      padding-left: $govuk-gutter-half;
-      float: left;
-    }
-  }
-
-  .govuk-header__menu-button {
-    @include govuk-font($size: 16);
-    display: none;
-    position: absolute;
-    top: govuk-spacing(4);
-    right: 0;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    color: $govuk-header-link;
-    background: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &:focus {
-      @include govuk-focused-text;
-    }
-
-    &::after {
-      @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
-      content: "";
-      margin-left: govuk-spacing(1);
-    }
-
-    @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);
-    }
-  }
-
-  .govuk-header__navigation {
-    @include govuk-responsive-margin(2, "bottom");
-    display: block;
-    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 {
-      display: none;
-      @include govuk-media-query ($from: desktop) {
-        display: block;
-      }
-    }
-
-    .govuk-header__navigation--open {
-      display: block;
-    }
-  }
-
-
-  .govuk-header__navigation--end {
-    @include govuk-media-query ($from: desktop) {
-      margin: 0;
-      padding: govuk-spacing(1) 0;
-      text-align: right;
-    }
-  }
-
-  .govuk-header__navigation--no-service-name {
-    padding-top: govuk-spacing(7);
-  }
-
-  .govuk-header__navigation-item {
-    padding: govuk-spacing(2) 0;
-    border-bottom: 1px solid $govuk-header-nav-item-border-color;
-
-    @include govuk-media-query ($from: desktop) {
-      display: inline-block;
-      margin-right: govuk-spacing(3);
-      padding: govuk-spacing(1) 0;
-      border: 0;
-    }
-
-    a {
-      @include govuk-font($size: 16, $weight: bold);
-      white-space: nowrap;
-    }
-  }
-
-  .govuk-header__navigation-item--active {
-    a {
-      &:link,
-      &:hover,
-      &:visited {
-        color: $govuk-header-link-active;
-      }
-
-      // When focussed, the text colour needs to be darker to ensure that colour
-      // contrast is still acceptable
-      &:focus {
-        color: $govuk-focus-text-colour;
-      }
-    }
-  }
-
-  .govuk-header__navigation-item:last-child {
-    margin-right: 0;
-  }
-
-  @include govuk-media-query($media-type: print) {
-    .govuk-header {
-      border-bottom-width: 0;
-      color: govuk-colour("black");
-      background: transparent;
-    }
-
-    // Hide the inverted crown when printing in browsers that don't support SVG.
-    .govuk-header__logotype-crown-fallback-image {
-      display: none;
-    }
-
-    .govuk-header__link {
-      &:link,
-      &:visited {
-        color: govuk-colour("black");
-      }
-
-      // Do not append link href to GOV.UK link when printing (e.g. '(/)')
-      &:after {
-        display: none;
-      }
-    }
-  }
-
-  @if $govuk-use-legacy-font {
-    // Begin adjustments for font baseline offset
-    // These should be removed when the font is updated with the correct baseline
-    .govuk-header__logotype-crown,
-    .govuk-header__logotype-crown-fallback-image {
-      position: relative;
-      top: -4px;
-      vertical-align: middle;
-    }
-
-    .govuk-header {
-      $offset: 3px;
-      padding-top: $offset;
-    }
-
-    .govuk-header__link--homepage {
-      line-height: 30px;
-    }
-    // End adjustments
-  }
-
-}
+@import "../../base";
+@import "./index";

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

@@ -0,0 +1,331 @@
+@include govuk-exports("govuk/component/header") {
+
+  $govuk-header-background: govuk-colour("black");
+  $govuk-header-border-color: $govuk-brand-colour;
+  $govuk-header-border-width: govuk-spacing(2);
+  $govuk-header-text: govuk-colour("white");
+  $govuk-header-link-active: #1d8feb;
+  $govuk-header-nav-item-border-color: #2e3133;
+  $govuk-header-link-underline-thickness: 3px;
+
+  .govuk-header {
+    @include govuk-font($size: 16);
+
+    border-bottom: govuk-spacing(2) solid govuk-colour("white");
+    color: $govuk-header-text;
+    background: $govuk-header-background;
+  }
+
+  .govuk-header__container--full-width {
+    padding: 0 govuk-spacing(3);
+    border-color: $govuk-header-border-color;
+
+    .govuk-header__menu-button {
+      right: govuk-spacing(3);
+    }
+  }
+
+  .govuk-header__container {
+    @include govuk-clearfix;
+    position: relative;
+    margin-bottom: -$govuk-header-border-width;
+    padding-top: govuk-spacing(2);
+    border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
+  }
+
+  .govuk-header__logotype {
+    display: inline-block;
+
+    // Add a gap after the logo in case it's followed by a product name. This
+    // gets removed later if the logotype is a :last-child.
+    margin-right: govuk-spacing(1);
+
+    // Prevent readability backplate from obscuring underline in Windows High
+    // Contrast Mode
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      color: linktext;
+    }
+
+    // Remove the gap after the logo if there's no product name to keep hover
+    // and focus states neat
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .govuk-header__logotype-crown {
+    position: relative;
+    top: -1px;
+    margin-right: 1px;
+    fill: currentColor;
+    vertical-align: top;
+  }
+
+  .govuk-header__logotype-crown-fallback-image {
+    width: 36px;
+    height: 32px;
+    border: 0;
+    vertical-align: bottom;
+  }
+
+  .govuk-header__product-name {
+    @include govuk-font($size: 24, $line-height: 1);
+    display: inline-table;
+  }
+
+  .govuk-header__link {
+    // Avoid using the `govuk-link-common` mixin because the links in the header
+    // get a special treatment, because:
+    //
+    // - underlines are only visible on hover
+    // - all links get a 3px underline regardless of text size, as there are
+    //   multiple grouped elements close to one another and having slightly
+    //   different underline widths looks unbalanced
+    @include govuk-typography-common;
+    @include govuk-link-style-inverse;
+
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-thickness: $govuk-header-link-underline-thickness;
+
+      @if ($govuk-link-underline-offset) {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+  }
+
+  .govuk-header__link--homepage {
+    // Font size needs to be set on the link so that the box sizing is correct
+    // in Firefox
+    @include govuk-font($size: false, $weight: bold);
+
+    display: inline-block;
+    margin-right: govuk-spacing(2);
+    font-size: 30px; // We don't have a mixin that produces 30px font size
+    line-height: 1;
+
+    &:link,
+    &:visited {
+      text-decoration: none;
+    }
+
+    &:hover,
+    &:active {
+      // Negate the added border
+      margin-bottom: $govuk-header-link-underline-thickness * -1;
+      // Omitting colour will use default value of currentColor – if we
+      // specified currentColor explicitly IE8 would ignore this rule.
+      border-bottom: $govuk-header-link-underline-thickness solid;
+    }
+
+    // Remove any borders that show when focused and hovered.
+    &:focus {
+      margin-bottom: 0;
+      border-bottom: 0;
+    }
+  }
+
+  .govuk-header__link--service-name {
+    display: inline-block;
+    margin-bottom: govuk-spacing(2);
+    @include govuk-font($size: 24, $weight: bold);
+  }
+
+  .govuk-header__logo,
+  .govuk-header__content {
+    box-sizing: border-box;
+  }
+
+  .govuk-header__logo {
+    @include govuk-responsive-margin(2, "bottom");
+    padding-right: govuk-spacing(8);
+
+    @include govuk-media-query ($from: desktop) {
+      width: 33.33%;
+      padding-right: $govuk-gutter-half;
+      float: left;
+      vertical-align: top;
+    }
+  }
+
+  .govuk-header__content {
+    @include govuk-media-query ($from: desktop) {
+      width: 66.66%;
+      padding-left: $govuk-gutter-half;
+      float: left;
+    }
+  }
+
+  .govuk-header__menu-button {
+    @include govuk-font($size: 16);
+    display: none;
+    position: absolute;
+    top: govuk-spacing(4);
+    right: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: govuk-colour("white");
+    background: none;
+    cursor: pointer;
+
+    &:hover {
+      -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
+              text-decoration: solid underline $govuk-header-link-underline-thickness;
+
+      @if ($govuk-link-underline-offset) {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+
+    &:after {
+      @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
+      content: "";
+      margin-left: govuk-spacing(1);
+    }
+
+    @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);
+    }
+  }
+
+  .govuk-header__navigation {
+    @include govuk-responsive-margin(2, "bottom");
+    display: block;
+    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 {
+      display: none;
+      @include govuk-media-query ($from: desktop) {
+        display: block;
+      }
+    }
+
+    .govuk-header__navigation--open {
+      display: block;
+    }
+  }
+
+  .govuk-header__navigation--end {
+    @include govuk-media-query ($from: desktop) {
+      margin: 0;
+      padding: govuk-spacing(1) 0;
+      text-align: right;
+    }
+  }
+
+  .govuk-header__navigation--no-service-name {
+    padding-top: govuk-spacing(7);
+  }
+
+  .govuk-header__navigation-item {
+    padding: govuk-spacing(2) 0;
+    border-bottom: 1px solid $govuk-header-nav-item-border-color;
+
+    @include govuk-media-query ($from: desktop) {
+      display: inline-block;
+      margin-right: govuk-spacing(3);
+      padding: govuk-spacing(1) 0;
+      border: 0;
+    }
+
+    a {
+      @include govuk-font($size: 16, $weight: bold);
+      white-space: nowrap;
+    }
+  }
+
+  .govuk-header__navigation-item--active {
+    a {
+      &:link,
+      &:hover,
+      &:visited {
+        color: $govuk-header-link-active;
+      }
+
+      // When focussed, the text colour needs to be darker to ensure that colour
+      // contrast is still acceptable
+      &:focus {
+        color: $govuk-focus-text-colour;
+      }
+    }
+  }
+
+  .govuk-header__navigation-item:last-child {
+    margin-right: 0;
+  }
+
+  @include govuk-media-query($media-type: print) {
+    .govuk-header {
+      border-bottom-width: 0;
+      color: govuk-colour("black");
+      background: transparent;
+    }
+
+    // Hide the inverted crown when printing in browsers that don't support SVG.
+    .govuk-header__logotype-crown-fallback-image {
+      display: none;
+    }
+
+    .govuk-header__link {
+      &:link,
+      &:visited {
+        color: govuk-colour("black");
+      }
+
+      // Do not append link href to GOV.UK link when printing (e.g. '(/)')
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  @if $govuk-use-legacy-font {
+    // Begin adjustments for font baseline offset
+    // These should be removed when the font is updated with the correct baseline
+    .govuk-header__logotype-crown,
+    .govuk-header__logotype-crown-fallback-image {
+      position: relative;
+      top: -4px;
+      vertical-align: middle;
+    }
+
+    .govuk-header {
+      $offset: 3px;
+      padding-top: $offset;
+    }
+
+    .govuk-header__link--homepage {
+      line-height: 30px;
+    }
+    // End adjustments
+  }
+}