reustyle 2.0.7

data/vendor/assets/stylesheets/ustyle/content/_base.scss

@@ -0,0 +1,227 @@
+@import "ustyle/content/c-header";
+@import "ustyle/content/c-social";
+
+$content-heading-font-sizes: 30px, 24px, 20px, 18px, 16px, 16px;
+
+.us-content {
+  // scss-lint:disable all
+
+  margin-bottom: $gutter-width;
+
+  @include baseline($base-font-size, $root: true);
+
+  @include respond-to(tablet) {
+    @include baseline(18px, $root: true);
+  }
+
+  @include respond-to(desktop) {
+    @include baseline(20px, $root: true);
+    text-rendering: optimizeSpeed;
+  }
+
+  @for $level from 1 through 6 {
+    h#{$level},
+    .us-heading--#{$level} {
+      @include heading($level, $font-sizes: $content-heading-font-sizes);
+    }
+  }
+
+  // scss-lint:enable all
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 30px;
+    margin-bottom: .5em;
+
+    @include respond-to(tablet) {
+      margin-top: 50px;
+    }
+  }
+  //
+  // Default typography styling
+  //
+  p,
+  ul,
+  blockquote {
+    a {
+      @extend %anchor-link;
+    }
+  }
+  //
+  // Default image styling
+  //
+  img {
+    height: auto;
+    max-width: 100%;
+    padding-top: 1em;
+    margin-bottom: 1em;
+  }
+  //
+  // Default table styling
+  //
+  table {
+    width: 100%;
+    font-size: 16px;
+    border-collapse: separate;
+
+    img,
+    p {
+      @extend %reset-box-model;
+    }
+
+    a {
+      border: 0;
+    }
+
+    td,
+    th {
+      padding: $gutter-width / 4;
+      text-align: left;
+      vertical-align: middle;
+      border-bottom: 1px solid $c-bordergrey;
+    }
+
+    thead {
+      background-color: $c-keylinegrey;
+    }
+  }
+  //
+  // Figure / image captions
+  //
+  figure {
+    padding: $gutter-width / 2;
+    margin: 0;
+    background-color: $c-bggrey;
+    border: 1px solid $c-keylinegrey;
+
+    img {
+      padding-top: 0;
+      margin-bottom: 0;
+    }
+
+    figcaption {
+      display: inline-block;
+      vertical-align: top;
+
+      @include respond-to(tablet, true) {
+        width: 50%;
+        margin-left: $gutter-width;
+      }
+    }
+  }
+
+  .strap {
+    @include baseline(18px);
+
+    @include respond-to(tablet) {
+      @include baseline(22px);
+      margin-bottom: 2em;
+    }
+  }
+
+  .us-cta {
+    font-size: 16px;
+  }
+
+  .internal-menu {
+    @extend %list;
+  }
+
+  // scss-lint:disable NestingDepth, SelectorDepth
+  .plans-ending {
+    @extend %clearfix;
+    @extend %reset-box-model;
+    list-style: none;
+    border-top: 1px solid $c-blue;
+
+    > li {
+      padding-top: .5em;
+      padding-bottom: .5em;
+      margin: 0;
+      border-bottom: 1px solid $c-blue;
+    }
+
+    ul {
+      list-style: disc;
+    }
+
+    .row {
+      position: relative;
+      font-weight: 700;
+      color: $c-blue;
+      cursor: pointer;
+      transition: color .3s;
+
+      &:after {
+        position: absolute;
+        top: 50%;
+        right: 1em;
+        margin-top: -.75em;
+        font-size: 2em;
+        font-weight: 700;
+        content: "\27E9";
+      }
+
+      &:hover {
+        color: $c-typecyan;
+      }
+    }
+
+    img {
+      @extend %reset-box-model;
+      margin: 0 1em 0 1em;
+      vertical-align: middle;
+    }
+
+    .table-container {
+      margin-top: .5em;
+    }
+
+    .us-btn {
+      @extend %btn;
+      @extend %btn--primary;
+    }
+
+    .js & {
+      .table-container {
+        display: none;
+      }
+    }
+  }
+
+  .fuel-breakdown {
+    @extend %clearfix;
+    @extend %reset-box-model;
+    width: 100%;
+    overflow: hidden;
+    list-style: none;
+
+    li {
+      float: left;
+      padding: $gutter-width / 2 0;
+      font-size: 16px;
+      font-size: rem(16px);
+      color: #fff;
+      text-align: center;
+      vertical-align: middle;
+
+      b {
+        display: block;
+      }
+    }
+
+    $fuel-colors: (coal, $c-bordergrey), (gas, $c-typecyan), (nuclear, $c-orange), (renewable, $c-green), (other, $c-typegrey);
+    @each $color in $fuel-colors {
+      .#{nth($color, 1)} {
+        background-color: nth($color, 2);
+        @if nth($color, 1) == other {
+          text-indent: -999em;
+        }
+      }
+    }
+  }
+  // scss-lint:enable NestingDepth, SelectorDepth
+}

