uswds-rails 1.3.1.1 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fc1f529c2a8e0e69bc1d74d25a992f14eb88912b
-  data.tar.gz: 68e9d08b31627c3c1e0212d766106d1a221fc8ea
+  metadata.gz: 0fe0957d5eafc6b562cf44545eaba7e0858db10b
+  data.tar.gz: 662a549b3b3081eb4e0981d1f212c4b1cdf7a53b
 SHA512:
-  metadata.gz: 5aa7ce1ad10dcb7d3e097d711f69cef441de031371a6ee09c64fdecd47b9e29135512143e03efd0c484dafac22ee067eb4982ba90203be2e173b6c09e7cc848b
-  data.tar.gz: 8ff91926b90de18b10b4b88f01b413589c58189df450bbccc2b08f0c65f0bc56be18087a5be0394398e6d92a53e418bf27b6183a85aeebbe9dfe4dff3c8c575a
+  metadata.gz: 3b14ca0ba6d7891f8c1d0c55c8e8f5c35e5cda430d1a334008198c61c35a16d4538478dc8efa7c13fb57e927d28f4bb1f9d04d32311462078d22b7ebe33de25a
+  data.tar.gz: fe8cac3ee16bea6b12d4dc44107fe0d7795192f701aaeb3c7ef4fb753e43b5e5d95023d7537b9b5c6c4c6adaa1671ed3b1faa8b2c68377b17399404160e524a1

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

@@ -4,6 +4,10 @@ $accordion-border: 3px solid $color-gray-lightest;
 
 // Accordion Styles
 
+$icon-size: $spacing-md-small;
+$h-padding: $spacing-medium;
+$v-padding: $spacing-md-small;
+
 @mixin accordion-list-styles {
   @include unstyled-list;
   color: $color-base;
@@ -16,7 +20,7 @@ $accordion-border: 3px solid $color-gray-lightest;
   background-color: $color-gray-lightest;
   font-family: $font-sans;
   list-style: none;
-  margin-bottom: 6px;
+  margin-bottom: $spacing-x-small;
   width: 100%;
 }
 
@@ -26,22 +30,18 @@ $accordion-border: 3px solid $color-gray-lightest;
   background-color: $color-gray-lightest;
   background-image: asset-url('#{$image-path}/minus.png');
   background-image: asset-url('#{$image-path}/minus.svg');
-  background-position: right 3rem center;
+  background-position: right $h-padding center;
   background-repeat: no-repeat;
-  background-size: 13px;
+  background-size: $icon-size;
   color: $color-base;
   cursor: pointer;
   display: inline-block;
   font-family: $font-sans;
   font-weight: $font-bold;
   margin: 0;
-  padding: 1.5rem 5.5rem 1.5rem 3rem;
+  padding: $v-padding ($h-padding * 2 + $icon-size) $v-padding $h-padding;
   width: 100%;
 
