dxw_govuk_frontend_rails 2.9.0.pre.alpha.1

data/vendor/assets/stylesheets/components/header/_header.scss

@@ -0,0 +1,304 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../../helpers/typography";
+
+@include govuk-exports("govuk/component/header") {
+
+  $govuk-header-background: govuk-colour("black");
+  $govuk-header-border-color: $govuk-brand-colour;
+  $govuk-header-border-width: govuk-spacing(2);
+  $govuk-header-text: govuk-colour("white");
+  $govuk-header-link: govuk-colour("white");
+  $govuk-header-link-hover: govuk-colour("white");
+  $govuk-header-link-active: #1d8feb;
+  $govuk-header-nav-item-border-color: #2e3133;
+
+  .govuk-header {
+    @include govuk-font($size: 16);
+
+    border-bottom: govuk-spacing(2) solid govuk-colour("white");
+    color: $govuk-header-text;
+    background: $govuk-header-background;
+
+  }
+
+  .govuk-header__container--full-width {
+    padding: 0 govuk-spacing(3);
+    border-color: $govuk-header-border-color;
+
+    .govuk-header__menu-button {
+      right: govuk-spacing(3);
+    }
+  }
+
+  .govuk-header__container {
+    @include govuk-clearfix;
+    position: relative;
+    margin-bottom: -$govuk-header-border-width;
+    padding-top: govuk-spacing(2);
+    border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
+  }
+
+  .govuk-header__logotype {
+    margin-right: govuk-spacing(1);
+  }
+
+  .govuk-header__logotype-crown {
+    margin-right: 1px;
+    fill: currentColor;
+    vertical-align: middle;
+  }
+
+  .govuk-header__logotype-crown-fallback-image {
+    width: 36px;
+    height: 32px;
+    border: 0;
+    vertical-align: middle;
+  }
+
+  .govuk-header__product-name {
+    @include govuk-font($size: 24);
+    display: inline-table;
+    padding-right: govuk-spacing(2);
+  }
+
+  .govuk-header__link {
+    @include govuk-focusable-fill;
+
+    text-decoration: none;
+
+    &:link,
+    &:visited {
+      color: $govuk-header-link;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    // 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-header__link--homepage {
+    // Font size needs to be set on the link so that the box sizing is correct
+    // in Firefox
+    @include govuk-font($size: false, $weight: bold);
+
+    display: inline-block;
+    font-size: 30px; // We don't have a mixin that produces 30px font size
+    line-height: 30px;
+
+    &:link,
+    &:visited {
+      text-decoration: none;
+    }
+
+    &:hover,
+    &:active {
+      // Negate the added border
+      margin-bottom: -1px;
+      // Omitting colour will use default value of currentColor – if we
+      // specified currentColor explicitly IE8 would ignore this rule.
+      border-bottom: 1px solid;
+    }
+  }
+
+  .govuk-header__link--service-name {
+    display: inline-block;
+    margin-bottom: govuk-spacing(2);
+    @include govuk-font($size: 24, $weight: bold);
+  }
+
+  .govuk-header__logo,
+  .govuk-header__content {
+    box-sizing: border-box;
+  }
+
+  .govuk-header__logo {
+    @include govuk-responsive-margin(2, "bottom");
+    padding-right: govuk-spacing(8);
+
+    @include mq ($from: desktop) {
+      width: 33.33%;
+      padding-right: $govuk-gutter-half;
+      float: left;
+      vertical-align: top;
+    }
+  }
+
+  .govuk-header__content {
+    @include mq ($from: desktop) {
+      width: 66.66%;
+      padding-left: $govuk-gutter-half;
+      float: left;
+    }
+  }
+
+  .govuk-header__menu-button {
+    @include govuk-font($size: 16);
+    display: none;
+    position: absolute;
+    top: govuk-spacing(4);
+    right: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: $govuk-header-link;
+    background: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &::after {
+      @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
+      content: "";
+      margin-left: govuk-spacing(1);
+    }
+
+    @include govuk-focusable;
+
+    @include mq ($from: tablet) {
+      top: govuk-spacing(3);
+    }
+  }
+
+  .govuk-header__menu-button--open {
+    &::after {
+      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+  }
+
+  .govuk-header__navigation {
+    @include govuk-responsive-margin(2, "bottom");
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .js-enabled {
+    .govuk-header__menu-button {
+      display: block;
+      @include mq ($from: desktop) {
+        display: none;
+      }
+    }
+
+    .govuk-header__navigation {
+      display: none;
+      @include mq ($from: desktop) {
+        display: block;
+      }
+    }
+
+    .govuk-header__navigation--open {
+      display: block;
+    }
+  }
+
+
+  .govuk-header__navigation--end {
+    @include mq ($from: desktop) {
+      margin: 0;
+      padding: govuk-spacing(1) 0;
+      text-align: right;
+    }
+  }
+
+  .govuk-header__navigation--no-service-name {
+    padding-top: govuk-spacing(7);
+  }
+
+  .govuk-header__navigation-item {
+    padding: govuk-spacing(2) 0;
+    border-bottom: 1px solid $govuk-header-nav-item-border-color;
+
+    @include mq ($from: desktop) {
+      display: inline-block;
+      margin-right: govuk-spacing(3);
+      padding: govuk-spacing(1) 0;
+      border: 0;
+    }
+
+    a {
+      @include govuk-font($size: 16, $weight: bold);
+      white-space: nowrap;
+    }
+  }
+
+  .govuk-header__navigation-item--active {
+    a {
+      &:link,
+      &:hover,
+      &:visited {
+        color: $govuk-header-link-active;
+      }
+
+      // When focussed, the text colour needs to be darker to ensure that colour
+      // contrast is still acceptable
+      &:focus {
+        color: $govuk-focus-text-colour;
+      }
+    }
+  }
+
+  .govuk-header__navigation-item:last-child {
+    margin-right: 0;
+  }
+
+  @include govuk-media-query($media-type: print) {
+    .govuk-header {
+      border-bottom-width: 0;
+      color: govuk-colour("black");
+      background: transparent;
+    }
+
+    // Hide the inverted crown when printing in browsers that don't support SVG.
+    .govuk-header__logotype-crown-fallback-image {
+      display: none;
+    }
+
+    .govuk-header__link {
+      &:link,
+      &:visited {
+        color: govuk-colour("black");
+      }
+
+      // Do not append link href to GOV.UK link when printing (e.g. '(/)')
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  // Begin adjustments for font baseline offset
+  // These should be removed when the font is updated with the correct baseline
+  .govuk-header__logotype-crown,
+  .govuk-header__logotype-crown-fallback-image {
+    position: relative;
+    top: -4px;
+  }
+
+  .govuk-header {
+    $offset: 3px;
+    padding-top: $offset;
+  }
+  // End adjustments
+
+}

data/vendor/assets/stylesheets/components/hint/_hint.scss

@@ -0,0 +1,50 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/hint") {
+  .govuk-hint {
+    @include govuk-font($size: 19);
+
+    display: block;
+
+    margin-bottom: govuk-spacing(3);
+
+    color: $govuk-secondary-text-colour;
+  }
+
+  // Reduces margin-bottom of hint when used after the default label (no class)
+  // or govuk-label--s for better vertical alignment.
+
+  // This adjustment will not work when the label is inside the <h1>, however it
+  // is unlikely that the default or govuk-label--s class would be used in this
+  // case.
+
+  // This adjustment will not work in browsers that do not support :not(). 
+  // Users with these browsers will see the default size margin (5px larger).
+
+  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
+    margin-bottom: govuk-spacing(2);
+  }
+
+  // Reduces margin-bottom of hint when used after the default legend (no class)
+  // or govuk-fieldset__legend--s for better vertical alignment.
+
+  // This adjustment will not work when the legend is outside the <h1>, however
+  // it is unlikely that the default or govuk-fieldset__legend--s class would be
+  // used in this case.
+
+  // This adjustment will not work in browsers that do not support :not(). 
+  // Users with these browsers will see the default size margin (5px larger).
+
+  .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {
+    margin-bottom: govuk-spacing(2);
+  }
+
+  // Reduces visual spacing of legend when there is a hint
+
+  .govuk-fieldset__legend + .govuk-hint,
+  .govuk-fieldset__legend + .govuk-hint {
+    margin-top: -(govuk-spacing(1));
+  }
+}

data/vendor/assets/stylesheets/components/input/_input.scss

@@ -0,0 +1,77 @@
+@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/input") {
+  .govuk-input {
+    @include govuk-font($size: 19);
+    @include govuk-focusable;
+
+    box-sizing: border-box;
+    width: 100%;
+    height: 40px;
+    margin-top: 0;
+
+    padding: govuk-spacing(1);
+    // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
+    // as background-color and color need to always be set together, color should not be set either
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border-radius: 0;
+
+    // Disable inner shadow and remove rounded corners
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+  }
+
+  .govuk-input::-webkit-outer-spin-button,
+  .govuk-input::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .govuk-input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  .govuk-input--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+  }
+
+  // The ex measurements are based on the number of W's that can fit inside the input
+  // Extra space is left on the right hand side to allow for the Safari prefill icon
+  // Linear regression estimation based on visual tests: y = 1.76 + 1.81x
+
+  .govuk-input--width-30 {
+    max-width: 56ex + 3ex;
+  }
+
+  .govuk-input--width-20 {
+    max-width: 38ex + 3ex;
+  }
+
+  .govuk-input--width-10 {
+    max-width: 20ex + 3ex;
+  }
+
+  .govuk-input--width-5 {
+    max-width: 10.8ex;
+  }
+
+  .govuk-input--width-4 {
+    max-width: 9ex;
+  }
+
+  .govuk-input--width-3 {
+    max-width: 7.2ex;
+  }
+
+  .govuk-input--width-2 {
+    max-width: 5.4ex;
+  }
+
+}

data/vendor/assets/stylesheets/components/inset-text/_inset-text.scss

@@ -0,0 +1,28 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/inset-text") {
+  .govuk-inset-text {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    padding: govuk-spacing(3);
+    // Margin top intended to collapse
+    // This adds an additional 10px to the paragraph above
+    @include govuk-responsive-margin(6, "top");
+    @include govuk-responsive-margin(6, "bottom");
+
+    clear: both;
+
+    border-left: $govuk-border-width-wide solid $govuk-border-colour;
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :only-child,
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

data/vendor/assets/stylesheets/components/label/_label.scss

@@ -0,0 +1,45 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/label") {
+  .govuk-label {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    display: block;
+
+    margin-bottom: govuk-spacing(1);
+  }
+
+  // Modifiers that make labels look more like their equivalent headings
+
+  .govuk-label--xl {
+    @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-label--l {
+    @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-label--m {
+    @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-label--s {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // When the label is nested inside a heading, override the heading so that it
+  // does not have a margin. Effectively we want to be able to treat the heading
+  // as if it is not there.
+  //
+  // This breaks BEM conventions because it exists as a parent of the 'block',
+  // so we can't really consider an element.
+  .govuk-label-wrapper {
+    margin: 0;
+  }
+}

data/vendor/assets/stylesheets/components/panel/_panel.scss

@@ -0,0 +1,44 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/panel") {
+
+  .govuk-panel {
+    @include govuk-font($size: 19);
+
+    box-sizing: border-box;
+
+    margin-bottom: govuk-spacing(3);
+    padding: govuk-spacing(7) - $govuk-border-width;
+
+    border: $govuk-border-width solid transparent;
+
+    text-align: center;
+
+    @include govuk-media-query($until: tablet) {
+      padding: govuk-spacing(6) - $govuk-border-width;
+    }
+  }
+
+  .govuk-panel--confirmation {
+    color: govuk-colour("white");
+    background: govuk-colour("turquoise");
+  }
+
+  .govuk-panel__title {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(6);
+
+    @include govuk-font($size: 48, $weight: bold);
+  }
+
+  .govuk-panel__title:last-child {
+    margin-bottom: 0;
+  }
+
+  .govuk-panel__body {
+    @include govuk-font($size: 36);
+  }
+
+}

data/vendor/assets/stylesheets/components/phase-banner/_phase-banner.scss

@@ -0,0 +1,31 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../tag/tag";
+
+@include govuk-exports("govuk/component/phase-banner") {
+  .govuk-phase-banner {
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(2);
+
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-phase-banner__content {
+    @include govuk-font($size: 16);
+    @include govuk-text-colour;
+
+    display: table;
+    margin: 0;
+  }
+
+  .govuk-phase-banner__content__tag {
+    margin-right: govuk-spacing(2);
+  }
+
+  .govuk-phase-banner__text {
+    display: table-cell;
+    vertical-align: baseline;
+  }
+}