uswds-rails 0.1.0 → 1.3.0

data/vendor/assets/stylesheets/uswds/components/_alerts.scss

@@ -22,6 +22,15 @@ $alerts: map-merge($usa-alerts, $usa-custom-alerts);
     background-size: 5.2rem;
   }
 
+  a {
+    color: $color-primary-darker;
+
+    &:focus,
+    &:hover {
+      color: $color-primary-darkest;
+    }
+  }
+
   ul {
     margin-bottom: 0;
     margin-top: 1em;

data/vendor/assets/stylesheets/uswds/components/_header.scss

@@ -193,7 +193,7 @@ $z-index-nav:     9000;
       &[aria-expanded=false],
       &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
         @include media($nav-width) { /* stylelint-disable-line selector-no-qualifying-type */
-          background-position: right 1.5rem top 50%;
+          background-position: right 1.5rem top 44%;
         }
       }
     }

data/vendor/assets/stylesheets/uswds/components/_navigation.scss

@@ -12,7 +12,7 @@
   @include media($nav-width) {
     border-bottom: none;
     display: inline-block;
-    height: 10.3rem;
+    height: 10.3rem; // XXX magic number
   }
 }
 
@@ -40,7 +40,6 @@
   $sliding-panel-width: 26rem;
 
   @include position(fixed, 0 0 0 auto);
-  @include transform(translateX($sliding-panel-width));
 
   background: $color-white;
   border-left: 1px solid $color-gray-light;
@@ -49,28 +48,28 @@
   flex-direction: column;
   overflow-y: auto;
   padding: 2rem;