-  &:focus {
-    box-shadow: $focus-shadow;
-  }
-
   &:hover {
     background-color: $color-gray-lighter;
     color: $color-base;
@@ -62,7 +62,7 @@ $accordion-border: 3px solid $color-gray-lightest;
   background-image: asset-url('#{$image-path}/plus.png');
   background-image: asset-url('#{$image-path}/plus.svg');
   background-repeat: no-repeat;
-  background-size: 1.3rem;
+  background-size: $icon-size;
 }
 
 @mixin accordion-nested-list {
@@ -84,7 +84,7 @@ $accordion-border: 3px solid $color-gray-lightest;
 
   + .usa-accordion,
   + .usa-accordion-bordered {
-    margin-top: 1rem;
+    margin-top: $spacing-small;
   }
 
   // TODO deprecated ruleset based on old accordion.
@@ -124,7 +124,7 @@ $accordion-border: 3px solid $color-gray-lightest;
 .usa-accordion-content {
   background-color: $color-white;
   overflow: auto;
-  padding: 3rem;
+  padding: $spacing-md-small $spacing-medium;
 
   > *:first-child {
     margin-top: 0;

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

@@ -1,5 +1,6 @@
 // Alert variables ---------- //
 $usa-custom-alerts: () !default;
+$usa-custom-alerts-bar: () !default;
 
 $usa-alerts: (
   success: $color-green-lightest,
@@ -8,18 +9,40 @@ $usa-alerts: (
   info: $color-primary-alt-lightest
 );
 
+$usa-alerts-bar: (
+  success: $color-green,
+  warning: $color-gold,
+  error: $color-secondary,
+  info: $color-primary-alt
+);
+
 $alerts: map-merge($usa-alerts, $usa-custom-alerts);
+$alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);
+
+$h-padding: $spacing-medium;
+$bar-size: $spacing-small;
+$left-padding: $h-padding + $bar-size;
+$icon-size: 3rem;
 
 .usa-alert {
   background-color: $color-gray-lightest;
-  background-position: 1rem 2rem;
+  background-position: $h-padding $h-padding;
   background-repeat: no-repeat;
-  background-size: 4rem;
-  margin-top: 1.5em;
-  padding: 1em;
-
-  @include media($medium-screen) {
-    background-size: 5.2rem;
+  background-size: 5.2rem; // TODO abrituary number based on svg size maybe?
+  padding-bottom: $h-padding * 0.7;
+  padding-left: $left-padding;
+  padding-right: $h-padding;
+  padding-top: $h-padding;
+  position: relative;
+
+  &::before {
+    background-color: darken($color-gray-lightest, 40%);
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: $bar-size;
   }
 
   a {
@@ -33,41 +56,36 @@ $alerts: map-merge($usa-alerts, $usa-custom-alerts);
 
   ul {
     margin-bottom: 0;
-    margin-top: 1em;
-    padding-left: 1em;
+    margin-top: $spacing-small;
+    padding-left: $spacing-small;
+  }
+}
+
+.usa-alert-slim {
+  background-position: $h-padding $spacing-small;
+  padding-bottom: $spacing-small;
+  padding-top: $spacing-small;
+
+  .usa-alert-text:only-child {
+    margin-bottom: $spacing-x-small;
+    padding-top: $spacing-x-small;
   }
 }
 
 .usa-alert-icon {
   display: table-cell;
-  padding-right: 1rem;
+  padding-right: $spacing-small;
 }
 
 .usa-alert-body {
   display: table-cell;
-  padding-left: 3.5rem;
+  padding-left: $icon-size + $h-padding;
   vertical-align: top;
-
-  @include media($medium-screen) {
-    padding-left: 5rem;
-  }
-
-  p:first-child {
-    margin-top: 0.8rem;
-  }
-
-  p:last-child {
-    margin-bottom: 0.8rem;
-  }
 }
 
 .usa-alert-heading {
-  margin-bottom: .3rem;
   margin-top: 0;
-
-  @include media($medium-screen) {
-    margin-top: .3rem;
-  }
+  margin-bottom: 0;
 }
 
 .usa-alert-text {
@@ -76,11 +94,20 @@ $alerts: map-merge($usa-alerts, $usa-custom-alerts);
   margin-top: 0;
 }
 
+.usa-alert-text:only-child {
+  margin-bottom: $spacing-small;
+  padding-top: $spacing-x-small;
+}
+
 @each $name, $bgcolor in $alerts {
   .usa-alert-#{$name} {
     background-color: $bgcolor;
     background-image: asset-url('#{$image-path}/alerts/#{$name}.png');
     background-image: asset-url('#{$image-path}/alerts/#{$name}.svg');
+
+    &::before {
+      background-color: map-get($alerts-bar, $name);
+    }
   }
 }
 
@@ -90,5 +117,9 @@ $alerts: map-merge($usa-alerts, $usa-custom-alerts);
 
 .usa-alert-paragraph {
   width: $text-max-width;
-  padding: 1em 3em 1em 1em;
+}
+
+// Deprecated
+.usa-alert {
+  margin-top: 1.5em; // TODO deprecate
 }

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

@@ -8,8 +8,8 @@
     display: block;
     font-weight: $font-bold;
     margin-top: 0;
-    padding-bottom: 2rem;
-    padding-top: 2rem;
+    padding-bottom: $spacing-medium;
+    padding-top: $spacing-medium;
     text-decoration: none;
 
     @include media($medium-screen) {
@@ -23,19 +23,35 @@
 
   a {
     font-weight: normal;
+    text-decoration: none;
+  }
+}
+
+.usa-footer-contact_info {
+  display: inline-block;
+
+  a {
+    color: $color-base;
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
   }
 }
 
 .usa-footer-return-to-top {
-  padding-bottom: 2rem;
-  padding-top: 2rem;
+  color: $color-primary;
+  padding-bottom: $spacing-medium;
+  padding-top: $spacing-medium;
+  text-decoration: underline;
 }
 
 .usa-footer-primary-section {
   background-color: $color-gray-lightest;
 
   .usa-footer-primary-content {
-    padding-left: 2.5rem;
+    padding-left: 1.5rem;
     padding-right: 2.5rem;
 
     @include media($medium-screen) {
@@ -61,17 +77,51 @@
 }
 
 .usa-footer-medium {
-  .usa-footer-primary-section {
-    padding: 0;
+  .usa-footer-contact_info {
+    p {
+      margin: 0 $spacing-small 0 0;
+
+      @include media($medium-screen) {
+        margin: 0 0 0 $spacing-small;
+      }
+    }
+  }
+
+  .usa-footer-contact-heading {
+    margin-top: 0;
+
+    @include media($medium-screen) {
+      margin-top: $spacing-x-small;
+      margin-bottom: $spacing-x-small;
+    }
+  }
+
+  .usa-footer-logo {
+    padding: $spacing-small 0;
 
     @include media($medium-screen) {
-      padding-bottom: 1rem;
-      padding-top: 1rem;
+      padding: $spacing-medium 0;
+    }
+  }
+
+  .usa-footer-primary-link {
+    padding-bottom: $spacing-md-small;
+    padding-top: $spacing-md-small;
+  }
+
+  .usa-footer-primary-section {
+    > .usa-grid {
+      padding: 0;
+
+      @include media($medium-screen) {
+        padding-left: $spacing-large;
+        padding-right: $spacing-large;
+      }
     }
 
     .usa-footer-primary-content {
       @include media($large-screen) {
-        margin-right: 6%;
+        margin-right: 5%;
         width: inherit;
       }
 
@@ -98,7 +148,7 @@
 
     .usa-footer-primary-content {
       @include media($large-screen) {
-        margin-right: 9%;
+        margin-right: 5%;
         width: inherit;
       }
 
@@ -110,12 +160,24 @@
     }
   }
 
+  .usa-footer-primary-link {
+    padding-bottom: $spacing-md-small;
+    padding-top: $spacing-md-small;
+  }
+
   .usa-footer-primary-section {
-    padding-bottom: 2rem;
+    > .usa-grid {
+      padding: 0;
+
+      @include media($medium-screen) {
+        padding-left: $spacing-large;
+        padding-right: $spacing-large;
+      }
+    }
 
     @include media($medium-screen) {
-      padding-bottom: 1rem;
-      padding-top: 1rem;
+      padding-bottom: 0;
+      padding-top: 0;
 
       .usa-grid-full {
         align-items: center;
@@ -131,7 +193,7 @@
     }
 
     @include media($medium-screen) {
-      @include padding (2rem null);
+      @include padding ($spacing-md-small null);
     }
 
     @include media($medium-screen) {
@@ -148,14 +210,14 @@
 ul.usa-footer-primary-content,
 li.usa-footer-primary-content,
 li.usa-footer-primary-content {
-  border-top: 1px solid $color-base;
+  border-top: 1px solid $color-gray-light;
 
   @include media($medium-screen) {
     border: none;
   }
 
   &:last-child {
-    border-bottom: 1px solid $color-base;
+    border-bottom: 1px solid $color-gray-light;
 
     @include media($medium-screen) {
       border-bottom: none;
@@ -165,9 +227,9 @@ li.usa-footer-primary-content {
 /* stylelint-enable */
 
 .usa-sign_up-block {
-  padding-bottom: 2rem;
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
+  padding-bottom: 4.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 
   @include media($medium-screen) {
     float: right;
@@ -191,8 +253,8 @@ li.usa-footer-primary-content {
 
 .usa-footer-secondary_section {
   background-color: $color-gray-lighter;
-  padding-bottom: 3rem;
-  padding-top: 3rem;
+  padding-bottom: $spacing-medium;
+  padding-top: $spacing-medium;
 
   a {
     color: $color-base;
@@ -201,7 +263,8 @@ li.usa-footer-primary-content {
 
 .usa-footer-big-secondary-section {
   @include media($medium-screen) {
-    padding-top: 5rem;
+    padding-top: $spacing-medium;
+    padding-bottom: $spacing-medium;
   }
 }
 
@@ -218,11 +281,63 @@ li.usa-footer-primary-content {
 }
 
 .usa-footer-big {
+  .usa-footer-contact_info {
+    display: block;
+
+    p {
+      margin: 0 $spacing-small 0 0;
+
+      @include media($medium-screen) {
+        margin: $spacing-x-small 0 0 $spacing-small;
+      }
+    }
+  }
+
+  .usa-footer-contact-links {
+    @include media($medium-screen) {
+      padding-top: $spacing-medium;
+    }
+  }
+
+  .usa-footer-logo {
+    padding: $spacing-small 0;
+
+    @include media($medium-screen) {
+      padding: $spacing-medium 0;
+    }
+  }
+
   .usa-footer-primary-section {
     @include media($medium-screen) {
       padding-bottom: 4rem;
       padding-top: 3rem;
     }
+
+    > .usa-grid {
+      padding: 0;
+
+      @include media($medium-screen) {
+        padding-left: $spacing-large;
+        padding-right: $spacing-large;
+      }
+    }
+
+    .usa-footer-primary-content {
+      padding-left: 0;
+      padding-right: 0;
+
+      li {
+        margin-left: $spacing-md-small;
+
+        @include media($medium-screen) {
+          margin-left: 0;
+        }
+      }
+
+      .usa-footer-primary-link {
+        margin-left: 0;
+      }
+    }
   }
 
   ul {
@@ -233,7 +348,7 @@ li.usa-footer-primary-content {
     }
 
     &:last-child {
-      border-bottom: 1px solid $color-base;
+      border-bottom: 1px solid $color-gray-light;
 
       @include media($medium-screen) {
         border-bottom: none;
@@ -300,33 +415,52 @@ li.usa-footer-primary-content {
 }
 
 .usa-footer-logo-img {
-  max-width: 14rem;
+  max-width: 8rem;
+
+  @include media($medium-screen) {
+    float: left;
+  }
+}
+
+.usa-footer-big-logo-img {
+  max-width: 10rem;
 }
 
 .usa-footer-slim-logo-img {
   float: left;
-  max-width: 10rem;
+  max-width: 5rem;
 }
 
 .usa-footer-logo-heading {
-  margin-top: 2rem;
+  display: block;
+  margin-top: $spacing-small;
+
+  @include media($medium-screen) {
+    display: inline-block;
+    margin-top: $spacing-large;
+    padding-left: $spacing-md-small;
+  }
 }
 
-.usa-footer-contact-heading {
-  margin-top: 0;
+.usa-footer-big-logo-heading {
+  margin-top: $spacing-md-small;
 
   @include media($medium-screen) {
-    margin-top: 1rem;
+    margin-top: $spacing-medium;
   }
 }
 
 .usa-footer-slim-logo-heading {
-  display: block;
-  padding-top: 1rem;
+  display: inline-block;
+  margin-top: $spacing-md-small;
+  padding-left: $spacing-md-small;
+}
+
+.usa-footer-contact-heading {
+  margin-top: 0;
 
   @include media($medium-screen) {
-    display: inline-block;
-    padding-left: 1em;
+    margin-top: 1rem;
   }
 }
 
@@ -348,8 +482,8 @@ li.usa-footer-primary-content {
   width: $hit-area;
 
   @include media($medium-screen) {
-    @include margin(0 0 0 1rem);
-    left: 1.2rem;
+    @include margin(0 0 0 $spacing-x-small);
+    left: $spacing-md-small;
   }
 
   span {