reustyle 2.0.7

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

@@ -0,0 +1,166 @@
+// ----------
+// Colors
+// ----------
+@import "ustyle/basics/variables/colors";
+
+// ----------
+// Forms
+// ----------
+@import "ustyle/basics/variables/forms";
+
+// ----------
+// Fonts
+// ----------
+
+/// The primary heading font stack
+///
+/// @group fonts
+/// @type String
+
+$heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
+
+/// The primary heading font stack
+///
+/// @deprecated use `$heading-font`
+/// @group fonts
+/// @type String
+
+$heading-font-primary: $heading-font !default;
+
+/// The secondary heading font stack
+///
+/// @deprecated use `$heading-font`
+/// @group fonts
+/// @type String
+
+$heading-font-secondary: $heading-font !default;
+
+/// The default sans-serif font stack
+///
+/// @group fonts
+/// @type String
+
+$normal-font: $heading-font;
+
+// ----------
+// Icons
+// ----------
+
+@import "ustyle/basics/variables/icons";
+
+// ----------
+// Typography
+// ----------
+
+/// By default we establish normalised type rules for `body`. Certain projects won't need this or would rather
+/// override, so set this to false if you don't want the default typography rules to kick in
+///
+/// @group typography
+/// @type Bool
+
+$establish-type-rules: true !default;
+
+/// The base font size where every other type setting inherits from
+///
+/// @group typography
+/// @type Number (pixels)
+
+$base-font-size: 16px !default;
+
+/// The base line height for mapped for the `$base-font-size`
+///
+/// @group typography
+/// @type Number (pixels)
+
+$base-line-height: 24px !default;
+
+/// The cap height for the uSwitch fonts (average)
+///
+/// @group typography
+/// @type Number (unitless)
+
+$base-cap-height: .6 !default;
+
+/// The line ratio for establishing a baseline - set as the golden ratio
+///
+/// @group typography
+/// @type Number (unitless)
+
+$base-line-ratio: 1.618 !default;
+
+$base-scale: 2 !default;
+$base-unit: $base-font-size * $base-line-ratio / $base-scale !default;
+
+/// A list containing the 6 heading font sizes used across uStyle
+///
+/// @group typography
+/// @type List
+
+$heading-font-sizes: 36px, 30px, 24px, 18px, 16px, 16px !default;
+
+/// A list with the 6 corresponding line heights for headings
+///
+/// @group typography
+/// @type List
+
+$heading-line-heights: 1.3, 1.3, 1.25, 1.25, .95, .95 !default;
+
+// ----------
+// Grid
+// ----------
+
+/// If set to false will not give you CSS classes for your grid like `.us-col-6` but rather the placeholder class
+/// instead
+///
+/// @group grid
+/// @type Bool
+
+$html-grid-classes: true !default;
+
+/// Column width for calculating the uSwitch grid
+///
+/// @group grid
+/// @type Number (unit)
+
+$col-width: 70px !default;
+
+/// Gutter width for calculating the uSwitch grid
+///
+/// @group grid
+/// @type Number (unit)
+
+$gutter-width: 30px !default;
+
+/// Number of columns for large screens
+///
+/// @group grid
+/// @type Number (unitless)
+
+$grid-columns: 12 !default;
+
+/// Number of columns for desktop screens
+///
+/// @group grid
+/// @type Number (unitless)
+
+$grid-columns-desktop: 10 !default;
+
+/// Number of columns for tablet screens and below
+///
+/// @group grid
+/// @type Number (unitless)
+
+$grid-columns-tablet: 8 !default;
+
+/// The device breakpoint that all ustyle elements respond to
+///
+/// @group grid
+/// @type String
+
+$default-grid-breakpoint: tablet !default;
+
+// Containers
+
+$large-container-width: $grid-columns * $col-width + $grid-columns * $gutter-width;
+$desktop-container-width: $grid-columns-desktop * $col-width + $grid-columns-desktop * $gutter-width;
+$tablet-container-width: $grid-columns-tablet * $col-width + $grid-columns-tablet * $gutter-width;

data/vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss

