dxw_govuk_frontend_rails 2.9.0.pre.alpha.1

data/vendor/assets/stylesheets/components/radios/_radios.scss

@@ -0,0 +1,187 @@
+@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/radios") {
+  $govuk-radios-size: govuk-spacing(7);
+  $govuk-radios-label-padding-left-right: govuk-spacing(3);
+  // When the default focus width is used on a curved edge it looks visually smaller.
+  // So for the circular radios we bump the default to make it look visually consistent.
+  $govuk-radios-focus-width: $govuk-focus-width + 1px;
+
+  .govuk-radios__item {
+    @include govuk-font($size: 19);
+
+    display: block;
+
+    position: relative;
+
+    min-height: $govuk-radios-size;
+
+    margin-bottom: govuk-spacing(2);
+    padding: 0 0 0 $govuk-radios-size;
+
+    clear: left;
+  }
+
+  .govuk-radios__item:last-child,
+  .govuk-radios__item:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .govuk-radios__input {
+    position: absolute;
+
+    z-index: 1;
+    top: 0;
+    left: 0;
+
+    width: $govuk-radios-size;
+    height: $govuk-radios-size;
+
+    cursor: pointer;
+
+    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. Double colons get ommited by IE8.
+    @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-radios__label {
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1);
+    cursor: pointer;
+    // remove 300ms pause on mobile
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+  }
+
+  .govuk-radios__hint {
+    display: block;
+    padding-right: $govuk-radios-label-padding-left-right;
+    padding-left: $govuk-radios-label-padding-left-right;
+  }
+
+  .govuk-radios__input + .govuk-radios__label::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: $govuk-radios-size;
+    height: $govuk-radios-size;
+
+    border: $govuk-border-width-form-element solid currentColor;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  .govuk-radios__input + .govuk-radios__label::after {
+    content: "";
+
+    position: absolute;
+    top: govuk-spacing(2);
+    left: govuk-spacing(2);
+
+    width: 0;
+    height: 0;
+
+    border: govuk-spacing(2) solid currentColor;
+    border-radius: 50%;
+    opacity: 0;
+    background: currentColor;
+  }
+
+  // Focused state
+  .govuk-radios__input:focus + .govuk-radios__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-radios-focus-width $govuk-focus-colour;
+  }
+
+  // Selected state
+  .govuk-radios__input:checked + .govuk-radios__label::after {
+    opacity: 1;
+  }
+
+  // Disabled state
+  .govuk-radios__input:disabled,
+  .govuk-radios__input:disabled + .govuk-radios__label {
+    cursor: default;
+  }
+
+  .govuk-radios__input:disabled + .govuk-radios__label {
+    opacity: .5;
+  }
+
+  // Inline variant
+  .govuk-radios--inline {
+    @include mq ($from: tablet) {
+      @include govuk-clearfix;
+
+      .govuk-radios__item {
+        margin-right: govuk-spacing(4);
+        float: left;
+        clear: none;
+      }
+    }
+
+    // Prevent inline modifier being used with conditional reveals
+    &.govuk-radios--conditional {
+      .govuk-radios__item {
+        margin-right: 0;
+        float: none;
+      }
+    }
+  }
+
+  .govuk-radios__divider {
+    $govuk-divider-size: $govuk-radios-size !default;
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
+  $conditional-border-width: $govuk-border-width-mobile;
+  // Calculate the amount of padding needed to keep the border centered against the radios.
+  $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
+  // Move the border centered with the radios
+  $conditional-margin-left: $conditional-border-padding;
+  // Move the contents of the conditional inline with the label
+  $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right;
+
+  .govuk-radios__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/select/_select.scss

@@ -0,0 +1,32 @@
+@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/select") {
+  .govuk-select {
+    @include govuk-font($size: 19, $line-height: 1.25);
+    @include govuk-focusable;
+
+    box-sizing: border-box; // should this be global?
+    max-width: 100%;
+    height: 40px;
+    padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+  }
+
+  .govuk-select option:active,
+  .govuk-select option:checked,
+  .govuk-select:focus::-ms-value {
+    color: govuk-colour("white");
+    background-color: govuk-colour("blue");
+  }
+
+  .govuk-select--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+  }
+
+}

data/vendor/assets/stylesheets/components/skip-link/_skip-link.scss

@@ -0,0 +1,26 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/skip-link") {
+  .govuk-skip-link {
+    @include govuk-visually-hidden-focusable;
+    @include govuk-link-common;
+    @include govuk-link-style-text;
+    @include govuk-typography-responsive($size: 16);
+
+    display: block;
+    padding: govuk-spacing(2) govuk-spacing(3);
+
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (padding: unquote("max(calc(0px))")) {
+      $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
+      $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
+
+      // Use max() to pick largest padding, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
+      padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
+    }
+  }
+}

data/vendor/assets/stylesheets/components/summary-list/_summary-list.scss