data/vendor/assets/stylesheets/ustyle/content/_c-header.scss

@@ -0,0 +1,27 @@
+.us-content__header {
+  img {
+    display: none;
+    height: auto;
+    max-width: 100%;
+    min-width: 100%;
+
+    @include respond-to(tablet, true) {
+      display: block;
+    }
+  }
+}
+
+.us-content__title {
+  position: relative;
+  padding: .5em 0 0 0;
+  margin: 0;
+  clear: both;
+  font-size: 1.6785em; // 26px
+  color: $c-navy;
+  background-color: #fff;
+
+  @include respond-to(desktop, true) {
+    @include heading(1, $extend: false);
+    padding: .5em 0 1em 0;
+  }
+}

data/vendor/assets/stylesheets/ustyle/content/_c-social.scss

@@ -0,0 +1,9 @@
+.us-social {
+  padding-top: 1em;
+}
+
+.us-social-btn {
+  display: inline-block;
+  margin-right: .5em;
+  vertical-align: top;
+}

data/vendor/assets/stylesheets/ustyle/content/_c-tabs.scss

@@ -0,0 +1,30 @@
+.us-content__tabs {
+  @extend %clearfix;
+  padding-right: $gutter-width / 2;
+  padding-left: $gutter-width / 2;
+  margin-bottom: $gutter-width / 2;
+  border-bottom: 1px solid $c-keylinegrey;
+}
+
+.us-content__tab-link {
+  @extend %small-font;
+  @include bold-font;
+  @include link-colors($c-typegrey, $c-typecyan, $c-typegrey, $c-typegrey);
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  padding: .5em 1em;
+  color: $c-typegrey-2;
+  background-color: $c-keylinegrey;
+  border-top: 1px solid $c-keylinegrey;
+  border-right: 1px solid $c-keylinegrey;
+  border-left: 1px solid $c-keylinegrey;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+}
+
+.us-content__tab-link--active {
+  color: $c-typegrey;
+  background-color: #fff;
+  border-color: $c-keylinegrey;
+}

data/vendor/assets/stylesheets/ustyle/forms/_base.scss

@@ -0,0 +1,9 @@
+@import "ustyle/forms/reset";
+@import "ustyle/forms/fields";
+@import "ustyle/forms/input";
+@import "ustyle/forms/textarea";
+@import "ustyle/forms/input-group";
+@import "ustyle/forms/radio-checkbox";
+@import "ustyle/forms/toggle";
+@import "ustyle/forms/select";
+@import "ustyle/forms/validation";

data/vendor/assets/stylesheets/ustyle/forms/_fields.scss

