ustyle 1.3.6

data/vendor/assets/stylesheets/ustyle/_all.scss

@@ -0,0 +1,50 @@
+// Global import
+@import "ustyle/global";
+
+// Basics
+@import "ustyle/basics/typography";
+
+// uSwitch grid
+@import "ustyle/basics/grid";
+
+// Forms
+@import "ustyle/forms/base";
+
+// Tables
+@import "ustyle/tables/base";
+
+// Icons
+@import "ustyle/icons/base";
+
+// Components
+@import "ustyle/components/links";
+@import "ustyle/components/lists";
+@import "ustyle/components/lists-li";
+@import "ustyle/components/button";
+@import "ustyle/components/featured";
+@import "ustyle/components/hero";
+@import "ustyle/components/content-group";
+@import "ustyle/components/tabs";
+@import "ustyle/components/anchor";
+@import "ustyle/components/loader";
+@import "ustyle/components/breadcrumbs";
+@import "ustyle/components/cta";
+@import "ustyle/components/overlay";
+@import "ustyle/components/tooltip";
+@import "ustyle/components/usp";
+@import "ustyle/components/progress";
+@import "ustyle/components/backdrop";
+
+// Articles
+@import "ustyle/articles/base";
+@import "ustyle/articles/news";
+@import "ustyle/articles/guide";
+@import "ustyle/articles/more";
+@import "ustyle/articles/related";
+
+// Utilities
+@import "ustyle/utilities/general";
+@import "ustyle/utilities/spacing";
+@import "ustyle/utilities/images";
+@import "ustyle/utilities/grid";
+@import "ustyle/utilities/responsive";

data/vendor/assets/stylesheets/ustyle/_content.scss

@@ -0,0 +1,5 @@
+// All of uStyle
+@import "ustyle/all";
+
+// Content
+@import "ustyle/content/base";

data/vendor/assets/stylesheets/ustyle/_global.scss

@@ -0,0 +1,24 @@
+// scss-lint:disable Comment
+/*! uStyle version #{ustyle-version()}. Copyright uSwitch limited, all rights reserved. */
+
+//
+// This is the shared global file that includes uStyle's core helpers
+//
+
+// Reset
+@import "ustyle/vendor/normalize";
+
+// Basics
+@import "ustyle/basics/functions";
+@import "ustyle/basics/variables";
+
+// All mixins
+@import "ustyle/mixins/base";
+
+// Font face
+@import "ustyle/basics/font-face";
+@import "ustyle/basics/font-face-ie";
+
+// Basic extends
+@import "ustyle/basics/fonts";
+@import "ustyle/basics/extends";

data/vendor/assets/stylesheets/ustyle/_icons.scss

@@ -0,0 +1,20 @@
+$load-icons: true;
+
+// Basics
+@import "ustyle/basics/functions";
+@import "ustyle/basics/variables";
+
+// All mixins
+@import "ustyle/mixins/base";
+
+// Font face
+@import "ustyle/basics/font-face";
+@import "ustyle/basics/font-face-ie";
+
+// Basic extends
+@import "ustyle/basics/fonts";
+@import "ustyle/basics/extends";
+
+@import "ustyle/icons/base";
+@import "ustyle/icons/svg";
+@import "ustyle/icons/png";

data/vendor/assets/stylesheets/ustyle/articles/_base.scss

@@ -0,0 +1,88 @@
+// @page Pattern Library/Articles
+// @name Base article
+//
+// @description
+//   Article listings for news are important on the landing pages.
+//
+// @markup
+//   <article class='us-article'>
+//     <a class='us-article__link' href="#">
+//       <div class='us-grid-row'>
+//         <div class='us-col-md-8'>
+//           <h3 class='us-article__title'>Car insurance guides</h3>
+//           <p class='us-article__description'>
+//             A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks
+//           </p>
+//           <div class="us-article__meta">
+//             <span class="date">2 months ago</span>
+//             in
+//             <span class="category">Banking</span>
+//           </div>
+//         </div>
+//         <div class='us-col-md-4 us-tablet--block'>
+//           <img class='us-img--full us-article__image' src='http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg' />
+//         </div>
+//       </a>
+//     </div>
+//   </article>
+
+$article-border-color: $c-keylinegrey !default;
+$article-padding: 2em !default;
+$article-description-color: $c-typegrey-2 !default;
+
+.us-article {
+  padding-top: $article-padding/2;
+  padding-bottom: $article-padding/2;
+  border-bottom: 1px solid $article-border-color;
+
+  @include respond-to(tablet, true) {
+    padding-top: $article-padding;
+    padding-bottom: $article-padding;
+  }
+}
+
+.us-article__link {
+  display: block;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+  &:hover {
+    .us-article__title {
+      text-decoration: underline;
+    }
+  }
+}
+
+.us-article__link,
+.us-article__link:hover,
+.us-article__link:visited, {
+  color: inherit;
+}
+
+.us-article__title {
+  @include heading(4);
+
+  @include respond-to(tablet, true) {
+    @include heading(3, $extend: false);
+  }
+}
+
+.us-article__meta,
+.us-article__description {
+  color: $article-description-color;
+}
+
+.us-article__meta {
+  font-size: .875em;
+}
+
+.us-article__description {
+  margin-bottom: 1em;
+
+  @include respond-to(tablet, true) {
+    font-size: 1.125em;
+  }
+}
+
+.us-article__image {
+  border: 1px solid $article-border-color;
+}