@@ -0,0 +1,94 @@
+// @page Brand/Colours
+// @name Primary palette
+// @partial colour
+//
+// @description Our colours (with a "u", we're a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.
+//   #### Best practices
+//   * Do not rely only on colour to provide information. A green circle means little, a green circle with "success" in the middle gives actual information.
+//   * Make sure your text is [sufficiently contrasted](http://a11yproject.com/posts/what-is-color-contrast/) against its background
+//
+// @variable c-uswitch-navy
+// @variable c-darker-grey
+// @variable c-dark-grey
+// @variable c-grey
+// @variable c-light-grey
+// @variable c-super-light-grey
+// @variable c-white
+// @variable c-error-red
+// @variable c-success-green
+
+$c-uswitch-navy: #141424;
+$c-darker-grey: #53535e;
+$c-dark-grey: #7c7c84;
+$c-grey: #a7a7ac;
+$c-light-grey: #c6c6c8;
+$c-lighter-grey: #dadadb;
+$c-super-light-grey: #e2e2e2;
+$c-white: #fff;
+$c-error-red: #d64226;
+$c-success-green: #2aaa5b;
+
+// @page Brand/Colours
+// @name Secondary palette
+// @partial colour
+// @variable c-light-yellow
+// @variable c-light-orange
+// @variable c-light-red
+// @variable c-light-pink
+// @variable c-light-purple
+// @variable c-light-blue
+// @variable c-light-green
+// @variable c-dark-yellow
+// @variable c-dark-orange
+// @variable c-dark-red
+// @variable c-dark-pink
+// @variable c-dark-purple
+// @variable c-dark-blue
+// @variable c-dark-green
+
+$c-light-yellow: #f7f146;
+$c-light-orange: #f7c95a;
+$c-light-red: #ff8a83;
+$c-light-pink: #ff99e8;
+$c-light-purple: #acb0ff;
+$c-light-blue: #7edce9;
+$c-light-green: #b6e554;
+
+$c-dark-yellow: #ffd555;
+$c-dark-orange: #fa5;
+$c-dark-red: #fd7687;
+$c-dark-pink: #ff75d4;
+$c-dark-purple: #ac96de;
+$c-dark-blue: #84a6ff;
+$c-dark-green: #82ca50;
+
+
+// Old brand - to remove
+
+$c-navy: $c-uswitch-navy;
+$c-blue: $c-uswitch-navy;
+$c-typecyan: $c-uswitch-navy;
+$c-cyan: $c-super-light-grey;
+$c-typegrey: $c-uswitch-navy;
+$c-typegrey-2: #65717b;
+$c-bggrey: #f4f5f6;
+$c-red: #d64226;
+$c-green: #2aaa5b;
+
+$c-inputgrey: #84909a;
+$c-bordergrey: #b0b8bf;
+$c-keylinegrey: #e9ebed;
+$c-blue-light: #0c72bf;
+$c-typecyan-light: #4cc0f4;
+$c-cyan-light: #e4f8ff;
+$c-yellow: #ffd32f;
+$c-orange: #f27930;
+$c-purple: #9c55b8;
+
+$c-red-dark: #b53820;
+$c-green-dark: #23904d;
+$c-red-lightest: #eeb3a8;
+$c-green-lightest: #adebc5;
+$c-yellow-lightest: #ffedab;
+$c-orange-lightest: #f9c9ac;
+$c-purple-lightest: #d7bbe2;

data/vendor/assets/stylesheets/ustyle/basics/variables/_forms.scss

@@ -0,0 +1,98 @@
+////
+//// @group   Forms
+////
+
+/// The base height for all our form elements
+///
+/// @type Number (pixels)
+
+$form-element-base-height: 37px !default;
+
+/// Padding that is shared across form elements
+///
+/// @type Number (em)
+
+$form-element-base-padding: .35em .5em !default;
+
+/// The base height for any large elements
+///
+/// @type Number (pixels)
+
+$form-element-base-height--large: 48px !default;
+
+/// Padding that is shared across large form elements
+///
+/// @type Number (em)
+
+$form-element-base-padding--large: .55em .5em !default;
+
+/// Form sizing map for inputs
+///
+/// @type List
+
+$form-element-sizes: (
+  (base, $form-element-base-height, $form-element-base-padding, 1em),
+  (large, $form-element-base-height--large, $form-element-base-padding--large, 1.2em)
+) !default;
+
+/// Text color for our form elements
+///
+/// @type String (hex)
+
+$c-form-element-text: $c-uswitch-navy !default;
+
+/// Background color for our form elements
+///
+/// @type String (hex)
+
+$c-form-element-background: $c-white !default;
+
+/// Default border color for all form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-element-border: $c-grey !default;
+
+/// Default border active colour for all form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-element-border-hover: $c-dark-grey !default;
+
+/// Hover border colour for form elements
+///
+/// @type String (pixels)
+
+$c-form-element-border-active: $c-uswitch-navy !default;
+
+/// Active border colour for form elements
+///
+/// @type String (pixels)
+
+$c-form-element-disabled-fg: $c-grey !default;
+$c-input-disabled-foreground: $c-form-element-disabled-fg;
+
+/// Disabled background colour for form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-element-disabled-bg: $c-super-light-grey !default;
+$c-input-disabled-background: $c-form-element-disabled-fg;
+
+/// Disabled border colour for form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-element-disabled-border: $c-light-grey !default;
+
+/// Error color for form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-error: $c-error-red !default;
+
+/// Success color for form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-success: $c-success-green !default;

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

