dxw_govuk_frontend_rails 2.9.0.pre.alpha.1

data/vendor/assets/stylesheets/all-ie8.scss

@@ -0,0 +1,6 @@
+// By setting $govuk-is-ie8 to true, we create a version of the stylesheet that
+// targets IE8 – e.g. conditionally including or excluding styles, and
+// rasterizing media queries.
+$govuk-is-ie8: true;
+
+@import "all";

data/vendor/assets/stylesheets/all.scss

@@ -0,0 +1,11 @@
+@import "settings/all";
+@import "tools/all";
+@import "helpers/all";
+
+@import "core/all";
+@import "objects/all";
+
+@import "components/all";
+
+@import "utilities/all";
+@import "overrides/all";

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

@@ -0,0 +1,29 @@
+@import "accordion/accordion";
+@import "back-link/back-link";
+@import "breadcrumbs/breadcrumbs";
+@import "button/button";
+@import "checkboxes/checkboxes";
+@import "character-count/character-count";
+@import "summary-list/summary-list";
+@import "date-input/date-input";
+@import "details/details";
+@import "error-message/error-message";
+@import "error-summary/error-summary";
+@import "fieldset/fieldset";
+@import "file-upload/file-upload";
+@import "footer/footer";
+@import "hint/hint";
+@import "header/header";
+@import "input/input";
+@import "inset-text/inset-text";
+@import "label/label";
+@import "panel/panel";
+@import "phase-banner/phase-banner";
+@import "tabs/tabs";
+@import "tag/tag";
+@import "radios/radios";
+@import "select/select";
+@import "skip-link/skip-link";
+@import "table/table";
+@import "textarea/textarea";
+@import "warning-text/warning-text";

data/vendor/assets/stylesheets/components/accordion/_accordion.scss

