us_web_design_standards 0.0.0 → 0.0.2

data/app/assets/stylesheets/lib/neat/grid/_span-columns.scss

@@ -0,0 +1,94 @@
+@charset "UTF-8";
+
+/// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.
+///
+/// @param {List} $span
+///   A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional).
+///
+///   If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid.
+///
+///   The values can be separated with any string such as `of`, `/`, etc.
+///
+///   `$columns` also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing `2.4` in a standard 12 column grid will divide the row into 5 columns.
+///
+/// @param {String} $display [block]
+///   Sets the display property of the element. By default it sets the display propert of the element to `block`.
+///
+///   If passed `block-collapse`, it also removes the margin gutter by adding it to the element width.
+///
+///   If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid.
+///
+/// @example scss - Usage
+///   .element {
+///     @include span-columns(6);
+///
+///    .nested-element {
+///      @include span-columns(2 of 6);
+///    }
+///  }
+///
+/// @example css - CSS Output
+///   .element {
+///     display: block;
+///     float: left;
+///     margin-right: 2.35765%;
+///     width: 48.82117%;
+///   }
+///
+///   .element:last-child {
+///     margin-right: 0;
+///   }
+///
+///   .element .nested-element {
+///     display: block;
+///     float: left;
+///     margin-right: 4.82916%;
+///     width: 30.11389%;
+///   }
+///
+///   .element .nested-element:last-child {
+///     margin-right: 0;
+///   }
+
+@mixin span-columns($span: $columns of $container-columns, $display: block) {
+  $columns: nth($span, 1);
+  $container-columns: container-span($span);
+
+  $parent-columns: get-parent-columns($container-columns) !global;
+
+  $direction: get-direction($layout-direction, $default-layout-direction);
+  $opposite-direction: get-opposite-direction($direction);
+
+  $display-table: is-display-table($container-display-table, $display);
+
+  @if $display-table  {
+    display: table-cell;
+    width: percentage($columns / $container-columns);
+  } @else {
+    float: #{$opposite-direction};
+
+    @if $display != no-display {
+      display: block;
+    }
+
+    @if $display == collapse {
+      @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead.");
+    }
+
+    @if $display == collapse or $display == block-collapse {
+      width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
+
+      &:last-child {
+        width: flex-grid($columns, $container-columns);
+      }
+
+    } @else {
+      margin-#{$direction}: flex-gutter($container-columns);
+      width: flex-grid($columns, $container-columns);
+
+      &:last-child {
+        margin-#{$direction}: 0;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/lib/neat/grid/_to-deprecate.scss

@@ -0,0 +1,97 @@
+@charset "UTF-8";
+
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+  @include -neat-warn("The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.");
+
+  @if length($query) == 1 {
+    @media screen and ($default-feature: nth($query, 1)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  } @else if length($query) == 2 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  } @else if length($query) == 3 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 3);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  } @else if length($query) == 4 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  } @else if length($query) == 5 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 5);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  } @else {
+    @include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details.");
+  }
+}
+
+@mixin nth-omega($nth, $display: block, $direction: default) {
+  @include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead.");
+  @include omega($nth $display, $direction);
+}
+
+/// Resets the active display property to `block`. Particularly useful when changing the display property in a single row.
+///
+/// @example scss - Usage
+///   .element {
+///     @include row(table);
+///     // Context changed to table display
+///   }
+///
+///   @include reset-display;
+///   // Context is reset to block display
+
+@mixin reset-display {
+  $container-display-table: false !global;
+  @include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin.");
+}
+
+/// Resets the active layout direction to the default value set in `$default-layout-direction`. Particularly useful when changing the layout direction in a single row.
+///
+/// @example scss - Usage
+///   .element {
+///     @include row($direction: RTL);
+///     // Context changed to right-to-left
+///   }
+///
+///   @include reset-layout-direction;
+///   // Context is reset to left-to-right
+
+@mixin reset-layout-direction {
+  $layout-direction: $default-layout-direction !global;
+  @include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin.");
+}
+
+/// Resets both the active layout direction and the active display property.
+///
+/// @example scss - Usage
+///   .element {
+///     @include row(table, RTL);
+///     // Context changed to table table and right-to-left
+///   }
+///
+///   @include reset-all;
+///   // Context is reset to block display and left-to-right
+
+@mixin reset-all {
+  @include reset-display;
+  @include reset-layout-direction;
+}

