reustyle 2.0.7

data/vendor/assets/stylesheets/ustyle/components/_promo-banner.scss

@@ -0,0 +1,131 @@
+// @page Pattern Library/Components
+// @name Promo banner
+//
+// @description
+//  Promotional banner
+//
+// @markup
+// <div class="us-promo-banner">
+//   <div class="us-promo-banner__inner">
+//     <h3 class="us-promo-banner__title">Title block here</h3>
+//     <ul class="us-promo-banner__list">
+//       <li class="us-promo-banner__list-item">
+//         <span class="us-promo-banner__circle">1</span>
+//         <span class="us-promo-banner__text">Text here</span>
+//       </li>
+//       <li class="us-promo-banner__list-item">
+//         <span class="us-promo-banner__circle">2</span>
+//         <span class="us-promo-banner__text">Text here</span>
+//       </li>
+//       <li class="us-promo-banner__list-item">
+//         <span class="us-promo-banner__circle">3</span>
+//         <span class="us-promo-banner__text">Text here</span>
+//       </li>
+//     </ul>
+//     <div class="us-promo-banner__button"><a class="us-btn us-btn--action us-btn--large" href="#">Promo CTA text</a></div>
+//   </div>
+// </div>
+
+.us-promo-banner {
+  width: 100%;
+  padding: 1.7em;
+  background-color: $c-uswitch-navy;
+
+  &__inner {
+    display: flex;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+
+    @include respond-to(desktop) {
+      max-width: 1200px;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
+  &__list {
+    display: flex;
+    width: 100%;
+    padding: 0;
+    margin: 1em 0 3em 0;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+
+    @include respond-to(desktop) {
+      width: 60%;
+      flex-direction: row;
+      flex-grow: 1;
+      margin-bottom: 1em;
+    }
+  }
+
+  &__list-item {
+    display: flex;
+    width: 100%;
+    margin: 15px 0 0 0;
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    @include respond-to(desktop) {
+      margin: 0;
+    }
+
+    &:first-child {
+      margin: 0;
+    }
+  }
+
+  &__title {
+    font-size: 1.2em;
+    font-weight: 700;
+    color: #fff;
+
+    @include respond-to(desktop) {
+      width: 100%;
+      font-size: 1.5em;
+    }
+  }
+
+  &__circle {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    min-width: 36px;
+    min-height: 36px;
+    margin-right: 10px;
+    line-height: 30px;
+    color: $c-uswitch-navy;
+    text-align: center;
+    background: $c-white;
+    border: solid 3px #fff;
+    border-radius: 50%;
+    align-self: flex-start;
+    font-weight: 800;
+  }
+
+  &__text {
+    padding: 5px 10px 0 10px;
+    color: $c-white;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+
+  &__button {
+
+    @include respond-to(desktop) {
+      width: auto;
+      flex-grow: 1;
+    }
+
+    a {
+      width: 100%;
+      padding: .75em 1.2em;
+    }
+  }
+}

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

@@ -0,0 +1,87 @@
+// @page Pattern Library/Components
+// @name Reminder
+//
+// @description
+//   Placed underneath some tables to enable reminders
+// 
+//
+// @markup
+//   <div class="us-container us-reminder">
+//     <div class="us-grid-row us-reminder-title">Got a balance transfer card?</div>
+//     <div class="us-grid-row us-reminder-content">
+//       <p>Create a reminder and we'll let you know when you're nearing the end of your 0% period</p>
+//       <a class="us-btn us-btn--primary" data-widget-creative="banner" data-widget-name="reminder-credit-cards" data-widget-position="table" data-event="" data-event-category="reminders" data-event-action="banner-click" data-event-label="credit-cards" href="/account/signin?origin=https://www.uswitch.com/account/reminders#credit-cards&amp;source=credit-cards.reminders" data-overlay-title="Sign up to create a reminder" data-source="credit-cards.reminders" data-origin="https://www.uswitch.com/account/reminders#credit-cards" onclick="uSwitch.openSignin(event)">
+//        Create a reminder
+//       </a>
+//     </div>
+//   </div>
+//   <div class="us-container us-reminder--grey">
+//     <div class="us-grid-row us-reminder-title">Got a balance transfer card?</div>
+//     <div class="us-grid-row us-reminder-content">
+//       <p>Create a reminder and we'll let you know when you're nearing the end of your 0% period</p>
+//       <a class="us-btn us-btn--primary" data-widget-creative="banner" data-widget-name="reminder-credit-cards" data-widget-position="table" data-event="" data-event-category="reminders" data-event-action="banner-click" data-event-label="credit-cards" href="/account/signin?origin=https://www.uswitch.com/account/reminders#credit-cards&amp;source=credit-cards.reminders" data-overlay-title="Sign up to create a reminder" data-source="credit-cards.reminders" data-origin="https://www.uswitch.com/account/reminders#credit-cards" onclick="uSwitch.openSignin(event)">
+//        Create a reminder
+//       </a>
+//     </div>
+//   </div>
+//   <div class="us-container us-reminder--navy">
+//     <div class="us-grid-row us-reminder-title">Got a balance transfer card?</div>
+//     <div class="us-grid-row us-reminder-content">
+//       <p>Create a reminder and we'll let you know when you're nearing the end of your 0% period</p>
+//       <a class="us-btn us-btn--action" data-widget-creative="banner" data-widget-name="reminder-credit-cards" data-widget-position="table" data-event="" data-event-category="reminders" data-event-action="banner-click" data-event-label="credit-cards" href="/account/signin?origin=https://www.uswitch.com/account/reminders#credit-cards&amp;source=credit-cards.reminders" data-overlay-title="Sign up to create a reminder" data-source="credit-cards.reminders" data-origin="https://www.uswitch.com/account/reminders#credit-cards" onclick="uSwitch.openSignin(event)">
+//        Create a reminder
+//       </a>
+//     </div>
+//   </div>
+
+.us-reminder,
+.us-reminder--grey,
+.us-reminder--navy {
+  background-color: $c-white;
+  border: 1px solid $c-grey;
+  max-width: 950px;
+
+  &.us-container {
+    margin-bottom: 2em;
+
+    @include respond-to(to-small-tablet) {
+      padding: 0;
+    }
+  }
+
+  &-title {
+    color: $c-uswitch-navy;
+    padding: 1.33em 1.33em 0 1.33em;
+    font-size: 1.5em;
+    font-weight: bold;
+  }
+
+  &-content {
+    padding: 2em;
+    color: $c-dark-grey;
+
+    p {
+      font-size: 1.125em;
+      margin-bottom: 1.5em;
+    }
+  }
+
+  &--grey {
+    background-color: $c-super-light-grey;
+
+    .us-reminder-content {
+      color: $c-uswitch-navy;
+    }
+  }
+
+  &--navy {
+    background-color: $c-uswitch-navy;
+    border-color: $c-uswitch-navy;
+    color: $c-white;
+
+    .us-reminder-title,
+    .us-reminder-content {
+      color: $c-white;
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/components/_tab-navigation.scss

@@ -0,0 +1,114 @@
+// @page Pattern Library/Components
+// @name Tab navigation
+//
+// @description
+//   Above table, tab-style navigation
+//
+// @markup
+// <div class="us-tabs us-tabs--page-nav">
+//   <div class="us-tabs__inner">
+//     <ul class="us-tabs__links">
+//       <li class="us-tabs__links-item us-tabs__links-item--active"><a href="#">Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//       <li class="us-tabs__links-item"><a>Link here</a></li>
+//     </ul>
+//   </div>
+// </div>
+
+.us-tabs {
+  &--page-nav {
+    display: none;
+    background-color: $c-super-light-grey;
+
+    @include respond-to(tablet) {
+      display: block;
+    }
+  }
+
+  &__inner {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  &__links {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  &__links-item {
+    position: relative;
+    display: flex;
+    max-width: 180px;
+    margin: 0;
+    text-align: center;
+    cursor: pointer;
+    border-right: 3px solid #fff;
+    transition: background-color .2s;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    font-size: .875em;
+    line-height: 1.25em;
+
+    @include respond-to(desktop) {
+      font-size: 1em;
+      line-height: 1.5em;
+    }
+
+    a {
+      display: block;
+      color: $c-darker-grey;
+      transition: color .2s;
+      padding: .825em 1em;
+      text-decoration: none;
+    }
+
+    &:last-child {
+      border: 0;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      border-top: 5px solid $c-uswitch-navy;
+      content: "";
+      opacity: 0;
+      transition: opacity .2s;
+    }
+  }
+
+  &__links-item:hover {
+    background-color: #f4f5f6;
+
+    a { color: $c-uswitch-navy; }
+
+    &::before { opacity: 1; }
+  }
+
+  &__links-item--active {
+    background-color: #fff;
+    border-right: 0;
+
+    a { color: $c-uswitch-navy; }
+
+    &::before { opacity: 1; }
+  }
+}

data/vendor/assets/stylesheets/ustyle/components/_table-toolbar.scss

@@ -0,0 +1,91 @@
+// @page Pattern Library/Components
+// @name Table toolbar
+//
+// @description
+//   The table toolbar sits above comparison tables and holds search refinement and filtering tools.
+//
+// @markup
+//   <div class="us-table-toolbar">
+//     <div class="us-table-toolbar__wrapper">
+//   <form class='us-calculator'>
+//     <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>
+//     <div class='us-input-group us-calculator__input'>
+//       <div class='us-input-group__box'>£</div>
+//       <input type='text' class='us-form-input' pattern='[0-9]*' name='amount' id='amount' value='3000' />
+//     </div>
+//     <button class='us-btn us-btn--primary'>Update results</button>
+//     <div class='us-tooltip us-tooltip--right'>
+//       <div class='us-tooltip__wrapper'>
+//         <div class='us-tooltip__icon'></div>
+//         <div class='us-tooltip__note'>
+//           <div class='us-tooltip__arrow'></div>
+//           Note that this is illustrative and this figure does not reflect the credit limit you will be offered.
+//         </div>
+//       </div>
+//     </div>
+//   </form>
+//     </div>
+//     <div class="us-table-toolbar__wrapper us-table-toolbar__wrapper--right">
+//       <div class="us-table-toolbar__sort">
+//         <h3 class="us-table-toolbar__heading">Sort by:</h3>
+//         <select class="us-form-select name="sort"">
+//           <option value="popularity">Popularity</option>
+//           <option value="apr">Lowest APR</option>
+//           <option value="min-credit-limit">Minimum credit limit</option>
+//           <option value="max-credit-limit">Maximum credit limit</option>
+//         </select>
+//       </div>
+//     </div>
+//   </div>
+
+.us-table-toolbar {
+  background: $c-bggrey;
+  padding: $gutter-width / 2;
+  border-bottom: 1px solid $c-keylinegrey;
+  margin: 0 auto $gutter-width / 2;
+
+  @include respond-to(tablet) {
+    display: flex;
+    background-color: transparent;
+    border-bottom: 0;
+    padding: $gutter-width $gutter-width / 2;
+    flex-direction: row;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex: 1 1;
+
+    &:first-child {
+      margin-bottom: $gutter-width / 2;
+
+      @include respond-to(tablet) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__sort {
+    width: 100%;
+
+    @include respond-to(tablet) {
+      width: auto;
+    }
+
+    select {
+      width: 100%;
+
+      @include respond-to(tablet) {
+        width: auto;
+      }
+    }
+  }
+
+  &__wrapper--right {
+    justify-content: flex-end;
+  }
+
+  &__heading {
+    font-size: 18px;
+  }
+}