ustyle 1.3.6

data/vendor/assets/stylesheets/ustyle/forms/_select.scss

@@ -0,0 +1,125 @@
+// @page Pattern Library/Forms
+// @name Selects
+//
+// @description
+//   Select boxes allow users to choose and option or options from a list of options.
+//
+//   #### Best practices
+//   * Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.
+//   * It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.
+//
+// @state .us-form-select--multiple - Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size="" attribute set to anything higher than 1.
+// @state .us-form-select--blocked - Fluid style
+// @state .us-form-select--error - Visual feedback for when the input has an error
+// @state .us-form-select--success - Visual feedback for when success needs to be communicated to the user
+// @state .us-form-select--disabled - Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.
+//
+// @markup
+//   <select class="us-form-select {$modifiers}">
+//     <option>A select menu</option>
+//     <option>With lots of options</option>
+//     <option>And a few more</option>
+//   </select>
+
+$select-base-padding: 5px 10px !default;
+$select-default-color: $c-form-element-border !default;
+$select-hover-color: $c-form-element-border-hover !default;
+
+@function select-arrow($color) {
+  @return url("data:image/svg+xml;charset=utf-8;base64," + base64encode("<svg version='1.1' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='40px' height='6px' viewBox='0 0 40 6'><polygon fill='#{$color}' points='25.3,0 20.3,6 15.3,0 '/></svg>"));
+}
+
+@mixin select-background($color, $color--active: false) {
+  background-image: select-arrow($color);
+
+  &:hover,
+  &:focus {
+    background-image: select-arrow(if($color--active, $color--active, $color));
+  }
+}
+
+// [deprecated]
+.us-form-select-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.us-form-select {
+  @extend %base-form-element;
+  @include select-background($select-default-color, $select-hover-color);
+  padding: $select-base-padding;
+  padding-right: 40px;
+  cursor: pointer;
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
+  outline: 0;
+
+  // [nodoc] Fix for FF < 35 https://gist.github.com/joaocunha/6273016/
+  @-moz-document url-prefix() {
+    text-indent: .01px;
+    text-overflow: "";
+  }
+
+  &:focus {
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 $c-form-element-text;
+    }
+  }
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  .ie8 &,
+  .ie9 & {
+    padding: $select-base-padding;
+  }
+}
+
+.us-form-select-wrap--multiple, // [deprecated]
+.us-form-select--multiple,
+.us-form-select[multiple] {
+  &,
+  .us-form-select {
+    height: auto;
+    padding: $select-base-padding;
+    overflow: auto;
+    vertical-align: middle;
+    cursor: default;
+    background-image: none;
+  }
+
+  &:hover,
+  &:focus {
+    background-image: none;
+  }
+
+  option {
+    padding: .3em 5px;
+    cursor: pointer;
+  }
+}
+
+.us-form-select-wrap--blocked, // [deprecated]
+.us-form-select--blocked {
+  width: 100%;
+}
+
+.us-form-select-wrap--disabled, // [deprecated]
+.us-form-select--disabled,
+.us-form-select:disabled {
+  &,
+  .us-form-select {
+    @include form-element-disabled;
+    @include select-background($c-form-element-disabled-fg);
+  }
+}
+
+.us-form-select--error {
+  @extend %base-form-element--error;
+}
+
+.us-form-select--success {
+  @extend %base-form-element--success;
+}

data/vendor/assets/stylesheets/ustyle/forms/_textarea.scss

@@ -0,0 +1,33 @@
+// @page Pattern Library/Forms
+// @name Textarea
+//
+// @description
+//   Our standard textarea styling across the website.
+//
+//
+// @state .us-form-textarea--blocked - Fluid textarea style
+// @state .us-form-textarea--disabled - Inactive state for textareas that can't be interacted with
+//
+// @markup
+//   <textarea class="us-form-textarea {$modifiers}"></textarea>
+
+.us-form-textarea {
+  @extend %base-form-element;
+  @extend %input-background--normalise;
+  padding: $form-element-base-padding;
+  font-size: 1em;
+  outline: 0;
+
+  &:focus {
+    @include placeholder(darken($input-placeholder-color, 15%));
+  }
+}
+
+.us-form-textarea--blocked {
+  width: 100%;
+}
+
+.us-form-textarea:disabled,
+.us-form-textarea--disabled {
+  @include form-element-disabled;
+}

