reustyle 2.0.7

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

@@ -0,0 +1,26 @@
+// @page Pattern Library/Components
+// @name Anchor links
+//
+// @description
+//   Anchor tag styling, with and without a border.
+//
+// @state .us-link - Adds a border bottom to the link.
+// @state .us-link--light - Changes the link colours to white for when links are placed on dark backgrounds.
+//
+// @markup
+//   <a href="#" class="{$modifiers}">Link</a>
+
+%anchor-link {
+  text-decoration: underline;
+}
+
+a,
+.us-link {
+  @extend %anchor-link;
+  @include link-colors($c-uswitch-navy, $c-darker-grey, $c-uswitch-navy, $c-uswitch-navy, $c-uswitch-navy);
+  transition: color 333ms;
+}
+
+.us-link--light {
+  @include link-colors($c-white, $c-super-light-grey, $c-white, $c-white, $c-white);
+}

data/vendor/assets/stylesheets/ustyle/components/_lists-li.scss

@@ -0,0 +1,92 @@
+// @page Pattern Library/Typography
+// @name Numbered list
+//
+// @description
+//   Our default numbered list styling.
+//
+// @state .us-custom-list-alt - Allows us to use the lists on hero/blue backgrounds.
+//
+// @markup
+//   <ul class='us-numbered-list {$modifiers}'>
+//     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>
+//     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>
+//   </ul>
+
+%base-custom-list {
+  padding: 0;
+  margin: 1.5em 0;
+  list-style: none;
+
+  li {
+    position: relative;
+    padding-left: 2em;
+    margin: .5em 0;
+
+    &:before {
+      position: absolute;
+      left: 0;
+    }
+  }
+}
+
+.us-numbered-list {
+  @extend %base-custom-list;
+  counter-reset: number-counter;
+
+  li {
+    counter-increment: number-counter;
+
+    &:before {
+      top: 0;
+      width: 1.5em;
+      height: 1.5em;
+      padding-top: .25em;
+      line-height: 1;
+      color: $c-typecyan;
+      text-align: center;
+      border-radius: 2em;
+      content: counter(number-counter);
+      box-sizing: border-box;
+    }
+  }
+
+  .us-hero & li:before,
+  &.us-custom-list-alt li:before {
+    color: $c-navy;
+    background: #fff;
+    background: rgba(255, 255, 255, .7);
+  }
+}
+
+// @page Pattern Library/Typography
+// @name Ticked list
+//
+// @description
+//   Our default ticked list styling.
+//
+// @state .us-custom-list-alt - Allows us to use the lists on hero/blue backgrounds.
+//
+// @markup
+//   <ul class='us-ticked-list'>
+//     <li>
+//       <svg role="presentation" aria-hidden="true" class="us-icon us-icon--small us-icon--before us-icon--typegrey"><use xlink:href="/images/icons.svg#icon-tick"/></svg>
+//       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+//     </li>
+//     <li>
+//       <svg role="presentation" aria-hidden="true" class="us-icon us-icon--small us-icon--before us-icon--typegrey"><use xlink:href="/images/icons.svg#icon-tick"/></svg>
+//       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+//     </li>
+//   </ul>
+
+.us-ticked-list {
+  @extend %base-custom-list;
+
+  li {
+    padding-left: 0;
+
+    &:before {
+      top: 50%;
+      margin-top: - 8px;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+// @page Pattern Library/Components
+// @name Link lists
+//
+// @description
+//   The default list styling for lists that have anchors to take you to other pages.
+//
+// @markup
+//   <ul class='us-list'>
+//     <li><a href="#">List item 1</a></li>
+//     <li><a href="#">List item 2</a></li>
+//     <li><a href="#">List item 3</a></li>
+//   </ul>
+//
+
+%list,
+.us-list {
+  @extend %reset-box-model;
+  list-style: none;
+
+  li {
+    font-size: 16px;
+    margin: 0; 
+  }
+
+  a {
+    @extend %anchor-link;
+    display: block;
+    padding-top: .5em;
+    padding-bottom: .5em;
+  }
+
+  a:hover {
+    color: $c-darker-grey;
+  }
+
+  .us-hero & {
+    margin-top: 1em;
+  }
+}

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

@@ -0,0 +1,139 @@
+// @page Pattern Library/Components
+// @name Loader
+//
+// @description
+//   Loader component to be added to any AJAX/filter loads across uSwitch. We use them specifically in tables when loading new rows.
+//   `.us-loader--loading` will initiate the animation and `.us-loader--centered` will vertically center the loading SVG.
+//
+// @markup
+//   <div class='us-loader__container'>
+//     <div class='us-loader us-loader--loading us-loader--centered'>
+//       <div class='us-loader__inner'>
+//         <div class='us-loader__spinner'></div>
+//         <div class='us-loader__text'>
+//           Loading deals
+//         </div>
+//       </div>
+//       <div class='us-loader__overlay'></div>
+//     </div>
+//     <!-- EXAMPLE CONTENT -->
+//     <ul class='us-list'>
+//       <li><a href="#">List item 1</a></li>
+//       <li><a href="#">List item 2</a></li>
+//       <li><a href="#">List item 3</a></li>
+//       <li><a href="#">List item 4</a></li>
+//     </ul>
+//     <!-- END EXAMPLE -->
+//   </div>
+
+$loader-overlay-opacity: .8 !default;
+$loader-overlay-colour: #fff !default;
+$spinner-vertical-margin: 1em !default;
+$spinner-animation-time: 500ms !default;
+$spinner-file: "icons/spinner-rebrand.svg" !default;
+$spinner-size: 60px !default;
+
+@keyframes loader-intro {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+%snap-to-parent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+%spinner-base {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  margin-top: $spinner-vertical-margin;
+  margin-bottom: $spinner-vertical-margin;
+  background-repeat: no-repeat;
+}
+
+%spinner-icon {
+  background: transparent inline-svg($spinner-file) no-repeat center center;
+  animation: spin $spinner-animation-time infinite linear;
+}
+
+@mixin spinner($size: $spinner-size) {
+  @extend %spinner-base;
+  @extend %spinner-icon;
+
+  @if $size {
+    width: $size;
+    height: $size;
+    background-size: $size;
+  }
+}
+
+.us-loader {
+  @extend %snap-to-parent;
+  z-index: 1;
+  display: none;
+  text-align: center;
+}
+
+.us-loader__container {
+  position: relative;
+}
+
+.us-loader--loading {
+  display: block;
+  animation: loader-intro $spinner-animation-time forwards;
+}
+
+.us-loader--centered {
+  @extend %vertical-align-parent;
+  transform-style: preserve-3d;
+}
+
+.us-loader__inner {
+  position: relative;
+  z-index: 2;
+
+  .us-loader--centered & {
+    @extend %vertical-align-child;
+  }
+}
+
+.us-loader__spinner {
+  .us-loader--loading & {
+    @include spinner;
+  }
+
+  .us-loader--centered & {
+    margin-top: 0;
+  }
+}
+
+.us-loader__text {
+  @extend %heading-3;
+  color: $c-uswitch-navy;
+}
+
+.us-loader__overlay {
+  @extend %snap-to-parent;
+  z-index: 1;
+  background-color: $loader-overlay-colour;
+  opacity: $loader-overlay-opacity;
+}

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

@@ -0,0 +1,183 @@
+// @page Pattern Library/JavaScript
+// @name Overlay
+//
+// @description
+//  `.us-overlay` slides in from either side of the viewport, or can be shown as a modal window.
+//
+//
+// @javascript
+//   var overlay = new Overlay({
+//     bodyActiveClass: 'us-overlay--open',
+//     activeClass:     'us-overlay-parent--active',
+//     visibleClass:    'us-overlay-parent--visible',
+//     overlay:         $('.us-overlay-parent'),
+//     openButton:      '.js-open-overlay',
+//     closeButton:     '.js-close-overlay',
+//     historyStatus:   '#seedeal',
+//     history:         false,
+//     preventDefault:  true
+//   });
+//
+// @state .us-overlay--modal - Overlay appears as a modal window.
+// @state .us-overlay--right - Overlay appears on the right side of the viewport (not applicable when used in conjunction with .us-overlay--modal).
+// @state .us-overlay--above - Overlay appears over the top of another open overlay.
+//
+// @markup
+//   <button class="us-btn js-open-overlay" modifier="{$modifiers}">Open</button>
+//
+//   <div class="us-overlay-parent" modifier="{$modifiers}">
+//     <div class="us-overlay {$modifiers}">
+//       <div class="us-overlay__container">
+//         <div class="us-overlay__header">
+//           <div class="us-overlay__title">
+//             Overlay
+//           </div>
+//
+//           <button class="us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay">Close</button>
+//         </div>
+//
+//         <div class="us-overlay__body">
+//           Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.
+//         Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.
+//         Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.
+//         Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.
+//         Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.
+//         </div>
+//       </div>
+//     </div>
+//   </div>
+
+$overlay-modal-breakpoint: desktop !default;
+$overlay-modal-width: 60% !default;
+$overlay-max-modal-width: 700px !default;
+$overlay-z-index: 1003 !default;
+$overlay-transition-speed: .3s !default;
+$overlay-mobile-width: 100% !default;
+$overlay-tablet-width: 340px !default;
+$overlay-header-height: 55px !default;
+$overlay-close-size: 64px !default;
+
+.us-overlay--open {
+  overflow: hidden;
+}
+
+@mixin overlay--open {
+  .us-overlay-parent--active & {
+    @content;
+  }
+}
+
+@mixin overlay--above {
+  &.us-overlay--above {
+    @content;
+  }
+}
+
+.us-overlay-parent {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $overlay-z-index;
+  visibility: hidden;
+}
+
+.us-overlay-parent--visible {
+  overflow: scroll;
+  visibility: visible;
+}
+
+.us-overlay {
+  position: absolute;
+  z-index: $overlay-z-index;
+  width: $overlay-mobile-width;
+  min-height: 100%;
+  background: #fff;
+  transform: translate3d(-100%, 0, 0);
+  transition: transform $overlay-transition-speed ease-in, opacity $overlay-transition-speed linear, box-shadow $overlay-transition-speed linear;
+  -webkit-overflow-scrolling: auto;
+
+  @include overlay--open {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    box-shadow: 1px 0 18px 0 rgba(0, 0, 0, .3);
+    transition-timing-function: ease-out;
+  }
+
+  @include respond-to(small-tablet, true) {
+    width: $overlay-tablet-width;
+  }
+}
+
+.us-overlay--above {
+  z-index: $overlay-z-index + 1;
+
+  @include overlay--open {
+    box-shadow: 1px 0 30px 5px rgba(0, 0, 0, .3);
+  }
+}
+
+.us-overlay--modal {
+  @include respond-to($overlay-modal-breakpoint, true) {
+    position: relative;
+    width: $overlay-modal-width;
+    max-width: $overlay-max-modal-width;
+    min-height: 0;
+    margin: 5% auto;
+    opacity: 0;
+    transform: translate3d(0, -30px, 0);
+
+    @include overlay--open {
+      transform: translate3d(0, 0, 0);
+      box-shadow: 0 1px 18px 0 rgba(0, 0, 0, .3);
+
+      @include overlay--above {
+        box-shadow: 0 1px 30px 5px rgba(0, 0, 0, .3);
+      }
+    }
+  }
+}
+
+.us-overlay--right {
+  right: 0;
+  transform: translate3d(100%, 0, 0);
+
+  @include overlay--open {
+    transform: translate3d(0, 0, 0);
+    box-shadow: -1px 0 18px 0 rgba(0, 0, 0, .3);
+
+    @include overlay--above {
+      box-shadow: -1px 0 30px 5px rgba(0, 0, 0, .3);
+    }
+  }
+}
+
+.us-overlay__container {
+  position: relative;
+}
+
+.us-overlay__body {
+  @extend %container !optional;
+  padding: 1em;
+  color: $c-typegrey;
+}
+
+.us-overlay__header {
+  position: relative;
+  width: 100%;
+  min-height: $overlay-header-height;
+  padding: 1em;
+  color: #fff;
+  background: $c-navy;
+}
+
+.us-overlay__title {
+  width: calc(100% - #{$overlay-close-size});
+}
+
+.us-overlay__close {
+  position: absolute;
+  top: .75em;
+  right: 1em;
+}

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

@@ -0,0 +1,138 @@
+// @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-white;
+$progress-current-color: $c-white;
+$progress-complete-color: $c-uswitch-navy;
+$progress-next-color: $c-grey;
+
+.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: 500;
+    color: $c-white;
+    text-align: center;
+    border-radius: 50%;
+    content: counter(number-counter);
+    transition: background-color .3s;
+    border-width: 3px;
+    border-style: solid;
+  }
+}
+
+.us-progress__link--next {
+  color: $c-uswitch-navy;
+
+  &:before {
+    border-color: $progress-next-color;
+    background-color: $progress-next-color;
+  }
+}
+
+
+.us-progress__link--current {
+  color: $c-uswitch-navy;
+
+  &:before {
+    color: $c-uswitch-navy;
+    background-color: $progress-current-color;
+    border-color: $c-uswitch-navy;
+  }
+}
+
+.us-progress__link--complete {
+  @include link-colors($progress-complete-color, #fff, $progress-complete-color, $progress-complete-color, #fff);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: $c-uswitch-navy;
+  }
+
+  &:before {
+    background-color: $progress-complete-color;
+    border-color: $c-uswitch-navy;
+  }
+
+  &:hover span,
+  &:focus span {
+    color: $c-uswitch-navy;
+  }
+}
+