dxw_govuk_frontend_rails 2.9.0.pre.alpha.1

data/vendor/assets/stylesheets/components/checkboxes/_checkboxes.scss

@@ -0,0 +1,161 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../error-message/error-message";
+@import "../fieldset/fieldset";
+@import "../hint/hint";
+@import "../label/label";
+
+@include govuk-exports("govuk/component/checkboxes") {
+  $govuk-checkboxes-size: govuk-spacing(7);
+  $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
+
+  .govuk-checkboxes__item {
+    @include govuk-font($size: 19);
+
+    display: block;
+    position: relative;
+
+    min-height: $govuk-checkboxes-size;
+
+    margin-bottom: govuk-spacing(2);
+    padding: 0 0 0 $govuk-checkboxes-size;
+
+    clear: left;
+  }
+
+  .govuk-checkboxes__item:last-child,
+  .govuk-checkboxes__item:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .govuk-checkboxes__input {
+    position: absolute;
+
+    z-index: 1;
+    top: 0;
+    left: 0;
+
+    width: $govuk-checkboxes-size;
+    height: $govuk-checkboxes-size;
+
+    cursor: pointer;
+
+    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
+    @include govuk-not-ie8 {
+      margin: 0;
+      opacity: 0;
+    }
+
+    // add focus outline to input element for IE8
+    @include govuk-if-ie8 {
+      &:focus {
+        outline: $govuk-focus-width solid $govuk-focus-colour;
+      }
+    }
+  }
+
+  .govuk-checkboxes__label {
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1);
+    cursor: pointer;
+    // remove 300ms pause on mobile
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+  }
+
+  .govuk-checkboxes__hint {
+    display: block;
+    padding-right: $govuk-checkboxes-label-padding-left-right;
+    padding-left: $govuk-checkboxes-label-padding-left-right;
+  }
+
+  .govuk-checkboxes__input + .govuk-checkboxes__label::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $govuk-checkboxes-size;
+    height: $govuk-checkboxes-size;
+    border: $govuk-border-width-form-element solid currentColor;
+    background: transparent;
+
+    // padding-bottom: 1px;
+  }
+
+  .govuk-checkboxes__input + .govuk-checkboxes__label::after {
+    content: "";
+
+    position: absolute;
+    top: 11px;
+    left: 9px;
+    width: 18px;
+    height: 7px;
+
+    -webkit-transform: rotate(-45deg);
+
+        -ms-transform: rotate(-45deg);
+
+            transform: rotate(-45deg);
+    border: solid;
+    border-width: 0 0 $govuk-border-width $govuk-border-width;
+    // Fix bug in IE11 caused by transform rotate (-45deg).
+    // See: alphagov/govuk_elements/issues/518
+    border-top-color: transparent;
+
+    opacity: 0;
+
+    background: transparent;
+  }
+
+  // Focused state
+  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+    // Since box-shadows are removed when users customise their colours
+    // We set a transparent outline that is shown instead.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: $govuk-focus-width;
+    box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
+  }
+
+  // Selected state
+  .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
+    opacity: 1;
+  }
+
+  // Disabled state
+  .govuk-checkboxes__input:disabled,
+  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
+    cursor: default;
+  }
+
+  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {
+    opacity: .5;
+  }
+
+  $conditional-border-width: $govuk-border-width-mobile;
+  // Calculate the amount of padding needed to keep the border centered against the checkbox.
+  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
+  // Move the border centered with the checkbox
+  $conditional-margin-left: $conditional-border-padding;
+  // Move the contents of the conditional inline with the label
+  $conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right;
+
+  .govuk-checkboxes__conditional {
+    @include govuk-responsive-margin(4, "bottom");
+    margin-left: $conditional-margin-left;
+    padding-left: $conditional-padding-left;
+    border-left: $conditional-border-width solid $govuk-border-colour;
+
+    .js-enabled &--hidden {
+      display: none;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

data/vendor/assets/stylesheets/components/date-input/_date-input.scss

@@ -0,0 +1,30 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../error-message/error-message";
+@import "../input/input";
+@import "../hint/hint";
+@import "../label/label";
+
+@include govuk-exports("govuk/component/date-input") {
+  .govuk-date-input {
+    @include govuk-clearfix;
+    // font-size: 0 removes whitespace caused by inline-block
+    font-size: 0;
+  }
+
+  .govuk-date-input__item {
+    display: inline-block;
+    margin-right: govuk-spacing(4);
+    margin-bottom: 0;
+  }
+
+  .govuk-date-input__label {
+    display: block;
+  }
+
+  .govuk-date-input__input {
+    margin-bottom: 0;
+  }
+}

data/vendor/assets/stylesheets/components/details/_details.scss

@@ -0,0 +1,89 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/details") {
+
+  .govuk-details {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-responsive-margin(6, "bottom");
+
+    display: block;
+  }
+
+  .govuk-details__summary {
+    // Make the focus outline shrink-wrap the text content of the summary
+    display: inline-block;
+
+    // Absolutely position the marker against this element
+    position: relative;
+
+    margin-bottom: govuk-spacing(1);
+
+    // Allow for absolutely positioned marker and align with disclosed text
+    padding-left: govuk-spacing(4) + $govuk-border-width;
+
+    // Style the summary to look like a link...
+    color: $govuk-link-colour;
+    cursor: pointer;
+  }
+
+  // ...but only underline the text, not the arrow
+  .govuk-details__summary-text {
+    text-decoration: underline;
+  }
+
+  .govuk-details__summary:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  .govuk-details__summary:focus {
+    // -1px offset fixes gap between background and outline in Firefox
+    outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour;
+    outline-offset: -1px;
+    // When focussed, the text colour needs to be darker to ensure that colour
+    // contrast is still acceptable
+    color: $govuk-focus-text-colour;
+    background: $govuk-focus-colour;
+  }
+
+  // Remove the default details marker so we can style our own consistently and
+  // ensure it displays in Firefox (see implementation.md for details)
+  .govuk-details__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  // Append our own open / closed marker using a pseudo-element
+  .govuk-details__summary:before {
+    content: "";
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    margin: auto;
+
+    @include govuk-shape-arrow($direction: right, $base: 14px);
+
+    .govuk-details[open] > & {
+      @include govuk-shape-arrow($direction: down, $base: 14px);
+    }
+  }
+
+  .govuk-details__text {
+    padding: govuk-spacing(3);
+    padding-left: govuk-spacing(4);
+    border-left: $govuk-border-width solid $govuk-border-colour;
+  }
+
+  .govuk-details__text p {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(4);
+  }
+
+  .govuk-details__text > :last-child {
+    margin-bottom: 0;
+  }
+}

data/vendor/assets/stylesheets/components/error-message/_error-message.scss

@@ -0,0 +1,15 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/error-message") {
+  .govuk-error-message {
+    @include govuk-font($size: 19, $weight: bold);
+
+    display: block;
+    margin-bottom: govuk-spacing(3);
+    clear: both;
+
+    color: $govuk-error-colour;
+  }
+}

