reustyle 2.0.7

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

@@ -0,0 +1,41 @@
+// @page Pattern Library/Components
+// @name Calculator
+//
+// @description
+//   The calculator tends to sit in the table toolbar component and is used to refine results from comparison tables, and give estimated info about products based on the input.
+//
+// @markup
+//   <form class='us-calculator'>
+//     <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>
+//     <div class='us-calculator__input us-input-group'>
+//       <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-calculator__btn 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>
+
+.us-calculator {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &__input {
+    display: inline-table;
+    margin-right: 10px;
+  }
+
+  &__btn {
+    display: block;
+    margin: .5em;
+    width: auto;
+  }
+}

data/vendor/assets/stylesheets/ustyle/components/_comp-table-row.scss

@@ -0,0 +1,341 @@
+// @page Pattern Library/Components
+// @name Comp table row
+//
+// @description
+//   The `.us-ct__row` appears in the comparison tables, and contains a single product.
+//
+// @state .us-ct-row--details-toggle - Used for a thicker bottom border when the toggle is showing.
+//
+// @markup
+//   <div class="us-ct-row {$modifiers}">
+//     <div class="us-ct-row__title">
+//       <p class="us-ct-row__title-text">aqua Reward With Cashback</p>
+//       <div class="us-usp us-usp--orange">£20 Amazon voucher</div>
+//       <div class="us-usp us-usp--green">Cashback</div>
+//     </div>
+//     <div class="us-ct-row__product">
+//       <div class="us-ct-row__col us-ct-row__col--image">
+//         <img src="https://uswitch-cms.imgix.net/uswitch-assets-eu/banking/credit-cards/cards/aqua-2017-large.png?w=170&h=107&fit=auto&bg=0fff&fm=png8" class="us-ct-row__image" />
+//         <div class="us-ct-row__title--mobile"><strong>aqua Reward With Cashback</strong></div>
+//         <div class="us-ct-row__usp--mobile">
+//           <div class="us-usp us-usp--orange">£20 Amazon voucher</div>
+//           <div class="us-usp us-usp--green">Cashback</div>
+//         </div>
+//       </div>
+//       <div class="us-ct-row__col us-ct-row__col--stretch">
+//         <div class="us-ct-row__name"><strong>34.9% APR</strong></div><div class="us-ct-row__value">Representative (variable)</div>
+//       </div>
+//       <div class="us-ct-row__col us-ct-row__col--stretch">
+//         <div class="us-ct-row__name"><strong>£250</strong></div><div class="us-ct-row__value">Minimum credit limit</div>
+//       </div>
+//       <div class="us-ct-row__col us-ct-row__col--stretch">
+//         <div class="us-ct-row__name"><strong>£1250</strong></div><div class="us-ct-row__value">Maximum credit limit</div>
+//       </div>
+//       <div class="us-ct-row__col us-ct-row__col--apply">
+//         <a class="us-btn us-btn--primary us-btn--blocked" href="#" role="button">Apply</a>
+//         <a href="#" class="us-ct-row__more-info">More info</a>
+//       </div>
+//     </div>
+//     <span class="us-ct-row__rep-ex">Representative example: When you spend £1,200 at a rate of 34.91% (variable) per annum, your representative APR is 34.9% APR (variable)</span>
+//     <div class="us-ct-row__key-details">
+//       <button class="us-ct-row__key-details-toggle us-ct-row__key-details-toggle-open">View key details <svg role="presentation" class="us-ct-row__key-details-chevron"><use xlink:href="/images/icons.svg#icon-chevron-right"></use></svg></button>
+//       <div class="us-ct-row__key-details-info">
+//         <div class="us-ct-row__key-details-col">
+//           <strong>Card details</strong>
+//           <ul class="us-ct-row__key-details-ul">
+//             <li>£20 Amazon gift certificate exclusively through uSwitch (terms apply)</li>
+//             <li>0.5% cashback and no foreign transaction fees</li>
+//             <li>Credit limit increase possible after four months</li>
+//           </ul>
+//         </div>
+//         <div class="us-ct-row__key-details-col">
+//           <strong>To get this card you must at least:</strong>
+//           <ul class="us-ct-row__criteria us-ct-row__key-details-ul">
+//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>be 18 or older</li>
+//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>have a permanent UK address</li>
+//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>have a UK current bank or building society account</li>
+//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>not be registered bankrupt in past 18 months or have proceedings</li>
+//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>have no CCJs (past 12 months)</li>
+//           </ul>
+//           <p class="us-ct-row__criteria-additional">Additional criteria for acceptance from the lender may apply.</p>
+//         </div>
+//       </div>
+//     </div>
+//   </div>
+
+.us-ct-row {
+  position: relative;
+  display: block;
+  margin-bottom: 15px;
+  color: $c-uswitch-navy;
+  background: #fff;
+  border: 1px solid $c-grey;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &__title {
+    display: none;
+    width: 100%;
+    padding: $gutter-width / 2;
+    border-bottom: 1px solid $c-grey;
+
+    @include respond-to(desktop) {
+      display: flex;
+    }
+
+    .us-usp {
+      margin-right: 8px;
+    }
+  }
+
+  &__title-text {
+    margin: 0 15px 0 0;
+    font-weight: bold;
+  }
+
+  &__product {
+    position: relative;
+    margin: 15px 0;
+
+    @include respond-to(desktop) {
+      display: flex;
+      border-bottom: 1px solid $c-grey;
+    }
+  }
+
+  &__image {
+    max-width: 150px;
+
+    @include respond-to(desktop) {
+      max-width: 100%;
+      min-width: 100%;
+    }
+  }
+
+  &__title--mobile {
+    margin-top: 10px;
+    font-size: 18px;
+
+    @include respond-to(tablet) {
+      font-size: 24px;
+    }
+  }
+
+  &__usp--mobile {
+    display: flex;
+    margin: 15px 0 10px 0;
+
+    .us-usp {
+      margin-right: 8px;
+    }
+  }
+
+  &__title--mobile,
+  &__usp--mobile {
+    @include respond-to(desktop) {
+      display: none;
+    }
+  }
+
+  &__col {
+    padding: 6px $gutter-width / 2;
+
+    @include respond-to(desktop) {
+      border-top: 0;
+    }
+
+    &--stretch {
+      display: flex;
+      align-self: stretch;
+      justify-content: space-between;
+      flex-direction: row-reverse;
+
+      @include respond-to(desktop) {
+        display: block;
+        flex: 1 1;
+        padding: 15px 0 15px 15px;
+      }
+    }
+
+    &--apply {
+      position: absolute;
+      top: 0;
+      right: 0;
+      border-top: 0;
+      width: calc(100% - 165px);
+      max-width: 200px;
+      text-align: center;
+
+      @include respond-to(tablet) {
+        max-width: 250px;
+      }
+
+      @include respond-to(desktop) {
+        border-right: 0;
+        position: relative;
+        flex: 0 0 160px;
+      }
+    }
+
+    &--image {
+      border-top: 0;
+
+      @include respond-to(desktop) {
+        flex: 0 0 150px;
+      }
+
+      img {
+        @include respond-to(desktop) {
+          width: 120px;
+          height: auto;
+        }
+      }
+    }
+  }
+
+  &__more-info {
+    display: inline-block;
+    margin-top: 10px;
+    color: $c-typecyan;
+    text-decoration: underline;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  &__rep-ex {
+    display: block;
+    font-size: 16px;
+    border-bottom: 1px solid $c-grey;
+    padding: 15px;
+    font-weight: bold;
+    width: 100%;
+  }
+
+  &__key-details-toggle {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    font-weight: 500;
+    text-decoration: underline;
+    text-align: center;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: 0;
+  }
+
+  &__key-details-chevron {
+    width: 20px;
+    height: 20px;
+    padding: 3px;
+    margin-left: 4px;
+    transform: translateY(5px) rotate(90deg);
+    stroke-width: 10px;
+    transform-origin: center;
+
+    .us-ct-row__key-details-toggle-open & {
+      transform: translateY(5px) rotate(-90deg);
+    }
+  }
+
+  &__key-details-info {
+    padding: 0 15px;
+    margin-top: 20px;
+    justify-content: space-evenly;
+
+    @include respond-to(desktop) {
+      display: flex;
+    }
+  }
+
+  &__key-details-col {
+    flex: 1 1;
+    font-size: 18px;
+    margin: 10px 0;
+
+    @include respond-to(desktop) {
+      margin-right: 20px;
+    }
+  }
+
+  &__key-details-ul {
+    font-size: 16px;
+    padding-left: 20px;
+  }
+
+  &__criteria {
+    padding: 0;
+    list-style-type: none;
+  }
+
+  &__criteria-li {
+    position: relative;
+    padding-left: 30px;
+  }
+
+  &__criteria-tick {
+    position: absolute;
+    top: 4px;
+    left: 0;
+  }
+
+  &__criteria-additional {
+    font-size: 14px;
+    color: $c-darker-grey;
+    margin-top: 10px;
+  }
+
+  &__name {
+    width: 33%;
+    font-size: 16px;
+
+    @include respond-to(desktop) {
+      width: 100%;
+      font-size: 24px;
+    }
+  }
+
+  &__value {
+    color: $c-dark-grey;
+    font-size: 14px;
+    line-height: 1.4em;
+  }
+
+  &__eligibility {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 0 0 10px 0;
+  }
+
+  &__eligibility-score {
+    font-weight: 700;
+  }
+
+  &__eligibility-link {
+    white-space: nowrap;
+    cursor: pointer;
+    color: #008fe9;
+    border-bottom: 1px solid #008fe9;
+  }
+
+  &__eligibility-progress {
+    height: 15px;
+    width: 100%;
+    background: #e9ebed;
+    margin: 0 0 5px 0;
+    position: relative;
+  }
+
+  &__eligibility-bar {
+    height: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}

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

@@ -0,0 +1,38 @@
+// @page Pattern Library/Components
+// @name Compliance banner
+//
+// @description
+//  Compliance banner and disclaimer below the comparison table
+//
+// @markup
+// <div class="us-comp-banner">
+//   <div class="us-comp-banner__inner">
+//     <p class="us-comp-banner__text">uSwitch Limited is a credit broker, not a lender, for consumer credit products.</p>
+//     <p class="us-comp-banner__text">uSwitch services are provided at no cost to you, but we may receive a commission from the companies we refer you to.</p>
+//   </div>
+// </div>
+
+.us-comp-banner {
+  width: 100%;
+  background-color: $c-white;
+  border: 1px solid $c-grey;
+  color: $c-uswitch-navy;
+  padding: $gutter-width * 2;
+  text-align: center;
+  font-size: 14px;
+  line-height: 20px; 
+
+  &__inner {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  &__text {
+    margin: 0;
+  }
+
+  &__text:last-child {
+    padding: 0;
+  }
+}

data/vendor/assets/stylesheets/ustyle/components/_content-group.scss

@@ -0,0 +1,33 @@
+// @page Pattern Library/Components
+// @name Content group
+//
+// @description
+//   The `.us-content-group` is a separator element for content groupings. Ideal to split up landing pages with reasonable padding.
+//
+// @state .mobile-bordered - Adds a smaller border and padding to mobile devices.
+//
+// @markup
+//  <div class='us-content-group {$modifiers}'>
+//    <p>
+//      Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.
+//    </p>
+//  </div>
+
+$content-group-border-color: $c-keylinegrey !default;
+
+.us-content-group,
+%us-content-group {
+  @include respond-to($default-grid-breakpoint, true) {
+    padding-top: 50px;
+    padding-bottom: 50px;
+    border-bottom: 1px solid $content-group-border-color;
+  }
+
+  &.mobile-bordered {
+    @include respond-to(to-#{$default-grid-breakpoint}) {
+      padding-top: 15px;
+      padding-bottom: 15px;
+      border-bottom: 1px solid $content-group-border-color;
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+// @page Pattern Library/Components
+// @name CTAs
+//
+// @description
+//  Used within guide and news articles, these CTAs (Calls to Action) are intended to not interupt the content but to integrate in more subtle means.
+//
+// @markup
+//  <section class="us-cta cta cta-column">
+//    <form>
+//      <h3 class="us-cta__title">It's your report</h3>
+//      <p>Join the campaign to fight for free annual credit reports for everyone</p>
+//      <a href="/money/itsmyreport/" class="us-btn us-btn--primary" rel="nofollow">Sign the petition</a>
+//    </form>
+//  </section>
+
+.us-cta {
+  padding: $gutter-width / 2;
+  margin-bottom: 1.5em;
+  background-color: $c-white;
+  border: 1px solid $c-grey;
+  border-left: 8px solid $c-light-purple;
+
+  @include respond-to(tablet, true) {
+    padding: $gutter-width;
+  }
+
+  label {
+    display: block;
+
+    @include respond-to(desktop, true) {
+      display: inline-block;
+    }
+  }
+
+  p {
+    font-size: 1.125em;
+  }
+}
+
+.us-cta__title.us-cta__title {
+  @include heading-font;
+  margin-top: 0;
+  font-size: 1.5em;
+
+  @include respond-to(tablet) {
+    @include heading(4, $extend: false);
+  }
+
+  @include respond-to(desktop, true) {
+    @include heading(3, $extend: false);
+  }
+}
+
+.us-cta--side {
+  padding: $gutter-width / 2;
+  border-bottom: 10px solid $c-navy;
+  border-left: 0;
+
+  @include respond-to(desktop, true) {
+    padding: $gutter-width / 1.5;
+  }
+
+  .us-form-input {
+    width: 100%;
+  }
+}

data/vendor/assets/stylesheets/ustyle/components/_grid-classes.scss

@@ -0,0 +1,52 @@
+@if $html-grid-classes {
+  * {
+    box-sizing: border-box;
+  }
+
+  .us-container {
+    @extend %container;
+  }
+
+  .us-grid-row {
+    @include us-row;
+  }
+
+  @include respond-to($default-grid-breakpoint, false, true) {
+    @for $column from 1 through $grid-columns {
+      .us-col-#{$column} {
+        @include us-col($column);
+        min-height: 1px;
+      }
+    }
+  }
+}
+
+// Placeholders
+
+@for $column from 1 through $grid-columns {
+  @include _grid-class("us-col-xsm", $column);
+}
+
+@include respond-to(small-tablet) {
+  @for $column from 1 through $grid-columns {
+    @include _grid-class("us-col-sm", $column);
+  }
+}
+
+@include respond-to(tablet, false, true) {
+  @for $column from 1 through $grid-columns {
+    @include _grid-class("us-col-md", $column);
+  }
+}
+
+@include respond-to(desktop, false, true) {
+  @for $column from 1 through $grid-columns {
+    @include _grid-class("us-col-lg", $column);
+  }
+}
+
+@include respond-to(large-desktop, false, false) {
+  @for $column from 1 through $grid-columns {
+    @include _grid-class("us-col-xlg", $column);
+  }
+}

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

@@ -0,0 +1,115 @@
+// @page Pattern Library/Components
+// @name Hero
+//
+// @description
+//   The `.us-hero` is used for the upper part of most pages, where the calls to action are usually kept.
+//   It is intended to draw attention with `$c-cyan` as it's background color, and should be used across all landing pages.
+//
+// @markup
+//   <div class='us-hero'>
+//     <div class='us-hero-container'>
+//       <h1 class='us-hero-title'>Hero title</h1>
+//       <p class='us-hero-description us-standfirst us-mobile--hidden'>Swat at dog intrigued by the shower missing until dinner time.</p>
+//     </div>
+//   </div>
+//   <div class='us-hero us-hero--double'>
+//     <div class='us-hero-container'>
+//       <div class="us-hero__block">
+//         <h1 class='us-hero-title'>Hero title</h1>
+//         <p class='us-hero-description us-standfirst us-mobile--hidden'>Swat at dog intrigued by the shower missing until dinner time.</p>
+//       </div>
+//       <div class="us-hero__block"></div>
+//     </div>
+//   </div>
+
+$hero-background-color: $c-cyan !default;
+$hero-text-color: $c-navy !default;
+$hero-padding-top: 2.5em !default;
+$hero-padding-bottom: $hero-padding-top !default;
+
+.us-hero {
+  background-color: $hero-background-color;
+}
+
+.us-hero-container {
+  @extend %container;
+  padding-top: $hero-padding-top / 2;
+  padding-bottom: $hero-padding-bottom / 2;
+
+  @include respond-to(tablet) {
+    padding-top: $hero-padding-top;
+    padding-bottom: $hero-padding-bottom;
+  }
+}
+
+.us-hero-title {
+  margin-bottom: 0;
+  font-size: 1.25em;
+
+  @include respond-to(tablet) {
+    font-size: 2.25em;
+  }
+}
+
+.us-hero-title,
+.us-hero-description {
+  color: $hero-text-color;
+}
+
+.us-hero-description {
+  @extend %reset-box-model;
+  margin-bottom: 0;
+  padding-top: 5px;
+}
+
+.us-hero--double .us-hero-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  @include respond-to(tablet) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  @include respond-to(desktop) {
+    align-items: flex-start;
+  }
+}
+
+.us-hero__block {
+  @include respond-to(mobile) {
+    &:nth-child(2) {
+      display: none;
+    }
+  }
+
+  @include respond-to(tablet) {
+    &:nth-child(1) {
+      width: 60%;
+      max-width: 60%;
+      flex-grow: 1;
+      margin: 0 100px 0 0;
+    }
+
+    &:nth-child(2) {
+      width: 40%;
+      margin: 0 100px 0 0;
+      display: block;
+    }
+  }
+
+  @include respond-to(desktop) {
+    &:nth-child(1) {
+      width: auto;
+      max-width: 100%;
+      flex-grow: 1;
+      margin: 0 100px 0 0;
+    }
+
+    &:nth-child(2) {
+      width: 50%;
+      max-width: 50%;
+    }
+  }
+}