data/app/assets/stylesheets/lib/neat/grid/_visual-grid.scss

@@ -0,0 +1,42 @@
+@charset "UTF-8";
+
+@mixin grid-column-gradient($values...) {
+  background-image: -webkit-linear-gradient(left, $values);
+  background-image: -moz-linear-gradient(left, $values);
+  background-image: -ms-linear-gradient(left, $values);
+  background-image: -o-linear-gradient(left, $values);
+  background-image: unquote("linear-gradient(to left, #{$values})");
+}
+
+@if $visual-grid == true or $visual-grid == yes {
+  body:before {
+    @include grid-column-gradient(gradient-stops($grid-columns));
+    content: "";
+    display: inline-block;
+    height: 100%;
+    left: 0;
+    margin: 0 auto;
+    max-width: $max-width;
+    opacity: $visual-grid-opacity;
+    pointer-events: none;
+    position: fixed;
+    right: 0;
+    width: 100%;
+
+    @if $visual-grid-index == back {
+      z-index: -1;
+    }
+
+    @else if $visual-grid-index == front {
+      z-index: 9999;
+    }
+
+    @each $breakpoint in $visual-grid-breakpoints {
+      @if $breakpoint {
+        @include media($breakpoint) {
+          @include grid-column-gradient(gradient-stops($grid-columns));
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/lib/neat/settings/_disable-warnings.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+/// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag.
+///
+/// @type Bool
+
+$disable-warnings: false !default;
+
+@mixin -neat-warn($message) {
+  @if $disable-warnings == false {
+    @warn "#{$message}";
+  }
+}

data/app/assets/stylesheets/lib/neat/settings/_grid.scss

@@ -0,0 +1,51 @@
+@charset "UTF-8";
+
+/// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about modular-scale() see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with a `!global` flag.
+///
+/// @type Number (Unit)
+
+$column: modular-scale(3, 1em, $golden) !default;
+
+/// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about modular-scale() see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with the `!global` flag.
+///
+/// @type Number (Unit)
+
+$gutter: modular-scale(1, 1em, $golden) !default;
+
+/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag.
+///
+/// @type Number (Unitless)
+
+$grid-columns: 12 !default;
+
+/// Sets the max-width property of the element that includes `outer-container()`. To learn more about `em()` see [Bourbon docs](http://bourbon.io/docs/#px-to-em). Set with the `!global` flag.
+///
+/// @type Number (Unit)
+///
+$max-width: em(1088) !default;
+
+/// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag.
+///
+/// @type Bool
+///
+/// @example css - CSS Output
+///   html {
+///     box-sizing: border-box; }
+///
+///   *, *::after, *::before {
+///     box-sizing: inherit;
+///   }
+
+$border-box-sizing: true !default;
+
+/// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag.
+///
+/// @type String
+
+$default-feature: min-width; // Default @media feature for the breakpoint() mixin
+
+///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag.
+///
+///@type String
+
+$default-layout-direction: LTR !default;

data/app/assets/stylesheets/lib/neat/settings/_visual-grid.scss

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+/// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag.
+///
+/// @type Bool
+
+$visual-grid: false !default;
+
+/// Sets the visual grid color. Set with `!global` flag.
+///
+/// @type Color
+
+$visual-grid-color: #eee !default;
+
+/// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag.
+///
+/// @type String
+
+$visual-grid-index: back !default;
+
+/// Sets the opacity property of the visual grid. Set with `!global` flag.
+///
+/// @type Number (unitless)
+
+$visual-grid-opacity: 0.4 !default;
+
+$visual-grid-breakpoints: () !default;

data/app/assets/stylesheets/us_web_design_standards.scss

@@ -0,0 +1,39 @@
+// Vendor -------------- //
+
+@import 'lib/bourbon/bourbon';
+@import 'lib/neat/neat';
+@import 'lib/normalize';
+
+
+// Core -------------- //
+
+@import 'core/grid-settings';
+@import 'core/defaults';
+@import 'core/variables';
+@import 'core/base';
+@import 'core/grid';
+@import 'core/utilities';
+
+
+// Elements -------------- //
+// Styles basic html elements
+
+@import 'elements/typography';
+@import 'elements/list';
+@import 'elements/inputs';
+@import 'elements/buttons';
+@import 'elements/table';
+@import 'elements/figure';
+@import 'elements/labels';
+
+
+// Components -------------- //
+
+@import 'components/skipnav';
+@import 'components/disclaimer';
+@import 'components/sidenav';
+@import 'components/footer';
+@import 'components/forms';
+@import 'components/search';
+@import 'components/alerts';
+@import 'components/accordions';

data/app/assets/stylesheets/us_web_design_standards_fonts.css

@@ -0,0 +1,102 @@
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 300;
+    src: url('/assets/sourcesanspro-light-webfont.eot');
+    src: url('/assets/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/assets/sourcesanspro-light-webfont.woff2') format('woff2'),
+         url('/assets/sourcesanspro-light-webfont.woff') format('woff'),
+         url('/assets/sourcesanspro-light-webfont.ttf') format('truetype'),
+         url('/assets/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+  	font-weight: 400;
+    src: url('/assets/sourcesanspro-regular-webfont.eot');
+    src: url('/assets/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/assets/sourcesanspro-regular-webfont.woff2') format('woff2'),
+         url('/assets/sourcesanspro-regular-webfont.woff') format('woff'),
+         url('/assets/sourcesanspro-regular-webfont.ttf') format('truetype'),
+         url('/assets/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
+
+}
+
+@font-face {  
+    font-family: 'Source Sans Pro';
+    font-style: italic;          
+    font-weight: 400;
+    src: url('/assets/sourcesanspro-italic-webfont.eot');
+    src: url('/assets/sourcesanspro-italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/assets/sourcesanspro-italic-webfont.woff2') format('woff2'),
+         url('/assets/sourcesanspro-italic-webfont.woff') format('woff'),
+         url('/assets/sourcesanspro-italic-webfont.ttf') format('truetype'),
+         url('/assets/sourcesanspro-italic-webfont.svg#source_sans_proitalic') format('svg');
+
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 700;
+    src: url('/assets/sourcesanspro-bold-webfont.eot');
+    src: url('/assets/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/assets/sourcesanspro-bold-webfont.woff2') format('woff2'),
+         url('/assets/sourcesanspro-bold-webfont.woff') format('woff'),
+         url('/assets/sourcesanspro-bold-webfont.ttf') format('truetype'),
+         url('/assets/sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg');
+
+}
+
+@font-face {
+    font-family: 'Merriweather';
+    font-style: normal;
+    font-weight: 300;
+    src: url('/assets/merriweather-light-webfont.eot');
+    src: url('/assets/merriweather-light-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/assets/merriweather-light-webfont.woff2') format('woff2'),
+         url('/assets/merriweather-light-webfont.woff') format('woff'),
+         url('/assets/merriweather-light-webfont.ttf') format('truetype'),
+         url('/assets/merriweather-light-webfont.svg#source_sans_proregular') format('svg');
+
+}
+
+@font-face {  
+    font-family: 'Merriweather';
+    font-style: normal;          
+    font-weight: 400;
+    src: url('/assets/merriweather-regular-webfont.eot');
+    src: url('/assets/merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/assets/merriweather-regular-webfont.woff2') format('woff2'),
+         url('/assets/merriweather-regular-webfont.woff') format('woff'),
+         url('/assets/merriweather-regular-webfont.ttf') format('truetype'),
+         url('/assets/merriweather-regular-webfont.svg#source_sans_proitalic') format('svg');
+
+}
+
+@font-face {  
+    font-family: 'Merriweather';
+    font-style: italic;          
+    font-weight: 400;
+    src: url('/assets/merriweather-italic-webfont.eot');
+    src: url('/assets/merriweather-italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/assets/merriweather-italic-webfont.woff2') format('woff2'),
+         url('/assets/merriweather-italic-webfont.woff') format('woff'),
+         url('/assets/merriweather-italic-webfont.ttf') format('truetype'),
+         url('/assets/merriweather-italic-webfont.svg#source_sans_proitalic') format('svg');
+
+}
+
+@font-face {
+    font-family: 'Merriweather';
+    font-style: normal;
+    font-weight: 700;
+    src: url('/assets/merriweather-bold-webfont.eot');
+    src: url('/assets/merriweather-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/assets/merriweather-bold-webfont.woff2') format('woff2'),
+         url('/assets/merriweather-bold-webfont.woff') format('woff'),
+         url('/assets/merriweather-bold-webfont.ttf') format('truetype'),
+         url('/assets/merriweather-bold-webfont.svg#source_sans_probold') format('svg');
+
+}