@@ -0,0 +1,123 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/summary-list") {
+
+  .govuk-summary-list {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-media-query($from: tablet) {
+      display: table;
+      width: 100%;
+      table-layout: fixed; // Required to allow us to wrap words that overflow.
+    }
+    margin: 0; // Reset default user agent styles
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-summary-list__row {
+    @include govuk-media-query($until: tablet) {
+      margin-bottom: govuk-spacing(3);
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+    @include govuk-media-query($from: tablet) {
+      display: table-row;
+    }
+  }
+
+  .govuk-summary-list__key,
+  .govuk-summary-list__value,
+  .govuk-summary-list__actions {
+    margin: 0; // Reset default user agent styles
+
+    @include govuk-media-query($from: tablet) {
+      display: table-cell;
+      padding-right: govuk-spacing(4);
+    }
+  }
+
+  .govuk-summary-list__key,
+  .govuk-summary-list__value,
+  .govuk-summary-list__actions {
+    @include govuk-media-query($from: tablet) {
+      padding-top: govuk-spacing(2);
+      padding-bottom: govuk-spacing(2);
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+  }
+
+  .govuk-summary-list__actions {
+    margin-bottom: govuk-spacing(3);
+    @include govuk-media-query($from: tablet) {
+      width: 20%;
+      padding-right: 0;
+      text-align: right;
+    }
+  }
+
+  .govuk-summary-list__key,
+  .govuk-summary-list__value {
+    // Automatic wrapping for unbreakable text (e.g. URLs)
+    word-wrap: break-word; // Fallback for older browsers only
+    overflow-wrap: break-word;
+  }
+
+  .govuk-summary-list__key {
+    margin-bottom: govuk-spacing(1);
+    @include govuk-typography-weight-bold;
+    @include govuk-media-query($from: tablet) {
+      width: 30%;
+    }
+  }
+
+  .govuk-summary-list__value {
+    @include govuk-media-query($until: tablet) {
+      margin-bottom: govuk-spacing(3);
+    }
+    @include govuk-media-query($from: tablet) {
+      width: 50%;
+    }
+  }
+
+  .govuk-summary-list__value > p {
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-summary-list__value > :last-child {
+    margin-bottom: 0;
+  }
+
+  .govuk-summary-list__actions-list {
+    width: 100%;
+    margin: 0; // Reset default user agent styles
+    padding: 0; // Reset default user agent styles
+  }
+
+  .govuk-summary-list__actions-list-item {
+    display: inline;
+    margin-right:  govuk-spacing(2);
+    padding-right: govuk-spacing(2);
+  }
+
+  // In older browsers such as IE8, :last-child is not available,
+  // so only show the border divider where it is available.
+  .govuk-summary-list__actions-list-item:not(:last-child) {
+    border-right: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-summary-list__actions-list-item:last-child {
+    margin-right: 0;
+    padding-right: 0;
+    border: 0;
+  }
+
+  .govuk-summary-list--no-border {
+    .govuk-summary-list__key,
+    .govuk-summary-list__value,
+    .govuk-summary-list__actions,
+    .govuk-summary-list__row {
+      border: 0;
+    }
+  }
+}

data/vendor/assets/stylesheets/components/table/_table.scss

@@ -0,0 +1,53 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/table") {
+  .govuk-table {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: 100%;
+    @include govuk-responsive-margin(6, "bottom");
+
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  .govuk-table__header {
+    @include govuk-typography-weight-bold;
+  }
+
+  .govuk-table__header,
+  .govuk-table__cell {
+    padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
+    border-bottom: 1px solid $govuk-border-colour;
+    text-align: left;
+    // GOV.UK Elements sets the font-size and line-height for all headers and cells
+    // in tables.
+    @include govuk-compatibility(govuk_elements) {
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
+
+  .govuk-table__cell--numeric {
+    @include govuk-font($size: false, $tabular: true);
+  }
+
+  .govuk-table__header--numeric,
+  .govuk-table__cell--numeric {
+    text-align: right;
+  }
+
+  .govuk-table__header:last-child,
+  .govuk-table__cell:last-child {
+    padding-right: 0;
+  }
+
+  .govuk-table__caption {
+    @include govuk-typography-weight-bold;
+
+    display: table-caption;
+    text-align: left;
+  }
+}

data/vendor/assets/stylesheets/components/tabs/_tabs.scss

@@ -0,0 +1,130 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/tabs") {
+
+  .govuk-tabs {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-responsive-margin(1, "top");
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-tabs__title {
+    @include govuk-font($size: 19);
+    margin-bottom: govuk-spacing(1);
+  }
+
+  .govuk-tabs__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    @include mq($until: tablet) {
+      @include govuk-responsive-margin(6, "bottom");
+    }
+  }
+
+  .govuk-tabs__list-item {
+    margin-left: govuk-spacing(5);
+
+    &::before {
+      content: "\2014 "; // "— "
+      margin-left: - govuk-spacing(5);
+      padding-right: govuk-spacing(1);
+    }
+  }
+
+  .govuk-tabs__tab {
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+    @include govuk-font($size: 19);
+
+    display: inline-block;
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(2);
+
+    &[aria-current = "true"] {
+      color: govuk-colour("black");
+      text-decoration: none;
+    }
+  }
+
+  .govuk-tabs__panel {
+    @include govuk-responsive-margin(8, "bottom");
+  }
+
+  // JavaScript enabled
+  .js-enabled {
+
+    @include mq($from: tablet) {
+
+      .govuk-tabs__list {
+        @include govuk-clearfix;
+        border-bottom: 1px solid $govuk-border-colour;
+      }
+
+      .govuk-tabs__list-item {
+        margin-left: 0;
+
+        &::before {
+          content: none;
+        }
+      }
+
+      .govuk-tabs__title {
+        display: none;
+      }
+
+      .govuk-tabs__tab {
+        margin-right: govuk-spacing(1);
+        padding-right: govuk-spacing(4);
+        padding-left: govuk-spacing(4);
+        float: left;
+        color: govuk-colour("black");
+        background-color: govuk-colour("grey-4");
+        text-align: center;
+        text-decoration: none;
+
+        &--selected {
+          margin-top: - govuk-spacing(1);
+          margin-bottom: -1px;
+
+          // 1px is compensation for border (otherwise we get a 1px shift)
+          padding-top: govuk-spacing(3) - 1px;
+          padding-right: govuk-spacing(4) - 1px;
+          padding-bottom: govuk-spacing(3) + 1px;
+          padding-left: govuk-spacing(4) - 1px;
+
+          border: 1px solid $govuk-border-colour;
+          border-bottom: 0;
+          color: govuk-colour("black");
+          background-color: govuk-colour("white");
+
+          &:focus {
+            background-color: transparent;
+          }
+        }
+      }
+
+      .govuk-tabs__panel {
+        @include govuk-responsive-margin(0, "bottom");
+        padding-top: govuk-spacing(6);
+        padding-right: govuk-spacing(4);
+        padding-bottom: govuk-spacing(6);
+        padding-left: govuk-spacing(4);
+        border: 1px solid $govuk-border-colour;
+        border-top: 0;
+
+        &--hidden {
+          display: none;
+        }
+
+        & > :last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+  }
+}

data/vendor/assets/stylesheets/components/tag/_tag.scss

@@ -0,0 +1,33 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/tag") {
+  .govuk-tag {
+    @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);
+
+    display: inline-block;
+    padding: 4px 8px;
+    // Since New Transport sits slightly higher than other common fonts.
+    // We use intentionally uneven padding to make it balanced, this can be
+    // removed using the version of the font that has a more common vertical spacing.
+    padding-bottom: 1px;
+
+    // When a user customises their colours often the background is removed,
+    // by adding a outline we ensure that the tag component still keeps it's meaning.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
+    color: govuk-colour("white");
+    background-color: govuk-colour("blue");
+    letter-spacing: 1px;
+
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+
+  .govuk-tag--inactive {
+    background-color: govuk-colour("grey-1");
+  }
+}

data/vendor/assets/stylesheets/components/textarea/_textarea.scss

@@ -0,0 +1,32 @@
+@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/textarea") {
+  .govuk-textarea {
+    @include govuk-font($size: 19, $line-height: 1.25);
+    @include govuk-focusable;
+
+    box-sizing: border-box; // should this be global?
+    display: block;
+    width: 100%;
+    min-height: 40px;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: govuk-spacing(1);
+
+    resize: vertical;
+
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+  }
+
+  .govuk-textarea--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+  }
+}

data/vendor/assets/stylesheets/components/warning-text/_warning-text.scss

@@ -0,0 +1,59 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/warning-text") {
+
+  .govuk-warning-text {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    position: relative;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: govuk-spacing(2) 0;
+  }
+
+  .govuk-warning-text__assistive {
+    @include govuk-visually-hidden;
+  }
+
+  .govuk-warning-text__icon {
+    @include govuk-font($size: false, $weight: bold);
+
+    display: inline-block;
+
+    position: absolute;
+    top: 50%;
+    left: 0;
+
+    min-width: 32px;
+    min-height: 29px;
+    margin-top: -20px; // Half the height of the circle (adjusted for NTA)
+    padding-top: 3px;
+
+    // When a user customises their colours the background colour will often be removed.
+    // Adding a border to the component keeps it's shape as a circle.
+    border: 3px solid govuk-colour("black");
+    border-radius: 50%;
+
+    color: govuk-colour("white");
+    background: govuk-colour("black");
+
+    font-size: 1.6em;
+    line-height: 29px;
+
+    text-align: center;
+
+    // Prevent the exclamation mark from being included when the warning text
+    // is copied, for example.
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+  }
+
+  .govuk-warning-text__text {
+    display: block;
+    padding-left: 50px;
+  }
+}

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

@@ -0,0 +1,6 @@
+@import "links";
+@import "lists";
+@import "template";
+@import "typography";
+@import "section-break";
+@import "global-styles";