reustyle 2.0.7

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

@@ -0,0 +1,241 @@
+// @page Design/Icons
+// @name Icons
+// @partial icons
+//
+// @description
+//   Our icons are displayed via `xlink:href` in the `<use>` tags. This allows us to directly embed SVGs in a flexible manner and be able to apply transformations and any sort of colours onto them.
+//   We use an SVG sprite called `icons.svg` that is versioned just like ustyle. As per the examples, the icons are referenced via the ID, like this: `icons.svg#icon-bookmark`
+//
+//   **Accessibility**: In most cases, icons are purely presentational elements. In this scenario, you want to add: `aria-hidden="true"` and `role="presentation"` to your code.
+//
+//   #### Usage
+//   * Suffixing with `--{size}` where size is one of *small*, *medium* or *large* will change the size of the icon from 16px, 32px and 64px respectively.
+//   * `.us-icon--{size}--sm-tablet` and `.us-icon--{size}--mobile` will override icon sizes for those screen size
+//   * `.us-icon--notext` allows you to set any element with no content to an icon
+//   * blue, typegrey, inputgrey, typecyan and custom are colors that can be set on the icon with `.us-icon--{color}`
+//   * Colors can be changed by adding your own `fill:` style to the SVG.
+//   * [svg4everybody.js](https://github.com/jonathantneal/svg4everybody) is needed for Internet Explorer browsers
+//
+// @state alarm
+// @state android
+// @state arrow-circle
+// @state arrow-up
+// @state arrow-down
+// @state book
+// @state bookmark
+// @state breadcrumb
+// @state calculator
+// @state calendar
+// @state car
+// @state checkbox-tick
+// @state chevron-right
+// @state clock
+// @state close
+// @state cog
+// @state credit-card
+// @state cross
+// @state dual-fuel
+// @state electric-light
+// @state envelope
+// @state exit-noexit
+// @state facebook
+// @state facebook-brand
+// @state filter
+// @state fixed-variable
+// @state gas
+// @state gauge
+// @state github
+// @state google
+// @state google-brand
+// @state graph-up
+// @state home
+// @state hot
+// @state info
+// @state kettle
+// @state key
+// @state lock
+// @state magnify-in
+// @state magnify
+// @state menu
+// @state message
+// @state mobile
+// @state monthly-dd
+// @state network
+// @state no-exit
+// @state pdf
+// @state pencil
+// @state person-add
+// @state person
+// @state phone
+// @state piggy-bank
+// @state pin
+// @state pound-note
+// @state present
+// @state print
+// @state quarterly-dd
+// @state question-circle
+// @state quote
+// @state recycle
+// @state remove
+// @state renewable
+// @state results
+// @state save
+// @state share
+// @state shield
+// @state sim
+// @state smiley
+// @state sort
+// @state speech-circle
+// @state speech
+// @state spinner
+// @state star-half
+// @state star
+// @state starline-half
+// @state starline
+// @state talk
+// @state tick-circle
+// @state tick
+// @state tv
+// @state twitter
+// @state twitter-brand
+// @state uswitch
+// @state variable
+// @state warning-circle
+// @state wifi
+// @state wiki
+// @state xml
+// @state play
+// @state pound-circle
+// @state dashcam
+// @state warning
+// @state chevron-left
+// @state controller
+//
+// @markup
+//  <svg role="image" class="us-icon--medium us-icon--custom us-icon--{$modifiers}">
+//    <use xlink:href="/images/icons.svg#icon-{$modifiers}"></use>
+//  </svg>
+
+@import "ustyle/basics/variables/icons";
+
+/// Returns a background position for the number of `$icon-colors`
+///
+/// @group icons
+/// @author David Annez
+///
+
+// scss-lint:disable QualifyingElement
+
+// Overrides normalize.css
+// Stops icon clipping in Firefox
+svg:not(:root) {
+  overflow: visible;
+}
+
+svg.us-icon--before,
+svg.us-icon--after {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+svg.us-icon--before {
+  margin-right: $gutter-width/4;
+}
+
+svg.us-icon--after {
+  margin-left: $gutter-width/4;
+}
+
+.us-icon--centered {
+  position: relative;
+  top: 50%;
+  margin: 0 auto;
+  transform: translateY(-50%);
+}
+
+.us-icon--notext {
+  display: inline-block;
+  text-indent: -999em;
+}
+
+//
+// ICON COLOURS
+//
+
+/// @require {Variable} icon-colors--svg
+///
+/// @require {Variable} icon-colors--svg--custom
+
+@each $icon-color in $icon-colors--svg {
+  $color-name: nth($icon-color, 1);
+  $color-hex: nth($icon-color, 2);
+
+  svg.us-icon--#{$color-name} {
+    fill: $color-hex;
+  }
+}
+
+// SVG icon coloring for custom classes
+
+@each $icon-colors-svg in $icon-colors--svg--custom {
+  $icon-name: nth($icon-colors-svg, 1);
+  $icon-fill: nth($icon-colors-svg, 2);
+
+  svg.us-icon--#{$icon-name} {
+    fill: $icon-fill;
+  }
+}
+
+// SVG icon coloring
+
+@each $icon-color in $icon-colors--svg {
+  $color-name: nth($icon-color, 1);
+  $color-hex: nth($icon-color, 2);
+
+  svg.us-icon--hover--#{$color-name}:hover {
+    fill: $color-hex;
+  }
+}
+
+// scss-lint:enable QualifyingElement
+
+//
+// ICON SIZING
+//
+
+@each $size in $icon-sizes {
+  $size-name: nth($size, 1);
+  $width: nth($size, 2);
+  $height: nth($size, 3);
+
+  .us-icon--#{$size-name} {
+    width: $width;
+    height: $height;
+  }
+}
+
+@include respond-to(to-small-tablet) {
+  @each $size in $icon-sizes {
+    $size-name: nth($size, 1);
+    $width: nth($size, 2);
+    $height: nth($size, 3);
+
+    .us-icon--#{$size-name}--sm-tablet {
+      width: $width;
+      height: $height;
+    }
+  }
+}
+
+@include respond-to(mobile) {
+  @each $size in $icon-sizes {
+    $size-name: nth($size, 1);
+    $width: nth($size, 2);
+    $height: nth($size, 3);
+
+    .us-icon--#{$size-name}--mobile {
+      width: $width;
+      height: $height;
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/mixins/_arrow.scss

@@ -0,0 +1,51 @@
+/// Returns a CSS arrow generated by border styles
+///
+/// @author David Annez
+///
+/// @param {Number} $width [20px]
+///   Horizontal width of triangle
+///
+/// @param {Number} $height [20px]
+///   Vertical height of triangle
+///
+/// @param {String} $direction [up]
+///   Direction of tip of arrow
+///
+/// @param {Color} $color [false]
+///   Color of triangle, if none specified inherits from font color of element
+
+@mixin arrow($width: 20px, $height: 20px, $direction: "up", $color: false) {
+  $border-style: solid;
+  $direction: $direction + unquote("");
+
+  @if $color {
+    $border-style: solid $color;
+  }
+
+  width: 0;
+  height: 0;
+  // Right
+  @if $direction == "right" {
+    border-top: $height / 2 solid transparent;
+    border-bottom: $height / 2 solid transparent;
+    border-left: $width $border-style;
+  }
+  // Left
+  @if $direction == "left" {
+    border-top: $height / 2 solid transparent;
+    border-right: $width $border-style;
+    border-bottom: $height / 2 solid transparent;
+  }
+  // Up
+  @if $direction == "up" or $direction == "top" {
+    border-right: $width / 2 solid transparent;
+    border-bottom: $height $border-style;
+    border-left: $width / 2 solid transparent;
+  }
+  // Down
+  @if $direction == "down" or $direction == "bottom" {
+    border-top: $height $border-style;
+    border-right: $width / 2 solid transparent;
+    border-left: $width / 2 solid transparent;
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "ustyle/mixins/general";
+@import "ustyle/mixins/baseline";
+@import "ustyle/mixins/media-query";
+@import "ustyle/mixins/typography";
+@import "ustyle/mixins/arrow";
+@import "ustyle/mixins/link-colors";
+@import "ustyle/mixins/forms";

data/vendor/assets/stylesheets/ustyle/mixins/_baseline.scss

@@ -0,0 +1,43 @@
+////
+//// @group typography
+////
+
+/// Baseline mixin for cascading typographical elements. It calculates the adequate top and bottom
+/// pushes for the selected font size and line height. Will vary from font to font, has been set to our
+/// defaults
+///
+/// @param {Number (unit)} $font-size [$base-font-size]
+///   The font size for the element
+///
+/// @param {Number (unit)} $line-height [$base-line-ratio]
+///   The line height ratio
+///
+/// @param {Number (unit)} $scale [$base-scale]
+///   Base scale for baseline
+///
+/// @param {Number (unit)} $cap-height [$base-cap-height]
+///   The cap height of the font being used on the element
+///
+
+@mixin baseline($font-size: $base-font-size, $line-height: $base-line-ratio, $scale: $base-scale, $cap-height: $base-cap-height, $root: false) {
+  // rhythm unit
+  $rhythm: $line-height * $font-size / $scale;
+  // number of rhythm units that can fit the font-size
+  $lines: ceil(($font-size + .001px) / $rhythm);
+  // calculate the new line-height
+  $line-height: $rhythm * $lines / $font-size;
+  // use the results
+  font-size: $font-size;
+  font-size: rem($font-size);
+  line-height: $line-height;
+  $baseline-distance: ($line-height - $cap-height) / 2;
+  // if you use this mixin only on elements that have one direction margins
+  // http://csswizardry.com/2012/06/single-direction-margin-declarations/
+  // you can use this method with no worries.
+  @if $root != true {
+    padding-top: $baseline-distance * $base-font-size;
+    padding-top: $baseline-distance + rem;
+    margin-bottom: ($line-height - $baseline-distance) * $base-font-size;
+    margin-bottom: $line-height - $baseline-distance + rem;
+  }
+}

data/vendor/assets/stylesheets/ustyle/mixins/_forms.scss

@@ -0,0 +1,84 @@
+/// Style placeholder attributes on form elements
+///
+/// @author Joe Green
+
+@mixin placeholder($color) {
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1;
+  }
+
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+}
+
+/// Conveniently style form input pseudo-classes for different form states
+///
+/// @author Joe Green
+///
+/// @param {Color} $color
+///   The colour to be used for the form input's border and box-shadow
+
+@mixin form-element-style($color, $color--hover: false, $color--active: false) {
+  border-color: $color;
+
+  &:hover {
+    border-color: if($color--hover, $color--hover, $color);
+  }
+
+  &:focus,
+  &:checked {
+    border-color: if($color--active, $color--active, $color);
+  }
+}
+
+/// Visually make disabled form inputs look like they can't be interacted with
+///
+/// @author Joe Green
+///
+/// @param {Color} $color [#ddd]
+///   Foreground placeholder and border colour
+///
+/// @param {Color} $background-color [#fafafa]
+///   Background colour of the form input
+
+@mixin form-element-disabled($color: $c-form-element-disabled-fg, $background: $c-form-element-disabled-bg) {
+  @include form-element-style($c-form-element-disabled-border);
+  @include placeholder($color);
+  color: $color;
+  background-color: $background;
+  cursor: default;
+
+  &:focus {
+    @include placeholder($color);
+    box-shadow: none;
+  }
+}
+
+/// Creates a larger version of a form input, allows us to set the styles
+/// in a responsive manner
+///
+/// @author David Annez
+/// @group Forms
+///
+/// @param {String} $input-size [base]
+///   Name of the size used in the form element list
+///
+/// @param {List} $input-sizes [$form-element-sizes]
+///   List of sizes to pass through. Should contain 4 values per item,
+///   `(size-name, height, padding, font-size)`
+
+@mixin input-sizing($input-size: base, $input-sizes: $form-element-sizes) {
+  @each $size in $input-sizes {
+    @if nth($size, 1) == $input-size {
+      height: nth($size, 2);
+      padding: nth($size, 3);
+      font-size: nth($size, 4);
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/mixins/_general.scss

@@ -0,0 +1,24 @@
+/// Clearfix mixin - http://nicolasgallagher.com/micro-clearfix-hack/
+///
+/// @author Nicolas Gallagher
+
+@mixin clearfix {
+  &:before,
+  &:after {
+    display: table;
+    content: " ";
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+@mixin hidpi($dpi: 2) {
+  @media
+  (-webkit-min-device-pixel-ratio: $dpi),
+  (min-device-pixel-ratio: $dpi),
+  (min-resolution: #{$dpi}dppx) {
+    @content;
+  }
+}

data/vendor/assets/stylesheets/ustyle/mixins/_link-colors.scss

@@ -0,0 +1,44 @@
+/// Link colors mixin, inspired by Compass
+/// https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/typography/links/_link-colors.scss
+///
+/// @author Chris Eppstein
+///
+/// @param {String} $base-color
+///   The starting color for the link element
+///
+/// @param {String} $hover [false]
+///   The color for the :hover state of the element
+///
+/// @param {String} $active [false]
+///   The color for the :active state of the element
+///
+/// @param {String} $visited [false]
+///   The color for the :visited state of the element
+///
+/// @param {String} $focus [false]
+///   The color for the :focus state of the element
+///
+
+@mixin link-colors($base-color, $hover: false, $active: false, $visited: false, $focus: false) {
+  color: $base-color;
+  @if $visited {
+    &:visited {
+      color: $visited;
+    }
+  }
+  @if $focus {
+    &:focus {
+      color: $focus;
+    }
+  }
+  @if $hover {
+    &:hover {
+      color: $hover;
+    }
+  }
+  @if $active {
+    &:active {
+      color: $active;
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/mixins/_media-query.scss

@@ -0,0 +1,121 @@
+// --------------------------
+// ! Respond to device mixins
+// --------------------------
+
+////
+//// @author David Annez
+//// @group media-queries
+////
+
+// ----------
+// Legacy support
+// ----------
+
+/// IE8 is no longer supported, but on an opt-in basis for applications.
+/// DEPRECATED: Set this to `true` if you do want .ie8 classes to be spat out for media queries
+///
+/// @type Bool
+
+$media-query-legacy-support: false !default;
+
+/// Breakpoint for extra large desktops
+///
+/// @type Number (unit)
+
+$extra-large-desktop-width: 1600px !default;
+
+/// Breakpoint for large desktops
+///
+/// @type Number (unit)
+
+$large-desktop-width: 1200px !default;
+
+/// Breakpoint for desktop
+///
+/// @type Number (unit)
+
+$desktop-width: 992px !default;
+
+/// Breakpoint for tablet
+///
+/// @type Number (unit)
+
+$tablet-width: 768px !default;
+
+/// Breakpoint for small tablets
+///
+/// @type Number (unit)
+
+$small-tablet-width: 600px !default;
+
+/// Breakpoint for mobile
+///
+/// @type Number (unit)
+
+$mobile-width: 480px !default;
+
+/// Max-breakpoint for mobiles
+///
+/// @require {variable} small-tablet-width
+/// @type Number (unit)
+
+$mobile-end-width: $small-tablet-width - 1;
+
+/// Max-breakpoint for small tablets
+///
+/// @require {variable} tablet-width
+/// @type Number (unit)
+
+$small-tablet-end-width: $tablet-width - 1;
+
+/// Max-breakpoint for tablets
+///
+/// @require {variable} desktop-width
+/// @type Number (unit)
+
+$tablet-end-width: $desktop-width - 1;
+
+/// A list containing the devices for `min-width` media-query breakpoints
+///
+/// @type List
+
+$min-breakpoints: (small-tablet, $small-tablet-width), (tablet, $tablet-width), (desktop, $desktop-width), (large-desktop, $large-desktop-width), (extra-large-desktop, $extra-large-desktop-width) !default;
+
+/// A list containing the devices for `max-width` media-query breakpoints
+///
+/// @type List
+
+$max-breakpoints: (mobile, $mobile-end-width), (to-small-tablet, $small-tablet-end-width), (to-tablet, $tablet-end-width) !default;
+
+$devices: ();
+
+@each $breakpoint in $min-breakpoints {
+  $devices: append($devices, (nth($breakpoint, 1), min, nth($breakpoint, 2)), comma);
+}
+
+@each $breakpoint in $max-breakpoints {
+  $devices: append($devices, (nth($breakpoint, 1), max, nth($breakpoint, 2)), comma);
+}
+
+/// Output a media query block for the targeted device and a potential internet explorer fallback
+///
+/// @param {String} $device
+///   The device to match up the media query with. Can be one from the list of `$min-breakpoints` (`small-tablet`, `tablet`, `desktop` etc.)
+///   or `$max-breakpoints` (`mobile`, `to-small-tablet`, `to-tablet`)
+///
+/// @param {Bool} $ie-fallback [false]
+///   DEPRECATED: If set to `true` will return a `.ie8` {content} fallback to ensure IE8 gets the supporting styling
+///
+/// @param {Bool} $ie-fallback-noherit [false]
+///   DEPRECCATED: If attaching the mixin onto the root, then set this to `true` to ensure Sass builds the correct styles
+///
+
+@mixin respond-to($device, $ie-fallback: false, $ie-fallback-noherit: false) {
+  @each $listed-device in $devices {
+    @if nth($listed-device, 1) == $device {
+      @media screen and (#{unquote("#{nth($listed-device, 2)}-width:") nth($listed-device, 3)}) {
+        @content;
+      }
+    }
+  }
+}