ustyle 1.3.6

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

@@ -0,0 +1,195 @@
+@import "ustyle/content/c-header";
+@import "ustyle/content/c-social";
+
+.us-content {
+  margin-bottom: $gutter-width;
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 50px;
+  }
+  //
+  // Default typography styling
+  //
+  p,
+  ul,
+  blockquote {
+    @include baseline($base-font-size);
+
+    @include respond-to(tablet) {
+      @include baseline(18px);
+    }
+
+    @include respond-to(desktop, true) {
+      @include baseline(20px);
+      text-rendering: optimizeSpeed;
+    }
+
+    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%;
+    border-collapse: separate;
+
+    img,
+    p {
+      @extend %reset-box-model;
+    }
+
+    a {
+      border: 0;
+    }
+
+    td,
+    th {
+      padding: $gutter-width / 4;
+      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 {
+    font-weight: 700;
+    color: $c-navy;
+  }
+
+  .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;
+    }
+
+    .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,30 @@
+.us-content__header {
+  img {
+    display: none;
+    height: auto;
+    max-width: 100%;
+    min-width: 100%;
+
+    @include respond-to(tablet, true) {
+      display: block;
+    }
+  }
+}
+
+.us-content__title {
+  @include heading(3);
+  position: relative;
+  padding: .5em 0 1em 0;
+  margin: 0;
+  clear: both;
+  color: $c-navy;
+  background-color: #fff;
+
+  @include respond-to(tablet, true) {
+    @include heading(2, $extend: false);
+  }
+
+  @include respond-to(desktop, true) {
+    @include heading(1, $extend: false);
+  }
+}

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

@@ -0,0 +1,10 @@
+.us-social {
+  padding-top: 1em;
+  margin-bottom: 2em;
+}
+
+.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,75 @@
+// @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
+//   * For text inputs that are optional, add "(optional)" to the `placeholder` attribute for the input. Not highlighting required fields makes the form look less intimidating.
+//
+// @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-typegrey !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;
+      min-width: $default-label-width;
+      vertical-align: middle;
+    }
+  }
+}
+
+// The toggle field is for radios and checkboxes. It sits within the .us-field to allow
+// styling for labels of radio/checboxes
+.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,101 @@
+// @page Pattern Library/Forms
+// @name Input group
+//
+// @description
+//   Inputs 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"><span class="us-icon--small  us-icon--inputgrey us-icon--envelope us-icon--notext"></span></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>
+
+.us-input-group {
+  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%;
+  }
+}
+
+.us-input-group--disabled {
+  .us-input-group__box {
+    @include form-element-disabled;
+
+    [class^="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-inputgrey;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: $c-form-element-background;
+  border: 1px solid $c-form-element-border;
+  border-radius: 3px;
+
+  @include respond-to(tablet, true) {
+    width: auto;
+  }
+
+  [class^="us-icon--"] {
+    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,63 @@
+// @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-inputgrey !default;
+
+.us-form-input {
+  @extend %base-form-element;
+  @extend %input-background--normalise;
+  @include placeholder($input-placeholder-color);
+  height: $form-element-base-height;
+  padding: $form-element-base-padding;
+  font-size: 1em;
+  outline: 0;
+  box-shadow: none;
+
+  &:focus {
+    @include placeholder(darken($input-placeholder-color, 15%));
+  }
+
+  .ie8 & {
+    height: auto;
+  }
+}
+
+.us-form-input.large,
+.us-form-input--large {
+  height: 48px;
+  padding: .55em .5em;
+  font-size: 1.2em;
+}
+
+.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;
+}

data/vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss

@@ -0,0 +1,133 @@
+// @page Pattern Library/Forms
+// @name Radios and checkboxes
+//
+// @description
+//   Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.
+//
+//   #### Best practices
+//   * Like select boxes, radio buttons are good for making a selection from a mutually exclusive list of options. The main difference between the two is that with radio buttons, the user must choose exactly one of the options.
+//   * Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.
+//   * Checkboxes in a group should be used for choosing zero or more options from a list of independent options. Toggling one should not change the state of others in the group.
+//   * A stand-alone checkbox is good for toggling something on/off or opting in/out.
+//   * Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.
+//   * Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.
+//
+// @state us-form-input--disabled - Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with
+//
+// @markup
+//   <div class="us-field us-field--blocked">
+//     <label>Do you have a different billing address?</label>
+//     <div class="us-field-toggle">
+//       <label>
+//         <input checked="checked" class="us-form-input {$modifiers}" name="null" type="radio">
+//         Yes
+//       </label>
+//
+//       <label>
+//         <input class="us-form-input" name="null" type="radio">
+//         No
+//       </label>
+//     </div>
+//   </div>
+//
+//   <div class="us-field us-field--blocked">
+//     <label>How would you like to be contacted?</label>
+//     <div class="us-field-toggle">
+//       <label>
+//         <input checked="checked" class="us-form-input {$modifiers}" name="null" type="checkbox">
+//         Mobile
+//       </label>
+//
+//       <label>
+//         <input class="us-form-input" name="null" type="checkbox">
+//         Email
+//       </label>
+//     </div>
+//   </div>
+
+.us-form-input {
+  @include hidpi(0) {
+    &[type="checkbox"] {
+      &:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        width: 1em;
+        height: 1em;
+        margin: -.5em 0 0 -.5em;
+        pointer-events: none;
+        background-image: inline-svg("#{$base-icon-path}checkbox-tick.svg");
+        background-position: 0 75%;
+        background-size: cover;
+        content: "";
+        opacity: 0;
+      }
+
+      &:checked:after {
+        opacity: 1;
+      }
+
+      &.us-form-input--disabled,
+      &:disabled {
+        background: $c-form-element-disabled-bg;
+
+        // scss-lint:disable NestingDepth
+        &:after {
+          background-position: 0 50%;
+          opacity: .35;
+        }
+      }
+    }
+
+    &[type="radio"] {
+
+      &:checked,
+      &:checked:focus {
+        background: $c-form-element-border-hover;
+      }
+
+      &:focus {
+        box-shadow: inset 0 0 0 1px $c-form-element-border-hover;
+      }
+
+      &:checked {
+        box-shadow: inset 0 0 0 .35em #fff;
+      }
+
+      &:checked:focus {
+        box-shadow: inset 0 0 0 1px $c-form-element-border-hover, inset 0 0 0 .35em #fff;
+      }
+
+      &.us-form-input--disabled:checked,
+      &:disabled:checked {
+        background: $c-form-element-disabled-fg;
+        box-shadow: inset 0 0 0 .35em $c-form-element-disabled-bg;
+      }
+    }
+  }
+
+  &[type="checkbox"],
+  &[type="radio"] {
+    position: relative;
+    width: 1.6em;
+    height: 1.6em;
+    padding: 0;
+    font-size: .8em;
+    cursor: pointer;
+
+    .us-field-toggle & {
+      margin-top: .1em;
+      margin-right: .5em;
+      vertical-align: top;
+    }
+  }
+
+  &[type="radio"] {
+    border-radius: 50%;
+  }
+
+  &[type="checkbox"] {
+    border-radius: .3em;
+  }
+}

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

@@ -0,0 +1,23 @@
+%base-form-element {
+  @include form-element-style($c-form-element-border, $c-form-element-border-hover);
+  display: inline-block;
+  color: $c-form-element-text;
+  vertical-align: middle;
+  background: $c-form-element-background;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: em(3px);
+  box-sizing: border-box;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+%base-form-element--error {
+  @include form-element-style($c-form-error);
+}
+
+%base-form-element--success {
+  @include form-element-style($c-form-success);
+}