ustyle 1.3.6

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

@@ -0,0 +1,112 @@
+// @page Pattern Library/Components
+// @name Featured deal
+//
+// @description
+//   The `.us-featured` is mostly composed by smaller components, the components can be shuffled around inside of a grid to create the needed variants.
+//   This featured deal won't make any assumptions around the media queries, it's up to you, to deal with it. As you can see on the examples.
+//
+// @markup
+//<div class="us-container">
+// <div class="us-featured__header us-grid-row us-padding-top us-padding-bottom">
+//   <div class="us-featured__header-title us-col-xsm-9 us-align--left">
+//     Title goes here
+//   </div>
+//   <div class="us-featured__header-subtitle us-col-xsm-3 us-align--right">
+//     Promotion
+//   </div>
+// </div>
+// <div class="us-featured__content us-grid-row us-padding-top us-padding-bottom">
+//   <div class="us-col-xsm-12">
+//     <div class='us-usp us-usp--blue'>
+//       Awesome deal usp
+//     </div>
+//   </div>
+//   <div class="us-desktop--hidden us-padding-top us-col-xsm-4 us-mobile-block">
+//     <img class="us-img--full" src="http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg" width="200">
+//   </div>
+//   <div class="us-col-xsm-7 us-col-lg-8 us-col-sm-5">
+//     <ul>
+//       <li>List item 1</li>
+//       <li>List item 2</li>
+//       <li>List item 3</li>
+//     </ul>
+//     <div class="us-col-xsm-6 us-desktop--block">
+//       <div class="us-featured-highlight">
+//         <strong class="us-featured-highlight__title">
+//           £99.99
+//         </strong>
+//         monthly cost
+//       </div>
+//     </div>
+//     <div class="us-col-xsm-6 us-desktop--block">
+//       <div class="us-featured-highlight">
+//         <strong class="us-featured-highlight__title">
+//           £99.99
+//         </strong>
+//         monthly cost
+//         <br>
+//         <a class="us-featured-highlight__link us-link" href="#">Link</a>
+//       </div>
+//     </div>
+//   </div>
+//   <div class="us-col-xsm-3 us-col-lg-4 us-tablet--block">
+//     <img class="us-img--full us-desktop--block" src="http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg" width="200">
+//     <button class="margin-top margin-bottom us-btn us-btn--primary us-btn us-btn--blocked">See deal</button>
+//     <div class="us-icon--before us-icon--small--before us-icon--typegrey--before us-icon--clock--before us-align--center">
+//       <strong>3 days left</strong>
+//     </div>
+//   </div>
+//   <div class="us-featured__mobile-icon  us-tablet--hidden us-col-xsm-3 us-icon us-icon--medium us-icon--typegrey us-icon--breadcrumb"></div>
+// </div>
+// <div class="us-featured__footer us-grid-row us-padding-top us-padding-bottom us-desktop--block">
+//   <div class="us-col-xsm-12">
+//     Legal stuff goes here
+//   </div>
+// </div>
+//</div>
+
+$featured-list-padding: 1em;
+$featured-highlight-text-size: 1.5em;
+$featured-legal-text-size: .9em;
+
+.us-featured__header {
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.us-featured__content {
+  position: relative;
+  background-color: $c-cyan-light;
+
+  ul {
+    padding-left: $featured-list-padding;
+  }
+}
+
+.us-featured__mobile-icon {
+  position: absolute;
+  top: 45%;
+  right: 5px;
+  float: right;
+}
+
+.us-featured-highlight {
+  font-weight: bold;
+  color: $c-navy;
+  text-align: center;
+}
+
+.us-featured-highlight__title {
+  display: block;
+  font-size: $featured-highlight-text-size;
+}
+
+.us-featured-highlight__link {
+  font-weight: normal;
+}
+
+.us-featured__footer {
+  font-size: $featured-legal-text-size;
+  background-color: $c-cyan-light;
+  border-top: 1px solid $c-bordergrey;
+}

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,42 @@
+// @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'>Swat at dog intrigued by the shower missing until dinner time.</p>
+//     </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;
+  padding-bottom: $hero-padding-bottom;
+}
+
+.us-hero-title {
+  margin-top: 0;
+}
+
+.us-hero-title,
+.us-hero-description {
+  color: $hero-text-color;
+}
+
+.us-hero-description {
+  @extend %reset-box-model;
+}

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

