katalyst-govuk-formbuilder 1.3.2 → 1.4.0

data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_spacing.scss

@@ -0,0 +1,171 @@
+////
+/// @group helpers/spacing
+////
+
+// stylelint-disable indentation
+
+/// Single point spacing
+///
+/// Returns measurement corresponding to the spacing point requested.
+///
+/// @param {Number} $spacing-point - Point on the spacing scale
+///  (set in `settings/_spacing.scss`)
+///
+/// @returns {String} Spacing measurement eg. 10px
+///
+/// @example scss
+///   .element {
+///     padding: govuk-spacing(5);
+///   }
+///
+/// @example scss Using negative spacing
+///   .element {
+///     margin-top: govuk-spacing(-1);
+///   }
+///
+/// @example scss Marking spacing declarations as important
+///   .element {
+///     margin-top: govuk-spacing(1) !important;
+///   }
+///
+/// @access public
+
+@function govuk-spacing($spacing-point) {
+
+  $actual-input-type: type-of($spacing-point);
+  @if $actual-input-type != "number" {
+    @error "Expected a number (integer), but got a "
+    + "#{$actual-input-type}.";
+  }
+
+  $is-negative: false;
+  @if $spacing-point < 0 {
+    $is-negative: true;
+    $spacing-point: abs($spacing-point);
+  }
+
+  @if not map-has-key($govuk-spacing-points, $spacing-point) {
+    @error "Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.";
+  }
+
+  $value: map-get($govuk-spacing-points, $spacing-point);
+  @return if($is-negative, $value * -1, $value);
+}
+
+/// Responsive spacing
+///
+/// Adds responsive spacing (either padding or margin, depending on `$property`)
+/// by fetching a 'spacing map' from the responsive spacing scale, which defines
+/// different spacing values at different breakpoints.
+///
+/// To generate responsive spacing, use 'govuk-responsive-margin' or
+/// 'govuk-responsive-padding' mixins
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+///   scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+/// @param {String} $direction [all] - Direction to add spacing to
+///   (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing by
+///
+/// @access private
+
+@mixin _govuk-responsive-spacing($responsive-spacing-point, $property, $direction: "all", $important: false, $adjustment: false) {
+
+  $actual-input-type: type-of($responsive-spacing-point);
+  @if $actual-input-type != "number" {
+    @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
+  }
+
+  @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
+    @error "Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the "
+    + "responsive spacing scale in `_settings/spacing.scss`.";
+  }
+
+  // Make sure that the return value from `_settings/spacing.scss` is a map.
+  $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);
+  $actual-map-type: type-of($scale-map);
+  @if $actual-map-type != "map" {
+    @error "Expected a number (integer), but got a "
+    + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)";
+  }
+
+  // Loop through each breakpoint in the map
+  @each $breakpoint, $breakpoint-value in $scale-map {
+
+    @if $adjustment {
+      $breakpoint-value: $breakpoint-value + $adjustment;
+    }
+
+    // The 'null' breakpoint is for mobile.
+    @if not $breakpoint {
+
+      @if $direction == all {
+        #{$property}: $breakpoint-value if($important, !important, null);
+      } @else {
+        #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+      }
+    } @else {
+      @include govuk-media-query($from: $breakpoint) {
+        @if $direction == all {
+          #{$property}: $breakpoint-value if($important, !important, null);
+        } @else {
+          #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+        }
+      }
+    }
+  }
+}
+
+/// Responsive margin
+///
+/// Adds responsive margin by fetching a 'spacing map' from the responsive
+/// spacing scale, which defines different spacing values at different
+/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
+///
+/// @see {mixin} _govuk-responsive-spacing
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+/// scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $direction [all] - Direction to add spacing to
+///   (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing by
+///
+/// @example scss
+///   .element {
+///      @include govuk-responsive-margin(6, "left", $adjustment: 1px);
+///   }
+///
+/// @access public
+
+@mixin govuk-responsive-margin($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
+  @include _govuk-responsive-spacing($responsive-spacing-point, "margin", $direction, $important, $adjustment);
+}
+
+/// Responsive padding
+///
+/// Adds responsive padding by fetching a 'spacing map' from the responsive
+/// spacing scale, which defines different spacing values at different
+/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
+///
+/// @see {mixin} _govuk-responsive-spacing
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+///   scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $direction [all] - Direction to add spacing to
+///   (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing
+///
+/// @example scss
+///   .element {
+///      @include govuk-responsive-padding(6, "left", $adjustment: 1px);
+///   }
+///
+/// @access public
+
+@mixin govuk-responsive-padding($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
+  @include _govuk-responsive-spacing($responsive-spacing-point, "padding", $direction, $important, $adjustment);
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_typography.scss

@@ -0,0 +1,214 @@
+////
+/// @group helpers/typography
+////
+
+@import "../tools/px-to-rem";
+
+/// 'Common typography' helper
+///
+/// Sets the font family and associated properties, such as font smoothing. Also
+/// overrides the font for print.
+///
+/// @param {List} $font-family [$govuk-font-family] Font family to use
+/// @access public
+
+@mixin govuk-typography-common($font-family: $govuk-font-family) {
+  font-family: $font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  // If the user is using the default GDS Transport font we need to include
+  // the font-face declarations.
+  //
+  // We do not need to include the GDS Transport font-face declarations if
+  // alphagov/govuk_template is being used since nta will already be included by
+  // default.
+  @if $govuk-include-default-font-face {
+    @include _govuk-font-face-gds-transport;
+  }
+
+  @include govuk-media-query($media-type: print) {
+    font-family: $govuk-font-family-print;
+  }
+}
+
+/// Text colour helper
+///
+/// Sets the text colour, including a suitable override for print.
+///
+/// @access public
+
+@mixin govuk-text-colour {
+  color: $govuk-text-colour;
+
+  @include govuk-media-query($media-type: print) {
+    color: $govuk-print-text-colour;
+  }
+}
+
+/// Regular font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-regular($important: false) {
+  font-weight: $govuk-font-weight-regular if($important, !important, null);
+}
+
+/// Bold font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-bold($important: false) {
+  font-weight: $govuk-font-weight-bold if($important, !important, null);
+}
+
+/// Convert line-heights specified in pixels into a relative value, unless
+/// they are already unit-less (and thus already treated as relative values)
+/// or the units do not match the units used for the font size.
+///
+/// @param {Number} $line-height Line height
+/// @param {Number} $font-size Font size
+/// @return {Number} The line height as either a relative value or unmodified
+///
+/// @access private
+
+@function _govuk-line-height($line-height, $font-size) {
+  @if not unitless($line-height) and unit($line-height) == unit($font-size) {
+    $line-height: $line-height / $font-size;
+  }
+
+  @return $line-height;
+}
+
+/// Responsive typography helper
+///
+/// Takes a point from the responsive 'font map' as an argument (the size as it
+/// would appear on tablet and above), and uses it to create font-size and
+/// line-height declarations for different breakpoints, and print.
+///
+/// Example font map:
+///
+/// 19: (
+///   null: (
+///     font-size: 16px,
+///     line-height: 20px
+///   ),
+///   tablet: (
+///     font-size: 19px,
+///     line-height: 25px
+///   ),
+///   print: (
+///     font-size: 14pt,
+///     line-height: 1.15
+///   )
+/// );
+///
+/// @param {Number} $size - Point from the spacing scale (the size as it would
+///   appear on tablet and above)
+/// @param {Number} $override-line-height [false] - Non responsive custom line
+///   height. Omit to use the line height from the font map.
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`.
+///
+/// @throw if `$size` is not a valid point from the spacing scale
+///
+/// @access public
+
+@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
+
+  @if not map-has-key($govuk-typography-scale, $size) {
+    @error "Unknown font size `#{$size}` - expected a point from the typography scale.";
+  }
+
+  $font-map: map-get($govuk-typography-scale, $size);
+
+  @each $breakpoint, $breakpoint-map in $font-map {
+    $font-size: map-get($breakpoint-map, "font-size");
+    $font-size-rem: govuk-px-to-rem($font-size);
+
+    $line-height: _govuk-line-height(
+      $line-height: if(
+        $override-line-height,
+        $override-line-height,
+        map-get($breakpoint-map, "line-height")
+      ),
+      $font-size: $font-size
+    );
+
+    // Mark rules as !important if $important is true - this will result in
+    // these variables becoming strings, so this needs to happen *after* they
+    // are used in calculations
+    $font-size: $font-size if($important, !important, null);
+    $font-size-rem: $font-size-rem if($important, !important, null);
+    $line-height: $line-height if($important, !important, null);
+
+    @if not $breakpoint {
+      font-size: $font-size;
+      @if $govuk-typography-use-rem {
+        font-size: $font-size-rem;
+      }
+      line-height: $line-height;
+    } @else if $breakpoint == "print" {
+      @include govuk-media-query($media-type: print) {
+        font-size: $font-size;
+        line-height: $line-height;
+      }
+    } @else {
+      @include govuk-media-query($from: $breakpoint) {
+        font-size: $font-size;
+        @if $govuk-typography-use-rem {
+          font-size: $font-size-rem;
+        }
+        line-height: $line-height;
+      }
+    }
+  }
+}
+
+/// Font helper
+///
+/// @param {Number | Boolean} $size Point from the spacing scale (the size as it
+///   would appear on tablet and above). Use `false` to avoid setting a size.
+/// @param {String} $weight [regular] - Weight: `bold` or `regular`
+/// @param {Boolean} $tabular [false] - Whether to use tabular numbers or not
+/// @param {Number} $line-height [false] - Line-height, if overriding the
+///   default
+///
+/// @throw if `$size` is not a valid point from the spacing scale (or false)
+///
+/// @access public
+
+@mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {
+  @if $tabular {
+    // if govuk-font-family-tabular is set use $govuk-font-family-tabular
+    @if $govuk-font-family-tabular {
+      @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+    } @else {
+      @include govuk-typography-common;
+      -webkit-font-feature-settings: "tnum" 1;
+              font-feature-settings: "tnum" 1;
+
+      @supports (font-variant-numeric: tabular-nums) {
+        -webkit-font-feature-settings: normal;
+                font-feature-settings: normal;
+        font-variant-numeric: tabular-nums;
+      }
+    }
+  } @else {
+    @include govuk-typography-common;
+  }
+
+  @if $weight == regular {
+    @include govuk-typography-weight-regular;
+  } @else if $weight == bold {
+    @include govuk-typography-weight-bold;
+  }
+
+  @if $size {
+    @include govuk-typography-responsive($size, $override-line-height: $line-height);
+  }
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/helpers/_visually-hidden.scss

@@ -0,0 +1,84 @@
+////
+/// @group helpers/accessibility
+////
+
+/// Hide an element visually, but have it available for screen readers
+///
+/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+///   - Hiding Content for Accessibility, Jonathan Snook, February 2011
+/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158
+///   - h5bp/html5-boilerplate - Thanks!
+///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
+/// @access public
+
+@mixin govuk-visually-hidden($important: true) {
+  position: absolute if($important, !important, null);
+
+  width: 1px if($important, !important, null);
+  height: 1px if($important, !important, null);
+  // If margin is set to a negative value it can cause text to be announced in
+  // the wrong order in VoiceOver for OSX
+  margin: 0 if($important, !important, null);
+  padding: 0 if($important, !important, null);
+
+  overflow: hidden if($important, !important, null);
+  clip: rect(0 0 0 0) if($important, !important, null);
+  -webkit-clip-path: inset(50%) if($important, !important, null);
+          clip-path: inset(50%) if($important, !important, null);
+
+  border: 0 if($important, !important, null);
+
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap if($important, !important, null);
+}
+
+/// Hide an element visually, but have it available for screen readers whilst
+/// allowing the element to be focused when navigated to via the keyboard (e.g.
+/// for the skip link)
+///
+/// This is slightly less opinionated about borders and padding to make it
+/// easier to style the focussed element.
+///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
+/// @access public
+
+@mixin govuk-visually-hidden-focusable($important: true) {
+  position: absolute if($important, !important, null);
+
+  width: 1px if($important, !important, null);
+  height: 1px if($important, !important, null);
+  // If margin is set to a negative value it can cause text to be announced in
+  // the wrong order in VoiceOver for OSX
+  margin: 0 if($important, !important, null);
+
+  overflow: hidden if($important, !important, null);
+  clip: rect(0 0 0 0) if($important, !important, null);
+  -webkit-clip-path: inset(50%) if($important, !important, null);
+          clip-path: inset(50%) if($important, !important, null);
+
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap if($important, !important, null);
+
+  &:active,
+  &:focus {
+    position: static if($important, !important, null);
+
+    width: auto if($important, !important, null);
+    height: auto if($important, !important, null);
+    margin: inherit if($important, !important, null);
+
+    overflow: visible if($important, !important, null);
+    clip: auto if($important, !important, null);
+    -webkit-clip-path: none if($important, !important, null);
+            clip-path: none if($important, !important, null);
+
+    white-space: inherit if($important, !important, null);
+  }
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_all.scss

@@ -0,0 +1,6 @@
+@import "button-group";
+@import "form-group";
+@import "grid";
+@import "main-wrapper";
+@import "template";
+@import "width-container";

data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_button-group.scss

@@ -0,0 +1,85 @@
+@import "../base";
+
+@include govuk-exports("govuk/objects/button-group") {
+  // Button groups can be used to group buttons and links together as a group.
+  //
+  // Within a button group:
+  //
+  // - links are styled to line up visually with the buttons, including being
+  //   centre-aligned on mobile
+  // - spacing between the buttons and links is handled automatically, including
+  //   when they wrap across multiple lines
+  .govuk-button-group {
+    $horizontal-gap: govuk-spacing(3);
+    $vertical-gap: govuk-spacing(3);
+
+    // These need to be kept in sync with the button component's styles
+    $button-padding: govuk-spacing(2);
+    $button-shadow-size: $govuk-border-width-form-element;
+
+    $link-spacing: govuk-spacing(1);
+
+    @include govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
+
+    // Flexbox is used to center-align links on mobile, align everything along
+    // the baseline on tablet and above, and to removes extra whitespace that
+    // we'd get between the buttons and links because they're inline-blocks.
+    //
+    // Ideally we'd use `gap` with flexbox rather than having to do it all with
+    // margins, but unfortunately the support isn't there (yet) and @supports
+    // doesn't play nicely with it
+    // (https://github.com/w3c/csswg-drafts/issues/3559)
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+        flex-direction: column;
+    -ms-flex-align: center;
+        align-items: center;
+
+    // Give links within the button group the same font-size and line-height
+    // as buttons.
+    //
+    // Because we want the focus state to be tight around the link text, we use
+    // margins where the buttons would use padding.
+    .govuk-link {
+      @include govuk-font($size: 19, $line-height: 19px);
+      display: inline-block;
+      // Prevent links overflowing their container in IE10/11 because of bug
+      // with align-items: center
+      max-width: 100%;
+      margin-top: $link-spacing;
+      margin-bottom: $link-spacing + $vertical-gap;
+      text-align: center;
+    }
+
+    // Reduce the bottom margin to the size of the vertical gap (accommodating
+    // the button shadow) – the 'lost' margin is moved to the button-group.
+    .govuk-button {
+      margin-bottom: $vertical-gap + $button-shadow-size;
+    }
+
+    // On tablet and above, we also introduce a 'column gap' between the
+    // buttons and links in each row and left align links
+    @include govuk-media-query($from: tablet) {
+      // Cancel out the column gap for the last item in each row
+      margin-right: ($horizontal-gap * -1);
+
+      -ms-flex-direction: row;
+
+          flex-direction: row;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+
+      .govuk-button,
+      .govuk-link {
+        margin-right: $horizontal-gap;
+      }
+
+      .govuk-link {
+        text-align: left;
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_form-group.scss

@@ -0,0 +1,23 @@
+@import "../base";
+
+@include govuk-exports("govuk/objects/form-group") {
+  .govuk-form-group {
+    @include govuk-clearfix;
+    @include govuk-responsive-margin(6, "bottom");
+
+    .govuk-form-group:last-of-type {
+      margin-bottom: 0; // Remove margin from last item in nested groups
+    }
+  }
+
+  .govuk-form-group--error {
+    padding-left: govuk-spacing(3);
+    border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
+
+    .govuk-form-group {
+      // Reset error styles in nested form groups that might have error class
+      padding: 0;
+      border: 0;
+    }
+  }
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_grid.scss

@@ -0,0 +1,24 @@
+@import "../base";
+
+@include govuk-exports("govuk/objects/grid") {
+  .govuk-grid-row {
+    @include govuk-clearfix;
+    margin-right: - ($govuk-gutter-half);
+    margin-left: - ($govuk-gutter-half);
+  }
+
+  @each $width in map-keys($govuk-grid-widths) {
+    .govuk-grid-column-#{$width} {
+      @include govuk-grid-column($width);
+    }
+  }
+
+  // These *must* be defined in a separate loop as they have the same
+  // specificity as the non-breakpoint specific classes, so need to appear after
+  // them in the outputted CSS
+  @each $width in map-keys($govuk-grid-widths) {
+    .govuk-grid-column-#{$width}-from-desktop {
+      @include govuk-grid-column($width, $at: desktop);
+    }
+  }
+}

data/vendor/assets/stylesheets/govuk-frontend/govuk/objects/_main-wrapper.scss

@@ -0,0 +1,53 @@
+@import "../base";
+
+////
+/// @group objects/layout
+////
+
+// Example usage with Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <!-- Breadcrumbs, phase banners, back links are placed in here. -->
+//   <div class="govuk-main-wrapper">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+//
+// Example usage without Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <div class="govuk-main-wrapper govuk-main-wrapper--l">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+
+@include govuk-exports("govuk/objects/main-wrapper") {
+  .govuk-main-wrapper {
+    // In IE11 the `main` element can be used, but is not recognized  –
+    // meaning it's not defined in IE's default style sheet,
+    // so it uses CSS initial value, which is inline.
+    display: block;
+    padding-top: govuk-spacing(4);
+    padding-bottom: govuk-spacing(4);
+
+    @include govuk-media-query($from: tablet) {
+      // This spacing is manually adjusted to replicate the margin of
+      // govuk-heading-xl (50px) minus the spacing of back link and
+      // breadcrumbs (10px)
+      padding-top: govuk-spacing(7);
+      padding-bottom: govuk-spacing(7);
+    }
+  }
+
+  // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the
+  // correct spacing depending on whether there are any elements
+  // (such the back link, breadcrumbs or phase banner components) before the
+  // `.govuk-main-wrapper` in the `govuk-width-container`.
+  //
+  // If you need to control the spacing manually, use the
+  // `govuk-main-wrapper--l` modifier instead.
+  .govuk-main-wrapper--auto-spacing:first-child,
+  .govuk-main-wrapper--l {
+    @include govuk-responsive-padding(8, "top");
+  }
+}