ustyle 1.3.6

data/vendor/assets/stylesheets/ustyle/components/_progress.scss

@@ -0,0 +1,126 @@
+// @page Pattern Library/Components
+// @name Progress navigation
+//
+// @description
+//   The progress navigation should be used for any funnel journeys on the website. Once a section has been completed the user should be able to get back to that step.
+//   The mobile view of the navigation just has the dotted numbers.
+//
+// @markup
+//   <div class="us-progress">
+//     <nav>
+//       <ul class="us-progress__nav us-clearfix">
+//         <li class="us-progress__item">
+//           <a href="#" class="us-progress__link us-progress__link--complete">
+//             <span class="us-tablet--inline">Current supplier</span>
+//           </a>
+//         </li>
+//         <li class="us-progress__item">
+//           <a href="#" class="us-progress__link us-progress__link--complete">
+//             <span class="us-tablet--inline">Usage</span>
+//           </a>
+//         </li>
+//         <li class="us-progress__item">
+//           <span class="us-progress__link us-progress__link--current">
+//             <span class="us-tablet--inline">Results</span>
+//           </span>
+//         </li>
+//         <li class="us-progress__item">
+//           <span class="us-progress__link us-progress__link--next">
+//             <span class="us-tablet--inline">New tariff</span>
+//           </span>
+//         </li>
+//         <li class="us-progress__item">
+//           <span class="us-progress__link us-progress__link--next">
+//             <span class="us-tablet--inline">Apply</span>
+//           </span>
+//         </li>
+//       </ul>
+//     </nav>
+//   </div>
+//
+
+$progress-bg-color: $c-navy;
+$progress-current-color: #fff;
+$progress-complete-color: $c-cyan;
+$progress-next-color: tint($c-navy, 50%);
+
+.us-progress {
+  position: relative;
+  z-index: 4;
+  background-color: $progress-bg-color;
+}
+
+.us-progress__nav {
+  @extend %reset-box-model;
+  list-style: none;
+  counter-reset: number-counter;
+}
+
+.us-progress__item {
+  @extend %reset-box-model;
+  position: relative;
+  float: left;
+  line-height: 1.5em;
+  counter-increment: number-counter;
+
+  @include respond-to(tablet, true) {
+    margin-right: $gutter-width;
+  }
+}
+
+.us-progress__link {
+  position: relative;
+  display: block;
+  padding-top: .5em;
+  padding-bottom: .5em;
+
+  @include respond-to(tablet, true) {
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
+
+  &:before {
+    position: relative;
+    display: inline-block;
+    width: 1.5em;
+    height: 1.5em;
+    margin-right: $gutter-width/3;
+    font-weight: 700;
+    color: $c-navy;
+    text-align: center;
+    border-radius: 50%;
+    content: counter(number-counter);
+    transition: background-color .3s;
+  }
+}
+
+.us-progress__link--next {
+  color: $progress-next-color;
+
+  &:before {
+    background-color: $progress-next-color;
+  }
+}
+
+
+.us-progress__link--current {
+  color: $progress-current-color;
+
+  &:before {
+    background-color: $progress-current-color;
+  }
+}
+
+.us-progress__link--complete {
+  @include link-colors($progress-complete-color, #fff, $progress-complete-color, $progress-complete-color, #fff);
+
+  &:before {
+    background-color: $progress-complete-color;
+  }
+
+  &:hover:before,
+  &:active:before {
+    background-color: #fff;
+  }
+}
+

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

@@ -0,0 +1,239 @@
+// @page Pattern Library/JavaScript
+// @name Tabs
+//
+// @description
+//   These are the basic tabs used for landing pages. You can either reference a data-target for the urls or href for the target tabs. They have a non-js fallback and fold over to accordion when in small tablet view. They are initialised on page load if the tabs classes exist.
+//
+// @javascript
+//   var tabs = new Tabs({
+//     tabContainer: ".us-tabs",
+//     tabLinks: ".us-tabs-nav-mainlink",
+//     tabTitle: "us-tab-title",
+//     activeClass: "active",
+//     changeUrls: true,
+//     collapsible: true,
+//     autoScroll: false
+//   });
+//
+// @markup
+//   <div class='us-tabs'>
+//     <nav class='us-tabs-nav'>
+//       <div class='us-tabs-nav-wrapper'>
+//         <div class='us-tabs-nav-menu'>
+//           <a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab1">Tab 1</a>
+//           <a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab2">Tab 2</a>
+//           <a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab3">Tab 3</a>
+//         </div>
+//       </div>
+//     </nav>
+//     <div class='us-tabs-container'>
+//       <div class='us-tab' id='tab1'>
+//         <h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab1">Test 1</a></h2>
+//         <div class='us-tab-content'>
+//           <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>
+//         </div>
+//       </div>
+//       <div class='us-tab' id='tab2'>
+//         <h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab2">Test 2</a></h2>
+//         <div class='us-tab-content'>
+//           <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>
+//         </div>
+//       </div>
+//       <div class='us-tab' id='tab3'>
+//         <h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab3">Test 3</a></h2>
+//         <div class='us-tab-content'>
+//           <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>
+//         </div>
+//       </div>
+//     </div>
+//   </div>
+
+$tab-width: col-width(2) !default;
+
+@keyframes tab-show {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// Tab nav
+.us-tabs-nav {
+  display: none;
+  background-color: $c-navy;
+
+  @include respond-to(tablet) {
+    .js & {
+      display: block;
+    }
+  }
+
+  .js.ie8 & {
+    display: block;
+  }
+}
+
+.us-tabs-nav-wrapper {
+  @extend %container;
+  padding-top: $gutter-width / 2;
+}
+
+.us-tabs-nav-menu {
+  display: table;
+  display: -webkit-flex;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  flex-flow: row;
+}
+
+.us-tabs-nav-link {
+  @include normal-font;
+  @include link-colors(#fff, $c-navy, $c-navy, #fff);
+  position: relative;
+  z-index: 1;
+  display: table-cell;
+  width: $tab-width;
+  padding: .475em .15em 1.2em;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 3px 3px 0 0;
+  transition: none;
+  
+  @include respond-to(tablet) {
+    font-size: em(14px);
+    line-height: 1.25em;
+  }
+
+  @include respond-to(desktop) {
+    font-size: em($base-font-size);
+  }
+
+  @include respond-to(large-desktop) {
+    font-size: em(18px);
+  }
+
+  &:hover {
+    background-color: #fff;
+  }
+
+  &.active {
+    z-index: 2;
+    color: $c-navy;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+  }
+}
+
+// scss-lint:disable Comment, MergeableSelector
+.us-tabs-nav-link {
+  /* autoprefixer: off */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+}
+// scss-lint:enable Comment, MergeableSelector
+
+// Tabs
+.us-tabs-container {
+  @extend %container;
+
+  @include respond-to(to-tablet) {
+    padding: 0 !important;
+  }
+}
+
+.us-tab-title {
+  @extend %heading-4;
+  position: relative;
+  margin: 0;
+  font-weight: normal;
+
+  @include respond-to(tablet) {
+    .js & {
+      display: none;
+    }
+  }
+
+  .js.ie8 & {
+    display: none;
+  }
+
+  a {
+    @include link-colors($c-navy, #fff, $c-navy);
+    display: block;
+    padding: .5em .75em;
+    background-color: $c-cyan;
+    border-bottom: 1px solid #fff;
+    transition: color 300ms, background-color 300ms;
+
+    .active & {
+      color: #fff;
+      background-color: $c-navy;
+    }
+
+    .active &:before {
+      transform: rotate(90deg);
+    }
+
+    &:hover:before {
+      color: #fff;
+      transform: rotate(90deg);
+    }
+
+    &:before {
+      @include arrow(10px, 10px, right);
+      display: inline-block;
+      margin-right: .75em;
+      font-size: .75em;
+      content: "";
+      transition: all 300ms;
+    }
+  }
+}
+
+.us-tab-content {
+  @extend %container;
+  display: block;
+  overflow: hidden;
+  opacity: 1;
+
+  .js & {
+    max-height: 0;
+
+    @include respond-to(tablet) {
+      display: none;
+      max-height: none;
+    }
+  }
+
+  .ie8.js & {
+    display: none;
+    max-height: none;
+  }
+
+  .us-tab.active & {
+    max-height: 9999px;
+    padding-top: 1em;
+
+    @include respond-to(tablet, true) {
+      display: block;
+      animation-duration: 1s;
+      animation-name: tab-show;
+      animation-fill-mode: forwards;
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/components/_tooltip.scss

@@ -0,0 +1,244 @@
+// @page Pattern Library/JavaScript
+// @name Tooltip
+//
+// @description
+//  `.us-tooltip` can be applied to any parent, and by hovering it, it will toggle the visibility of `.us-tooltip__note`. Please note that on mobile viewports, the tooltip will appeat underneath the element that is aligned with the tooltip icon.
+//
+// @state .us-tooltip--top
+// @state .us-tooltip--bottom
+// @state .us-tooltip--left
+// @state .us-tooltip--right
+// @state .us-tooltip--small
+//
+// @javascript
+//  var tooltips = new ClassToggler({
+//    containerClass: '.us-tooltip',
+//    $target: $('.us-tooltip__icon'),
+//    activeClass: "us-tooltip--active"
+//  });
+//
+// @markup
+//   <div class="tooltip-demo us-tooltip {$modifiers}">
+//     <div class="us-field">
+//       <label for='name'>Name</label>
+//       <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>
+//     </div>
+//
+//     <div class="us-tooltip__wrapper">
+//       <div class="us-tooltip__icon"></div>
+//       <div class="us-tooltip__note">
+//         <div class="us-tooltip__arrow"></div>
+//         <strong>Tooltip</strong> message content
+//       </div>
+//     </div>
+//   </div>
+
+$tooltip-note-width: 300px !default;
+$tooltip-icon-size: 22px !default;
+$tooltip-icon-size--small: 16px !default;
+$tooltip-icon-bg-color: $c-bordergrey !default;
+$tooltip-icon-top-position: 0 !default;
+$tooltip-icon-right-position: 0 !default;
+
+$tooltip-note-padding-vertical: 1em !default;
+$tooltip-note-padding-horizontal: .75em !default;
+$tooltip-note-bg-color: #fff !default;
+$tooltip-note-border-color: $c-typecyan !default;
+
+$tooltip-arrow-width: 10px !default;
+$tooltip-arrow-height: $tooltip-arrow-width * 2 !default;
+
+$tooltip-hover: true !default;
+$tooltip-active-class-breakpoint: to-tablet !default;
+$tooltip-default-breakpoint: tablet !default;
+
+$tooltip-h-positions: "top", "bottom";
+$tooltip-v-positions: "left", "right";
+
+@mixin tooltip-arrow($arrow-type, $arrow-width, $arrow-height, $arrow-position, $bottom-position) {
+  .us-tooltip__arrow {
+    @include respond-to($tooltip-default-breakpoint) {
+      @include arrow($arrow-width, $arrow-height, $arrow-type, $tooltip-note-border-color);
+      #{$arrow-position}: $bottom-position;
+
+      &:after {
+        @include arrow($arrow-width, $arrow-height, $arrow-type, $tooltip-note-bg-color);
+        #{$arrow-position}: 1px;
+      }
+    }
+  }
+}
+
+%tooltip-vertical-defaults {
+  @include respond-to($tooltip-default-breakpoint, true) {
+    top: -$tooltip-note-padding-vertical;
+
+    .us-tooltip__arrow {
+      top: $tooltip-note-padding-vertical;
+    }
+
+    .us-tooltip__arrow:after {
+      top: -$tooltip-arrow-width;
+    }
+  }
+}
+
+%tooltip-horizontal-defaults {
+  @include respond-to($tooltip-default-breakpoint, true) {
+    left: 50%;
+    margin-left: - ($tooltip-note-width / 2);
+
+    .us-tooltip__arrow,
+    .us-tooltip__arrow:after {
+      left: 50%;
+      margin-left: -$tooltip-arrow-height/2;
+    }
+  }
+}
+
+@mixin tooltip-position--horizontal($position, $icon-size: $tooltip-icon-size, $arrow-height: $tooltip-arrow-width, $arrow-width: $tooltip-arrow-height) {
+  $px-position: $icon-size + $arrow-height;
+  $bottom-position: -($arrow-width / 2);
+  $arrow-type: opposite-direction($position);
+  $arrow-position: opposite-direction($position);
+
+  @extend %tooltip-horizontal-defaults;
+  @include tooltip-arrow($arrow-type, $arrow-width, $arrow-height, $arrow-position, $bottom-position);
+  #{opposite-direction($position)}: $px-position;
+}
+
+@mixin tooltip-position--vertical($position, $icon-size: $tooltip-icon-size, $arrow-height: $tooltip-arrow-height, $arrow-width: $tooltip-arrow-width) {
+  $arrow-type: opposite-direction($position);
+  $arrow-position: $arrow-type;
+  $bottom-position: -($arrow-height / 2);
+  $px-position: -($tooltip-note-width + ($icon-size / 2)) - 4;
+
+  @extend %tooltip-vertical-defaults;
+  @include tooltip-arrow($arrow-type, $arrow-width, $arrow-height, $arrow-position, $bottom-position);
+  #{$position}: $px-position;
+}
+
+@mixin tooltip--active {
+  .us-tooltip__note {
+    display: block;
+    pointer-events: all;
+    opacity: 1;
+    visibility: visible;
+    transition-delay: 0ms;
+  }
+
+  .us-tooltip__icon {
+    background: $c-typecyan;
+  }
+}
+
+.us-tooltip {
+  &.us-tooltip--active {
+    @if $tooltip-active-class-breakpoint {
+      @include respond-to($tooltip-active-class-breakpoint) {
+        @include tooltip--active;
+      }
+    } @else {
+      @include tooltip--active;
+    }
+  }
+
+  @if $tooltip-hover {
+    &:hover {
+      @include respond-to($tooltip-default-breakpoint, true) {
+        @include tooltip--active;
+      }
+    }
+  }
+}
+
+.us-tooltip__wrapper {
+  position: static;
+  top: 0;
+  right: 0;
+
+  @include respond-to($tooltip-default-breakpoint, true) {
+    position: absolute;
+  }
+}
+
+.us-tooltip__icon {
+  position: absolute;
+  top: $tooltip-icon-top-position;
+  right: $tooltip-icon-right-position;
+  width: $tooltip-icon-size;
+  height: $tooltip-icon-size;
+  font-weight: 700;
+  line-height: $tooltip-icon-size;
+  color: #fff;
+  text-align: center;
+  cursor: pointer;
+  background: $tooltip-icon-bg-color;
+  border-radius: 50%;
+
+  @include respond-to($tooltip-default-breakpoint, true) {
+    position: static;
+  }
+
+  &:before {
+    content: "?";
+  }
+}
+
+.us-tooltip__note {
+  position: static;
+  display: none;
+  padding: $tooltip-note-padding-horizontal $tooltip-note-padding-vertical;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  color: $c-typegrey;
+  background: $tooltip-note-bg-color;
+  border: 1px solid $tooltip-note-border-color;
+  border-radius: 4px;
+
+  @include respond-to($tooltip-default-breakpoint, true) {
+    position: absolute;
+    display: block;
+    width: $tooltip-note-width;
+    margin-top: 0;
+    margin-bottom: 0;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0ms ease 300ms, opacity 300ms ease;
+  }
+}
+
+.us-tooltip__arrow {
+  position: absolute;
+
+  &:after {
+    position: absolute;
+    content: "";
+  }
+}
+
+.us-tooltip--small {
+  .us-tooltip__icon {
+    width: $tooltip-icon-size--small;
+    height: $tooltip-icon-size--small;
+    font-size: .875em;
+    line-height: $tooltip-icon-size--small;
+  }
+}
+
+@each $position in $tooltip-h-positions {
+  .us-tooltip--#{$position} {
+    .us-tooltip__note {
+      @include tooltip-position--horizontal($position);
+    }
+  }
+}
+
+@each $position in $tooltip-v-positions {
+  .us-tooltip--#{$position} {
+    .us-tooltip__note {
+      @include tooltip-position--vertical($position);
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/components/_usp.scss

@@ -0,0 +1,69 @@
+// @page Pattern Library/Components
+// @name USPs
+//
+// @description 
+// USPs (Unique Selling Points) are used within tables and on splash pages to highlight offers within a deal, and also to differentiate deals.
+// General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).
+//
+// @state .us-usp--blue - uSwitch related
+// @state .us-usp--orange - Rewards (money/points)
+// @state .us-usp--purple - Gifts eg. free TV
+// @state .us-usp--yellow - Vouchers
+// @state .us-usp--typecyan - Micro persuasions eg. most popular, half price
+// @state .us-usp--green - Renewable and environmentally friendly
+// @state .us-usp--navy - Generic vertical specific USP
+// @state .us-usp--cyan - Generic vertical specific USP
+// @state .us-usp--typegrey - Generic vertical specific USP
+// @state .us-usp--red - Generic vertical specific USP
+//
+// @markup
+//   <div class='us-usp {$modifiers}'>Shortened USP</div>
+//   <div class='us-usp us-usp--annotated'>
+//     <div class='us-usp {$modifiers}'>Annotated USP</div>
+//     More information about USP goes here
+//   </div>
+
+$variants: (
+  ('cyan', $c-cyan, $c-navy),
+  ('typecyan', $c-typecyan),
+  ('blue', $c-blue),
+  ('navy', $c-navy),
+  ('red', $c-red),
+  ('green', $c-green),
+  ('purple', $c-purple),
+  ('orange', $c-orange),
+  ('yellow', $c-yellow, $c-typegrey),
+  ('typegrey', $c-typegrey)
+) !default;
+
+.us-usp {
+  display: inline-block;
+  padding: 0 10px;
+  font-weight: bold;
+  line-height: $base-line-ratio;
+  color: #fff;
+  text-align: center;
+  background-color: $c-typecyan;
+}
+
+@each $colour in $variants {
+  .us-usp--#{nth($colour, 1)} {
+    background-color: #{nth($colour, 2)};
+
+    @if length($colour) == 3 {
+      color: #{nth($colour, 3)};
+    }
+  }
+}
+
+.us-usp--annotated {
+  font-weight: normal;
+  color: $c-typegrey;
+  text-align: left;
+  background-color: $c-bggrey;
+
+  .us-usp {
+    margin-right: 10px;
+    margin-left: -10px;
+  }
+}