jekyll-theme-uswds 0.1.0

data/_sass/uswds/components/_search.scss

@@ -0,0 +1,111 @@
+$usa-btn-small-width:   4.5rem;
+$usa-btn-medium-width:  8.5rem;
+$usa-btn-big-width:     11.6rem;
+
+@mixin search-icon {
+  background-image: url('#{$image-path}/search.png');
+  background-image: url('#{$image-path}/search.svg');
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+.usa-search {
+  @include clearfix;
+  max-width: none;
+  position: relative;
+
+  [type=submit],
+  .usa-search-submit {
+    @include search-icon;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    height: 3.3rem;
+    margin: 0;
+    padding: 0;
+    width: $usa-btn-small-width;
+
+    @include media($small-screen) {
+      background-image: none;
+      width: $usa-btn-medium-width;
+    }
+  }
+
+  &.usa-search-big {
+    @include media($small-screen) {
+      $height: 4.4rem;
+      $width: $usa-btn-big-width;
+
+      [type=search],
+      .usa-search-input {
+        font-size: $base-font-size;
+        height: $height;
+        width: calc(100% - #{$width});
+      }
+
+      [type=submit],
+      .usa-search-submit {
+        font-size: $h3-font-size;
+        height: $height;
+        width: $width;
+      }
+    }
+  }
+
+  &.usa-search-small {
+    @include media($small-screen) {
+      $width: $usa-btn-small-width;
+
+      [type=search],
+      .usa-search-input {
+        width: calc(100% - #{$width});
+      }
+
+      [type=submit],
+      .usa-search-submit {
+        @include search-icon;
+        width: $width;
+      }
+    }
+
+    $lt-nav-width: $nav-width - 1px;
+
+    @media screen and (max-width: $lt-nav-width) {
+      &.usa-sr-only {
+        left: auto;
+        position: relative;
+      }
+    }
+  }
+}
+
+// Extra specificity to override rules set in reset.css.
+input[type=search] { /* stylelint-disable-line selector-no-qualifying-type */
+  box-sizing: border-box;
+  appearance: none;
+}
+
+[type=search],
+.usa-search-input {
+  @include padding(0 null);
+  border-bottom-right-radius: 0;
+  border-right: none;
+  border-top-right-radius: 0;
+  box-sizing: border-box;
+  float: left;
+  font-size: $small-font-size;
+  height: 3.3rem;
+  margin: 0;
+  width: calc(100% - #{$usa-btn-small-width});
+
+  @include media($small-screen) {
+    width: calc(100% - #{$usa-btn-medium-width});
+  }
+}
+
+.usa-search-submit-text {
+  @include sr-only;
+
+  @include media($small-screen) {
+    @include not-sr-only();
+  }
+}

data/_sass/uswds/components/_section.scss

@@ -0,0 +1,37 @@
+.usa-section {
+  @include padding($site-margins null);
+
+  @include media($medium-screen) {
+    @include padding(6rem null);
+  }
+}
+
+.usa-section-light {
+  background-color: $color-gray-lightest;
+}
+
+.usa-section-dark {
+  background-color: $color-primary-darkest;
+  color: $color-white;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $color-primary-alt;
+  }
+
+  p {
+    color: $color-white;
+  }
+
+  a {
+    color: $color-gray-lighter;
+
+    &:hover {
+      color: $color-white;
+    }
+  }
+}

data/_sass/uswds/components/_sidenav.scss

@@ -0,0 +1,31 @@
+
+.usa-sidenav-list {
+  @include usa-sidenav-list;
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+
+  @include media($large-screen) {
+    border-bottom: none;
+    border-top: none;
+  }
+
+  .usa-grid & {
+    @include margin(null (-$site-margins-mobile) null (-$site-margins-mobile));
+
+    @include media($medium-screen) {
+      @include margin(null 0);
+    }
+  }
+}
+
+.usa-sidenav-sub_list {
+  @include usa-sidenav-sublist;
+}
+
+.usa-layout-docs-sidenav {
+  padding-top: 2.4rem;
+
+  @include media($large-screen) {
+    padding-top: 0;
+  }
+}

data/_sass/uswds/components/_skipnav.scss

@@ -0,0 +1,19 @@
+.usa-skipnav {
+  background: transparent;
+  color: $color-base;
+  left: 0;
+  padding: 1rem 1.5rem;
+  position: absolute;
+  top: -4.2rem;
+  transition: all 0.2s ease-in-out;
+  z-index: 100;
+
+  &:focus {
+    background: $color-white;
+    left: 0;
+    outline: 0;
+    position: absolute;
+    top: 0;
+    transition: all 0.2s ease-in-out;
+  }
+}

data/_sass/uswds/core/_base.scss

@@ -0,0 +1,36 @@
+// Apply a natural box layout model to all elements, but allowing components to
+// change
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  background-color: $color-white;
+  color: $color-base;
+  overflow-x: hidden;
+}
+
+// Hack for clearfixes
+.lt-ie9 {
+  * {
+    filter: none !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+// for IE < 11, see:
+// <http://caniuse.com/#feat=hidden>
+[hidden] {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
+*:focus,
+.usa-focus {
+  @include focus;
+}

data/_sass/uswds/core/_defaults.scss

@@ -0,0 +1,8 @@
+// XXX This file has been deprecated in favor of _variables.scss, and is no
+// longer relevant. Instead, set any variables that you wish to override, then
+// @import '{path/to/uswds/}core/variables';
+
+// For backwards compatibility with consumers of _defaults.scss, we just
+// re-import _variables here. This should be a noop if it has already been
+// imported, since every variable is declared with `!default`.
+@import './variables';

data/_sass/uswds/core/_fonts.scss

@@ -0,0 +1,65 @@
+/* stylelint-disable at-rule-empty-line-before */
+@include font-face(
+  'Source Sans Pro',
+  '#{$font-path}/sourcesanspro-light-webfont',
+  300,
+  normal,
+  $file-formats: eot woff2 woff ttf
+);
+
+@include font-face(
+  'Source Sans Pro',
+  '#{$font-path}/sourcesanspro-regular-webfont',
+  400,
+  normal,
+  $file-formats: eot woff2 woff ttf
+);
+
+@include font-face(
+  'Source Sans Pro',
+  '#{$font-path}/sourcesanspro-italic-webfont',
+  400,
+  italic,
+  $file-formats: eot woff2 woff ttf
+);
+
+@include font-face(
+  'Source Sans Pro',
+  '#{$font-path}/sourcesanspro-bold-webfont',
+  700,
+  normal,
+  $file-formats: eot woff2 woff ttf
+);
+
+@include font-face(
+  'Merriweather',
+  '#{$font-path}/merriweather-light-webfont',
+  300,
+  normal,
+  $file-formats: eot woff2 woff ttf
+);
+
+@include font-face(
+  'Merriweather',
+  '#{$font-path}/merriweather-regular-webfont',
+  400,
+  normal,
+  $file-formats: eot woff2 woff ttf
+);
+
+@include font-face(
+  'Merriweather',
+  '#{$font-path}/merriweather-italic-webfont',
+  400,
+  italic,
+  $file-formats: eot woff2 woff ttf
+);
+
+@include font-face(
+  'Merriweather',
+  '#{$font-path}/merriweather-bold-webfont',
+  700,
+  normal,
+  $file-formats: eot woff2 woff ttf
+);
+/* stylelint-enable */

data/_sass/uswds/core/_grid-settings.scss

@@ -0,0 +1,3 @@
+// XXX This file has been deprecated. Grid size variables
+// ($grid-columns-*) are now declared in _variables.scss as !default, and
+// can be overridden individually.

data/_sass/uswds/core/_grid.scss

@@ -0,0 +1,198 @@
+// Grid container
+.usa-grid,
+.usa-grid-full {
+  @include outer-container($site-max-width);
+}
+
+.usa-grid {
+  @include padding(null $site-margins-mobile);
+
+  @include media($medium-screen) {
+    @include padding(null $site-margins);
+  }
+}
+
+.usa-grid-full {
+  padding: 0;
+}
+
+// Grid items
+@include media($medium) {
+  .usa-width-one-whole {
+    @include span-columns(6);
+  }
+
+  .usa-width-one-half {
+    @include span-columns(3);
+  }
+
+  .usa-width-one-third {
+    @include span-columns(2);
+  }
+
+  .usa-width-two-thirds {
+    @include span-columns(4);
+  }
+
+  .usa-width-one-fourth {
+    @include span-columns(3);
+
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+  }
+
+  .usa-width-three-fourths {
+    @include span-columns(6);
+  }
+
+  .usa-width-one-sixth {
+    @include span-columns(2);
+
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  .usa-width-five-sixths {
+    @include span-columns(4);
+  }
+
+  .usa-width-one-twelfth {
+    @include span-columns(2);
+
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  .usa-width-five-twelfths {
+    @include span-columns(2);
+  }
+
+  .usa-width-seven-twelfths {
+    @include span-columns(4);
+  }
+}
+
+@include media($large) {
+  .usa-width-one-whole {
+    @include span-columns(12);
+  }
+
+  .usa-width-one-half {
+    @include span-columns(6);
+  }
+
+  .usa-width-one-third {
+    @include span-columns(4);
+  }
+
+  .usa-width-two-thirds {
+    @include span-columns(8);
+  }
+
+  .usa-width-one-fourth {
+    @include span-columns(3);
+
+    &:nth-child(2n) {
+      @include span-columns(3);
+    }
+
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  .usa-width-three-fourths {
+    @include span-columns(9);
+  }
+
+  .usa-width-one-sixth {
+    @include span-columns(2);
+
+    &:nth-child(3n) {
+      @include span-columns(2);
+    }
+
+    &:nth-child(6n) {
+      margin-right: 0;
+    }
+  }
+
+  .usa-width-five-sixths {
+    @include span-columns(10);
+  }
+
+  .usa-width-one-twelfth {
+    @include span-columns(1);
+
+    &:nth-child(3n) {
+      @include span-columns(1);
+    }
+
+    &:nth-child(12n) {
+      margin-right: 0;
+    }
+  }
+
+  .usa-width-five-twelfths {
+    @include span-columns(5);
+  }
+
+  .usa-width-seven-twelfths {
+    @include span-columns(7);
+  }
+}
+
+// Specifies end of a row.
+// Required if grid-box contains multiple rows.
+// Required if browser does not support :last-child
+.usa-end-row {
+  @include omega();
+}
+
+// Grid Offsets
+.usa-offset-one-twelfth {
+  @include shift(1 of 12);
+}
+
+.usa-offset-one-sixth {
+  @include shift(2 of 12);
+}
+
+.usa-offset-one-fourth {
+  @include shift(3 of 12);
+}
+
+.usa-offset-one-third {
+  @include shift(4 of 12);
+}
+
+.usa-offset-five-twelfths {
+  @include shift(5 of 12);
+}
+
+.usa-offset-one-half {
+  @include shift(6 of 12);
+}
+
+.usa-offset-seven-twelfths {
+  @include shift(7 of 12);
+}
+
+.usa-offset-two-thirds {
+  @include shift(8 of 12);
+}
+
+.usa-offset-three-fourths {
+  @include shift(9 of 12);
+}
+
+.usa-offset-five-sixths {
+  @include shift(10 of 12);
+}
+
+.usa-offset-eleven-twelfths {
+  @include shift(11 of 12);
+}