@@ -0,0 +1,188 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+
+@include govuk-exports("govuk/component/accordion") {
+
+  .govuk-accordion {
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  // Borders between accordion sections
+  .govuk-accordion__section {
+    padding-top: govuk-spacing(3);
+  }
+
+  .govuk-accordion__section-header {
+    padding-bottom: govuk-spacing(3);
+  }
+
+  .govuk-accordion__section-heading {
+    margin-top: 0; // Override browser default
+    margin-bottom: 0; // Override browser default
+  }
+
+  // Buttons within the sections don’t need default styling
+  .govuk-accordion__section-button {
+    @include govuk-font($size: 24, $weight: bold);
+    display: inline-block;
+    margin-bottom: 0;
+    padding-top: govuk-spacing(3);
+  }
+
+  .govuk-accordion__section-summary {
+    margin-top: govuk-spacing(2);
+    margin-bottom: 0;
+  }
+
+  // Remove the bottom margin from the last item inside the content
+  .govuk-accordion__section-content > :last-child {
+    margin-bottom: 0;
+  }
+
+  // JavaScript enabled
+  .js-enabled {
+
+    .govuk-accordion {
+      // Border at the bottom of the whole accordion
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+
+    // Borders between accordion sections
+    .govuk-accordion__section {
+      padding-top: 0;
+      border-top: 1px solid $govuk-border-colour;
+    }
+
+    // Hide the body of collapsed sections
+    .govuk-accordion__section-content {
+      display: none;
+      @include govuk-responsive-padding(3, "top");
+      @include govuk-responsive-padding(3, "bottom");
+    }
+
+    // Show the body of expanded sections
+    .govuk-accordion__section--expanded .govuk-accordion__section-content {
+      display: block;
+    }
+
+    // This is styled to look like a link not a button
+    .govuk-accordion__open-all {
+      @include govuk-font($size: 16);
+      @include govuk-link-common;
+      display: inline;
+      border-width: 0;
+      color: $govuk-link-colour;
+      background: none;
+      cursor: pointer;
+
+      &:focus {
+        background: none;
+      }
+    }
+
+    // Section headers have a pointer cursor as an additional affordance
+    .govuk-accordion__section-header {
+      position: relative;
+      // Safe area on the right to avoid clashing with icon
+      padding-right: 40px;
+      cursor: pointer;
+    }
+
+    // Section headers have a grey background on hover as an additional affodance
+    .govuk-accordion__section-header:hover {
+      background-color: govuk-colour("grey-4");
+      // For devices that can't hover such as touch devices,
+      // remove hover state as it can be stuck in that state (iOS).
+      @media (hover: none) {
+        background-color: initial;
+      }
+    }
+
+    // Setting focus styles on header so that summary that is not part of the button is included in focus
+    .govuk-accordion__section-header--focused {
+      // These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus)
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
+    }
+
+    // Buttons within the headers don’t need default styling
+    .govuk-accordion__section-button {
+      @include govuk-link-common;
+      width: 100%;
+      margin-top: 0;
+      margin-bottom: 0;
+      margin-left: 0;
+      padding-top: govuk-spacing(3);
+      padding-bottom: 0;
+      padding-left: 0;
+      border-width: 0;
+      // Headings in section headers have link colours as an additional affodance
+      color: $govuk-link-colour;
+      background: none;
+      text-align: left;
+      cursor: pointer;
+
+      &:focus {
+        outline: none;
+        background: none;
+      }
+    }
+
+    // Extend the touch area of the button to span the section header
+    .govuk-accordion__section-button:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .govuk-accordion__controls {
+      text-align: right;
+    }
+
+    // Display an icon to the right of each header to indicate open/closed status,
+    // and as an additional affordance.
+    .govuk-accordion__icon {
+      position: absolute;
+      top: 50%;
+      right: 15px;
+      width: 16px;
+      height: 16px;
+      margin-top: -8px;
+    }
+
+    .govuk-accordion__icon:after,
+    .govuk-accordion__icon:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 25%;
+      height: 25%;
+      margin: auto;
+      border: 2px solid transparent;
+      background-color: govuk-colour("black");
+    }
+
+    .govuk-accordion__icon:before {
+      width: 100%;
+    }
+
+    .govuk-accordion__icon:after {
+      height: 100%;
+    }
+
+    // Vertical bar should be hidden when section is open, to display a '-' icon
+    .govuk-accordion__section--expanded .govuk-accordion__icon:after {
+      content: " ";
+      display: none;
+    }
+  }
+}

data/vendor/assets/stylesheets/components/back-link/_back-link.scss

@@ -0,0 +1,54 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/back-link") {
+
+  .govuk-back-link {
+    @include govuk-typography-responsive($size: 16);
+    @include govuk-link-common;
+    @include govuk-link-style-text;
+
+    display: inline-block;
+    position: relative;
+
+    margin-top: govuk-spacing(3);
+    margin-bottom: govuk-spacing(3);
+
+    // Allow space for the arrow
+    padding-left: 14px;
+
+    // Use border-bottom rather than text-decoration so that the arrow is
+    // underlined as well.
+    border-bottom: 1px solid govuk-colour("black");
+
+    // Underline is provided by a bottom border
+    text-decoration: none;
+
+    // Prepend left pointing arrow
+    &:before {
+      @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
+
+      content: "";
+
+      // Vertically align with the parent element
+      position: absolute;
+
+      top: -1px;
+      bottom: 1px;
+      left: 0;
+
+      margin: auto;
+    }
+  }
+
+  // Begin adjustments for font baseline offset
+  // These should be removed when the font is updated with the correct baseline
+
+  .govuk-back-link:before {
+    $offset: 1px;
+
+    top: $offset * -1;
+    bottom: $offset;
+  }
+}

data/vendor/assets/stylesheets/components/breadcrumbs/_breadcrumbs.scss