@@ -0,0 +1,43 @@
+/// List of the supported SVG sprite colours
+///
+/// @group Icons
+/// @type List
+
+$icon-colors: "white", "typegrey", "inputgrey", "typecyan", "custom" !default;
+
+/// Legacy support for icon coloring on SVGs
+///
+/// @group Icons
+/// @type List
+$icon-colors--svg: (
+  ("white", #fff),
+  ("typegrey", $c-typegrey),
+  ("inputgrey", $c-inputgrey),
+  ("typecyan", $c-typecyan),
+  ("custom", $c-navy)
+) !default;
+
+$icon-colors--svg--custom: (
+  ("uswitch", $c-blue),
+  ("cross", $c-red),
+  ("tick", $c-green),
+  ("facebook", #3c5a99),
+  ("google", #dc4e41),
+  ("renewable", $c-green),
+  ("star-half", $c-yellow),
+  ("starline-half", $c-yellow),
+  ("star", $c-yellow),
+  ("starline", $c-yellow),
+  ("twitter", #00aced)
+) !default;
+
+/// List of the icon sizes and their respective names
+///
+/// @group Icons
+/// @type List
+
+$icon-sizes: (
+  (small, 16px, 16px),
+  (medium, 32px, 32px),
+  (large, 64px, 64px)
+) !default;

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

@@ -0,0 +1,23 @@
+.us-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1002;
+  background: rgba($c-blue, .5);
+  opacity: 0;
+  visibility: hidden;
+}
+
+.us-backdrop--animated {
+  transition: opacity 0.5s;
+}
+
+.us-backdrop--visible {
+  visibility: visible;
+}
+
+.us-backdrop--active {
+  opacity: 1;
+}

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

@@ -0,0 +1,66 @@
+// @page Pattern Library/Components
+// @name Breadcrumbs
+//
+// @description
+//  Breadcrumbs are used to provide signposting of a users location and to enable quick navigation around the site. They are only to be used as a secondary means of navigation however. Pages should also be navigable through other means.
+//
+// @markup
+//   <ul class="us-crumbs">
+//     <li class="us-crumbs__item"><a href="/" class="us-crumbs__link">uSwitch.com</a></li>
+//     <li class="us-crumbs__item"><a class="us-crumbs__link" href="http://www.uswitch.com/credit-reports/">Credit report</a></li>
+//     <li class="us-crumbs__item"><a class="us-crumbs__link" href="http://www.uswitch.com/credit-reports/guides/">Credit reports guides</a></li>
+//     <li class="us-crumbs__item">Statutory credit reports</li>
+//   </ul>
+
+.us-crumbs {
+  @extend %reset-box-model;
+  @extend %clearfix;
+  @extend %small-font;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  list-style: none;
+}
+
+.us-crumbs__item {
+  @extend %float-left;
+  margin-bottom: 0;
+  color: $c-darker-grey;
+
+  &:before {
+    display: inline-block;
+    margin: 0 .35em;
+    font-size: 1.4em;
+    font-weight: normal;
+    content: "\203A";
+    vertical-align: text-top;
+  }
+
+  &:first-child:before {
+    width: 0;
+    margin: 0;
+    color: transparent;
+  }
+
+  &:last-child {
+    font-weight: bold;
+    color: $c-uswitch-navy;
+
+    &:before {
+      color: $c-darker-grey;
+    }
+  }
+}
+
+.us-crumbs__link {
+  color: $c-darker-grey;
+  text-decoration: none;
+  
+  &:visited {
+    color: $c-darker-grey;
+  }
+
+  &:hover {
+    color: $c-darker-grey;
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,187 @@
+// @page Pattern Library/Components
+// @name Buttons
+//
+// @description
+//   Our buttons used across the site. The states give different use cases. Both `<a>` and `<button>` tags are supported. Please use `role='button'` when using an `<a>` tag.
+//
+// @state .us-btn--primary - Used as a save/update button.
+// @state .us-btn--action - Navigational button.
+// @state .us-btn--secondary - Secondary.
+// @state .us-btn--hero - Navy outline used for buttons on hero banners.
+// @state .us-btn--reversed - White outline for dark backgrounds.
+// @state .us-btn--large - Larger button for heros.
+// @state .us-btn--small - Smaller button for mobile tables.
+// @state .us-btn--blocked - Full width button.
+// @state .us-btn--link - link style button.
+// @state .us-btn--stronger - Emphasis button.
+// @state .us-btn--disabled - Disabled styling (can also be styled with :disabled).
+// @state .us-btn--secondary--disabled - Disabled styling (can also be styled with :disabled).
+//
+// @markup
+//  <a href="#" class="us-btn {$modifiers}" role="button">Link Button</a>
+//  <button class="us-btn {$modifiers}">Button Element</button>
+
+$button-bg--base      : $c-keylinegrey !default;
+$button-bg--base-hover: $c-typecyan !default;
+$button-bg--primary   : $c-uswitch-navy !default;
+$button-bg--secondary : transparent !default;
+$button-bg--action    : $c-white !default;
+$button-bg--hero      : $c-uswitch-navy !default;
+$button-bg--reversed  : transparent !default;
+
+$button-text--light: $c-white !default;
+$button-text--dark: $c-uswitch-navy !default;
+
+$button-styles: (
+  ("primary", $button-bg--primary, $button-text--light),
+  ("action", $button-bg--action, $c-uswitch-navy)
+) !default;
+
+$outline-button-styles: (
+  ("secondary", $button-bg--secondary, $button-text--dark),
+  ("hero", $button-bg--secondary, $button-text--dark),
+  ("reversed", $button-bg--reversed, $button-text--light)
+) !default;
+
+@mixin button-style($name, $outlined: false) {
+  @if $outlined {
+    &,
+    &:visited {
+      color: nth($name, 3);
+      background-color: nth($name, 2);
+      border: 1px solid nth($name, 3);
+    }
+
+    &--disabled,
+    &--disabled:visited {
+      pointer-events: none;
+      border: 1px solid $c-grey;
+      background-color: transparent;
+      color: $c-grey;
+    }
+  } @else {
+    &,
+    &:visited {
+      color: nth($name, 3);
+      background-color: nth($name, 2);
+      border-color: shade(nth($name, 2), 20%);
+    }
+
+    &--disabled,
+    &--disabled:visited {
+      pointer-events: none;
+      background-color: $c-lighter-grey;
+      color: $c-grey;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    @if nth($name, 2) == transparent {
+      background-color: transparentize($c-grey, .9);
+    } @else {
+      background-color: mix(nth($name, 2), $c-grey, 90%);
+    }
+
+    @if $outlined {
+      color: nth($name, 3);
+      border-color: nth($name, 3);
+    } @else {
+      color: nth($name, 3);
+      border-color: shade(nth($name, 2), 20%);
+    }
+  }
+}
+
+%btn,
+.us-btn {
+  @extend %reset-box-model;
+  @extend %input-background--normalise;
+  @include normal-font;
+  display: inline-block;
+  padding: .63em 1.25em;
+  font-size: 1em;
+  font-weight: bold;
+  line-height: 1em;
+  color: $c-typegrey;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: $button-bg--base;
+  border: 0;
+  border-radius: 0;
+  transition: none;
+
+  &:visited {
+    color: $c-typegrey;
+  }
+
+  &:hover,
+  &:focus {
+    opacity: .9;
+    color: $button-bg--base-hover;
+    background-color: tint($button-bg--base-hover, 90%);
+    border-color: $button-bg--base-hover;
+  }
+
+  &:active {
+    color: #fff;
+    background-color: $button-bg--base-hover;
+  }
+}
+
+.us-btn--stronger {
+  @include heading-font;
+}
+
+.us-btn--large {
+  font-size: 1.2em;
+}
+
+.us-btn--small {
+  padding: .4em .65em;
+}
+
+.us-btn--blocked {
+  display: block;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.us-btn--link {
+  padding: 0;
+  line-height: $base-line-ratio;
+  color: $c-blue;
+  background-color: transparent;
+  border: 0;
+
+  &:hover {
+    color: $c-navy;
+    text-decoration: underline;
+    background-color: transparent;
+  }
+}
+
+.us-btn--disabled,
+.us-btn:disabled,
+.us-btn--disabled:visited {
+  pointer-events: none;
+  background-color: $c-lighter-grey;
+  color: $c-grey;
+}
+
+@each $button-style in $button-styles {
+  %btn--#{nth($button-style, 1)},
+  .us-btn--#{nth($button-style, 1)} {
+    @include button-style($button-style);
+  }
+}
+@each $button-style in $outline-button-styles {
+  %btn--#{nth($button-style, 1)},
+  .us-btn--#{nth($button-style, 1)} {
+    @include button-style($button-style, true);
+  }
+}