data/vendor/assets/stylesheets/components/error-summary/_error-summary.scss

@@ -0,0 +1,72 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../../core/lists";
+
+@include govuk-exports("govuk/component/error-summary") {
+
+  .govuk-error-summary {
+    @include govuk-text-colour;
+    @include govuk-responsive-padding(4);
+    @include govuk-responsive-margin(8, "bottom");
+    @include govuk-focusable;
+
+    border: $govuk-border-width-mobile solid $govuk-error-colour;
+
+    @include govuk-media-query($from: tablet) {
+      border: $govuk-border-width solid $govuk-error-colour;
+    }
+  }
+
+  .govuk-error-summary__title {
+    @include govuk-font($size: 24, $weight: bold);
+
+    margin-top: 0;
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-error-summary__body {
+    @include govuk-font($size: 19);
+
+    p {
+      margin-top: 0;
+      @include govuk-responsive-margin(4, "bottom");
+    }
+  }
+
+  // Cross-component class - adjusts styling of list component
+  .govuk-error-summary__list {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .govuk-error-summary__list a {
+    @include govuk-focusable-fill;
+    @include govuk-typography-weight-bold;
+
+    // Override default link styling to use error colour
+    &:link,
+    &:visited,
+    &:hover,
+    &:active {
+      color: $govuk-error-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 {
+        color: $govuk-error-colour;
+      }
+    }
+  }
+
+}

data/vendor/assets/stylesheets/components/fieldset/_fieldset.scss

@@ -0,0 +1,60 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/fieldset") {
+  .govuk-fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    @include govuk-clearfix;
+  }
+
+  .govuk-fieldset__legend {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    // Fix legend text wrapping in Edge and IE
+    // 1. IE9-11 & Edge 12-13
+    // 2. IE8-11
+    box-sizing: border-box; // 1
+    display: table;         // 2
+    max-width: 100%;        // 1
+    margin-bottom: govuk-spacing(2);
+    padding: 0;
+    // Hack to let legends or elements within legends have margins in webkit browsers
+    overflow: hidden;
+
+    white-space: normal;    // 1
+  }
+
+  // Modifiers that make legends look more like their equivalent headings
+
+  .govuk-fieldset__legend--xl {
+    @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-fieldset__legend--l {
+    @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-fieldset__legend--m {
+    @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-fieldset__legend--s {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // When the legend contains an H1, we want the H1 to inherit all styles from
+  // the legend. Effectively we want to be able to treat the heading as if it is
+  // not there.
+  .govuk-fieldset__heading {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+}

data/vendor/assets/stylesheets/components/file-upload/_file-upload.scss

@@ -0,0 +1,19 @@
+@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/file-upload") {
+  .govuk-file-upload {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-focusable;
+  }
+
+  .govuk-file-upload--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+  }
+}

data/vendor/assets/stylesheets/components/footer/_footer.scss

@@ -0,0 +1,233 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../../helpers/typography";
+
+@include govuk-exports("govuk/component/footer") {
+
+  $govuk-footer-background: $govuk-canvas-background-colour;
+  $govuk-footer-border-top: #a1acb2;
+  $govuk-footer-border: govuk-colour("grey-2");
+  $govuk-footer-text: #454a4c;
+  $govuk-footer-link: $govuk-footer-text;
+  $govuk-footer-link-hover: #171819;
+
+  // Based on the govuk-crest-2x.png image dimensions.
+  $govuk-footer-crest-image-width-2x: 250px;
+  $govuk-footer-crest-image-height-2x: 204px;
+  // Half the 2x image so that it fits the regular 1x size.
+  $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
+  $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
+
+  .govuk-footer {
+    @include govuk-font($size: 16);
+    @include govuk-responsive-padding(7, "top");
+    @include govuk-responsive-padding(5, "bottom");
+
+    border-top: 1px solid $govuk-footer-border-top;
+    color: $govuk-footer-text;
+    background: $govuk-footer-background;
+  }
+
+  .govuk-footer__link {
+    @include govuk-focusable-fill;
+
+    &:link,
+    &:visited {
+      color: $govuk-footer-link;
+    }
+
+    &:hover,
+    &:active {
+      color: $govuk-footer-link-hover;
+    }
+
+    // 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;
+      }
+    }
+  }
+
+  .govuk-footer__section-break {
+    margin: 0; // Reset `<hr>` default margins
+    @include govuk-responsive-margin(8, "bottom");
+    border: 0; // Reset `<hr>` default borders
+    border-bottom: 1px solid $govuk-footer-border;
+  }
+
+  .govuk-footer__meta {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex; // Support: Flexbox
+    margin-right: -$govuk-gutter-half;
+    margin-left: -$govuk-gutter-half;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
+    -webkit-box-align: end;
+    -webkit-align-items: flex-end;
+        -ms-flex-align: end;
+            align-items: flex-end; // Support: Flexbox
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center; // Support: Flexbox
+  }
+
+  .govuk-footer__meta-item {
+    margin-right: $govuk-gutter-half;
+    margin-bottom: govuk-spacing(5);
+    margin-left: $govuk-gutter-half;
+  }
+
+  .govuk-footer__meta-item--grow {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+        -ms-flex: 1;
+            flex: 1; // Support: Flexbox
+    @include mq ($until: tablet) {
+      -webkit-flex-basis: 320px;
+          -ms-flex-preferred-size: 320px;
+              flex-basis: 320px; // Support: Flexbox
+    }
+  }
+
+  .govuk-footer__licence-logo {
+    display: inline-block;
+    margin-right: govuk-spacing(2);
+    @include mq ($until: desktop) {
+      margin-bottom: govuk-spacing(3);
+    }
+    vertical-align: top;
+  }
+
+  .govuk-footer__licence-description {
+    display: inline-block;
+  }
+
+  .govuk-footer__copyright-logo {
+    display: inline-block;
+    min-width: $govuk-footer-crest-image-width;
+    padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
+    background-image: govuk-image-url("govuk-crest.png");
+    @include govuk-device-pixel-ratio {
+      background-image: govuk-image-url("govuk-crest-2x.png");
+    }
+    background-repeat: no-repeat;
+    background-position: 50% 0%;
+    background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .govuk-footer__inline-list {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(3);
+    padding: 0;
+  }
+
+  .govuk-footer__meta-custom {
+    margin-bottom: govuk-spacing(4);
+  }
+
+  .govuk-footer__inline-list-item {
+    display: inline-block;
+    margin-right: govuk-spacing(3);
+    margin-bottom: govuk-spacing(1);
+  }
+
+  .govuk-footer__heading {
+    @include govuk-responsive-margin(7, "bottom");
+    padding-bottom: govuk-spacing(4);
+    @include mq ($until: tablet) {
+      padding-bottom: govuk-spacing(2);
+    }
+    border-bottom: 1px solid $govuk-footer-border;
+  }
+
+  .govuk-footer__navigation {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex; // Support: Flexbox
+    margin-right: -$govuk-gutter-half;
+    margin-left: -$govuk-gutter-half;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
+  }
+
+  .govuk-footer__section {
+    display: inline-block;
+    margin-right: $govuk-gutter-half;
+    margin-bottom: $govuk-gutter;
+    margin-left: $govuk-gutter-half;
+    vertical-align: top;
+    // Ensure columns take up equal width (typically one-half:one-half)
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1; // Support: Flexbox
+    -webkit-flex-shrink: 1;
+        -ms-flex-negative: 1;
+            flex-shrink: 1; // Support: Flexbox
+    @include mq ($until: desktop) {
+      // Make sure columns do not drop below 200px in width
+      // Will typically result in wrapping, and end up in a single column on smaller screens.
+      -webkit-flex-basis: 200px;
+          -ms-flex-preferred-size: 200px;
+              flex-basis: 200px; // Support: Flexbox
+    }
+  }
+
+  // Sections two-third:one-third on desktop
+  @include mq ($from: desktop) {
+    .govuk-footer__section:first-child {
+      -webkit-box-flex: 2;
+      -webkit-flex-grow: 2;
+          -ms-flex-positive: 2;
+              flex-grow: 2; // Support: Flexbox
+    }
+  }
+
+  .govuk-footer__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    -webkit-column-gap: $govuk-gutter;
+            column-gap: $govuk-gutter; // Support: Columns
+  }
+
+  @include mq ($from: desktop) {
+    .govuk-footer__list--columns-2 {
+      -webkit-column-count: 2;
+              column-count: 2; // Support: Columns
+    }
+
+    .govuk-footer__list--columns-3 {
+      -webkit-column-count: 3;
+              column-count: 3; // Support: Columns
+    }
+  }
+
+  .govuk-footer__list-item {
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-footer__list-item:last-child {
+    margin-bottom: 0;
+  }
+}