reustyle 2.0.7

data/vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss

@@ -0,0 +1,144 @@
+// @page Pattern Library/Forms
+// @name Radios and checkboxes
+//
+// @description
+//   Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.
+//
+//   #### Best practices
+//   * Like select boxes, radio buttons are good for making a selection from a mutually exclusive list of options. The main difference between the two is that with radio buttons, the user must choose exactly one of the options.
+//   * Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.
+//   * Checkboxes in a group should be used for choosing zero or more options from a list of independent options. Toggling one should not change the state of others in the group.
+//   * A stand-alone checkbox is good for toggling something on/off or opting in/out.
+//   * Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.
+//   * Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.
+//
+// @state us-form-input--disabled - Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with.
+//
+// @markup
+//   <div class="us-field us-field--blocked">
+//     <label>Do you have a different billing address?</label>
+//     <div class="us-field-toggle">
+//       <label>
+//         <input checked="checked" class="us-form-input {$modifiers}" name="null" type="radio">
+//         Yes
+//       </label>
+//
+//       <label>
+//         <input class="us-form-input" name="null" type="radio">
+//         No
+//       </label>
+//     </div>
+//   </div>
+//
+//   <div class="us-field us-field--blocked">
+//     <label>How would you like to be contacted?</label>
+//     <div class="us-field-toggle">
+//       <label>
+//         <input checked="checked" class="us-form-input {$modifiers}" name="null" type="checkbox">
+//         Mobile
+//       </label>
+//
+//       <label>
+//         <input class="us-form-input" name="null" type="checkbox">
+//         Email
+//       </label>
+//     </div>
+//   </div>
+
+.us-form-input {
+  @include hidpi(.1) {
+    &[type="checkbox"] {
+      &:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        width: 1em;
+        height: 1em;
+        margin: -.5em 0 0 -.5em;
+        pointer-events: none;
+        background-image: inline-svg("forms/checkbox-rebrand.svg");
+        background-position: 0 75%;
+        background-size: cover;
+        content: "";
+        opacity: 0;
+      }
+
+      &:focus {
+        border-width: 2px;
+      }
+
+      &:checked:after {
+        opacity: 1;
+      }
+
+      &.us-form-input--disabled,
+      &:disabled {
+        background: $c-form-element-disabled-bg;
+
+        // scss-lint:disable NestingDepth
+        &:after {
+          opacity: 0;
+        }
+      }
+
+      &.us-form-input--disabled {
+
+        // scss-lint:disable NestingDepth
+        &:checked:after {
+          background-position: 0 50%;
+          opacity: .35;
+        }
+      }
+    }
+
+    &[type="radio"] {
+
+      &:checked,
+      &:checked:focus {
+        background: $c-form-element-border-active;
+      }
+
+      &:focus {
+        box-shadow: inset 0 0 0 2px $c-form-element-border-hover;
+      }
+
+      &:checked {
+        box-shadow: inset 0 0 0 .35em #fff;
+      }
+
+      &:checked:focus {
+        box-shadow: inset 0 0 0 1px $c-form-element-border-hover, inset 0 0 0 .35em #fff;
+      }
+
+      &.us-form-input--disabled:checked {
+        background: $c-form-element-disabled-fg;
+        box-shadow: inset 0 0 0 .35em $c-form-element-disabled-bg;
+      }
+    }
+  }
+
+  &[type="checkbox"],
+  &[type="radio"] {
+    position: relative;
+    width: 1.6em;
+    height: 1.6em;
+    padding: 0;
+    font-size: .8em;
+    cursor: pointer;
+
+    .us-field-toggle & {
+      margin-top: .1em;
+      margin-right: .5em;
+      vertical-align: top;
+    }
+  }
+
+  &[type="radio"] {
+    border-radius: 50%;
+  }
+
+  &[type="checkbox"] {
+    border-radius: .3em;
+  }
+}

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

@@ -0,0 +1,21 @@
+%base-form-element {
+  @include form-element-style($c-form-element-border, $c-form-element-border-hover, $c-form-element-border-active);
+  display: inline-block;
+  color: $c-form-element-text;
+  vertical-align: middle;
+  background: $c-form-element-background;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  -ms-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+%base-form-element--error {
+  @include form-element-style($c-form-error);
+}
+
+%base-form-element--success {
+  @include form-element-style($c-form-success);
+}

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

@@ -0,0 +1,154 @@
+// @page Pattern Library/Forms
+// @name Selects
+//
+// @description
+//   Select boxes allow users to choose an 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-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);
+  @include input-sizing();
+  max-width: 100%;
+  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: "";
+    -moz-appearance: none;
+  }
+
+  &:focus {
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 $c-form-element-text;
+    }
+  }
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  @if $media-query-legacy-support {
+    .ie8 & {
+      padding: $form-element-base-padding;
+    }
+  }
+
+  .ie9 & {
+    padding: $form-element-base-padding;
+  }
+}
+
+.us-form-select-wrap--multiple, // [deprecated]
+.us-form-select--multiple,
+.us-form-select[multiple],
+.us-form-select[size] {
+  &,
+  .us-form-select {
+    height: auto;
+    overflow: hidden {
+      x: auto;
+      y: auto;
+    };
+    vertical-align: middle;
+    cursor: default;
+    background-image: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &:hover,
+  &:focus {
+    background-image: none;
+  }
+
+  option {
+    cursor: pointer;
+  }
+
+  &::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+
+    &:window-inactive {
+      opacity: 0;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, .2);
+    border: 4px solid rgba(0, 0, 0, 0);
+    border-radius: 8px;
+    background-clip: padding-box;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
+
+.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,114 @@
+// @page Pattern Library/Forms
+// @name Toggle
+//
+// @description
+//  Toggle buttons provide an 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 alternative 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: 10px 26px !default;
+$toggle-active-bg: $c-white !default;
+
+@mixin toggle-active-style {
+  background: $toggle-active-bg;
+  border-color: $c-form-element-border-active;
+  text-shadow: 1px 0 0 $c-form-element-text;
+  color: $c-uswitch-navy;
+}
+
+@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-grey;
+  text-align: center;
+  background-color: $c-form-element-background;
+  border: 1px solid $c-form-element-border;
+
+  .us-toggle__label:hover & {
+    border-color: $c-form-element-border-hover;
+  }
+
+  .us-toggle__label:focus &,
+  .us-toggle__label .us-form-input:focus + & {
+    color: $c-uswitch-navy;
+    border-color: $c-form-element-border-active;
+    box-shadow: inset 0 0 0 1px $c-form-element-border-active;
+  }
+
+  // [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__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;
+}