uswds-rails 0.1.0

data/app/assets/stylesheets/uswds/components/_search.scss

@@ -0,0 +1,106 @@
+$usa-btn-small-width:   4.5rem;
+$usa-btn-medium-width:  8.5rem;
+$usa-btn-big-width:     11.6rem;
+
+@mixin search-icon {
+  background-image: asset-url('#{$image-path}/search.png');
+  background-image: asset-url('#{$image-path}/search.svg');
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+.usa-search {
+  @include clearfix;
+  max-width: none;
+  position: relative;
+
+  [type=search],
+  .usa-search-input {
+    @include padding(0 null);
+    -webkit-appearance: none;
+    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});
+    }
+  }
+
+  [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-submit-text {
+    display: none;
+
+    @include media($small-screen) {
+      display: block;
+    }
+  }
+
+  &.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;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/uswds/core/_utilities.scss

@@ -0,0 +1,232 @@
+// Heading mixins
+@mixin title {
+  font-size: $title-font-size;
+  font-weight: $font-bold;
+}
+
+@mixin h1 {
+  font-size: $h1-font-size;
+  font-weight: $font-bold;
+}
+
+@mixin h2 {
+  font-size: $h2-font-size;
+  font-weight: $font-bold;
+}
+
+@mixin h3 {
+  font-size: $h3-font-size;
+  font-weight: $font-bold;
+}
+
+@mixin h4 {
+  font-size: $h4-font-size;
+  font-weight: $font-bold;
+}
+
+@mixin h5 {
+  font-size: $h5-font-size;
+  font-weight: $font-bold;
+}
+
+@mixin h6 {
+  font-family: $font-sans;
+  font-size: $h6-font-size;
+  font-weight: $font-normal;
+  text-transform: uppercase;
+}
+
+// Mobile-first media query helper
+@mixin media($bp) {
+  @media screen and (min-width: #{$bp}) {
+    @content;
+  }
+}
+
+// Screen reader only helper
+@mixin sr-only() {
+  position: absolute;
+  left: -999em;
+}
+
+.usa-sr-only {
+  @include sr-only();
+}
+
+// Aria hidden helper
+@mixin accessibly-hidden() {
+  &[aria-hidden=true] {
+    display: none;
+  }
+}
+
+// Unstyled list helper
+@mixin unstyled-list() {
+  @include margin(0 null);
+  list-style-type: none;
+  padding-left: 0;
+
+  > li {
+    margin-bottom: 0;
+  }
+}
+
+// Font smoothing mixin
+// Only use for light text on dark background
+// TODO: Remove after adding PostCSS
+@mixin font-smoothing {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Content size helpers
+@mixin allow-layout-classes {
+  @include margin(null auto);
+
+  &.width-one-half {
+    @include media($medium-screen) {
+      width: 50%;
+    }
+  }
+
+  &.width-one-third {
+    @include media($medium-screen) {
+      width: 33%;
+    }
+  }
+
+  &.width-two-thirds {
+    @include media($medium-screen) {
+      width: 67%;
+    }
+  }
+
+  &.width-one-fourth {
+    @include media($medium-screen) {
+      width: 25%;
+    }
+  }
+
+  &.width-three-fourths {
+    @include media($medium-screen) {
+      width: 75%;
+    }
+  }
+
+  &.align-left {
+    @include media($medium-screen) {
+      float: left;
+      margin-right: 2em;
+      margin-top: 0.5em;
+    }
+  }
+
+  &.align-right {
+    @include media($medium-screen) {
+      float: right;
+      margin-left: 2em;
+      margin-top: 0.5em;
+    }
+  }
+}
+
+@mixin display-icon($icon, $direction, $size, $margin, $hover) {
+  &::#{$direction} {
+    background-image: asset-url('#{$image-path}/#{$icon}.png');
+    background-image: asset-url('#{$image-path}/#{$icon}.svg');
+    background-size: 100%;
+    content: '';
+    display: inline-block;
+    height: $size;
+    width: $size;
+
+    /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */
+    @if $direction == 'after' {
+      margin-left: $margin;
+    } @else {
+      margin-right: $margin;
+    }
+    /* stylelint-enable */
+  }
+
+  @if $hover == 'hover' {
+    &:hover::#{$direction} {
+      background-image: asset-url('#{$image-path}/#{$icon}-hover.png');
+      background-image: asset-url('#{$image-path}/#{$icon}-hover.svg');
+    }
+  }
+}
+
+@mixin usa-sidenav-list {
+  @include unstyled-list();
+
+  > li {
+    background-color: transparent;
+    border-top: 1px solid $color-gray;
+    font-size: $h4-font-size;
+
+    &:first-child {
+      border-top: none;
+    }
+  }
+
+  a {
+    border: none;
+    color: $color-base;
+    display: block;
+    font-family: $font-sans;
+    line-height: 1.3;
+    padding: 0.85rem 1rem 0.85rem 1.8rem;
+    text-decoration: none;
+
+    &:hover {
+      background-color: $color-gray-lightest;
+      color: $color-primary;
+      text-decoration: none;
+    }
+
+    &:focus {
+      position: relative;
+      z-index: 1;
+    }
+
+    &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
+      border-left: 4px solid $color-primary;
+      color: $color-primary;
+      font-weight: $font-bold;
+      padding-left: 1.4rem;
+    }
+  }
+}
+
+@mixin usa-sidenav-sublist {
+  @include unstyled-list();
+  margin: 0;
+  width: 100%;
+
+  li {
+    border: none;
+    font-size: $h5-font-size;
+  }
+
+  a {
+    padding-left: 2.8rem;
+    line-height: $heading-line-height;
+
+    &:hover,
+    &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
+      border: none;
+      padding-left: 2.8rem;
+    }
+  }
+
+  .usa-sidenav-sub_list {
+    a {
+      padding-left: 3.8rem;
+
+      &:hover {
+        padding-left: 3.8rem;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/uswds/core/_variables.scss

@@ -0,0 +1,112 @@
+// Typography
+$em-base:             10px;
+$base-font-size:      rem(17px);
+$small-font-size:     rem(14px);
+$lead-font-size:      rem(20px);
+$title-font-size:     rem(52px);
+$h1-font-size:        rem(40px);
+$h2-font-size:        rem(30px);
+$h3-font-size:        rem(20px);
+$h4-font-size:        rem(17px);
+$h5-font-size:        rem(15px);
+$h6-font-size:        rem(13px);
+$base-line-height:    1.5;
+$heading-line-height: 1.3;
+$lead-line-height:    1.7;
+
+$font-sans:           'Source Sans Pro', $helvetica;
+$font-serif:          'Merriweather', $georgia;
+
+$font-normal:         400;
+$font-bold:           700;
+
+// Color
+$color-primary:              #0071bc;
+$color-primary-darker:       #205493;
+$color-primary-darkest:      #112e51;
+
+$color-primary-alt:          #02bfe7;
+$color-primary-alt-dark:     #00a6d2;
+$color-primary-alt-darkest:  #046b99;
+$color-primary-alt-light:    #9bdaf1; // lighten($color-primary-alt, 60%)
+$color-primary-alt-lightest: #e1f3f8; // lighten($color-primary-alt, 90%)
+
+$color-secondary:            #e31c3d;
+$color-secondary-dark:       #cd2026;
+$color-secondary-darkest:    #981b1e;
+$color-secondary-light:      #e59393; // lighten($color-secondary, 60%)
+$color-secondary-lightest:   #f9dede; // lighten($color-secondary, 90%)
+
+$color-white:                #ffffff;
+$color-base:                 #212121;
+$color-black:                #000000;
+
+$color-gray-dark:            #323a45;
+$color-gray:                 #5b616b; // lighten($color-gray-dark, 20%)
+$color-gray-medium:          #757575; // lightest gray that passes color contrast
+$color-gray-light:           #aeb0b5; // lighten($color-gray-dark, 60%)
+$color-gray-lighter:         #d6d7d9; // lighten($color-gray-dark, 80%)
+$color-gray-lightest:        #f1f1f1; // lighten($color-gray-dark, 91%)
+
+$color-gray-warm-dark:       #494440;
+$color-gray-warm-light:      #e4e2e0; // lighten($color-gray-warm-dark, 90%)
+$color-gray-cool-light:      #dce4ef; // lighten($color-primary, 90%)
+
+$color-gold:                 #fdb81e;
+$color-gold-light:           #f9c642; //  lighten($color-gold, 20%)
+$color-gold-lighter:         #fad980; //  lighten($color-gold, 60%)
+$color-gold-lightest:        #fff1d2; //  lighten($color-gold, 83%)
+
+$color-green:                #2e8540;
+$color-green-light:          #4aa564; // lighten($color-green, 20%)
+$color-green-lighter:        #94bfa2; // lighten($color-green, 60%)
+$color-green-lightest:       #e7f4e4; // lighten($color-green, 60%)
+
+$color-cool-blue:            #205493;
+$color-cool-blue-light:      #4773aa; // lighten($color-cool-blue, 20%)
+$color-cool-blue-lighter:    #8ba6ca; // lighten($color-cool-blue, 60%)
+$color-cool-blue-lightest:   #dce4ef; // lighten($color-cool-blue, 90%)
+
+$color-focus:                #3e94cf;
+$color-visited:              #4c2c92;
+
+$color-shadow:               rgba(#000, 0.3);
+
+// Mobile First Breakpoints
+$small-screen:  481px;
+$medium-screen: 600px;
+$large-screen:  1201px;
+
+// Grid column counts by screen size
+$grid-columns-small: 1;
+$grid-columns-medium: 6;
+$grid-columns-large: 12;
+
+// @media single-keyword helpers
+$small: new-breakpoint(min-width $small-screen $grid-columns-small);
+$medium: new-breakpoint(min-width $medium-screen $grid-columns-medium);
+$large: new-breakpoint(min-width $large-screen $grid-columns-large);
+
+// Relative font and image file paths
+$font-path:   'uswds';
+$image-path:  'uswds';
+
+// Set $asset-pipeline to true if you're using the Rails Asset Pipeline
+$asset-pipeline:      true;
+
+// Magic Numbers
+$text-max-width:      53rem;
+$lead-max-width:      77rem;
+$site-max-width:      1040px;
+$site-margins:        3rem;
+$site-margins-mobile: 1.5rem;
+$article-max-width:   600px;
+$input-max-width:     46rem;
+$border-radius:       rem(3px);
+$box-shadow:          0 0 2px $color-shadow;
+$focus-shadow:        0 0 3px $color-focus, 0 0 7px $color-focus;
+$nav-width:           951px;
+
+// 44 x 44 pixels hit target following Apple iOS Human Interface
+// Guidelines
+$hit-area: 4.4rem;