ustyle 1.3.6

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

@@ -0,0 +1,81 @@
+// These are the stylings for sign up/sign in
+.us-login__hero--signup {
+  @include respond-to(tablet, true) {
+    margin-bottom: 0;
+  }
+}
+
+.us-login__hero-title {
+  margin-bottom: 1em;
+}
+
+.us-login {
+  position: relative;
+  width: 100%;
+
+  @include respond-to(small-tablet, true) {
+    width: em(340px);
+  }
+}
+
+.us-login__container {
+  position: relative;
+  overflow: hidden;
+
+  @if $html-grid-classes == false {
+    * {
+      box-sizing: border-box;
+    }
+
+    a {
+      text-decoration: none;
+      transition: color 333ms, border-color 333ms;
+    }
+  }
+
+  .trailered {
+    margin-bottom: $gutter-width / 2;
+  }
+}
+
+.us-login__form {
+  display: none;
+  transition: transform 300ms;
+
+  &.login-state--active {
+    display: block;
+  }
+  
+  .us-login__input {
+    display: block;
+    width: 100%;
+  }
+}
+
+.us-login__title {
+  @extend %heading-3;
+  color: $c-typegrey;
+}
+
+.us-login__additional-link {
+  @extend %small-font;
+  @include link-colors($c-typegrey-2, $c-typecyan, $c-typegrey-2, $c-typegrey-2);
+  display: block;
+}
+
+.us-login__extra {
+  padding: 1.5em $gutter-width / 2;
+  color: $c-typegrey-2;
+}
+
+.us-login__small-text {
+  @extend %small-font;
+  margin-top: .5em;
+  color: $c-typegrey-2;
+}
+
+.us-login__newsletter {
+  input {
+    margin-right: .5em;
+  }
+}

data/vendor/assets/stylesheets/ustyle/login/_password-help.scss

@@ -0,0 +1,61 @@
+.pass-helper__wrapper {
+  input {
+    position: relative;
+    z-index: 1;
+    background-color: transparent !important;
+  }
+}
+
+.pass-helper__meter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  background-color: #fff;
+  border-radius: 3px;
+
+  div {
+    height: 100%;
+    text-indent: -999em;
+    transition: all 300ms ease-in-out;
+  }
+
+  .very-weak {
+    width: 25%;
+    background-color: #ffd;
+  }
+
+  .weak {
+    width: 50%;
+    background-color: #fddfd0;
+  }
+
+  .medium {
+    width: 75%;
+    background-color: #fff6c5;
+  }
+
+  .strong {
+    width: 100%;
+    background-color: #dffec2;
+  }
+}
+
+.pass-helper__show-hide {
+  position: absolute;
+  top: 50%;
+  right: .5em;
+  z-index: 2;
+  margin-top: -.5em;
+  font-size: 12px;
+  line-height: 1;
+  color: $c-typecyan;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  @include respond-to(mobile) {
+    font-size: 10px;
+  }
+}

data/vendor/assets/stylesheets/ustyle/login/_social.scss

