dxw_govuk_frontend_rails 2.9.0.pre.alpha.1

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

@@ -0,0 +1,188 @@
+////
+/// @group helpers
+////
+
+@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 NTA font we need to include the font-face declarations.
+  // We do not need to include the NTA font-face declarations if alphagov/govuk_template is being used since they will already be included.
+  @if ($govuk-include-default-font-face) {
+    @include _govuk-font-face-nta;
+  }
+
+  @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 iff($important, !important);
+}
+
+/// 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 iff($important, !important);
+}
+
+/// 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 iff($important, !important);
+    $font-size-rem: $font-size-rem iff($important, !important);
+    $line-height: $line-height iff($important, !important);
+
+    @if $breakpoint == null {
+      font-size: $font-size; // sass-lint:disable no-duplicate-properties
+      @if $govuk-typography-use-rem {
+        font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
+      }
+      line-height: $line-height;
+    } @elseif $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; // sass-lint:disable no-duplicate-properties
+        @if $govuk-typography-use-rem {
+          font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
+        }
+        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 {
+    @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+  } @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/helpers/_visually-hidden.scss

@@ -0,0 +1,82 @@
+////
+/// @group helpers
+////
+
+/// 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 iff($important, !important);
+
+  width: 1px iff($important, !important);
+  height: 1px iff($important, !important);
+  // 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 iff($important, !important);
+  padding: 0 iff($important, !important);
+
+  overflow: hidden iff($important, !important);
+  clip: rect(0 0 0 0) iff($important, !important);
+  -webkit-clip-path: inset(50%) iff($important, !important);
+          clip-path: inset(50%) iff($important, !important);
+
+  border: 0 iff($important, !important);
+
+  // 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 iff($important, !important);
+}
+
+/// 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 iff($important, !important);
+
+  width: 1px iff($important, !important);
+  height: 1px iff($important, !important);
+  // 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 iff($important, !important);
+
+  overflow: hidden iff($important, !important);
+  clip: rect(0 0 0 0) iff($important, !important);
+  -webkit-clip-path: inset(50%) iff($important, !important);
+          clip-path: inset(50%) iff($important, !important);
+
+  // 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 iff($important, !important);
+
+  &:active,
+  &:focus {
+    position: static iff($important, !important);
+
+    width: auto iff($important, !important);
+    height: auto iff($important, !important);
+    margin: inherit iff($important, !important);
+
+    overflow: visible iff($important, !important);
+    clip: auto iff($important, !important);
+    -webkit-clip-path: none iff($important, !important);
+            clip-path: none iff($important, !important);
+
+    white-space: inherit iff($important, !important);
+  }
+}

data/vendor/assets/stylesheets/objects/_all.scss

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

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

@@ -0,0 +1,25 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
+@include govuk-exports("govuk/objects/form-group") {
+
+  .govuk-form-group {
+    @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/objects/_grid.scss

@@ -0,0 +1,27 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
+@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, $class: false)
+    }
+  }
+
+  // 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, $class: false)
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
+// 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>
+
+
+@mixin 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);
+  }
+}
+
+// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase banners or back links
+@mixin govuk-main-wrapper--l {
+  @include govuk-responsive-padding(8, "top");
+}
+
+@include govuk-exports("govuk/objects/main-wrapper") {
+  .govuk-main-wrapper {
+    @include govuk-main-wrapper;
+  }
+
+  .govuk-main-wrapper--l {
+    @include govuk-main-wrapper--l;
+  }
+}

data/vendor/assets/stylesheets/objects/_width-container.scss

@@ -0,0 +1,63 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
+@mixin govuk-width-container {
+  // Limit the width of the container to the page width
+  max-width: $govuk-page-width;
+
+  // On mobile, add half width gutters
+  margin: 0 $govuk-gutter-half;
+
+  // Respect 'display cutout' safe area (avoids notches and rounded corners)
+  @supports (margin: unquote("max(calc(0px))")) {
+    $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+    $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+
+    // Use max() to pick largest margin, default or with safe area
+    // Escaped due to Sass max() vs. CSS native max()
+    margin-right: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})");
+    margin-left: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})");
+  }
+
+  // On tablet, add full width gutters
+  @include govuk-media-query($from: tablet) {
+    margin: 0 $govuk-gutter;
+
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (margin: unquote("max(calc(0px))")) {
+      $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+      $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
+
+      // Use max() to pick largest margin, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      margin-right: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-right})");
+      margin-left: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-left})");
+    }
+  }
+
+  // As soon as the viewport is greater than the width of the page plus the
+  // gutters, just centre the content instead of adding gutters.
+  @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
+    margin: 0 auto;
+
+    // Since a safe area may have previously been set above,
+    // we need to duplicate this margin that centers the page.
+    @supports (margin: unquote("max(calc(0px))")) {
+      margin: 0 auto;
+    }
+  }
+
+  @include govuk-if-ie8 {
+    width: $govuk-page-width;
+    // Since media queries are not supported in IE8,
+    // we need to duplicate this margin that centers the page.
+    margin: 0 auto;
+  }
+}
+
+@include govuk-exports("govuk/objects/width-container") {
+  .govuk-width-container {
+    @include govuk-width-container;
+  }
+}

