ustyle 1.16.2 → 1.19.2

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

@@ -0,0 +1,33 @@
+// @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-cyan;
+  padding: 15px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 20px; 
+
+  &__inner {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  &__text:last-child {
+    padding: 0;
+    margin: 0;
+  }
+}

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

@@ -1,6 +1,6 @@
 // @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.
 //

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

@@ -10,7 +10,7 @@
   .us-grid-row {
     @include us-row;
   }
-  
+
   @include respond-to($default-grid-breakpoint, false, true) {
     @for $column from 1 through $grid-columns {
       .us-col-#{$column} {

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

@@ -1,6 +1,6 @@
 // @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.
@@ -9,7 +9,16 @@
 //   <div class='us-hero'>
 //     <div class='us-hero-container'>
 //       <h1 class='us-hero-title'>Hero title</h1>
-//       <p class='us-hero-description us-standfirst'>Swat at dog intrigued by the shower missing until dinner time.</p>
+//       <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>
 
@@ -24,12 +33,22 @@ $hero-padding-bottom: $hero-padding-top !default;
 
 .us-hero-container {
   @extend %container;
-  padding-top: $hero-padding-top;
-  padding-bottom: $hero-padding-bottom;
+  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-top: 0;
+  margin-bottom: 0;
+  font-size: 1.25em;
+
+  @include respond-to(tablet) {
+    font-size: 2.25em;
+  }
 }
 
 .us-hero-title,
@@ -39,4 +58,58 @@ $hero-padding-bottom: $hero-padding-top !default;
 
 .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%;
+    }
+  }
 }

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

@@ -17,6 +17,11 @@
   @extend %reset-box-model;
   list-style: none;
 
+  li {
+    font-size: 16px;
+    margin: 0; 
+  }
+
   a {
     @extend %anchor-link;
     display: block;
@@ -39,7 +44,6 @@
     margin-top: 1em;
 
     a {
-      font-size: em(18px);
       color: $c-navy;
     }
   }

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

@@ -0,0 +1,127 @@
+// @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-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 1.2em 0;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+
+    @include respond-to(desktop) {
+      width: 70%;
+      flex-direction: row;
+      flex-grow: 1;
+    }
+  }
+
+  &__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: #fff;
+    text-align: center;
+    background: #2aaa5b;
+    border: solid 3px #fff;
+    border-radius: 50%;
+    align-self: flex-start;
+  }
+
+  &__text {
+    padding: 5px 10px 0 10px;
+    color: #fff;
+    flex-grow: 1;
+    align-self: flex-start;
+  }
+
+  &__button {
+    margin: 0 auto;
+
+    @include respond-to(desktop) {
+      width: auto;
+      flex-grow: 1;
+    }
+
+    a { width: 100%; }
+  }
+}

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

@@ -0,0 +1,49 @@
+// @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">
+//       <div class="us-col-xsm-9">
+//         <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 class="us-col-xsm-3">
+//         <svg class="us-icon--large us-icon--notext us-icon--inputgrey us-float--right" role="presentation">
+//           <use xlink:href="/images/icons.svg#icon-calendar"></use>
+//         </svg>
+//       </div>
+//     </div>
+//   </div>
+
+.us-reminder {
+  background-color: $c-cyan-light;
+  border: 1px solid $c-typecyan;
+  max-width: 950px;
+
+  &.us-container {
+    @include respond-to(to-small-tablet) {
+      padding: 0;
+    }
+  }
+
+  &-title {
+    background-color: #fff;
+    padding: $gutter-width / 2;
+    font-weight: bold;
+  }
+
+  &-content {
+    padding: $gutter-width / 2 0;
+
+    p {
+      margin-bottom: $gutter-width / 2;
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+// @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-bggrey;
+
+    @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: 1px 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.25em;
+    }
+
+    a {
+      display: block;
+      color: $c-inputgrey;
+      transition: color .2s;
+      padding: 14px 1em 12px;
+    }
+
+    &:last-child {
+      border: 0;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      border-top: 5px solid $c-typecyan;
+      content: "";
+      opacity: 0;
+      transition: opacity .2s;
+    }
+  }
+
+  &__links-item:hover {
+    background-color: #f8f9f9;
+
+    a { color: $c-typecyan; }
+
+    &::before { opacity: 1; }
+  }
+
+  &__links-item--active {
+    background-color: #fff;
+
+    a { color: $c-typecyan; }
+
+    &::before { opacity: 1; }
+  }
+}