@@ -0,0 +1,30 @@
+// @page Pattern Library/Components
+// @name Anchor links
+// 
+// @description 
+//   Anchor tag styling, with and without a border
+//
+// @state .us-link - Adds a border bottom to the link
+// @state .us-link--light - Changes the link colors to white for when links are placed on dark backgrounds
+//
+// @markup
+//   <a href="#" class="{$modifiers}">Link</a>
+
+%anchor-link {
+  border-bottom: 1px solid;
+}
+
+a,
+.us-link {
+  @include link-colors($c-blue, $c-typecyan, $c-blue, $c-blue, darken($c-blue, 15%));
+  text-decoration: none;
+  transition: color 333ms, border-color 333ms;
+}
+
+.us-link {
+  @extend %anchor-link;
+}
+
+.us-link--light {
+  @include link-colors(#fff, #fff, $c-keylinegrey, #fff, #fff);
+}

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

@@ -0,0 +1,89 @@
+// @page Pattern Library/Typography
+// @name Numbered list
+//
+// @description
+//   Our default numbered list styling
+//   `.us-custom-list-alt` allows us to use the lists on hero/blue backgrounds.
+//
+// @markup
+//   <ul class='us-numbered-list'>
+//     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>
+//     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>
+//   </ul>
+
+%base-custom-list {
+  padding: 0;
+  margin: 1.5em 0;
+  list-style: none;
+
+  li {
+    position: relative;
+    padding-left: 2em;
+    margin: .5em 0;
+
+    &:before {
+      position: absolute;
+      left: 0;
+    }
+  }
+}
+
+.us-numbered-list {
+  @extend %base-custom-list;
+  counter-reset: number-counter;
+
+  li {
+    counter-increment: number-counter;
+
+    &:before {
+      top: 0;
+      width: 1.5em;
+      height: 1.5em;
+      padding-top: .25em;
+      line-height: 1;
+      color: $c-typecyan;
+      text-align: center;
+      border-radius: 2em;
+      content: counter(number-counter);
+      box-sizing: border-box;
+    }
+
+    .us-hero &:before,
+    .us-custom-list-alt &:before {
+      color: $c-navy;
+      background: #fff;
+      background: rgba(255, 255, 255, .7);
+    }
+  }
+}
+
+// @page Pattern Library/Typography
+// @name Ticked list
+//
+// @description
+//   Our default ticked list styling. `.us-custom-list-alt` allows us to use the lists on hero/blue backgrounds.
+//
+// @markup
+//   <ul class='us-ticked-list'>
+//     <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>
+//       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+//     </li>
+//     <li class='us-icon--before us-icon--tick--before us-icon--small--before us-icon--typegrey--before'>
+//       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+//     </li>
+//   </ul>
+
+.us-ticked-list {
+  @extend %base-custom-list;
+
+  li {
+    &:before {
+      top: 50%;
+      margin-top: - 8px;
+    }
+
+    .us-custom-list-alt &:before {
+      @include icon-color("white");
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+// @page Pattern Library/Components
+// @name Link lists
+// 
+// @description
+//   The default list styling for lists that have anchors to take you to other pages.
+//
+// @markup
+//   <ul class='us-list'>
+//     <li><a href="#">List item 1</a></li>
+//     <li><a href="#">List item 2</a></li>
+//     <li><a href="#">List item 3</a></li>
+//   </ul>
+//
+
+%list,
+.us-list {
+  @extend %reset-box-model;
+  list-style: none;
+
+  a {
+    @extend %anchor-link;
+    display: block;
+    padding-top: .5em;
+    padding-bottom: .5em;
+
+    &:after {
+      @extend %link-triangle;
+      font-size: .8em;
+    }
+  }
+
+  a:hover {
+    &:after {
+      left: .5em;
+    }
+  }
+
+  .us-hero & {
+    margin-top: 1em;
+
+    a {
+      font-size: em(18px);
+      color: $c-navy;
+    }
+  }
+}

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

@@ -0,0 +1,142 @@
+// @page Pattern Library/Components
+// @name Loader
+//
+// @description
+//   Loader component to be added to any AJAX/filter loads across uSwitch. We use them specifically in tables when loading new rows.
+//   `.us-loader--loading` will initiate the animation and `.us-loader--centered` will vertically center the loading SVG.
+//
+// @markup
+//   <div class='us-loader__container'>
+//     <div class='us-loader us-loader--loading us-loader--centered'>
+//       <div class='us-loader__inner'>
+//         <div class='us-loader__spinner'></div>
+//         <div class='us-loader__text'>
+//           Loading deals
+//         </div>
+//       </div>
+//       <div class='us-loader__overlay'></div>
+//     </div>
+//     <!-- EXAMPLE CONTENT -->
+//     <ul class='us-list'>
+//       <li><a href="#">List item 1</a></li>
+//       <li><a href="#">List item 2</a></li>
+//       <li><a href="#">List item 3</a></li>
+//       <li><a href="#">List item 4</a></li>
+//     </ul>
+//     <!-- END EXAMPLE -->
+//   </div>
+
+$loader-overlay-opacity: .8 !default;
+$loader-overlay-colour: #fff !default;
+$spinner-vertical-margin: 1em !default;
+$spinner-animation-time: 500ms !default;
+$spinner-file: "icons/spinner.svg" !default;
+$spinner-size: 60px !default;
+$spinner-file-fallback: ustyle-image-path("icons/spinner_fallback.gif") !default;
+$spinner-load-fallback: true !default;
+
+@keyframes loader-intro {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+%snap-to-parent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+%spinner-base {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  margin-top: $spinner-vertical-margin;
+  margin-bottom: $spinner-vertical-margin;
+  background-repeat: no-repeat;
+}
+
+%spinner-icon {
+  background: transparent url($spinner-file-fallback) no-repeat center center;
+  background-image: -webkit-linear-gradient(transparent, transparent), inline-asset($spinner-file);
+  background-image: linear-gradient(transparent, transparent), inline-asset($spinner-file);
+  animation: spin $spinner-animation-time infinite linear;
+}
+
+@mixin spinner($size: $spinner-size) {
+  @extend %spinner-base;
+  @extend %spinner-icon;
+
+  @if $size {
+    width: $size;
+    height: $size;
+    background-size: $size;
+  }
+}
+
+.us-loader {
+  @extend %snap-to-parent;
+  display: none;
+  text-align: center;
+}
+
+.us-loader__container {
+  position: relative;
+}
+
+.us-loader--loading {
+  display: block;
+  animation: loader-intro $spinner-animation-time forwards;
+}
+
+.us-loader--centered {
+  @extend %vertical-align-parent;
+  transform-style: preserve-3d;
+}
+
+.us-loader__inner {
+  position: relative;
+  z-index: 2;
+
+  .us-loader--centered & {
+    @extend %vertical-align-child;
+  }
+}
+
+.us-loader__spinner {
+  .us-loader--loading & {
+    @include spinner;
+  }
+
+  .us-loader--centered & {
+    margin-top: 0;
+  }
+}
+
+.us-loader__text {
+  @extend %heading-3;
+  color: $c-navy;
+}
+
+.us-loader__overlay {
+  @extend %snap-to-parent;
+  z-index: 1;
+  background-color: $loader-overlay-colour;
+  opacity: $loader-overlay-opacity;
+}

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

@@ -0,0 +1,183 @@
+// @page Pattern Library/JavaScript
+// @name Overlay
+//
+// @description
+//  `.us-overlay` slides in from either side of the viewport, or can be shown as a modal window.
+//
+//
+// @javascript
+//   var overlay = new Overlay({
+//     bodyActiveClass: 'us-overlay--open',
+//     activeClass:     'us-overlay-parent--active',
+//     visibleClass:    'us-overlay-parent--visible',
+//     overlay:         $('.us-overlay-parent'),
+//     openButton:      '.js-open-overlay',
+//     closeButton:     '.js-close-overlay',
+//     historyStatus:   '#seedeal',
+//     history:         false,
+//     preventDefault:  true
+//   });
+//
+// @state .us-overlay--modal - Overlay appears as a modal window.
+// @state .us-overlay--right - Overlay appears on the right side of the viewport (not applicable when used in conjunction with .us-overlay--modal).
+// @state .us-overlay--above - Overlay appears over the top of another open overlay.
+//
+// @markup
+//   <button class="us-btn js-open-overlay" modifier="{$modifiers}">Open</button>
+//
+//   <div class="us-overlay-parent" modifier="{$modifiers}">
+//     <div class="us-overlay {$modifiers}">
+//       <div class="us-overlay__container">
+//         <div class="us-overlay__header">
+//           <div class="us-overlay__title">
+//             Overlay
+//           </div>
+//
+//           <button class="us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay">Close</button>
+//         </div>
+//
+//         <div class="us-overlay__body">
+//           Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.
+//         Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.
+//         Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.
+//         Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.
+//         Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.
+//         </div>
+//       </div>
+//     </div>
+//   </div>
+
+$overlay-modal-breakpoint: desktop !default;
+$overlay-modal-width: 60% !default;
+$overlay-max-modal-width: 700px !default;
+$overlay-z-index: 1003 !default;
+$overlay-transition-speed: .3s !default;
+$overlay-mobile-width: calc(100% - 25px) !default;
+$overlay-tablet-width: 340px !default;
+$overlay-header-height: 55px !default;
+$overlay-close-size: 64px !default;
+
+.us-overlay--open {
+  overflow: hidden;
+}
+
+@mixin overlay--open {
+  .us-overlay-parent--active & {
+    @content;
+  }
+}
+
+@mixin overlay--above {
+  &.us-overlay--above {
+    @content;
+  }
+}
+
+.us-overlay-parent {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $overlay-z-index;
+  visibility: hidden;
+}
+
+.us-overlay-parent--visible {
+  overflow: scroll;
+  visibility: visible;
+}
+
+.us-overlay {
+  position: absolute;
+  z-index: $overlay-z-index;
+  width: $overlay-mobile-width;
+  min-height: 100%;
+  background: #fff;
+  transform: translate3d(-100%, 0, 0);
+  transition: transform $overlay-transition-speed ease-in, opacity $overlay-transition-speed linear, box-shadow $overlay-transition-speed linear;
+  -webkit-overflow-scrolling: auto;
+
+  @include overlay--open {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    box-shadow: 1px 0 18px 0 rgba(0, 0, 0, .3);
+    transition-timing-function: ease-out;
+  }
+
+  @include respond-to(small-tablet, true) {
+    width: $overlay-tablet-width;
+  }
+}
+
+.us-overlay--above {
+  z-index: $overlay-z-index + 1;
+
+  @include overlay--open {
+    box-shadow: 1px 0 30px 5px rgba(0, 0, 0, .3);
+  }
+}
+
+.us-overlay--modal {
+  @include respond-to($overlay-modal-breakpoint, true) {
+    position: relative;
+    width: $overlay-modal-width;
+    max-width: $overlay-max-modal-width;
+    min-height: 0;
+    margin: 5% auto;
+    opacity: 0;
+    transform: translate3d(0, -30px, 0);
+
+    @include overlay--open {
+      transform: translate3d(0, 0, 0);
+      box-shadow: 0 1px 18px 0 rgba(0, 0, 0, .3);
+
+      @include overlay--above {
+        box-shadow: 0 1px 30px 5px rgba(0, 0, 0, .3);
+      }
+    }
+  }
+}
+
+.us-overlay--right {
+  right: 0;
+  transform: translate3d(100%, 0, 0);
+
+  @include overlay--open {
+    transform: translate3d(0, 0, 0);
+    box-shadow: -1px 0 18px 0 rgba(0, 0, 0, .3);
+
+    @include overlay--above {
+      box-shadow: -1px 0 30px 5px rgba(0, 0, 0, .3);
+    }
+  }
+}
+
+.us-overlay__container {
+  position: relative;
+}
+
+.us-overlay__body {
+  @extend %container !optional;
+  padding: 1em;
+  color: $c-typegrey;
+}
+
+.us-overlay__header {
+  position: relative;
+  width: 100%;
+  min-height: $overlay-header-height;
+  padding: 1em;
+  color: #fff;
+  background: $c-navy;
+}
+
+.us-overlay__title {
+  width: calc(100% - #{$overlay-close-size});
+}
+
+.us-overlay__close {
+  position: absolute;
+  top: .75em;
+  right: 1em;
+}