data/vendor/assets/stylesheets/ustyle/articles/_guide.scss

@@ -0,0 +1,57 @@
+// @page Pattern Library/Articles
+// @name Guide article
+//
+// @description
+//   Our guide and news articles are used across the site to communicate news/guide snippets. The layout is decided by our grid, by default they have 100% width.
+//
+// @markup
+//   <div class='us-article-group'>
+//     <div class='us-guide-item us-col-md-4'>
+//       <a class='us-guide-item-link' href='#'>
+//         <div class='us-guide-item-image-container'>
+//           <div class='us-guide-item-image background' style='background-image: url(http://www.uswitch.com/insurance/assets/guide-home-16141c84afd29e2063ee76803037716c.jpg)'></div>
+//         </div>
+//         <div class='us-guide-item-content'>
+//           <h4 class='us-guide-item-title'>Car insurance guides</h4>
+//           <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>
+//         </div>
+//         <div class='us-guide-item-readmore'>
+//           <span class='us-news-item-readmorelink'>Read more</span>
+//         </div>
+//       </a>
+//     </div>
+//   </div>
+
+$guide-item-image-size: 128px !default;
+
+.us-guide-item {
+  @extend %base-item;
+}
+
+.us-guide-item-link {
+  @extend %base-item-link;
+}
+
+.us-guide-item-title {
+  @extend %base-item-title;
+}
+
+.us-guide-item-description {
+  @extend %base-item-description;
+}
+
+.us-guide-item-image-container {
+  @extend %base-item-image-container;
+}
+
+.us-guide-item-image {
+  @extend %base-item-image;
+}
+
+.us-guide-item-readmore {
+  @extend %readmore;
+}
+
+.us-guide-item-readmorelink {
+  @extend %readmore-link;
+}

data/vendor/assets/stylesheets/ustyle/articles/_more.scss

@@ -0,0 +1,31 @@
+// @page Pattern Library/Articles
+// @name More article
+//
+// @description
+//   If the article listing has more in a category, we use this to let a user navigate to that category
+//
+// @markup
+//   <div class='us-more-item us-col-md-4'>
+//     <a class='us-more-item-link' href='#'>
+//       <span class='us-more-item-title'>See more banking news</span>
+//     </a>
+//   </div>
+
+.us-more-item {
+  @extend %base-item;
+}
+
+.us-more-item-link {
+  @extend %base-item-link;
+}
+
+.us-more-item-title {
+  @extend %heading-1;
+  display: block;
+  padding: $item-padding;
+  color: $c-typecyan;
+
+  &.small {
+    @extend %heading-3;
+  }
+}

data/vendor/assets/stylesheets/ustyle/articles/_news.scss