data/vendor/assets/stylesheets/overrides/_all.scss

@@ -0,0 +1,4 @@
+@import "display";
+@import "spacing";
+@import "typography";
+@import "width";

data/vendor/assets/stylesheets/overrides/_display.scss

@@ -0,0 +1,18 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
+@include govuk-exports("govuk/overrides/display") {
+
+  .govuk-\!-display-inline {
+    display: inline !important;
+  }
+
+  .govuk-\!-display-inline-block {
+    display: inline-block !important;
+  }
+
+  .govuk-\!-display-block {
+    display: block !important;
+  }
+}

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

@@ -0,0 +1,62 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
+////
+/// @group overrides
+////
+
+/// Directions for spacing
+///
+/// @type Map
+/// @access private
+
+$_spacing-directions: (
+  "top",
+  "right",
+  "bottom",
+  "left"
+) !default;
+
+/// Spacing override classes
+///
+/// Generate spacing override classes for the given property (e.g. margin)
+/// for each point in the spacing scale.
+///
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+///
+/// @example scss
+///   .govuk-\!-margin-0 {
+///      margin: 0;
+///   }
+///
+///  .govuk-\!-margin-top-1 {
+///     margin-top: [whatever spacing point 1 is...]
+///   }
+///
+/// @access private
+
+@mixin _govuk-generate-spacing-overrides($property) {
+  // For each point in the spacing scale (defined in settings), create an
+  // override that affects all directions...
+  @each $scale-point, $scale-map in $govuk-spacing-responsive-scale {
+
+    .govuk-\!-#{$property}-#{$scale-point} {
+
+      @include _govuk-responsive-spacing($scale-point, $property, "all", true);
+    }
+
+    // ... and then an override for each individual direction
+    @each $direction in $_spacing-directions {
+
+      .govuk-\!-#{$property}-#{$direction}-#{$scale-point} {
+        @include _govuk-responsive-spacing($scale-point, $property, $direction, true);
+      }
+    }
+  }
+}
+
+@include govuk-exports("govuk/overrides/spacing") {
+  @include _govuk-generate-spacing-overrides("margin");
+  @include _govuk-generate-spacing-overrides("padding");
+}

data/vendor/assets/stylesheets/overrides/_typography.scss

@@ -0,0 +1,25 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
+@include govuk-exports("govuk/overrides/typography") {
+  // Font size and line height
+
+  // Generate typography override classes for each responsive font map in the
+  // typography scale eg .govuk-\!-font-size-80
+  @each $size in map-keys($govuk-typography-scale) {
+    .govuk-\!-font-size-#{$size} {
+      @include govuk-typography-responsive($size, $important: true);
+    }
+  }
+
+  // Weights
+
+  .govuk-\!-font-weight-regular {
+    @include govuk-typography-weight-regular($important: true);
+  }
+
+  .govuk-\!-font-weight-bold {
+    @include govuk-typography-weight-bold($important: true);
+  }
+}

data/vendor/assets/stylesheets/overrides/_width.scss

@@ -0,0 +1,49 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
+@include govuk-exports("govuk/overrides/width") {
+  .govuk-\!-width-full {
+    width: 100% !important;
+  }
+
+  .govuk-\!-width-three-quarters {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 75% !important;
+    }
+  }
+
+  .govuk-\!-width-two-thirds {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 66.66% !important;
+    }
+  }
+
+  .govuk-\!-width-one-half {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 50% !important;
+    }
+  }
+
+  .govuk-\!-width-one-third {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 33.33% !important;
+    }
+  }
+
+  .govuk-\!-width-one-quarter {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 25% !important;
+    }
+  }
+}

data/vendor/assets/stylesheets/settings/_all.scss

@@ -0,0 +1,21 @@
+// The order we import settings in is important, as some settings files rely on
+// others
+
+@import "assets";
+
+@import "compatibility";
+@import "global-styles";
+@import "ie8";
+
+@import "media-queries";
+
+@import "colours-palette";
+@import "colours-organisations";
+@import "colours-applied";
+
+@import "spacing";
+@import "measurements";
+
+@import "typography-font-families";
+@import "typography-font";
+@import "typography-responsive";