defra_ruby_template 3.13.0

data/vendor/assets/stylesheets/helpers/_media-queries.scss

@@ -0,0 +1,91 @@
+////
+/// @group helpers/layout
+////
+
+// =========================================================
+// Wrangle sass-mq config...
+// =========================================================
+
+// Pass our breakpoints and static breakpoint definitions through to sass-mq.
+$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
+$mq-static-breakpoint: if(variable-exists(govuk-ie8-breakpoint), $govuk-ie8-breakpoint, desktop);
+
+$mq-show-breakpoints: ();
+
+@if (variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints) {
+  $mq-show-breakpoints: map-keys($govuk-breakpoints);
+}
+
+// When building a stylesheet for IE8, set $mq-responsive to false in order to
+// 'rasterize' any media queries.
+
+$mq-responsive: true;
+@if (variable-exists(govuk-is-ie8) and $govuk-is-ie8) {
+  $mq-responsive: false;
+}
+
+// This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
+// the current breakpoint from being included multiple times.
+//
+// We can't use the `exports` mixin for this because import directives cannot be
+// used within control directives 😠
+$sass-mq-already-included: false !default;
+
+@if $sass-mq-already-included {
+  $mq-show-breakpoints: ();
+}
+
+@import "../vendor/sass-mq";
+
+$sass-mq-already-included: true;
+
+// =========================================================
+// Helpers
+// =========================================================
+
+/// Media Query
+///
+/// This is a currently a wrapper for sass-mq - abstracted so that we can
+/// replace it in the future if we so choose.
+///
+/// @param {String | Boolean} $from [false] - One of $govuk-breakpoints
+/// @param {String | Boolean} $until [false] - One of $govuk-breakpoints
+/// @param {String | Boolean} $and [false] - Additional media query parameters
+/// @param {String} $media-type [all] - Media type: screen, print…
+///
+/// @ignore Undocumented mq API, for advanced use only:
+/// @ignore @param {Map} $breakpoints [$govuk-breakpoints]
+/// @ignore @param {String} $static-breakpoint [$govuk-ie8-breakpoint]
+/// @ignore @param {Boolean} $responsive [$govuk-is-ie8]
+///
+/// @content styling rules, wrapped into a @media query when $responsive is true
+///
+/// @example scss
+///  .element {
+///    @include govuk-media-query($from: mobile) {
+///      color: red;
+///    }
+///    @include govuk-media-query($until: tablet) {
+///      color: blue;
+///    }
+///    @include govuk-media-query(mobile, tablet) {
+///      color: green;
+///    }
+///    @include govuk-media-query($from: tablet, $and: '(orientation: landscape)') {
+///      color: teal;
+///    }
+///    @include govuk-media-query(950px) {
+///      color: hotpink;
+///    }
+///    @include govuk-media-query(tablet, $media-type: screen) {
+///      color: hotpink;
+///    }
+///  }
+///
+/// @access public
+
+@mixin govuk-media-query($args...) {
+  @include mq($args...) {
+    @content;
+  }
+}

data/vendor/assets/stylesheets/helpers/_shape-arrow.scss

@@ -0,0 +1,80 @@
+////
+/// @group helpers/shapes
+////
+
+/// Calculate the height of an equilateral triangle
+///
+/// Multiplying half the length of the base of an equilateral triangle by the
+/// square root of three gives us its height. We use 1.732 as an approximation.
+///
+/// @param {Number} $base - Length of the base of the triangle
+/// @return {Number} Calculated height of the triangle
+/// @access private
+
+@function _govuk-equilateral-height($base) {
+  $square-root-of-three: 1.732;
+
+  @return ($base / 2) * $square-root-of-three;
+}
+
+/// Arrow mixin
+///
+/// Generate Arrows (triangles) by using a mix of transparent (1) and coloured
+/// borders. The coloured borders inherit the text colour of the element (2).
+///
+/// Ensure the arrow is rendered correctly if browser colours are overridden by
+/// providing a clip path (3). Without this the transparent borders are
+/// overridden to become visible which results in a square.
+///
+/// We need both because older browsers do not support clip-path.
+///
+/// @param {String} $direction - Direction for arrow: up, right, down, left.
+/// @param {Number} $base - Length of the triangle 'base' side
+/// @param {Number} $height [null] - Height of triangle. Omit for equilateral.
+/// @param {String} $display [block] - CSS display property of the arrow
+///
+/// @access public
+
+@mixin govuk-shape-arrow($direction, $base, $height: null, $display: block) {
+  display: $display;
+
+  width: 0;
+  height: 0;
+
+  border-style: solid;
+  border-color: transparent; // 1
+
+  $perpendicular: $base / 2;
+
+  @if ($height == null) {
+    $height: _govuk-equilateral-height($base);
+  }
+
+  @if $direction == "up" {
+    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+            clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3
+
+    border-width: 0 $perpendicular $height $perpendicular;
+    border-bottom-color: inherit; // 2
+  } @else if $direction == "right" {
+    -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+            clip-path: polygon(0% 0%, 100% 50%, 0% 100%); // 3
+
+    border-width: $perpendicular 0 $perpendicular $height;
+    border-left-color: inherit; // 2
+  } @else if $direction == "down" {
+    -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+            clip-path: polygon(0% 0%, 50% 100%, 100% 0%); // 3
+
+    border-width: $height $perpendicular 0 $perpendicular;
+    border-top-color: inherit; // 2
+  } @else if $direction == "left" {
+    -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
+            clip-path: polygon(0% 50%, 100% 100%, 100% 0%); // 3
+
+    border-width: $perpendicular $height $perpendicular 0;
+    border-right-color: inherit; // 2
+  } @else {
+    @error "Invalid arrow direction: expected `up`, `right`, `down` or `left`, got `#{$direction}`";
+  }
+}

data/vendor/assets/stylesheets/helpers/_spacing.scss

@@ -0,0 +1,153 @@
+////
+/// @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.sccs`)
+///
+/// @returns {String} Spacing Measurement eg. 10px
+///
+/// @example scss
+///   .element {
+///     padding: govuk-spacing(5);
+///     top: govuk-spacing(2) !important; // if `!important` is required
+///   }
+/// @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}.";
+  }
+
+  @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`.";
+  }
+
+  @return map-get($govuk-spacing-points, $spacing-point);
+}
+
+/// 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 $breakpoint == null {
+
+      @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/helpers/_typography.scss

@@ -0,0 +1,207 @@
+////
+/// @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 'font map' as an argument and uses it to create font-size and
+/// line-height declarations for different breakpoints, and for print.
+///
+/// Example font map:
+///
+/// $my-font-map: (
+///   null: (
+///     font-size: 16px,
+///     line-height: 20px
+///   ),
+///   tablet: (
+///     font-size: 19px,
+///     line-height: 25px
+///   ),
+///   print: (
+///     font-size: 14pt,
+///     line-height: 1.15
+///   )
+/// );
+///
+/// @param {Map} $font-map - Font map
+/// @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`.
+///
+/// @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 $breakpoint == null {
+      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} $size - Size of the font as it would appear on desktop -
+///   uses the responsive font size map
+/// @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
+///
+/// @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);
+  }
+}