@@ -0,0 +1,78 @@
+// @page Pattern Library/Forms
+// @name Fields
+//
+// @description
+//   This is the basic form field, `.us-field` wrapper for any single input or select. It sets a few layout options by default (margin) and styles any labels within. You can create a fake label style with `.us-faux-label`
+//
+//   #### Best practices
+//   * All form inputs must have a corresponding label, linked to the input
+//   * The label should be visible; placeholders should not be relied on as not every browser can see them, nor can all screenreaders. A visible permanent label provides continuous context
+//   * For text inputs that are optional, add "(optional)" to the input label
+//   * Add `aria-required` to any input field that must to be filled in
+//   * See our best practices for [writing form labels](../language/microcopy.html#Form text, form labels)
+//
+// @state .us-field--blocked - Blocked label styling.
+// @state .us-field--inline - Inline label styling.
+//
+// @markup
+//   <div class="us-field {$modifiers}">
+//     <label for="name">Name</label>
+//     <input class="us-form-input" id="name" name="name" placeholder="Please enter your name">
+//   </div>
+
+$default-label-color: $c-uswitch-navy !default;
+$default-label-size: 18px !default;
+$default-label-width: em(120px, $default-label-size) !default;
+$default-label-margin: .25em !default;
+$label-inline-breakpoint: tablet !default;
+
+%base-block-label {
+  display: block;
+  margin-bottom: $default-label-margin;
+}
+
+.us-field {
+  @extend %clearfix;
+  margin-bottom: 1em;
+
+  > label,
+  > .us-faux-label {
+    @include heading-font;
+    margin-right: 1em;
+    font-size: em($default-label-size);
+    color: $default-label-color;
+  }
+}
+
+.us-field-blocked,
+.us-field--blocked {
+  > label,
+  > .us-faux-label {
+    @extend %base-block-label;
+  }
+}
+
+// This is an inline field, for quick, easy to read forms
+.us-field--inline {
+  > label,
+  > .us-faux-label {
+    @extend %base-block-label;
+
+    @include respond-to($label-inline-breakpoint, true) {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}
+
+// The toggle field is for radios and checkboxes. It sits within the .us-field to allow
+// styling for labels of radio/checkboxes
+.us-field-toggle {
+  label {
+    @include normal-font;
+    padding: .35em .5em;
+    font-weight: normal;
+    line-height: 1.5em;
+    cursor: pointer;
+  }
+}

data/vendor/assets/stylesheets/ustyle/forms/_input-group.scss

@@ -0,0 +1,154 @@
+// @page Pattern Library/Forms
+// @name Input group
+//
+// @description
+//   Input groups allow you to add "boxes" to the left or right of an input. These boxes usually contain a visual icon to represent the usage of the input.
+//
+// @state .us-input-group--disabled - Disabled state for input groups.
+// @state .us-input-group--blocked - Fluid style.
+//
+// @markup
+//   <div class="us-input-group us-margin-bottom {$modifiers}">
+//     <span class="us-input-group__box"><svg role="presentation" aria-hidden="true" class="us-icon--small us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-envelope"></use></svg></span>
+//     <input class="us-form-input" type="text" id="email" placeholder="Email" />
+//   </div>
+//
+//   <div class="us-input-group us-margin-bottom {$modifiers}">
+//     <input class="us-form-input" type="text" id="kwh" />
+//     <span class="us-input-group__box">kWh</span>
+//   </div>
+//
+//   <div class="us-input-group us-margin-bottom {$modifiers}">
+//     <span class="us-input-group__box"><svg role="presentation" aria-hidden="true" class="us-icon--small us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-envelope"></use></svg></span>
+//     <input class="us-form-input" type="text" id="email" placeholder="Email" />
+//     <span class="us-input-group__box">kWh</span>
+//   </div>
+
+.us-input-group {
+  @include input-sizing();
+
+  position: relative;
+  display: table;
+  vertical-align: middle;
+  border-collapse: separate;
+
+  @include respond-to(tablet, true) {
+    display: inline-table;
+  }
+
+  .us-form-input {
+    position: relative;
+    display: table-cell;
+    float: left;
+    width: 100%;
+    height: 100%;
+
+    &--large {
+      height: 100%;
+    }
+
+    &:first-child {
+      border-right: 0;
+    }
+
+    &:last-child {
+      border-left: 0;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+
+  // scss-lint:disable NestingDepth
+  &:not(.us-input-group--disabled) {
+    &:hover .us-input-group__box,
+    &:hover:not(:focus-within) .us-form-input {
+      color: $c-dark-grey;
+      border-color: $c-form-element-border-hover;
+
+      [class^="us-icon--"],
+      .us-icon {
+        fill: $c-dark-grey;
+      }
+    }
+
+    &:focus-within .us-input-group__box {
+      color: $c-uswitch-navy;
+      border-color: $c-form-element-border-active;
+
+      [class^="us-icon--"],
+      .us-icon {
+        fill: $c-uswitch-navy;
+      }
+    }
+  }
+}
+
+.us-input-group--disabled {
+  .us-input-group__box {
+    @include form-element-disabled;
+
+    [class^="us-icon--"],
+    .us-icon {
+      opacity: .35;
+    }
+  }
+
+  .us-form-input {
+    @include form-element-disabled;
+  }
+}
+
+.us-input-group--blocked {
+  width: 100%;
+
+  .us-input-group__box {
+    width: 1%;
+  }
+}
+
+.us-input-group__box {
+  display: table-cell;
+  width: 1%;
+  padding-right: .5em;
+  padding-left: .5em;
+  color: $c-grey;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: $c-form-element-background;
+  border: 1px solid $c-form-element-border;
+  height: 100%;
+
+  @include respond-to(tablet, true) {
+    width: auto;
+  }
+
+  [class^="us-icon--"],
+  .us-icon {
+    fill: $c-grey;
+    vertical-align: middle;
+  }
+}
+
+.us-input-group__box:first-child {
+  border-right: 0;
+}
+
+.us-input-group__box:last-child {
+  border-left: 0;
+}
+
+.us-input-group__box:first-child,
+.us-input-group .us-form-input:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.us-input-group__box:last-child,
+.us-input-group .us-form-input:last-child {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}

data/vendor/assets/stylesheets/ustyle/forms/_input.scss

@@ -0,0 +1,61 @@
+// @page Pattern Library/Forms
+// @name Inputs
+//
+// @description
+//   Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.
+//
+//   #### Best practices
+//   * Specifying an appropriate [type attribute](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-type) (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.
+//   * Where appropriate use the [autocomplete attribute](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-autocomplete) to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.
+//
+// @state .us-form-input--large - Larger input style.
+// @state .us-form-input--blocked - Fluid input style.
+// @state .us-form-input--error - Visual feedback for when the input has an error.
+// @state .us-form-input--success - Visual feedback for when success needs to be communicated to the user.
+// @state .us-form-input--disabled - Inactive state for form inputs that can't be interacted with.
+//
+// @markup
+//   <input class="us-form-input {$modifiers}" type="text" placeholder="Placeholder">
+
+$input-placeholder-color: $c-grey !default;
+
+.us-form-input {
+  @extend %base-form-element;
+  @extend %input-background--normalise;
+  @include placeholder($input-placeholder-color);
+  @include input-sizing();
+  outline: 0;
+  box-shadow: none;
+
+  &:focus {
+    @include placeholder($c-uswitch-navy);
+  }
+
+  @if $media-query-legacy-support {
+    .ie8 & {
+      height: auto;
+    }
+  }
+}
+
+.us-form-input.large,
+.us-form-input--large {
+  @include input-sizing(large);
+}
+
+.us-form-input--blocked {
+  width: 100%;
+}
+
+.us-form-input--error {
+  @extend %base-form-element--error;
+}
+
+.us-form-input--success {
+  @extend %base-form-element--success;
+}
+
+.us-form-input:disabled,
+.us-form-input--disabled {
+  @include form-element-disabled;
+}