ustyle 1.3.6

data/vendor/assets/stylesheets/ustyle/tables/_tables-basic.scss

@@ -0,0 +1,72 @@
+// Basic table
+// ---
+// The most basic comparison table structure. It defines the style of the the
+// table only, the look of the content is totally up to you. On small screens
+// the table components become block elements, with only minimal styles applied,
+// so you don't need to overwrite too many default style rules when customising
+// the mobile appearance.
+
+%table--base {
+  width: 100%;
+  color: $table-c-text;
+}
+
+.us-table {
+  @extend %table--base;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  @include respond-to(mobile) {
+    thead {
+      display: none !important;
+    }
+    // !! This affects tables inside the table
+    tbody,
+    tr,
+    td {
+      display: block;
+    }
+  }
+}
+
+// Normal table headers
+%table-head--base {
+  padding: 0 1em .5em 0;
+}
+
+.us-table-head {
+  @extend %table-head--base;
+  color: $table-c-head-text;
+  text-align: left;
+  vertical-align: middle;
+  border-bottom: 1px solid $table-c-border;
+}
+
+// Main rows
+%table-body-row--base {
+  @include respond-to(mobile) {
+    @include clearfix;
+    position: relative;
+  }
+}
+
+.us-table-body-row {
+  @extend %table-body-row--base;
+}
+
+%table-cell--base {
+  padding-top: $gutter-width / 2;
+  padding-bottom: $gutter-width / 2;
+}
+
+.us-table-cell {
+  @extend %table-cell--base;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid $table-c-border;
+
+  @include respond-to(mobile) {
+    padding: 0;
+    border: 0;
+  }
+}

data/vendor/assets/stylesheets/ustyle/tables/_tables-sortable.scss