@@ -0,0 +1,214 @@
+// @page Pattern Library/Articles
+// @name News article
+//
+// @description
+//   The news item article standard. It mirrors the guide article. The news item image is a background image as the problem of not displaying `<img>` tags on mobile hasn't been resolved.
+//
+//  @markup
+//   <div class='us-article-group'>
+//     <div class='us-news-item us-col-md-4'>
+//       <a class='us-news-item-link' href='#'>
+//         <div class='us-news-item-image-container'>
+//           <div class='us-news-item-image background' style='background-image: url(http://uswitch-wp-blog-assets.s3-website-eu-west-1.amazonaws.com/wp-content/uploads/2013/09/Untitled-1.jpg)'></div>
+//         </div>
+//         <div class='us-news-meta'>
+//           <span class='category'>Consumer rights</span>
+//           <span class='date'>14 Nov 2014</span>
+//         </div>
+//         <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>
+//         <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>
+//         <div class='us-news-item-readmore'>
+//           <span class='us-news-item-readmorelink'>More consumer rights</span>
+//         </div>
+//       </a>
+//     </div>
+//   </div>
+
+$item-padding: 9px;
+$news-item-image-size: 128px !default;
+$base-item-image-size: $news-item-image-size;
+
+%base-item {
+  margin-bottom: 1em;
+
+  &:hover {
+    %base-item-image {
+      opacity: .8;
+    }
+
+    %readmore:after {
+      left: .5em;
+    }
+  }
+
+  .us-article-group & {
+    @include respond-to(mobile) {
+      padding: 0;
+      margin-bottom: 0;
+    }
+  }
+}
+
+%base-item-link {
+  @extend %bordered-box;
+  @extend %backface-visibility--hidden;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  text-decoration: none;
+  background-color: #fff;
+  transition: border-color 333ms, background-color 333ms;
+
+  @include respond-to(small-tablet,true) {
+    padding-bottom: em(35px);
+  }
+
+  .us-article-group & {
+    @include respond-to(mobile) {
+      border-top-width: 0;
+      border-radius: 0;
+    }
+  }
+}
+
+%base-item-title {
+  @extend %heading-4;
+  padding: $item-padding;
+  margin: 0;
+  color: $c-navy;
+}
+
+%base-item-description {
+  @include baseline(14px);
+  padding: 0 $item-padding;
+  color: $c-navy;
+}
+
+%base-item-image-container {
+  display: none;
+
+  @include respond-to(small-tablet, true) {
+    display: block;
+  }
+}
+
+%base-item-image {
+  @extend %backface-visibility--hidden;
+  width: 100%;
+  height: auto;
+  border-radius: em(5px) em(5px) 0 0;
+  transition: opacity 333ms;
+
+  &.background {
+    height: $base-item-image-size;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+%readmore-link {
+  @include normal-font;
+  @include link-colors($c-typecyan, $c-typecyan, $c-typecyan, $c-typecyan);
+  border-bottom: 1px solid $c-typecyan;
+}
+
+%readmore {
+  position: absolute;
+  bottom: 0;
+  display: none;
+  padding: $item-padding;
+  color: $c-typecyan;
+  white-space: nowrap;
+
+  @include respond-to(small-tablet,true) {
+    display: block;
+  }
+
+  &:after {
+    @extend %link-triangle;
+  }
+}
+
+.us-article-group {
+  @include respond-to(mobile) {
+    margin-bottom: 1em;
+    overflow: hidden;
+
+    %base-item:first-child {
+      %base-item-link {
+        border-top-width: 1px;
+        border-bottom-width: 1px;
+        border-radius: em(5px) em(5px) 0 0;
+      }
+    }
+
+    %base-item:last-child {
+      %base-item-link {
+        border-bottom-width: 1px;
+        border-radius: 0 0 em(5px) em(5px);
+      }
+    }
+  }
+}
+
+.us-news-item {
+  @extend %base-item;
+}
+
+.us-news-item-link {
+  @extend %base-item-link;
+}
+
+.us-news-item-title {
+  @extend %base-item-title;
+}
+
+.us-news-item-snippet {
+  @extend %base-item-description;
+}
+
+.us-news-item-image-container {
+  @extend %base-item-image-container;
+}
+
+.us-news-item-image {
+  @extend %base-item-image;
+}
+
+.us-news-item-readmore {
+  @extend %readmore;
+}
+
+.us-news-item-readmorelink {
+  @extend %readmore-link;
+}
+
+.us-news-meta {
+  padding-right: $item-padding;
+  padding-left: $item-padding;
+  overflow: hidden;
+
+  .category,
+  .date {
+    padding-top: em(4px);
+    padding-bottom: em(4px);
+    font-size: em(13px);
+    font-weight: bold;
+    color: $c-navy;
+
+    @include respond-to(large-desktop) {
+      font-size: em(14px);
+    }
+  }
+
+  .date {
+    display: block;
+    float: right;
+  }
+
+  .category {
+    display: block;
+    float: left;
+  }
+}

data/vendor/assets/stylesheets/ustyle/articles/_related.scss

@@ -0,0 +1,74 @@
+// @page Pattern Library/Articles
+// @name Related items
+// 
+// @description
+//   Related lists used for content sidebars
+//
+// @markup
+//   <ul class="us-related us-list--reset">
+//     <li class="us-related__item">
+//       <a class="us-related__item-link" href="#">Car accident claims — How to make a car insurance claim</a>
+//     </li>
+//     <li class="us-related__item">
+//       <a class="us-related__item-link" href="#">How to get the best car insurance deals</a>
+//     </li>
+//     <li class="us-related__item">
+//       <a class="us-related__item-link" href="#">No claims bonus explained: how to protect a no claims discount</a>
+//     </li>
+//     <li class="us-related__item">
+//       <a class="us-related__item-link us-related__item-link--more" href="#">See more guides</a>
+//     </li>
+//   </ul>
+
+.us-related {
+  margin-bottom: $gutter-width;
+}
+
+.us-related__item {
+  margin-bottom: 0;
+}
+
+.us-related__item-link {
+  @extend %clearfix;
+  @include link-colors($c-typegrey-2, $c-typecyan, $c-typegrey-2, $c-typegrey-2);
+  display: block;
+  padding-top: .5em;
+  padding-bottom: .5em;
+  border-bottom: 1px solid $c-bordergrey;
+  transition: color .3s, border-color .3s;
+}
+
+.us-related__item-link--more {
+  @include link-colors($c-typegrey, $c-typecyan, $c-typegrey, $c-typegrey);
+  padding-right: .5em;
+  text-align: right;
+  background-color: $c-cyan-light;
+
+  &:after {
+    @extend %link-triangle;
+  }
+}
+
+.us-related__item-title {
+  @extend %small-font;
+  @include normal-font;
+  vertical-align: middle;
+
+  @include respond-to(desktop) {
+    display: inline-block;
+    width: calc(100% - 90px);
+    margin-left: $gutter-width / 4;
+  }
+}
+
+.us-related__item-image {
+  @include respond-to(desktop) {
+    display: inline-block;
+    width: 70px;
+    height: 70px;
+    vertical-align: middle;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+}

data/vendor/assets/stylesheets/ustyle/basics/_extends.scss

@@ -0,0 +1,69 @@
+// -------------------------
+// These are default, handy extends that can be used anywhere to minimise
+// repetition and keep everything compartmentalised in CSS
+// -------------------------
+
+%float-left {
+  float: left;
+}
+
+%float-right {
+  float: right;
+}
+
+%reset-box-model {
+  padding: 0;
+  margin: 0;
+}
+
+// Clearfix - micro clearfix
+
+%clearfix {
+  @include clearfix;
+}
+
+// A bordered box used for all news/guide/seemore/block items
+
+%bordered-box {
+  border: 1px solid $c-bordergrey;
+  border-radius: em(5px);
+
+  &:hover {
+    border-color: $c-typecyan;
+  }
+}
+
+// Triangle used across all buttons/link lists
+
+%link-triangle {
+  position: relative;
+  left: 0;
+  display: inline;
+  margin: 0 0 0 .5em;
+  font-size: .5em;
+  line-height: 0;
+  vertical-align: middle;
+  content: "\25b6";
+  transition: left 200ms;
+}
+
+// Vertical alignment helpers
+
+%vertical-align-parent {
+  transform-style: preserve-3d;
+}
+
+%vertical-align-child {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+// Backface visibility
+%backface-visibility--hidden {
+  backface-visibility: hidden;
+}
+
+// Normalise Firefox mobile inputs - https://bugzilla.mozilla.org/show_bug.cgi?id=763671
+%input-background--normalise {
+  background-image: none;
+}

data/vendor/assets/stylesheets/ustyle/basics/_font-face-ie.scss

@@ -0,0 +1,31 @@
+@if $needs-font-ie {
+  @font-face {
+    font-family: "FS Elliot Web Bold";
+    font-style: normal;
+    font-weight: 700;
+    // [doc]
+    // Setting the font to OpenSans to override older legacy parts
+    src: url("#{$base-font-url}OpenSans-Bold-webfont.eot");
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    src: url("#{$base-font-url}OpenSans-Regular-webfont.eot");
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    font-style: italic;
+    font-weight: 400;
+    src: url("#{$base-font-url}OpenSans-Italic-webfont.eot");
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    src: url("#{$base-font-url}OpenSans-Bold-webfont.eot");
+  }
+}

data/vendor/assets/stylesheets/ustyle/basics/_font-face.scss

@@ -0,0 +1,31 @@
+@if $needs-font {
+  @font-face {
+    font-family: "FS Elliot Web Bold";
+    font-style: normal;
+    font-weight: 700;
+    // [doc]
+    // Setting the font to OpenSans to override older legacy parts
+    src: local("Open Sans Bold"), local("OpenSans-Bold"), url("#{$base-font-url}OpenSans-Bold-webfont.woff") format("woff"), url("#{$base-font-url}OpenSans-Bold-webfont.ttf") format("truetype");
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    src: local("Open Sans"), local("OpenSans"), url("#{$base-font-url}OpenSans-Regular-webfont.woff") format("woff"), url("#{$base-font-url}OpenSans-Regular-webfont.ttf") format("truetype");
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    font-style: italic;
+    font-weight: 400;
+    src: local("Open Sans Italic"), local("OpenSans-Italic"), url("#{$base-font-url}OpenSans-Italic-webfont.woff") format("woff"), url("#{$base-font-url}OpenSans-Italic-webfont.ttf") format("truetype");
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    src: local("Open Sans Bold"), local("OpenSans-Bold"), url("#{$base-font-url}OpenSans-Bold-webfont.woff") format("woff"), url("#{$base-font-url}OpenSans-Bold-webfont.ttf") format("truetype");
+  }
+}