katalyst-govuk-formbuilder 1.3.2 → 1.5.0

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/button/_index.scss

@@ -0,0 +1,297 @@
+////
+/// @group components/button
+////
+
+/// Button component background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-button-background-colour: govuk-colour("green", $legacy: #00823b) !default;
+
+/// Button component text colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-button-text-colour: govuk-colour("white") !default;
+
+@include govuk-exports("govuk/component/button") {
+  $govuk-button-colour: $govuk-button-background-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-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);
+    }
+  }
+
+  // @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] {
+    opacity: (.5);
+
+    &:hover {
+      background-color: $govuk-button-colour;
+      cursor: not-allowed;
+    }
+
+    &: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: -ms-inline-flexbox;
+
+    display: inline-flex;
+    min-height: auto;
+
+    -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;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+    -ms-flex-item-align: center;
+        align-self: center;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
+  }
+
+  @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/vendor/assets/stylesheets/govuk-frontend/govuk/components/character-count/_character-count.scss

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

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/character-count/_index.scss

@@ -0,0 +1,34 @@
+@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;
+
+    &:after {
+      // Zero-width space that will reserve vertical space when no hint is provided
+      // as:
+      // - setting a min-height is not possible without a magic number
+      //   because the line-height is set by the `govuk-font` call above
+      // - using `:empty` is not possible as the hint macro outputs line breaks
+      content: "\200B";
+    }
+  }
+
+  .govuk-character-count__message--disabled {
+    visibility: hidden;
+  }
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/checkboxes/_checkboxes.scss

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

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/checkboxes/_index.scss

@@ -0,0 +1,335 @@
+@import "../error-message/index";
+@import "../fieldset/index";
+@import "../hint/index";
+@import "../label/index";
+
+@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;
+  }
+
+  @include _govuk-not-ie8 {
+    // [ ] 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: "";
+      box-sizing: border-box;
+
+      position: absolute;
+      top: 11px;
+      left: 9px;
+      width: 23px;
+      height: 12px;
+
+      -webkit-transform: rotate(-45deg);
+
+          -ms-transform: rotate(-45deg);
+
+              transform: rotate(-45deg);
+      border: solid;
+      border-width: 0 0 5px 5px;
+      // 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;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
+    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: not-allowed;
+  }
+
+  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label,
+  .govuk-checkboxes__input:disabled ~ .govuk-hint {
+    opacity: .5;
+  }
+
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .govuk-checkboxes__divider {
+    $govuk-divider-size: $govuk-checkboxes-size !default;
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
+  // =========================================================
+  // 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: 12px;
+      height: 6.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 {
+      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;
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss

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