govuk_tech_docs 2.2.1 → 2.4.1

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

@@ -0,0 +1,288 @@
+@include govuk-exports("govuk/component/button") {
+  $govuk-button-colour: govuk-colour("green", $legacy: #00823b);
+  $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-colour("white");
+
+  // Secondary button variables
+  $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
+  $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-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");
+
+  // 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
+  // increase the bottom margin to include it (s2).
+  $button-shadow-size: $govuk-border-width-form-element;
+
+  .govuk-button {
+    @include govuk-font($size: 19, $line-height: 19px);
+
+    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
+    @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
+    padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
+    border: $govuk-border-width-form-element solid transparent;
+    border-radius: 0;
+    color: $govuk-button-text-colour;
+    background-color: $govuk-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+    text-align: center;
+    vertical-align: top;
+    cursor: pointer;
+    -webkit-appearance: none;
+
+    @include govuk-if-ie8 {
+      border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
+    }
+
+    @include govuk-media-query($from: tablet) {
+      width: auto;
+    }
+
+    // Ensure that any global link styles are overridden
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-button-text-colour;
+      text-decoration: none;
+    }
+
+    // Fix unwanted button padding in Firefox
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+
+    &:hover {
+      background-color: $govuk-button-hover-colour;
+    }
+
+    &:active {
+      // Bump the button down so it looks like its being pressed in
+      top: $button-shadow-size;
+
+      @include govuk-if-ie8 {
+        border-bottom-width: 0;
+      }
+    }
+
+    &:focus {
+      border-color: $govuk-focus-colour;
+      // When colours are overridden, for example when users have a dark mode,
+      // 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 {
+        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 {
+        color: $govuk-focus-text-colour;
+        background-color: $govuk-focus-colour;
+      }
+      box-shadow: inset 0 0 0 1px $govuk-focus-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-button-text-colour;
+      }
+    }
+
+    &:focus:not(:active):not(:hover) {
+      border-color: $govuk-focus-colour;
+      color: $govuk-focus-text-colour;
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 2px 0 $govuk-focus-text-colour;
+    }
+
+    // The following adjustments do not work for <input type="button"> as
+    // non-container elements cannot include pseudo elements (i.e. ::before).
+
+    // Use a pseudo element to expand the click target area to include the
+    // button's shadow as well, in case users try to click it.
+    &:before {
+      content: "";
+      display: block;
+
+      position: absolute;
+
+      top: -$govuk-border-width-form-element;
+      right: -$govuk-border-width-form-element;
+      bottom: -($govuk-border-width-form-element + $button-shadow-size);
+      left: -$govuk-border-width-form-element;
+
+      background: transparent;
+    }
+
+    // When the button is active it is shifted down by $button-shadow-size to
+    // denote a 'pressed' state. If the user happened to click at the very top
+    // of the button, their mouse is no longer over the button (because it has
+    // 'moved beneath them') and so the click event is not fired.
+    //
+    // This corrects that by shifting the top of the pseudo element so that it
+    // continues to cover the area that the user originally clicked, which means
+    // the click event is still fired.
+    //
+    // 🎉
+    &:active:before {
+      top: -($govuk-border-width-form-element + $button-shadow-size);
+    }
+  }
+
+  .govuk-button--disabled,
+  .govuk-button[disabled="disabled"],
+  .govuk-button[disabled] {
+    opacity: (.5);
+
+    &:hover {
+      background-color: $govuk-button-colour;
+      cursor: default;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:active {
+      top: 0;
+      box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+      @include govuk-if-ie8 {
+        border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
+      }
+    }
+  }
+
+  .govuk-button--secondary {
+    background-color: $govuk-secondary-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-secondary-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-secondary-button-text-colour;
+      }
+    }
+
+    &:hover {
+      background-color: $govuk-secondary-button-hover-colour;
+
+      &[disabled] {
+        background-color: $govuk-secondary-button-colour;
+      }
+    }
+  }
+
+  .govuk-button--warning {
+    background-color: $govuk-warning-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-warning-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-warning-button-text-colour;
+      }
+    }
+
+    &:hover {
+      background-color: $govuk-warning-button-hover-colour;
+
+      &[disabled] {
+        background-color: $govuk-warning-button-colour;
+      }
+    }
+  }
+
+  .govuk-button--start {
+    @include govuk-typography-weight-bold;
+    @include govuk-typography-responsive($size: 24, $override-line-height: 1);
+
+    display: -webkit-inline-box;
+
+    display: -webkit-inline-flex;
+
+    display: -ms-inline-flexbox;
+
+    display: inline-flex;
+    min-height: auto;
+
+    -webkit-box-pack: center;
+
+    -webkit-justify-content: center;
+
+        -ms-flex-pack: center;
+
+            justify-content: center;
+  }
+
+  .govuk-button__start-icon {
+    margin-left: govuk-spacing(1);
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(2);
+    }
+    vertical-align: middle;
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center;
+  }
+
+  @if $govuk-use-legacy-font {
+    // Begin adjustments for font baseline offset when using v1 of nta
+    $offset: 2;
+
+    .govuk-button {
+      padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
+      padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
+    }
+
+    .govuk-button__start-icon {
+      margin-top: -3px;
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/character-count/_character-count.scss

@@ -1,31 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@import "../error-message/error-message";
-@import "../hint/hint";
-@import "../label/label";
-
-@include govuk-exports("govuk/component/character-count") {
-  .govuk-character-count {
-    @include govuk-responsive-margin(6, "bottom");
-
-    .govuk-form-group,
-    .govuk-textarea {
-      margin-bottom: govuk-spacing(1);
-    }
-
-    .govuk-textarea--error {
-      padding: govuk-spacing(1) - 2; // Stop a "jump" when width of border changes
-    }
-  }
-
-  .govuk-character-count__message {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .govuk-character-count__message--disabled {
-    visibility: hidden;
-  }
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss

@@ -0,0 +1,25 @@
+@import "../error-message/index";
+@import "../hint/index";
+@import "../label/index";
+@import "../textarea/index";
+
+@include govuk-exports("govuk/component/character-count") {
+  .govuk-character-count {
+    @include govuk-responsive-margin(6, "bottom");
+
+    .govuk-form-group,
+    .govuk-textarea {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  .govuk-character-count__message {
+    @include govuk-font($size: false, $tabular: true);
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .govuk-character-count__message--disabled {
+    visibility: hidden;
+  }
+}

data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js

@@ -1018,7 +1018,7 @@ function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
   }
 }
 
@@ -1062,13 +1062,22 @@ CharacterCount.prototype.init = function () {
   // Remove hard limit if set
   $module.removeAttribute('maxlength');
 
-  // Bind event changes to the textarea
-  var boundChangeEvents = this.bindChangeEvents.bind(this);
-  boundChangeEvents();
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of the character count is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.sync.bind(this));
+  } else {
+    window.addEventListener('DOMContentLoaded', this.sync.bind(this));
+  }
+
+  this.sync();
+};
 
-  // Update count message
-  var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-  boundUpdateCountMessage();
+CharacterCount.prototype.sync = function () {
+  this.bindChangeEvents();
+  this.updateCountMessage();
 };
 
 // Read data attributes
@@ -1116,8 +1125,7 @@ CharacterCount.prototype.checkIfValueChanged = function () {
   if (!this.$textarea.oldValue) this.$textarea.oldValue = '';
   if (this.$textarea.value !== this.$textarea.oldValue) {
     this.$textarea.oldValue = this.$textarea.value;
-    var boundUpdateCountMessage = this.updateCountMessage.bind(this);
-    boundUpdateCountMessage();
+    this.updateCountMessage();
   }
 };
 

data/node_modules/govuk-frontend/govuk/components/checkboxes/_checkboxes.scss

@@ -1,308 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@import "../error-message/error-message";
-@import "../fieldset/fieldset";
-@import "../hint/hint";
-@import "../label/label";
-
-@include govuk-exports("govuk/component/checkboxes") {
-
-  $govuk-touch-target-size: 44px;
-  $govuk-checkboxes-size: 40px;
-  $govuk-small-checkboxes-size: 24px;
-  $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
-
-  .govuk-checkboxes__item {
-    @include govuk-font($size: 19);
-
-    display: block;
-    position: relative;
-
-    min-height: $govuk-checkboxes-size;
-
-    margin-bottom: govuk-spacing(2);
-    padding-left: $govuk-checkboxes-size;
-
-    clear: left;
-  }
-
-  .govuk-checkboxes__item:last-child,
-  .govuk-checkboxes__item:last-of-type {
-    margin-bottom: 0;
-  }
-
-  .govuk-checkboxes__input {
-    $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2;
-
-    cursor: pointer;
-
-    // IE8 doesn’t support pseudo-elements, so we don’t want to hide native
-    // elements there.
-    @include govuk-not-ie8 {
-      position: absolute;
-
-      z-index: 1;
-      top: $input-offset * -1;
-      left: $input-offset * -1;
-
-      width: $govuk-touch-target-size;
-      height: $govuk-touch-target-size;
-      margin: 0;
-
-      opacity: 0;
-    }
-
-    @include govuk-if-ie8 {
-      margin-top: 10px;
-      margin-right: $govuk-checkboxes-size / -2;
-      margin-left: $govuk-checkboxes-size / -2;
-      float: left;
-
-      // add focus outline to input
-      &:focus {
-        outline: $govuk-focus-width solid $govuk-focus-colour;
-      }
-    }
-  }
-
-  .govuk-checkboxes__label {
-    display: inline-block;
-    margin-bottom: 0;
-    padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1);
-    cursor: pointer;
-    // remove 300ms pause on mobile
-    -ms-touch-action: manipulation;
-        touch-action: manipulation;
-  }
-
-  // [ ] Check box
-  .govuk-checkboxes__label::before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $govuk-checkboxes-size;
-    height: $govuk-checkboxes-size;
-    border: $govuk-border-width-form-element solid currentColor;
-    background: transparent;
-  }
-
-  // ✔ Check mark
-  //
-  // The check mark is a box with a border on the left and bottom side (└──),
-  // rotated 45 degrees
-  .govuk-checkboxes__label::after {
-    content: "";
-
-    position: absolute;
-    top: 11px;
-    left: 9px;
-    width: 18px;
-    height: 7px;
-
-    -webkit-transform: rotate(-45deg);
-
-        -ms-transform: rotate(-45deg);
-
-            transform: rotate(-45deg);
-    border: solid;
-    border-width: 0 0 $govuk-border-width $govuk-border-width;
-    // Fix bug in IE11 caused by transform rotate (-45deg).
-    // See: alphagov/govuk_elements/issues/518
-    border-top-color: transparent;
-
-    opacity: 0;
-
-    background: transparent;
-  }
-
-  .govuk-checkboxes__hint {
-    display: block;
-    padding-right: $govuk-checkboxes-label-padding-left-right;
-    padding-left: $govuk-checkboxes-label-padding-left-right;
-  }
-
-  // Focused state
-  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
-    border-width: 4px;
-    box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
-  }
-
-  // Selected state
-  .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
-    opacity: 1;
-  }
-
-  // Disabled state
-  .govuk-checkboxes__input:disabled,
-  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
-    cursor: default;
-  }
-
-  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
-    opacity: .5;
-  }
-
-  // =========================================================
-  // Conditional reveals
-  // =========================================================
-
-  // The narrow border is used in the conditional reveals because the border has
-  // to be an even number in order to be centred under the 40px checkbox or radio.
-  $conditional-border-width: $govuk-border-width-narrow;
-  // Calculate the amount of padding needed to keep the border centered against the checkbox.
-  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
-  // Move the border centered with the checkbox
-  $conditional-margin-left: $conditional-border-padding;
-  // Move the contents of the conditional inline with the label
-  $conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right;
-
-  .govuk-checkboxes__conditional {
-    @include govuk-responsive-margin(4, "bottom");
-    margin-left: $conditional-margin-left;
-    padding-left: $conditional-padding-left;
-    border-left: $conditional-border-width solid $govuk-border-colour;
-
-    .js-enabled &--hidden {
-      display: none;
-    }
-
-    & > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // =========================================================
-  // Small checkboxes
-  // =========================================================
-
-  .govuk-checkboxes--small {
-
-    $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;
-    $label-offset: $govuk-touch-target-size - $input-offset;
-
-    .govuk-checkboxes__item {
-      @include govuk-clearfix;
-      min-height: 0;
-      margin-bottom: 0;
-      padding-left: $label-offset;
-      float: left;
-    }
-
-    // Shift the touch target into the left margin so that the visible edge of
-    // the control is aligned
-    //
-    //   ┆What colours do you like?
-    //  ┌┆───┐
-    //  │┆[] │ Purple
-    //  └┆▲──┘
-    //  ▲┆└─ Check box pseudo element, aligned with margin
-    //  └─── Touch target (invisible input), shifted into the margin
-    .govuk-checkboxes__input {
-      @include govuk-not-ie8 {
-        left: $input-offset * -1;
-      }
-
-      @include govuk-if-ie8 {
-        margin-left: $govuk-small-checkboxes-size * -1;
-      }
-    }
-
-    // Adjust the size and position of the label.
-    //
-    // Unlike larger checkboxes, we also have to float the label in order to
-    // 'shrink' it, preventing the hover state from kicking in across the full
-    // width of the parent element.
-    .govuk-checkboxes__label {
-      margin-top: -2px;
-      padding: 13px govuk-spacing(3) 13px 1px;
-      float: left;
-
-      @include govuk-media-query($from: tablet) {
-        padding: 11px govuk-spacing(3) 10px 1px;
-      }
-    }
-
-    // [ ] Check box
-    //
-    // Reduce the size of the check box [1], vertically center it within the
-    // touch target [2]
-    .govuk-checkboxes__label::before {
-      top: $input-offset - $govuk-border-width-form-element; // 2
-      width: $govuk-small-checkboxes-size; // 1
-      height: $govuk-small-checkboxes-size; // 1
-    }
-
-    // ✔ Check mark
-    //
-    // Reduce the size of the check mark and re-align within the checkbox
-    .govuk-checkboxes__label::after {
-      top: 15px;
-      left: 6px;
-      width: 9px;
-      height: 3.5px;
-      border-width: 0 0 3px 3px;
-    }
-
-    // Fix position of hint with small checkboxes
-    //
-    // Do not use hints with small checkboxes – because they're within the input
-    // wrapper they trigger the hover state, but clicking them doesn't actually
-    // activate the control.
-    //
-    // (If you do use them, they won't look completely broken... but seriously,
-    // don't use them)
-    .govuk-checkboxes__hint {
-      padding: 0;
-      clear: both;
-    }
-
-    // Align conditional reveals with small checkboxes
-    .govuk-checkboxes__conditional {
-      $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);
-      margin-left: $margin-left;
-      padding-left: $label-offset - ($margin-left + $conditional-border-width);
-      clear: both;
-    }
-
-    // Hover state for small checkboxes.
-    //
-    // We use a hover state for small checkboxes because the touch target size
-    // is so much larger than their visible size, and so we need to provide
-    // feedback to the user as to which checkbox they will select when their
-    // cursor is outside of the visible area.
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
-      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
-    }
-
-    // Because we've overridden the border-shadow provided by the focus state,
-    // we need to redefine that too.
-    //
-    // We use two box shadows, one that restores the original focus state [1]
-    // and another that then applies the hover state [2].
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
-      // sass-lint:disable indentation
-      box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
-                  0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
-    }
-
-    // For devices that explicitly don't support hover, don't provide a hover
-    // state (e.g. on touch devices like iOS).
-    //
-    // We can't use `@media (hover: hover)` because we wouldn't get the hover
-    // state in browsers that don't support `@media (hover)` (like Internet
-    // Explorer) – so we have to 'undo' the hover state instead.
-    @media (hover: none), (pointer: coarse) {
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
-        box-shadow: initial;
-      }
-
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
-        box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
-      }
-    }
-  }
-}
+@import "../../base";
+@import "./index";