@@ -0,0 +1,72 @@
+// Example of a more complex table
+// ---
+
+@if $table-experimental {
+  %with-sort-arrow {
+    @include respond-to(small-tablet, true) {
+      position: relative;
+      margin-right: .4em;
+
+      &:after {
+        position: absolute;
+        top: 50%;
+        right: -1.2em;
+        display: none;
+        margin-top: -.4em;
+        line-height: 1;
+        color: $table-c-inactive;
+        content: "\025bc";
+      }
+    }
+  }
+
+  .us-table-cell-sorted {
+    @include respond-to(small-tablet, true) {
+      background: $table-c-sorted-bg;
+    }
+  }
+
+  %us-table-head-text,
+  .us-table-head-text {
+    @extend %with-sort-arrow;
+    display: inline-block;
+    line-height: normal;
+    vertical-align: baseline;
+  }
+
+  .us-table-sort-button,
+  .us-table-sort-button:visited {
+    @extend %us-table-head-text;
+
+    @include respond-to(small-tablet, true) {
+      color: $table-c-head-text;
+      cursor: default;
+
+      .js .js-sortable & {
+        cursor: pointer;
+
+        &:after {
+          display: block;
+        }
+
+        &:hover {
+          color: $table-c-head-text;
+        }
+
+        &:hover:after {
+          color: $table-c-head-text;
+        }
+      }
+    }
+  }
+  
+  .us-table-head-sorted {
+    .us-table-sort-button,
+    .us-table-head-text {
+      &:after {
+        display: block;
+        color: $table-c-head-text;
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/tables/_tables-with-key-cells.scss

@@ -0,0 +1,18 @@
+// Table with key cells
+// --------------------
+
+@if $table-experimental {
+  .us-table-cell-key {
+    @include respond-to(small-tablet, true) {
+      width: em($table-key-width);
+      max-width: em($table-key-width);
+      padding-right: em($table-key-sidepadding);
+      padding-left: em($table-key-sidepadding);
+    }
+    
+    .key-value,
+    .key-sideunit {
+      color: $table-c-key;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+$table-experimental: false !default;
+
+$table-font-size: 14px !default;
+
+$table-c-text: tint($c-typegrey, 25%) !default;
+$table-c-border: tint($c-typegrey, 75%) !default;
+$table-c-head-text: $c-navy !default;
+$table-c-head-bg: #fff !default;
+$table-c-body-bg: #fff !default;
+$table-c-key: $c-navy !default;
+$table-c-sorted-bg: tint($c-cyan, 75%) !default;
+$table-c-inactive: tint($c-typegrey, 75%) !default;
+
+$table-key-width: 150px !default;
+$table-key-sidepadding: 10px !default;

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

@@ -0,0 +1,106 @@
+// @page Pattern Library/Utilities
+// @name General
+//
+// @description
+//   These utility classes allow for some basic CSS properties to be applied across elements. The classname applies to the property that is getting set, with the value as the modifier.
+//
+// @state .us-clearfix - Clear floats
+// @state .us-float--left - Float element to the left
+// @state .us-float--right - Float element to the right
+// @state .us-align--left - Align content of the element to the left
+// @state .us-align--center - Align content of the element to the center
+// @state .us-align--right - Align content of the element to the right
+// @state .us-block - Display element as a block
+// @state .us-color--cyan - Change content color to blue, navy, typecyan, cyan, red, green
+// @state .us-list--reset - Reset list style
+//
+// @markup
+//   <div class='{$modifiers}'>
+//     <p>content</p>
+//   </div>
+
+
+// Clear floats
+.us-clearfix {
+  @extend %clearfix;
+}
+
+// Reset list styling
+.us-list--reset {
+  @extend %reset-box-model;
+  list-style: none;
+}
+
+// Blocked element
+.us-blocked {
+  display: block;
+}
+
+// Margins
+.us-trailered {
+  margin-bottom: 1em;
+}
+
+.us-trailered--large {
+  margin-bottom: 1.5em;
+}
+
+.us-trailered--small {
+  margin-bottom: .5em;
+}
+
+// Floats
+.us-float--left {
+  @extend %float-left;
+}
+
+.us-float--right {
+  @extend %float-right;
+}
+
+.us-align--left {
+  text-align: left;
+}
+
+.us-align--right {
+  text-align: right;
+}
+
+.us-align--center {
+  text-align: center;
+}
+
+// Colors
+$colors: (
+  "blue" $c-blue,
+  "navy" $c-navy,
+  "typecyan" $c-typecyan,
+  "cyan" $c-cyan,
+  "red" $c-red,
+  "green" $c-green,
+  "typegrey" $c-typegrey,
+  "typegrey-2" $c-typegrey-2,
+  "inputgrey" $c-inputgrey,
+  "bordergrey" $c-bordergrey,
+  "keylinegrey" $c-keylinegrey
+);
+
+@each $color in $colors {
+  .us-color--#{nth($color, 1)} {
+    color: nth($color, 2);
+  }
+}
+
+// Fonts
+
+.us-font--normal {
+  @include normal-font;
+}
+
+.us-font--heading-p {
+  @include heading-font;
+}
+
+.us-font--heading-s {
+  @include heading-font;
+}

data/vendor/assets/stylesheets/ustyle/utilities/_grid.scss

@@ -0,0 +1,13 @@
+@for $i from 1 through 4 {
+  .us-grid-md--push-#{$i} {
+    @include respond-to($default-grid-breakpoint, true) {
+      padding-left: col-width($i);
+    }
+  }
+  
+  .us-grid-lg--push-#{$i} {
+    @include respond-to(desktop, true) {
+      padding-left: col-width($i);
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/utilities/_images.scss

@@ -0,0 +1,34 @@
+// @page Pattern Library/Utilities
+// @name Images
+//
+// @description
+//   Helpful image classes for making images full width or floating within content.
+//
+// @state .us-img--full - Full width image
+// @state .us-img--left - Left floated image
+// @state .us-img--right - Right floated image
+//
+// @markup
+//   <p>
+//     <img class="{$modifiers}" src="http://uswitch-wp-cms-assets.s3-website-eu-west-1.amazonaws.com//www.uswitch.com/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg" width="400">
+//     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.
+//   </p>
+
+.us-img--full {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  min-width: 100%;
+}
+
+.us-img--left {
+  @extend %float-left;
+  margin-right: 1em;
+  margin-bottom: 1em;
+}
+
+.us-img--right {
+  @extend %float-right;
+  margin-bottom: 1em;
+  margin-left: 1em;
+}

data/vendor/assets/stylesheets/ustyle/utilities/_responsive.scss

@@ -0,0 +1,101 @@
+// @page Pattern Library/Utilities
+// @name Responsive
+//
+// @description
+//   Responsive classes to allow display of elements across devices. You have the option of displaying them as `block`, `inline-block` or `inline` elements.
+//   You can also hide elements by `.us-{DEVICE}--hidden` and will hide those elements above that breakpoint.
+//
+// @markup
+//   <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>
+//   <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>
+//   <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>
+//   <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>
+//   <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>
+//   <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>
+
+$display-properties: block, inline-block, inline;
+
+// Mobile
+.us-mobile--hidden {
+  @include respond-to(mobile) {
+    display: none;
+  }
+}
+
+@each $property in $display-properties {
+  .us-mobile--#{$property} {
+    display: none;
+
+    @include respond-to(mobile) {
+      display: $property;
+    }
+  }
+}
+
+// Small tablet
+.us-sm-tablet--hidden {
+  @include respond-to(small-tablet, true) {
+    display: none;
+  }
+}
+
+@each $property in $display-properties {
+  .us-sm-tablet--#{$property} {
+    display: none;
+
+    @include respond-to(small-tablet, true) {
+      display: $property;
+    }
+  }
+}
+
+// Tablet
+.us-tablet--hidden {
+  @include respond-to(tablet, true) {
+    display: none;
+  }
+}
+
+@each $property in $display-properties {
+  .us-tablet--#{$property} {
+    display: none;
+
+    @include respond-to(tablet, true) {
+      display: $property;
+    }
+  }
+}
+
+// Desktop
+.us-desktop--hidden {
+  @include respond-to(desktop, true) {
+    display: none;
+  }
+}
+
+@each $property in $display-properties {
+  .us-desktop--#{$property} {
+    display: none;
+
+    @include respond-to(desktop, true) {
+      display: $property;
+    }
+  }
+}
+
+// Large desktop
+.us-lg-desktop--hidden {
+  @include respond-to(large-desktop) {
+    display: none;
+  }
+}
+
+@each $property in $display-properties {
+  .us-lg-desktop--#{$property} {
+    display: none;
+
+    @include respond-to(large-desktop) {
+      display: $property;
+    }
+  }
+}

data/vendor/assets/stylesheets/ustyle/utilities/_spacing.scss

@@ -0,0 +1,74 @@
+// @page Pattern Library/Utilities
+// @name Spacing
+//
+// @description
+//   Allow control of spacing around element. You can set margin or padding for an element without creating an extra class.
+//   An example of this `.us-margin-top`, `.us-margin-top--small`, `.us-margin-top--large` where `margin` can be replaced by `padding` and `top` can be replaced by `bottom`, `left` or `right`.
+//   Default space for margin and padding is 1em, `small` modifier uses .5em and `large` modifier uses 1.5em.
+//
+// @state .us-margin-top - Use default top margin (1em)
+// @state .us-margin-top--small - Use small top margin (.5em)
+// @state .us-margin-top--large - Use large top margin (1.5em)
+// @state .us-margin-bottom - Use default bottom margin (1em)
+// @state .us-margin-bottom--small - Use small bottom margin (.5em)
+// @state .us-margin-bottom--large - Use large bottom margin (1.5em)
+// @state .us-margin-left - Use default left margin (1em)
+// @state .us-margin-left--small - Use small left margin (.5em)
+// @state .us-margin-left--large - Use large left margin (1.5em)
+// @state .us-margin-right - Use default right margin (1em)
+// @state .us-margin-right--small - Use small right margin (.5em)
+// @state .us-margin-right--large - Use large right margin (1.5em)
+// @state .us-padding-top - Use default top padding (1em)
+// @state .us-padding-top--small - Use small top padding (.5em)
+// @state .us-padding-top--large - Use large top padding (1.5em)
+// @state .us-padding-bottom - Use default bottom padding (1em)
+// @state .us-padding-bottom--small - Use small bottom padding (.5em)
+// @state .us-padding-bottom--large - Use large bottom padding (1.5em)
+// @state .us-padding-left - Use default left padding (1em)
+// @state .us-padding-left--small - Use small left padding (.5em)
+// @state .us-padding-left--large - Use large left padding (1.5em)
+// @state .us-padding-right - Use default right padding (1em)
+// @state .us-padding-right--small - Use small right padding (.5em)
+// @state .us-padding-right--large - Use large right padding (1.5em)
+// @state .us-reset--padding - Reset padding to 0
+// @state .us-reset--margin - Reset margin to 0
+// @state .us-reset - Reset padding and margin to 0
+//
+// @markup
+//   <div class='class-goes-here {$modifiers}'>Sample content</div>
+
+$positions: "top", "right", "bottom", "left";
+$spacing: "small" .5em, "large" 1.5em;
+
+
+@each $position in $positions {
+  .us-margin-#{$position} {
+    margin-#{$position}: 1em;
+  }
+
+  .us-padding-#{$position} {
+    padding-#{$position}: 1em;
+  }
+
+  @each $space in $spacing {
+    .us-margin-#{$position}--#{nth($space,1)} {
+      margin-#{$position}: nth($space,2);
+    }
+
+    .us-padding-#{$position}--#{nth($space,1)} {
+      padding-#{$position}: nth($space,2);
+    }
+  }
+}
+
+.us-reset--padding {
+  padding: 0;
+}
+
+.us-reset--margin {
+  margin: 0;
+}
+
+.us-reset {
+  @extend %reset-box-model;
+}