reustyle 2.0.7

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

@@ -0,0 +1,213 @@
+// @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(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.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;
+  padding: 8px;
+
+  @include respond-to(small-tablet,true) {
+    padding-bottom: em(35px);
+  }
+
+  .us-article-group & {
+    @include respond-to(mobile) {
+      border-top-width: 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;
+  transition: opacity 333ms;
+
+  &.background {
+    height: $base-item-image-size;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+%readmore-link {
+  @extend %anchor-link;
+  @include normal-font;
+  @include link-colors($c-uswitch-navy, $c-darker-grey, $c-uswitch-navy, $c-uswitch-navy, $c-uswitch-navy);
+}
+
+%readmore {
+  position: absolute;
+  bottom: 0;
+  display: none;
+  padding: $item-padding;
+  color: $c-uswitch-navy;
+  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;
+      }
+    }
+
+    %base-item:last-child {
+      %base-item-link {
+        border-bottom-width: 1px;
+      }
+    }
+  }
+}
+
+.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,76 @@
+// @page Pattern Library/Articles
+// @name Related items
+//
+// @description
+//   Related lists used for content sidebars.
+//
+// @markup
+//  <h2 class="us-related__title">Title here</h2>
+//   <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>
+//   </ul>
+
+.us-related {
+  margin-bottom: $gutter-width;
+}
+
+.us-related__item {
+  margin-bottom: 0;
+}
+
+.us-related__title {
+  font-size: 1.125em;
+}
+
+.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,73 @@
+// -------------------------
+// These are default, handy extends that can be used anywhere to minimise
+// repetition and keep everything compartmentalised in CSS
+// -------------------------
+
+%small-font {
+  font-size: em(14px);
+  line-height: 1.15em;
+}
+
+%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-grey;
+
+  &:hover {
+    border-color: $c-uswitch-navy;
+  }
+}
+
+// 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\fe0e";
+  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/_fonts.scss

@@ -0,0 +1,27 @@
+// Extends here are used to minimise repetition and reuse already
+// declared font families across the site. It is not recommended that you
+// redeclare font families on other components. Instead extend these.
+
+%heading-font {
+  font: {
+    family: $heading-font;
+    weight: 700;
+  };
+}
+
+%heading-font-primary {
+  @extend %heading-font;
+}
+
+%heading-font-secondary {
+  @extend %heading-font;
+}
+
+%normal-font {
+  font-family: $normal-font;
+}
+
+%italic-font {
+  @extend %normal-font;
+  font-style: italic;
+}

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

@@ -0,0 +1,78 @@
+/// Returns a `rem` value from pixels
+///
+/// @param {Number (unit)} $pixels
+///   The pixel number you want converted to `rem`
+///
+/// @param {Number (unit)} $font-size [$base-font-size]
+///   The font-size relative to `rems`
+///
+/// @return {Unit}
+
+@function rem($pixels, $font-size: $base-font-size) {
+  @return $pixels / $font-size * 1rem;
+}
+
+/// Returns a `em` value from pixels
+///
+/// @param {Number (unit)} $pixels
+///   The pixel number you want converted to `em`
+///
+/// @param {Number (unit)} $font-size [$base-font-size]
+///   The font-size relative to `ems`
+///
+/// @return {Unit}
+
+@function em($pixels, $font-size: $base-font-size) {
+  @return $pixels / $font-size * 1em;
+}
+
+/// Returns a column % from `$grid-columns`
+///
+/// @param {Number (unitless)} $columns
+///   The column number to convert to a % of the grid
+///
+/// @return {Unit (percentage)}
+
+@function col-width($columns) {
+  @return percentage($columns / $grid-columns);
+}
+
+/// Returns a colour based on a black + `$color` percentage mix
+///
+/// @param {String} $color
+///   The colour you want to darken
+///
+/// @param {Number (unit)} $percentage
+///   The percentage amount to mix of black with the colour
+
+@function shade($color, $percentage) {
+  @return mix(#000, $color, $percentage);
+}
+
+/// Returns a colour based on a white + `$color` percentage mix
+///
+/// @param {String} $color
+///   The colour you want to darken
+///
+/// @param {Number (unit)} $percentage
+///   The percentage amount to mix of white with the colour
+
+@function tint($color, $percentage) {
+  @return mix(#fff, $color, $percentage);
+}
+
+/// Returns the opposite direction of each direction in a list
+/// @param {List} $directions - List of initial directions
+/// @return {List} - List of opposite directions
+
+@function opposite-direction($directions) {
+  $opposite-directions: ();
+  $directions-normal: "top", "bottom", "left", "right", "up", "down";
+  $directions-opposite: "bottom", "top", "right", "left", "down", "up";
+
+  @each $direction in $directions {
+    $opposite-directions: append($opposite-directions, unquote(nth($directions-opposite, index($directions-normal, $direction))));
+  }
+
+  @return $opposite-directions;
+}

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

@@ -0,0 +1,86 @@
+////
+//// @author  David Annez
+//// @group   Grid
+////
+
+/// Adds a negative left and right margin of `$gutter-width / 2` to normalise the outer padding of columns
+///
+/// @param {String} $breakpoint [$default-grid-breakpoint]
+///   The breakpoint where you want the margin to be set
+
+@mixin us-row($breakpoint: $default-grid-breakpoint) {
+  @extend %clearfix;
+  @if $breakpoint == "mobile" {
+    margin-right: -$gutter-width / 2;
+    margin-left: -$gutter-width / 2;
+  } @else {
+    @include respond-to($breakpoint, true) {
+      margin-right: -$gutter-width / 2;
+      margin-left: -$gutter-width / 2;
+    }
+  }
+}
+
+/// The grid column builder for uSwitch - floats, sets a % width and adds left and right padding for column gutters
+///
+/// @param {Number (unitless)} $cols
+///   The number of columns to make the selected element
+
+@mixin us-col($cols) {
+  float: left;
+  padding-left: $gutter-width / 2;
+  padding-right: $gutter-width / 2;
+  width: col-width($cols);
+}
+
+/// Grid class and extend generator for ease of class/no-class use
+///
+/// @access private
+///
+/// @param {String} $selector
+///   The CSS selector to use for building the the grid placeholders and classes
+///
+/// @param {Number (unitless)} $cols
+///   The number of columns for the `$selector`
+///
+/// @param {Bool} $html-classes [$html-grid-classes]
+///   If set to false will only output placeholder classes for selective CSS generation
+
+@mixin _grid-class($selector, $cols, $html-classes: $html-grid-classes) {
+  @if $html-classes {
+    .#{$selector}-#{$cols},
+    %#{$selector}-#{$cols} {
+      @include us-col($cols);
+    }
+  } @else {
+    %#{$selector}-#{$cols} {
+      @include us-col($cols);
+    }
+  }
+}
+
+%us-grid-row {
+  @include us-row;
+}
+
+%container {
+  @extend %clearfix;
+  position: relative;
+  padding: 0 $gutter-width / 2;
+  margin-right: auto;
+  margin-left: auto;
+
+  @include respond-to(tablet) {
+    max-width: $tablet-container-width;
+  }
+
+  @include respond-to(desktop, true) {
+    max-width: $desktop-container-width;
+  }
+
+  @include respond-to(large-desktop) {
+    max-width: $large-container-width;
+  }
+}
+
+@import "ustyle/components/grid-classes";

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