+  transform: translateX($sliding-panel-width);
   width: $sliding-panel-width;
   z-index: $z-index-nav;
 
   @include media($nav-width) {
     @include padding(5rem 0 0 null);
-    @include transform(translateX(0));
-
     border-left: none;
     display: block;
     float: right;
     overflow-y: visible;
     position: relative;
+    transform: translateX(0);
     width: auto;
   }
 
   &.is-visible {
-    @include transform(translateX(0));
-    @include transition(all 0.3s ease-in-out);
+    transform: translateX(0);
+    transition: all 0.3s ease-in-out;
   }
 
   nav {
-    margin-top: 6rem;
+    margin-top: 6rem; // XXX magic number
     min-height: 100%;
 
     @include media($nav-width) {
@@ -91,7 +90,7 @@
 
   .usa-search {
     @include media($nav-width) {
-      margin-left: 1.5rem;
+      margin-left: 1.5rem; // XXX magic number
     }
   }
 }
@@ -117,7 +116,7 @@
 
     @include media($nav-width) {
       display: inline-block;
-      margin-left: -4px;
+      // margin-left: -4px;
     }
 
     > a {
@@ -138,13 +137,15 @@
   }
 
   button {
+    $button-vertical-offset: 36%;
+
     @include button-unstyled;
     @include font-smoothing;
     font-weight: $font-normal;
     padding: 1.4rem 1.5rem 1rem 1.8rem;
 
     @include media($nav-width) {
-      @include padding(null 3rem 1.9rem 1.5rem);
+      @include padding(null 3rem 3rem 1.5rem);
       color: $color-gray;
       font-size: $h5-font-size;
       font-weight: $font-bold;
@@ -175,7 +176,7 @@
       @include media($nav-width) {
         background-image: url('#{$image-path}/angle-arrow-down.png');
         background-image: url('#{$image-path}/angle-arrow-down.svg');
-        background-position: right 1.5rem top 44%;
+        background-position: right 1.5rem top $button-vertical-offset;
       }
     }
 
@@ -191,7 +192,7 @@
         color: $color-white;
         background-image: url('#{$image-path}/angle-arrow-down-hover.png');
         background-image: url('#{$image-path}/angle-arrow-down-hover.svg');
-        background-position: right 1.5rem top 44%;
+        background-position: right 1.5rem top $button-vertical-offset;
 
         &:hover {
           background-color: $color-primary-darkest;
@@ -208,7 +209,7 @@
     a.usa-current { // stylelint-disable-line selector-no-qualifying-type
       // undo the sidenav style
       border-left: 0;
-      padding-left: 1rem;
+      padding-left: 1.5rem;
 
       span {
         @include nav-border;
@@ -223,7 +224,7 @@
   @include media($nav-width) {
     position: absolute;
     right: $site-margins;
-    top: -5.7rem;
+    top: -5.7rem; // XXX magic number
   }
 
   .usa-search {
@@ -300,7 +301,7 @@
 // Navigation submenu (dropdown and mega menu) ----- //
 
 .usa-nav-submenu {
-  @include usa-sidenav-sublist;
+  // @include usa-sidenav-sublist;
 
   @include media($nav-width) {
     @include unstyled-list;
@@ -318,7 +319,7 @@
   a {
     @include media($nav-width) {
       color: $color-white;
-      padding-left: 1.8rem;
+      padding-left: 1.5rem; // XXX magic number
     }
 
     &:hover {
@@ -329,15 +330,18 @@
       }
     }
 
-    &:hover,
-    &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
-      @include media($nav-width) {
-        padding-left: 1.8rem;
-      }
-    }
+    // this used to be necessary to undo the `usa-sidenav-sublist`
+    // include, above
+    // &:hover,
+    // &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
+    //   @include media($nav-width) {
+    //     padding-left: 1.8rem;
+    //   }
+    // }
   }
 
   li {
+    font-size: $h5-font-size;
     margin-bottom: 0;
   }
 }
@@ -379,8 +383,11 @@
 
 .usa-megamenu {
   @include media($nav-width) {
-    @include padding(3.15rem null);
-    left: -1.8rem;
+    @include padding(3.15rem null); // XXX magic number
+    // XXX this is the difference between the 2rem padding-left
+    // of .usa-nav-inner and the $site-margins (3rem) padding-left
+    // of .usa-megamenu
+    left: -1rem;
     width: 100%;
   }
 
@@ -402,6 +409,7 @@
 .usa-header-basic-megamenu {
   .usa-nav {
     @include media($nav-width) {
+      padding-left: 0;
       padding-top: 0;
       width: 100%;
     }
@@ -412,7 +420,7 @@
     flex-direction: column;
 
     @include media($nav-width) {
-      display: initial;
+      display: block;
       float: right;
       margin-top: -4.8rem;
     }
@@ -421,7 +429,7 @@
   .usa-nav-submenu {
     .usa-grid-full {
       @include media($nav-width) {
-        margin-left: -1.8rem;
+        margin-left: -1.8rem; // XXX magic number
       }
     }
   }

data/vendor/assets/stylesheets/uswds/core/_grid.scss

@@ -152,3 +152,48 @@
 .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);
+}

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

@@ -191,7 +191,7 @@
     }
 
     &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
-      border-left: 4px solid $color-primary;
+      border-left: 0.4rem solid $color-primary;
       color: $color-primary;
       font-weight: $font-bold;
       padding-left: 1.4rem;

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

@@ -11,16 +11,16 @@
 // Removing the !default from $em-base so we are not inheriting that
 // value from Bourbon.
 $em-base:             10px;
-$base-font-size:      rem(17px) !default;
-$small-font-size:     rem(14px) !default;
-$lead-font-size:      rem(20px) !default;
-$title-font-size:     rem(52px) !default;
-$h1-font-size:        rem(40px) !default;
-$h2-font-size:        rem(30px) !default;
-$h3-font-size:        rem(20px) !default;
-$h4-font-size:        rem(17px) !default;
-$h5-font-size:        rem(15px) !default;
-$h6-font-size:        rem(13px) !default;
+$base-font-size:      1.7rem !default;
+$small-font-size:     1.4rem !default;
+$lead-font-size:      2rem !default;
+$title-font-size:     5.2rem !default;
+$h1-font-size:        4rem !default;
+$h2-font-size:        3rem !default;
+$h3-font-size:        2rem !default;
+$h4-font-size:        1.7rem !default;
+$h5-font-size:        1.5rem !default;
+$h6-font-size:        1.3rem !default;
 $base-line-height:    1.5 !default;
 $heading-line-height: 1.3 !default;
 $lead-line-height:    1.7 !default;
@@ -113,7 +113,7 @@ $site-margins:        3rem !default;
 $site-margins-mobile: 1.5rem !default;
 $article-max-width:   600px !default;
 $input-max-width:     46rem !default;
-$border-radius:       rem(3px) !default;
+$border-radius:       3px !default;
 $box-shadow:          0 0 2px $color-shadow !default;
 $focus-shadow:        0 0 3px $color-focus, 0 0 7px $color-focus !default;
 $nav-width:           951px !default;

data/vendor/assets/stylesheets/uswds/elements/_inputs.scss

@@ -1,7 +1,7 @@
 // scss-lint:disable QualifyingElement, PropertyCount
 
 $input-line-height: 1.3;
-$input-border-width: 1px;
+$input-border-width: 0.1rem; // Using rem instead of px so function uses same units
 $input-padding-vertical: 1rem;
 
 // input heights will vary by browser and type
@@ -9,7 +9,7 @@ $input-padding-vertical: 1rem;
 $input-height-exact: (
   ($base-font-size * $input-line-height) +
   ($input-padding-vertical * 2) +
-  (rem($input-border-width * 2))
+  ($input-border-width * 2)
 );
 
 // truncated to 1 decimal place
@@ -142,9 +142,9 @@ legend {
 
 [type=checkbox],
 [type=radio] {
-  margin-left: -2rem;
-  opacity: 0;
-  position: absolute;
+  // The actual input element is only visible to screen readers, because
+  // all visual styling is done via the label.
+  @include sr-only();
 
   .lt-ie9 & {
     border: 0;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: uswds-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 1.3.0
 platform: ruby
 authors:
 - Jason Garber
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-07-20 00:00:00.000000000 Z
+date: 2017-07-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -150,50 +150,44 @@ dependencies:
   name: bourbon
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4.3'
-    - - ">="
+    - - '='
       - !ruby/object:Gem::Version
-        version: 4.3.4
+        version: 4.2.7
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '4.3'
-    - - ">="
+    - - '='
       - !ruby/object:Gem::Version
-        version: 4.3.4
+        version: 4.2.7
 - !ruby/object:Gem::Dependency
   name: neat
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
         version: '1.8'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
         version: '1.8'
 - !ruby/object:Gem::Dependency
-  name: normalize-scss
+  name: rails-assets-normalize-css
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: 3.0.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '7.0'
+        version: 3.0.3
 description: Integrate the U.S. Web Design Standards into a Ruby on Rails application.
 email:
 - jason@sixtwothree.org
@@ -223,7 +217,6 @@ files:
 - app/assets/stylesheets/uswds/components/_navigation.scss
 - app/assets/stylesheets/uswds/components/_search.scss
 - app/assets/stylesheets/uswds/core/_utilities.scss
-- app/assets/stylesheets/uswds/core/_variables.scss
 - app/assets/stylesheets/uswds/elements/_inputs.scss
 - app/assets/stylesheets/uswds/elements/_typography.scss
 - app/assets/stylesheets/uswds/uswds.scss

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

@@ -1,112 +0,0 @@
-// 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;