data/vendor/assets/stylesheets/ustyle/forms/_toggle.scss

@@ -0,0 +1,125 @@
+// @page Pattern Library/Forms
+// @name Toggle
+//
+// @description
+//  Toggle buttons provide and alternative way of displaying radio groups with a small number of options to a user.
+//  IE8 support is included with `radioToggle.js` which sets a `.checked` class on the radio button when clicked.
+//
+//  #### Best practices
+//  * Use as an alternation to radio groups that have short labels for each option (Yes/No, Opt-in/Opt-out).
+//  * For forms that have many short radio group questions in them, toggle buttons provide a better experience for quickly selecting answers on both desktop and mobile due to larger visible click areas for each option.
+//  * Limit the number of options in the toggle group to 3.
+//
+// @state .us-toggle__btn--disabled - Visual styling for toggle buttons that can't be interacted with
+//
+// @javascript
+//   var radioToggle = new RadioToggle({
+//     $target: $(".us-toggle")
+//   })
+//
+// @markup
+//   <div class="us-field us-field--blocked">
+//     <label>Answer truthfully</label>
+//     <div class="us-toggle">
+//       <label class="us-toggle__label">
+//         <input class="us-form-input" name="choice" type="radio">
+//         <span class="us-toggle__btn {$modifiers}">
+//           Yes
+//         </span>
+//       </label>
+//
+//       <label class="us-toggle__label">
+//         <input class="us-form-input" name="choice" type="radio">
+//         <span class="us-toggle__btn">
+//           No
+//         </span>
+//       </label>
+//     </div>
+//   </div>
+
+$toggle-btn-padding: 5px 30px !default;
+$toggle-default-bg: #fff !default;
+$toggle-default-border: $c-bordergrey !default;
+$toggle-hover-border: $c-typecyan !default;
+$toggle-active-bg: $c-cyan-light !default;
+$toggle-active-border: $c-typecyan !default;
+
+@mixin toggle-active-style {
+  background: $toggle-active-bg;
+  border-color: $toggle-active-border;
+}
+
+@mixin toggle-disabled-style {
+  color: $c-form-element-disabled-fg;
+  background-color: $c-form-element-disabled-bg;
+  border-color: $c-form-element-disabled-fg;
+}
+
+.us-toggle {
+  @extend %clearfix;
+  display: block;
+
+  @include respond-to($default-grid-breakpoint, true) {
+    display: inline-block;
+  }
+}
+
+.us-toggle__label {
+  position: relative;
+  float: left;
+  width: 50%;
+  vertical-align: middle;
+  cursor: pointer;
+
+  @include respond-to($default-grid-breakpoint, true) {
+    width: auto;
+  }
+
+  // Don't hide inputs due to tabbing
+  .us-form-input {
+    position: absolute;
+    left: -999em;
+  }
+}
+
+.us-toggle__btn {
+  display: block;
+  padding: $toggle-btn-padding;
+  color: $c-form-element-text;
+  text-align: center;
+  background-color: $c-form-element-background;
+  border: 1px solid $toggle-default-border;
+
+  .us-toggle__label:hover & {
+    border-color: $toggle-hover-border;
+  }
+
+  .us-toggle__label:focus &,
+  .us-toggle__label .us-form-input:focus + & {
+    border-color: $toggle-hover-border;
+    box-shadow: inset 0 0 0 1px $toggle-hover-border;
+  }
+
+  // [nodoc] Legacy, as grouping selectors will fail on pseudo-selector :checked
+  .us-toggle__label .us-form-input.checked + & {
+    @include toggle-active-style;
+  }
+
+  .us-toggle__label .us-form-input:checked + & {
+    @include toggle-active-style;
+  }
+
+  .us-toggle__label:first-child & {
+    border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+
+  .us-toggle__label:last-child & {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+}
+
+.us-toggle__btn--disabled {
+  @include form-element-disabled;
+}

data/vendor/assets/stylesheets/ustyle/forms/_validation.scss

@@ -0,0 +1,104 @@
+// @page Pattern Library/Forms
+// @name Validation messages
+//
+// @description
+//   Used to provide more detailed feedback about the data users have entered into forms.
+//
+//   #### Best practices
+//   * For inputs that have a label above them, place the validation message between the input and the label.
+//   * Use success validation messages only when it makes sense to contextually. For example, they can help to reassure users about the data they entered when multiple criteria need to be satisfied, e.g. password fields.
+//
+// @state .us-validation--error - Error styling for incorrect data on forms
+// @state .us-validation--success - Success styling for correct forms
+//
+// @markup
+//   <div class="us-field">
+//     <label>Email</label>
+//
+//     <div class="us-validation {$modifiers}">
+//       <div class="us-validation__icon"></div>
+//       <div class="us-validation__message">Validation message here</div>
+//     </div>
+//
+//     <input type="email" class="us-form-input" name="email" />
+//   </div>
+
+$message-padding-vertical: .35em !default;
+$message-padding-horizontal: .5em !default;
+$message-min-height: 2.4em !default;
+
+$icon-size: 18px !default;
+$icon-bg-size: 26px !default;
+$icon-text-color: #fff !default;
+
+$error-color: $c-red !default;
+$error-icon: "!" !default;
+
+$success-color: $c-green !default;
+$success-icon: "\2713" !default;
+
+@mixin validation-style($color, $icon) {
+  .us-validation__message {
+    color: $color;
+    border-color: $color;
+
+    &:before,
+    &:after {
+      border-color: $color;
+    }
+
+    &:after {
+      border-right-color: #fff;
+    }
+  }
+
+  .us-validation__icon {
+    background-color: $color;
+
+    &:before {
+      content: $icon;
+    }
+  }
+}
+
+%validation-icon {
+  @include heading-font;
+  position: absolute;
+  color: $icon-text-color;
+  text-align: center;
+  border-radius: 50%;
+}
+
+.us-validation {
+  position: relative;
+  display: block;
+  padding: .25em 0 .25em ($icon-bg-size + 5);
+}
+
+.us-validation,
+.us-validation--error {
+  @include validation-style($error-color, $error-icon);
+}
+
+.us-validation--success {
+  @include validation-style($success-color, $success-icon);
+}
+
+.us-validation__message {
+  position: relative;
+  display: block;
+  min-height: $message-min-height;
+  padding: $message-padding-vertical $message-padding-horizontal;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.us-validation__icon {
+  @extend %validation-icon;
+  top: 10px;
+  left: 0;
+  width: $icon-bg-size;
+  height: $icon-bg-size;
+  font-size: $icon-size;
+  line-height: $icon-bg-size;
+}

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

@@ -0,0 +1,239 @@
+// @page Design/Icons
+// @name Icons
+// @partial icons
+// 
+// @description
+//   Icons are created by chaining classes together with `us-icon`. There are 3 sizes, 16px, 32px, 64px, these are named `us-icon--small`, `us-icon--medium` and `us-icon--large` respectively. 
+//
+//   There are 5 colours for each icon, *white*, *typegrey*, *inputgrey*, *typecyan* and *custom*. Where *custom* can differ depending on what the icon represents (for logos, the custom tends to be the brand colour of that company). If you want an icon to be part of a **:pseudo** element (:before, :after) then suffix your icon name with `--before` and `--after` respectively. To have an icon standalone with text as fallback, add `us-icon--notext` to the element.
+// 
+// @state us-icon--alarm
+// @state us-icon--android
+// @state us-icon--angry
+// @state us-icon--apple
+// @state us-icon--arrow-circle
+// @state us-icon--arrow-up-left
+// @state us-icon--arrow-up
+// @state us-icon--barchart
+// @state us-icon--blackberry
+// @state us-icon--book
+// @state us-icon--bookmark
+// @state us-icon--breadcrumb
+// @state us-icon--calculator
+// @state us-icon--calendar
+// @state us-icon--car
+// @state us-icon--checkbox-tick
+// @state us-icon--clock
+// @state us-icon--close
+// @state us-icon--cog
+// @state us-icon--credit-card
+// @state us-icon--cross
+// @state us-icon--desktop
+// @state us-icon--doc
+// @state us-icon--down-arrow
+// @state us-icon--dual-fuel
+// @state us-icon--electric-light
+// @state us-icon--envelope
+// @state us-icon--exit-noexit
+// @state us-icon--facebook
+// @state us-icon--filter
+// @state us-icon--fixed-variable
+// @state us-icon--gas
+// @state us-icon--gauge
+// @state us-icon--github
+// @state us-icon--google
+// @state us-icon--graph-up
+// @state us-icon--happy
+// @state us-icon--home
+// @state us-icon--hot
+// @state us-icon--info
+// @state us-icon--kettle
+// @state us-icon--key
+// @state us-icon--laptop
+// @state us-icon--lock
+// @state us-icon--magnify-in
+// @state us-icon--magnify-out
+// @state us-icon--magnify
+// @state us-icon--menu
+// @state us-icon--message
+// @state us-icon--mobile
+// @state us-icon--monthly-dd
+// @state us-icon--neutral
+// @state us-icon--no-exit
+// @state us-icon--pdf
+// @state us-icon--pencil
+// @state us-icon--person-add
+// @state us-icon--person
+// @state us-icon--phone
+// @state us-icon--piggy-bank
+// @state us-icon--pin
+// @state us-icon--pound-note
+// @state us-icon--power
+// @state us-icon--present
+// @state us-icon--print
+// @state us-icon--quarterly-dd
+// @state us-icon--question-circle
+// @state us-icon--question
+// @state us-icon--quote
+// @state us-icon--recycle
+// @state us-icon--remove
+// @state us-icon--renewable
+// @state us-icon--results
+// @state us-icon--sad
+// @state us-icon--save
+// @state us-icon--share
+// @state us-icon--sim
+// @state us-icon--smiley
+// @state us-icon--sort
+// @state us-icon--speech-circle
+// @state us-icon--speech
+// @state us-icon--spinner
+// @state us-icon--star-half
+// @state us-icon--star
+// @state us-icon--starline-half
+// @state us-icon--starline
+// @state us-icon--tablet
+// @state us-icon--talk
+// @state us-icon--tick-circle
+// @state us-icon--tick
+// @state us-icon--tv
+// @state us-icon--twitter
+// @state us-icon--uswitch
+// @state us-icon--variable
+// @state us-icon--warning-circle
+// @state us-icon--warning
+// @state us-icon--wifi
+// @state us-icon--wiki
+// @state us-icon--windows
+// @state us-icon--wondering
+// @state us-icon--world
+// @state us-icon--xml
+// @state us-icon--play
+// @state us-icon--controller
+// @state us-icon--pound-circle
+// 
+// @markup
+//  <div class="us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan {$modifiers}"></div>
+
+@import "ustyle/basics/variables/icons";
+
+/// Returns a background position for the number of `$icon-colors`
+///
+/// @group icons
+/// @author David Annez
+/// 
+/// @require {Variable} icon-colors
+/// 
+/// @param {String} $color
+///   The matching colour string from the list of colours
+///   
+/// @param {Bool} $parent [false]
+///   If set to true, you can use this on a parent element and any icon within the parent
+///   will have this icon colour. Especially useful for hover on buttons or larger elements.
+
+@mixin icon-color($color, $parent: false) {
+  $position: 0 (index($icon-colors, $color) - 1) * 25%;
+
+  @if $parent {
+    [class^="us-icon--"],
+    [class*=" us-icon--"] {
+      background-position: $position;
+    }
+  } @else {
+    background-position: $position;
+  }
+}
+
+@if $load-icons {
+  [class^="us-icon--"],
+  [class*=" us-icon--"] {
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  [class^="us-icon--before"]:before,
+  [class*=" us-icon--before"]:before,
+  [class^="us-icon--after"]:after,
+  [class*=" us-icon--after"]:after {
+    display: inline-block;
+    vertical-align: middle;
+    pointer-events: none;
+    background-size: cover;
+    content: " ";
+  }
+
+  [class^="us-icon--before"]:before,
+  [class*=" us-icon--before"]:before {
+    margin-right: $gutter-width/4;
+  }
+
+  [class^="us-icon--after"]:after,
+  [class*=" us-icon--after"]: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
+  //
+
+  @each $color in $icon-colors {
+    .us-icon--#{$color},
+    .us-icon--#{$color}--after:after,
+    .us-icon--#{$color}--before:before {
+      @include icon-color($color);
+    }
+
+    .us-icon--hover-#{$color}:hover,
+    .us-icon--hover-#{$color}--after:hover:after,
+    .us-icon--hover-#{$color}--before:hover:before {
+      @include icon-color($color);
+    }
+  }
+
+  //
+  // ICON SIZING
+  //
+
+  @each $size in $icon-sizes {
+    $size-name: nth($size, 1);
+    $width: nth($size, 2);
+    $height: nth($size, 3);
+
+    .us-icon--#{$size-name},
+    .us-icon--#{$size-name}--after:after,
+    .us-icon--#{$size-name}--before:before {
+      width: $width;
+      height: $height;
+    }
+
+    @include respond-to(to-small-tablet) {
+      .us-icon--#{$size-name}--sm-tablet,
+      .us-icon--#{$size-name}--after--sm-tablet:after,
+      .us-icon--#{$size-name}--before--sm-tablet:before {
+        width: $width !important;
+        height: $height !important;
+      }
+    }
+
+    @include respond-to(mobile) {
+      .us-icon--#{$size-name}--mobile,
+      .us-icon--#{$size-name}--after--mobile:after,
+      .us-icon--#{$size-name}--before--mobile:before {
+        width: $width !important;
+        height: $height !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+////
+//// @group icons
+////
+
+/// Output classes to build the PNG icons
+///
+///
+/// @param {String} $icon-name
+///   Icon name that matches one of the ones in the list
+///
+/// @param {String} $size-name
+///   Size name for the class-naming convention
+///
+/// @param {String} $size-px
+///   Used to build folder structure of PNG fallbacks in different sizes
+
+@mixin png-bg-icon($icon-name, $size-name, $size-px) {
+  .us-icon--#{$icon-name}.us-icon--#{$size-name},
+  .us-icon--#{$icon-name}--after.us-icon--#{$size-name}--after:after,
+  .us-icon--#{$icon-name}--before.us-icon--#{$size-name}--before:before {
+    background-image: url(ustyle-image-path("#{$base-icon-path}#{$size-px}/#{$icon-name}.png"));
+  }
+}
+
+@each $icon in $icons {
+  @each $size in $icon-sizes {
+    $size-name: nth($size, 1);
+    $pixels: nth($size, 2);
+    @if $svg-first == false {
+      @include png-bg-icon($icon, $size-name, $pixels);
+    } @else {
+      #{$png-support-class} {
+        @include png-bg-icon($icon, $size-name, $pixels);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+////
+//// @group icons
+////
+
+/// Output classes to build the SVG icons
+///
+/// @param {String} $icon-name
+///   Icon name that matches one of the ones in the list
+
+@mixin svg-bg-icon($icon-name) {
+  .us-icon--#{$icon-name},
+  .us-icon--#{$icon-name}--after:after,
+  .us-icon--#{$icon-name}--before:before {
+    background-image: inline-svg("#{$base-icon-path}#{$icon-name}.svg");
+  }
+}
+
+@if $load-icons {
+  @each $icon in $icons {
+    @if $svg-first {
+      @include svg-bg-icon($icon);  
+    }
+    @else {
+      #{$svg-support-class} {
+        @include svg-bg-icon($icon);
+      }
+    }
+  }  
+}