ustyle 1.3.6

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
+  //
+  // @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;
+  }
+
+  %small-font {
+    font-size: em(14px);
+    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 !important;
+      margin: 0 !important;
+    }
+  }
+}

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

@@ -0,0 +1,188 @@
+// ----------
+// Colors
+// ----------
+@import "ustyle/basics/variables/colors";
+
+// ----------
+// Forms
+// ----------
+@import "ustyle/basics/variables/forms";
+
+// ----------
+// Fonts
+// ----------
+
+/// If using a uStyle project outside of www.uswitch.com domain or one that lacks the power the includes, then
+/// set this to `true` to import the correct `@font-face` declarations.
+///
+/// @group fonts
+/// @type Bool
+
+$needs-font: false !default;
+
+/// Same as `$needs-font` but also imports the EOT's so that fonts work in < IE8
+///
+/// @group fonts
+/// @type Bool
+
+$needs-font-ie: false !default;
+
+/// Set this to wherever you are serving the uSwitch fonts from.
+///
+/// @group fonts
+/// @type String
+
+$base-font-url: "//fonts.uswitch.com/" !default;
+
+/// The primary heading font stack
+///
+/// @group fonts
+/// @type String
+
+$heading-font: "Open Sans", Helvetica, 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: "Open Sans", Helvetica, Arial, sans-serif !default;
+
+// ----------
+// 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,95 @@
+// @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.
+//
+// @variable c-cyan - Hero banners
+// @variable c-navy - Text with emphasis
+// @variable c-blue - Logo
+// @variable c-typecyan - Text links, icons
+// @variable c-typegrey - Body text
+// @variable c-typegrey-2 - Text without emphasis
+// @variable c-inputgrey - Dropdowns, icons
+// @variable c-bordergrey - Borders
+// @variable c-keylinegrey - Keylines, separators
+// @variable c-bggrey - Backgrounds
+
+$c-navy: #1c1f4e;
+$c-blue: #174695;
+$c-typecyan: #008fe9;
+$c-cyan: #99e2ff;
+$c-typegrey: #333;
+$c-typegrey-2: #767676;
+$c-inputgrey: #97999a;
+$c-bordergrey: #bbb;
+$c-keylinegrey: #eaeaea;
+$c-bggrey: #f4f4f4;
+
+// @page Brand/Colours
+// @name Secondary palette
+// @partial colour
+//
+// @variable c-red - Primary buttons
+// @variable c-green - Action buttons, USPs
+// @variable c-yellow - USPs
+// @variable c-orange - USPs
+// @variable c-purple - USPs
+// @variable c-navy-light
+// @variable c-blue-light
+// @variable c-typecyan-light
+// @variable c-cyan-light
+
+$c-yellow: #ffd32f;
+$c-orange: #f27930;
+$c-purple: #9c55b8;
+$c-red: #d64226;
+$c-green: #2aaa5b;
+$c-navy-light: #1a316e;
+$c-blue-light: #0c72bf;
+$c-typecyan-light: #4cc0f4;
+$c-cyan-light: #e4f8ff;
+
+// @page Brand/Colours
+// @name Tertiary palette
+// @partial colour
+//
+// @variable c-yellow-lightest
+// @variable c-yellow-light
+// @variable c-yellow-dark
+//
+// @variable c-orange-lightest
+// @variable c-orange-light
+// @variable c-orange-dark
+//
+// @variable c-purple-lightest
+// @variable c-purple-light
+// @variable c-purple-dark
+//
+// @variable c-red-lightest
+// @variable c-red-light
+// @variable c-red-dark
+//
+// @variable c-green-lightest
+// @variable c-green-light
+// @variable c-green-dark
+
+$c-yellow-lightest: #ffedab;
+$c-yellow-light: #ffe06d;
+$c-yellow-dark: #d8b327;
+
+$c-orange-lightest: #f9c9ac;
+$c-orange-light: #f5a16e;
+$c-orange-dark: #cd6628;
+
+$c-purple-lightest: #d7bbe2;
+$c-purple-light: #b988cd;
+$c-purple-dark: #84489c;
+
+$c-red-lightest: #eeb3a8;
+$c-red-light: #e27a67;
+$c-red-dark: #b53820;
+
+$c-green-lightest: #a9ddbd;
+$c-green-light: #69c38c;
+$c-green-dark: #23904d;

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

@@ -0,0 +1,65 @@
+////
+//// @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;
+
+/// Background color for our form elements
+///
+/// @type String (hex)
+
+$c-form-element-text: $c-typegrey !default;
+
+/// Background color for our form elements
+///
+/// @type String (hex)
+
+$c-form-element-background: #fff !default;
+
+/// Default border color for all form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-element-border: $c-inputgrey !default;
+
+/// Default border active colour for all form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-element-border-hover: $c-typecyan !default;
+
+/// Disabled foreground colour for form elements
+///
+/// @type String (pixels)
+
+$c-form-element-disabled-fg: #ddd !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: #fafafa !default;
+$c-input-disabled-background: $c-form-element-disabled-fg;
+
+/// Error color for form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-error: $c-red !default;
+
+/// Success color for form elements
+///
+/// @type Variable | String (pixels)
+
+$c-form-success: $c-green !default;