@@ -0,0 +1,119 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/breadcrumbs") {
+
+  // Size of chevron (excluding border)
+  $chevron-size: 7px;
+
+  // Size of chevron border
+  $chevron-border-width: 1px;
+
+  // Colour of chevron
+  $chevron-border-colour: $govuk-secondary-text-colour;
+
+  // Calculated altitude (△↕) of the right-angled isosceles chevron with sides
+  // of length 8 (7px + 1px border):
+  //
+  // √(8² + 8²) * 0.5 ≅ 5.655
+  $chevron-altitude-calculated: 5.655px;
+
+  .govuk-breadcrumbs {
+    @include govuk-font($size: 16);
+    @include govuk-text-colour;
+
+    margin-top: govuk-spacing(3);
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-breadcrumbs__list {
+    @include govuk-clearfix;
+
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .govuk-breadcrumbs__list-item {
+
+    display: inline-block;
+    position: relative;
+
+    margin-bottom: govuk-spacing(1);
+
+    // Add both margin and padding such that the chevron appears centrally
+    // between each breadcrumb item
+    margin-left: govuk-spacing(2);
+    padding-left: govuk-spacing(2) + $chevron-altitude-calculated;
+
+    float: left;
+
+    // Create a chevron using a box with borders on two sides, rotated 45deg.
+    &:before {
+      content: "";
+      display: block;
+
+      position: absolute;
+
+      // Begin adjustments for font baseline offset
+      // These should be reverted when the font is updated with the correct
+      // baseline
+
+      // top: 0;
+      // bottom: 0;
+
+      top: -1px;
+      bottom: 1px;
+
+      // End adjustments for font baseline offset
+
+      // Offset by the difference between the width of the non-rotated square
+      // and its width when rotated
+      left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width);
+
+      width: $chevron-size;
+      height: $chevron-size;
+
+      margin: auto 0;
+
+      -webkit-transform: rotate(45deg);
+
+          -ms-transform: rotate(45deg);
+
+              transform: rotate(45deg);
+
+      border: solid;
+      border-width: $chevron-border-width $chevron-border-width 0 0;
+      border-color: $chevron-border-colour;
+
+      // Fall back to a greater than sign for IE8
+      @include govuk-if-ie8 {
+        content: "\003e"; // Greater than sign (>)
+        width: auto;
+        height: auto;
+        border: 0;
+        color: $chevron-border-colour;
+
+        // IE8 doesn't seem to like rendering pseudo-elements using @font-faces,
+        // so fall back to using another sans-serif font to render the chevron.
+        font-family: Arial, sans-serif;
+      }
+    }
+
+    &:first-child {
+      margin-left: 0;
+      padding-left: 0;
+
+      &:before {
+        content: none;
+        display: none;
+      }
+    }
+  }
+
+  .govuk-breadcrumbs__link {
+    @include govuk-link-common;
+    @include govuk-link-style-text;
+  }
+}

data/vendor/assets/stylesheets/components/button/_button.scss

@@ -0,0 +1,180 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/button") {
+
+  $govuk-button-colour: #00823b;
+  $govuk-button-hover-colour: darken($govuk-button-colour, 5%);
+  $govuk-button-shadow-colour: darken($govuk-button-colour, 15%);
+  $govuk-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);
+    @include govuk-focusable;
+
+    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    margin-top: 0;
+    @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
+    padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(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;
+    }
+
+    // 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;
+      }
+    }
+
+    // Fix unwanted button padding in Firefox
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $govuk-button-hover-colour;
+    }
+
+    &:active {
+      top: $button-shadow-size;
+      box-shadow: none;
+
+      @include govuk-if-ie8 {
+        border-bottom-width: 0;
+      }
+    }
+
+    // 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);
+    }
+  }
+
+  .govuk-button--disabled,
+  .govuk-button[disabled="disabled"],
+  .govuk-button[disabled] {
+    opacity: (.5);
+    background: $govuk-button-colour;
+
+    &:hover {
+      background-color: $govuk-button-colour;
+      cursor: default;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &: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--start {
+    @include govuk-typography-weight-bold;
+    @include govuk-typography-responsive($size: 24, $override-line-height: 1);
+
+    min-height: auto;
+    padding-top: govuk-spacing(2) - $govuk-border-width-form-element;
+    padding-right: govuk-spacing(7);
+    padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element;
+    padding-left: govuk-spacing(3);
+
+    background-image: govuk-image-url("icon-pointer.png");
+    background-repeat: no-repeat;
+    background-position: 100% 50%;
+
+    @include govuk-device-pixel-ratio {
+      background-image: govuk-image-url("icon-pointer-2x.png");
+      background-size: 30px 19px;
+    }
+  }
+
+  // Begin adjustments for font baseline offset
+  // These should be removed when the font is updated with the correct baseline
+  // For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428
+
+  $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 {
+    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
+  }
+
+}

data/vendor/assets/stylesheets/components/character-count/_character-count.scss

@@ -0,0 +1,31 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../error-message/error-message";
+@import "../hint/hint";
+@import "../label/label";
+
+@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-textarea--error {
+      padding: govuk-spacing(1) - 2; // Stop a "jump" when width of border changes
+    }
+  }
+
+  .govuk-character-count__message {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .govuk-character-count__message--disabled {
+    visibility: hidden;
+  }
+}