@@ -0,0 +1,63 @@
+// Social buttons - shared across login containers
+.us-social__container {
+  @extend %clearfix;
+  position: relative;
+}
+
+.us-social__cta {
+  @extend %reset-box-model;
+  padding-top: $gutter-width / 4;
+  padding-bottom: $gutter-width / 4;
+}
+
+.us-social__buttons {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.us-social__btn {
+  @include link-colors($c-blue, $c-typecyan, $c-blue, $c-blue, darken($c-blue, 15%));
+  display: block;
+  float: left;
+  margin-left: .5em;
+  text-decoration: none;
+  
+  &:hover {
+    .us-social__btn-text {
+      max-width: 400px;
+      margin-left: 5px;
+    }
+  }
+}
+
+.us-social__btn-text,
+.us-social__btn-icon {
+  position: relative;
+  vertical-align: middle;
+}
+
+.us-social__btn-text {
+  @extend %small-font;
+  z-index: 1;
+  display: inline-block;
+  max-width: 0;
+  overflow: hidden;
+  transition: max-width 300ms;
+}
+
+.us-social__btn-icon {
+  z-index: 5;
+  font-size: 2em;
+  line-height: 1.15em;
+}
+
+$social-buttons: ("facebook", #3b5998), ("google", #e74c3c), ("twitter", #55acee);
+
+@each $button in $social-buttons {
+  .us-social__btn--#{nth($button, 1)} {
+    .us-social__btn-icon {
+      color: nth($button, 2);
+    }
+  }
+}

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,8 @@
+@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/rgba-inline";
+@import "ustyle/mixins/forms";

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

@@ -0,0 +1,41 @@
+////
+//// @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) {
+  // 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.
+  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,62 @@
+/// 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--active: false) {
+  border-color: $color;
+
+  &:hover,
+  &:focus,
+  &:checked {
+    border-color: if($color--active, $color--active, $color);
+  }
+
+  &:focus {
+    box-shadow: inset 0 0 0 1px 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($color);
+  @include placeholder($color);
+  color: $color;
+  background-color: $background;
+  cursor: default;
+
+  &:focus {
+    @include placeholder($color);
+    box-shadow: none;
+  }
+}

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,116 @@
+// --------------------------
+// ! Respond to device mixins
+// --------------------------
+
+////
+//// @author David Annez
+//// @group media-queries
+////
+
+/// 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) !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
+///
+/// @require {Variable} devices
+///
+/// @param {String} $device
+///   The device to match up the media query with. Can be one from the list of `$min-breakpoints`
+///   or `$max-breakpoints`
+///
+/// @param {Bool} $ie-fallback [false]
+///   If set to `true` will return a `.ie8` {content} fallback to ensure IE8 gets the supporting styling
+///
+/// @param {Bool} $ie-fallback-noherit [false]
+///   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;
+      }
+      @if $ie-fallback {
+        .ie8 & {
+          @content;
+        }
+      }
+      @if $ie-fallback-noherit {
+        .ie8 {
+          @content;
+        }
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/mixins/_rgba-inline.scss

@@ -0,0 +1,18 @@
+/// Pixel size for generated base64 PNG
+/// @type Number (unitless)
+
+$rgba-pixel-size: 5 !default;
+
+/// Returns a base64 fallback PNG of an `rgba` background for older browsers
+///
+/// @author David Annez - base off Aaron Russell's Compass implementation
+///
+/// @param {Color} $color
+///   The rgba color to be converted
+/// @param {Number (unitless)} $pixels [$rgba-pixel-size]
+///   Size of base64 PNG
+
+@mixin rgba-inline($color, $pixels: $rgba-pixel-size) {
+  background: rgba-inline($color, $pixels);
+  background: $color;
+}

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

@@ -0,0 +1,98 @@
+////
+//// @group typography
+////
+
+/// Returns the `$normal-font` declaration either as an extend or re-declares
+///
+/// @param {Bool} $extend [true]
+///   If set to `false` will redeclare the `$normal-font` family
+
+@mixin normal-font($extend: true) {
+  @if $extend {
+    @extend %normal-font;
+  } @else {
+    font-family: $normal-font;
+  }
+}
+
+/// Returns the `$heading-font` declaration either as an extend or re-declares
+///
+/// @param {Bool} $extend [true]
+///   If set to `false` will redeclare the `$heading-font` family
+
+@mixin heading-font($extend: true) {
+  @if $extend {
+    @extend %heading-font;
+  } @else {
+    font: {
+      family: $heading-font;
+      weight: 700;
+    };
+  }
+}
+
+/// Returns the `$heading-font-primary` declaration either as an extend or re-declares
+///
+/// @deprecated Use `heading-font` instead
+/// @alias heading-font
+/// @param {Bool} $extend [true]
+///   If set to `false` will redeclare the `$heading-font-primary` family
+
+@mixin heading-font-primary($extend: true) {
+  @include heading-font($extend);
+}
+
+/// Returns the `$heading-font-secondary` declaration either as an extend or re-declares
+///
+/// @deprecated Use `heading-font` instead
+/// @alias heading-font
+/// @param {Bool} $extend [true]
+///   If set to `false` will redeclare the `$heading-font-secondary` family
+
+@mixin heading-font-secondary($extend: true) {
+  @include heading-font($extend);
+}
+
+/// Returns the `$heading-font-secondary` declaration either as an extend or re-declares
+///
+/// @alias heading-font-secondary
+
+@mixin bold-font($extend: true) {
+  @include heading-font($extend);
+}
+
+/// Returns the `$normal-font` declaration in italic either as an extend or re-declares
+///
+/// @param {Bool} $extend [true]
+///   If set to `false` will redeclare the `$normal-font` family and set the font to italic
+
+@mixin italic-font($extend: true) {
+  @if $extend {
+    @extend %italic-font;
+  } @else {
+    font: {
+      family: $normal-font;
+      style: italic;
+    };
+  }
+}
+
+/// Builds the heading font size with pre-defined sizes and line-heights from `$heading-font-sizes`
+/// and `$heading-line-heights` respecively
+///
+/// @param {Number (unitless)} $level
+///   Set a heading level between 1-6
+///
+/// @param {Bool} $heading-font [true]
+///   DEPRECATED
+///
+/// @param {Bool} $extend [true]
+///   If set to `false` will redeclare the font-family settings
+
+@mixin heading($level, $heading-font: true, $extend: true) {
+  $font-size: nth($heading-font-sizes, $level);
+  $line-height: nth($heading-line-heights, $level);
+  @include heading-font($extend);
+  font-size: em($font-size);
+  line-height: $line-height + em;
+}

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

@@ -0,0 +1,4 @@
+@import "ustyle/tables/variables";
+@import "ustyle/tables/tables-basic";
+@import "ustyle/tables/tables-sortable";
+@import "ustyle/tables/tables-with-key-cells";