dxw_govuk_frontend_rails 2.9.0.pre.alpha.1

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

@@ -0,0 +1,107 @@
+////
+/// @group helpers
+////
+
+/// Grid width percentage
+///
+/// @param {String} $key - Name of grid width (e.g. two-thirds)
+/// @return {Number} Percentage width
+/// @throw if `$key` is not a valid grid width
+/// @access public
+
+@function govuk-grid-width($key) {
+  @if map-has-key($govuk-grid-widths, $key) {
+    @return map-get($govuk-grid-widths, $key);
+  }
+
+  @error "Unknown grid width `#{$key}`";
+}
+
+/// Grid width percentage (alias)
+///
+/// @alias govuk-grid-width
+/// @deprecated To be removed in v3.0, replaced by govuk-grid-width
+@function grid-width($key) {
+  @return govuk-grid-width($key);
+}
+
+/// Generate grid row styles
+///
+/// Creates a grid row class with a standardised margin.
+///
+/// @param {String} $class [govuk-grid-row] CSS class name
+///
+/// @example scss - Default
+///   @include govuk-grid-row;
+///
+/// @example scss - Customising the class name
+///   @include govuk-grid-row("app-grid");
+///
+/// @access public
+/// @deprecated To be removed in v3.0, replaced by the govuk-grid-row class
+
+@mixin govuk-grid-row($class: "govuk-grid-row") {
+  .#{$class} {
+    @include govuk-clearfix;
+    margin-right: - ($govuk-gutter-half);
+    margin-left: - ($govuk-gutter-half);
+  }
+}
+
+/// Generate grid column styles
+///
+/// Creates a grid column with standard gutter between the columns.
+///
+/// If a `$class` is provided (which is the default, but deprecated behaviour),
+/// the generated rules will be wrapped in a predefined selector in the format
+/// `$class-$width` (e.g. `govuk-grid-column-full`). This behaviour is
+/// deprecated and will be removed in v3.0
+///
+/// Grid widths are defined in the `$govuk-grid-widths` map.
+///
+/// By default the column width changes from 100% to specified width at the
+/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
+/// parameter.
+///
+/// @param {String} $width [full] name of a grid width from $govuk-grid-widths
+/// @param {String} $float [left] left | right
+/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
+/// @param {String} $class [govuk-grid-column] CSS class name (deprecated)
+///
+/// @example scss - Default
+///   .govuk-grid-column-two-thirds {
+///     @include govuk-grid-column(two-thirds, $class: false)
+///   }
+///
+/// @example scss - Customising the breakpoint where width percentage is applied
+///   .govuk-grid-column-one-half-at-desktop {
+///     @include govuk-grid-column(one-half, $at: desktop);
+///   }
+///
+/// @example scss - Customising the float direction
+///   .govuk-grid-column-one-half-right {
+///     @include govuk-grid-column(two-thirds, $float: right, $class: false);
+///   }
+///
+/// @example scss - Customising the class name (deprecated)
+///   @include govuk-grid-column(one-half, $class: "test-column");
+///
+/// @access public
+
+@mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "govuk-grid-column") {
+  @if ($class) {
+    .#{$class}-#{$width} {
+      @include govuk-grid-column($width, $float, $at, $class: false);
+    }
+  } @else {
+    box-sizing: border-box;
+    @if $at != desktop {
+      width: 100%;
+    }
+    padding: 0 $govuk-gutter-half;
+    @include govuk-media-query($from: $at) {
+      width: govuk-grid-width($width);
+      float: $float;
+    }
+  }
+}

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

@@ -0,0 +1,200 @@
+////
+/// @group helpers
+////
+
+/// Common link mixin
+///
+/// Provides the typography and focus state, regardless of link style.
+///
+/// @access public
+
+@mixin govuk-link-common {
+  @include govuk-typography-common;
+  @include govuk-focusable-fill;
+}
+
+/// Default link style mixin
+///
+/// Provides the default unvisited, visited, hover and active states for links.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-default;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-default {
+  &:link {
+    color: $govuk-link-colour;
+  }
+
+  &:visited {
+    color: $govuk-link-visited-colour;
+  }
+
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  &:active {
+    color: $govuk-link-active-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+}
+
+/// Muted style link mixin
+///
+/// Used for secondary links on a page - the link will appear in muted colours
+/// regardless of visited state.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-muted;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-muted {
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: $govuk-secondary-text-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-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.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      @include govuk-text-colour;
+    }
+  }
+}
+
+/// Text style link mixin
+///
+/// Overrides the colour of links to match the text colour. Generally used by
+/// navigation components, such as breadcrumbs or the back link.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-text;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-text {
+  // Override link colour to use text colour
+  &:link,
+  &:visited,
+  &:hover,
+  &:active,
+  &:focus {
+    @include govuk-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.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      @include govuk-text-colour;
+    }
+  }
+}
+
+
+/// No visited state link mixin
+///
+/// Used in cases where it is not helpful to distinguish between visited and
+/// non-visited links.
+///
+/// For example, navigation links to pages with dynamic content like admin
+/// dashboards. The content on the page is changing all the time, so the fact
+/// that you’ve visited it before is not important.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-no-visited-state;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-no-visited-state {
+  &:link {
+    color: $govuk-link-colour;
+  }
+
+  &:visited {
+    color: $govuk-link-colour;
+  }
+
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  &:active {
+    color: $govuk-link-active-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+}
+
+/// Print friendly link mixin
+///
+/// When printing, append the the destination URL to the link text, as long
+/// as the URL starts with either `/`, `http://` or `https://`.
+///
+/// @access public
+
+@mixin govuk-link-print-friendly {
+  @include govuk-media-query($media-type: print) {
+
+    &[href^="/"],
+    &[href^="http://"],
+    &[href^="https://"] {
+      &::after {
+        content: " (" attr(href) ")";
+        font-size: 90%;
+
+        // Because the URLs may be very long, ensure that they may be broken
+        // at arbitrary points if there are no otherwise acceptable break
+        // points in the line
+        word-wrap: break-word;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,95 @@
+////
+/// @group helpers
+////
+
+
+
+// =========================================================
+// 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
+////
+
+/// 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,152 @@
+////
+/// @group helpers
+////
+
+/// 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 iff($important, !important);
+      } @else {
+        #{$property}-#{$direction}: $breakpoint-value iff($important, !important);
+      }
+    } @else {
+      @include govuk-media-query($from: $breakpoint) {
+        @if $direction == all {
+          #{$property}: $breakpoint-value iff($important, !important);
+        } @else {
+          #{$property}-#{$direction}: $breakpoint-value iff($important, !important);
+        }
+      }
+    }
+  }
+}
+
+/// 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);
+}