@@ -0,0 +1,123 @@
+@if $establish-type-rules {
+  // @page Pattern Library/Typography
+  // @name Headings
+  //
+  // @description
+  //   The default heading styling across all uSwitch pages.
+  //   We allow extending the sizes of these headings with `%heading-{$i}` so that we don't repeat similar font sizes across the site.
+  //
+  //   #### Best practices
+  //   * Headings are for structure, not presentation
+  //   * The first heading on the page should be an H1
+  //   * Headings should be listed in consecutive order [H1, H2, H3], not [H1, H5, H2]
+  //
+  // @markup
+  //  <h1>Heading 1</h1>
+  //  <h2>Heading 2</h2>
+  //  <h3>Heading 3</h3>
+  //  <h4>Heading 4</h4>
+  //  <h5>Heading 5</h5>
+  //  <h6>Heading 6</h6>
+
+  html {
+    @include normal-font;
+    font-size: $base-font-size;
+    line-height: $base-line-ratio + em;
+  }
+
+  body {
+    color: $c-typegrey;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 0;
+    margin-bottom: .375em;
+  }
+
+  @for $level from 1 through 6 {
+    h#{$level},
+    %heading-#{$level},
+    .us-heading--#{$level} {
+      @include heading($level);
+    }
+  }
+
+  // @page Pattern Library/Typography
+  // @name Paragraphs
+  //
+  // @description
+  //   Default paragraph styling with a margin bottom.
+  //
+  // @state .us-standfirst - Used for heros and introductory paragraphs.
+  //
+  // @markup
+  //   <p class="{$modifiers}">
+  //     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.
+  //     Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.
+  //     Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.
+  //   </p>
+
+  p,
+  .trailered {
+    margin: 0 0 1.5em 0;
+  }
+
+  .us-standfirst {
+    @include baseline(18px);
+  }
+
+  // @page Pattern Library/Typography
+  // @name Lists
+  //
+  // @description
+  //   Normal list styling.
+  //
+  // @markup
+  //   <ul>
+  //     <li>List item 1</li>
+  //     <li>List item 2</li>
+  //     <li>List item 3</li>
+  //   </ul>
+
+  ul {
+    li {
+      margin-bottom: .5em;
+    }
+  }
+
+  small {
+    line-height: 1.15em;
+  }
+
+  // @page Pattern Library/Typography
+  // @name Blockquote
+  //
+  // @description
+  //   Default blockquote.
+  //
+  // @markup
+  //   <blockquote>
+  //     <p>
+  //       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  //       Aenean vel arcu non magna varius sagittis vel at elit.
+  //       Vivamus et orci pretium, commodo eros vitae, tincidunt purus.
+  //     </p>
+  //   </blockquote>
+
+  blockquote {
+    @include italic-font;
+    padding: $gutter-width / 2;
+    color: $c-navy;
+    border-left: 5px solid $c-bordergrey;
+
+    > p {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}