reustyle 2.0.7

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

@@ -0,0 +1,300 @@
+// @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
+//             <svg role="presentation" aria-hidden="true" class="us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-chevron-right"/></svg>
+//           </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
+//             <svg role="presentation" aria-hidden="true" class="us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-chevron-right"/></svg>
+//           </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
+//             <svg role="presentation" aria-hidden="true" class="us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey"><use xlink:href="/images/icons.svg#icon-chevron-right"/></svg>
+//           </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;
+$tab-border-color: #fff;
+$tab-active-color: $tab-border-color;
+
+@keyframes tab-show {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// Tab nav
+.us-tabs-nav {
+  display: none;
+  background-color: $c-super-light-grey;
+
+  @include respond-to(tablet) {
+    .js & {
+      display: block;
+    }
+  }
+
+  @if $media-query-legacy-support {
+    .js.ie8 & {
+      display: block;
+    }
+  }
+}
+
+.us-tabs-nav-wrapper {
+  @extend %container;
+}
+
+.us-tabs-nav-menu {
+  display: table;
+  display: -webkit-flex;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  flex-flow: row;
+}
+
+.us-tabs-nav-link {
+  display: table-cell;
+  width: $tab-width;
+  padding: 14px 1em 12px;
+  text-align: center;
+  vertical-align: middle;
+  border-right: 3px solid $tab-border-color;
+  border-radius: 0;
+  transition: none;
+  text-decoration: 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);
+  }
+
+  &:last-child {
+    border-right: 0;
+  }
+
+  &:hover,
+  &.active {
+    color: $c-uswitch-navy;
+    border-right: 0;
+
+    &:before {
+      background-color: $c-uswitch-navy;
+    }
+  }
+
+  &.active {
+    cursor: default;
+    background-color: $tab-active-color;
+
+    &:hover {
+      background-color: $tab-active-color;
+    }
+  }
+}
+
+.us-tabs-nav-mainlink {
+  @include link-colors($c-darker-grey, $c-uswitch-navy, $c-uswitch-navy, $c-darker-grey);
+  position: relative;
+  background-color: $c-super-light-grey;
+  transition: color 300ms, background-color 300ms;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 5px;
+    background-color: $c-super-light-grey;
+    content: "";
+    transition: background-color 300ms;
+  }
+
+  &:hover {
+    background-color: #f4f5f6;
+  }
+
+  &:hover .us-tabs-nav-chevron,
+  &:hover .us-tabs-nav-chevron-wrapper .us-icon,
+  .us-tab.active & .us-tabs-nav-chevron,
+  .us-tab.active & .us-tabs-nav-chevron-wrapper .us-icon {
+    transform: rotate(-90deg);
+    fill: $c-uswitch-navy;
+  }
+
+  &:hover:before {
+    background-color: $c-uswitch-navy;
+  }
+}
+
+.us-tab.active {
+  .us-tabs-nav-mainlink:before {
+    background-color: $c-uswitch-navy;
+  }
+}
+
+// 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;
+}
+// scss-lint:enable Comment, MergeableSelector
+
+// Tabs
+.us-tabs-container {
+  @extend %container;
+
+  @include respond-to(to-tablet) {
+    padding: 0;
+  }
+}
+
+.us-tab-title {
+  @include heading(4);
+  position: relative;
+  margin: 0;
+  font-weight: normal;
+  border-bottom: 1px solid #fff;
+
+  @include respond-to(tablet) {
+    .js & {
+      display: none;
+    }
+  }
+
+  @if $media-query-legacy-support {
+    .js.ie8 & {
+      display: none;
+    }
+  }
+
+  .us-tabs-nav-mainlink {
+    display: block;
+    padding: .75em ($gutter-width / 2) .5em;
+
+    .us-tab.active & {
+      color: $c-uswitch-navy;
+      background-color: $tab-active-color;
+    }
+  }
+
+  .us-tabs-nav-chevron,
+  .us-tabs-nav-chevron-wrapper .us-icon {
+    position: absolute;
+    right: ($gutter-width / 2);
+    transform: rotate(90deg);
+    transition: transform .2s ease;
+  }
+}
+
+.us-tab-content {
+  display: block;
+  overflow: hidden;
+  opacity: 1;
+
+  @include respond-to(to-tablet) {
+    padding-right: ($gutter-width / 2);
+    padding-left: ($gutter-width / 2);
+  }
+
+  .js & {
+    max-height: 0;
+
+    @include respond-to(tablet) {
+      display: none;
+      max-height: none;
+    }
+  }
+
+  @if $media-query-legacy-support {
+    .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,243 @@
+// @page Pattern Library/JavaScript
+// @name Tooltip
+//
+// @description
+//  `.us-tooltip` can be applied to any parent, and by hovering over 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-grey !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-uswitch-navy !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-uswitch-navy;
+  }
+}
+
+.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-uswitch-navy;
+  background: $tooltip-note-bg-color;
+  border: 1px solid $tooltip-note-border-color;
+
+  @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,88 @@
+// @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}'>Unique Selling Point</div>
+//   <div class='us-usp us-usp--annotated'>
+//     <div class='us-usp {$modifiers}'>Annotated USP</div>
+//     More information about USP goes here
+//   </div>
+
+$variants: (
+  ('blue', $c-dark-blue),
+  ('orange', $c-dark-orange),
+  ('purple', $c-dark-purple),
+  ('yellow', $c-dark-yellow),
+  ('typecyan', $c-light-blue),
+  ('green', $c-dark-green),
+  ('navy', $c-dark-blue),
+  ('cyan', $c-light-blue),
+  ('typegrey', $c-darker-grey),
+  ('grey', $c-darker-grey),
+  ('red', $c-light-red),
+  ('pink', $c-dark-pink),
+  ('light-purple', $c-light-purple)
+) !default;
+
+
+
+@mixin usp-style($colour) {
+  background-color: rgba(nth($colour, 2), .3);
+
+  &:before {
+    position: relative;
+    left: -.55em;
+    border-left: 4px solid nth($colour, 2);
+    content: "";
+    padding: .2em 0;
+  }
+}
+
+.us-usp {
+  @include usp-style(('blue', $c-dark-blue));
+
+  display: inline-block;
+  padding: .25em .75em;
+  font-weight: 600;
+  font-size: .875em;
+  line-height: $base-line-ratio;
+  color: $c-uswitch-navy;
+  text-align: left;
+}
+
+@each $colour in $variants {
+  .us-usp--#{nth($colour, 1)} {
+    @include usp-style($colour);
+  }
+}
+
+.us-usp--annotated {
+  font-weight: normal;
+  color: $c-typegrey;
+  text-align: left;
+  background-color: $c-bggrey;
+
+  &:before {
+    border: 0;
+  }
+
+  .us-usp {
+    margin-right: 10px;
+    margin-left: -10px;
+  }
+}