uswds-jekyll 2.2.1 → 3.0.0

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

@@ -1,125 +0,0 @@
-// Alert variables ---------- //
-$usa-custom-alerts: () !default;
-$usa-custom-alerts-bar: () !default;
-
-$usa-alerts: (
-  success: $color-green-lightest,
-  warning: $color-gold-lightest,
-  error: $color-secondary-lightest,
-  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: $h-padding $h-padding;
-  background-repeat: no-repeat;
-  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 {
-    color: $color-primary-darker;
-
-    &:focus,
-    &:hover {
-      color: $color-primary-darkest;
-    }
-  }
-
-  ul {
-    margin-bottom: 0;
-    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: $spacing-small;
-}
-
-.usa-alert-body {
-  display: table-cell;
-  padding-left: $icon-size + $h-padding;
-  vertical-align: top;
-}
-
-.usa-alert-heading {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.usa-alert-text {
-  font-family: $font-sans;
-  margin-bottom: 0;
-  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: url('#{$image-path}/alerts/#{$name}.png');
-    background-image: url('#{$image-path}/alerts/#{$name}.svg');
-
-    &::before {
-      background-color: map-get($alerts-bar, $name);
-    }
-  }
-}
-
-.usa-alert-no_icon {
-  background-image: none;
-}
-
-.usa-alert-paragraph {
-  width: $text-max-width;
-}
-
-// Deprecated
-.usa-alert {
-  margin-top: 1.5em; // TODO deprecate
-}

data/assets/uswds/scss/components/_banner.scss

@@ -1,204 +0,0 @@
-.usa-banner {
-  background-color: $color-gray-lightest;
-  padding-bottom: 0.7rem;
-
-  @include media($small-screen) {
-    font-size: $h6-font-size;
-    padding-bottom: 0;
-  }
-}
-
-.usa-banner-content {
-  @include padding(null $site-margins-mobile 3px $site-margins-mobile);
-  background-color: transparent;
-  font-size: $h5-font-size;
-  padding-top: 2rem;
-  width: 100%;
-
-  @include media($medium-screen) {
-    padding-bottom: 2.3rem;
-    padding-top: 4rem;
-  }
-
-  @include media($nav-width) {
-    @include padding(null $site-margins);
-  }
-
-  p {
-    &:first-child {
-      margin-top: 1rem;
-
-      @include media($medium-screen) {
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-.usa-banner-inner {
-  @include outer-container();
-  @include padding(null $site-margins-mobile);
-  max-width: $site-max-width;
-
-  @include media($nav-width) {
-    @include padding(null $site-margins);
-  }
-}
-
-.usa-banner-header {
-  @include padding(0.55rem null);
-  font-size: 1.2rem;
-  font-weight: $font-normal;
-
-  @include media($small-screen) {
-    @include padding(0 null);
-  }
-
-  p {
-    @include margin(0 null);
-    display: inline;
-    overflow: hidden;
-    vertical-align: middle;
-
-    @include media($small-screen) {
-      @include margin(2px null);
-      display: inline-block;
-    }
-  }
-
-  img {
-    float: left;
-    margin-right: 1rem;
-    margin-top: 1px;
-    width: 2.4rem;
-
-    @include media($small-screen) {
-      margin-right: 0.7rem;
-      width: 2rem;
-    }
-  }
-}
-
-.usa-banner-header-expanded {
-  align-items: center;
-  border-bottom: 1px solid $color-gray-light;
-  display: flex;
-  font-size: $h5-font-size;
-  min-height: 5.6rem;
-  padding-right: 3rem;
-
-  @include media($small-screen) {
-    border-bottom: none;
-    display: block;
-    font-size: 1.2rem;
-    font-weight: $font-normal;
-    min-height: 0;
-    padding-right: 0;
-  }
-
-  > .usa-banner-inner {
-    margin-left: 0;
-
-    @include media($small-screen) {
-      margin-left: auto;
-    }
-  }
-
-  img {
-    margin-right: 2.4rem;
-
-    @include media($small-screen) {
-      margin-right: 0.7rem;
-    }
-  }
-
-  p {
-    line-height: $heading-line-height;
-    vertical-align: top;
-
-    @include media($small-screen) {
-      line-height: $base-line-height;
-      vertical-align: middle;
-    }
-  }
-}
-
-.usa-banner-button {
-  @include button-unstyled;
-  @include padding(1.3rem null null 4.8rem);
-  background-position-x: right;
-  color: $color-primary;
-  display: block;
-  font-size: 1.2rem;
-  height: 4.3rem;
-  left: 0;
-  position: absolute;
-  text-decoration: underline;
-  top: 0;
-  width: 100%;
-
-  @include media($small-screen) {
-    @include padding(0 null null 0);
-    /* stylelint-disable declaration-block-no-ignored-properties */
-    display: inline;
-    height: initial;
-    margin-left: 3px;
-    position: relative;
-    vertical-align: middle;
-    width: initial;
-    /* stylelint-enable */
-  }
-
-  &:hover {
-    color: $color-primary-darker;
-    text-decoration: underline;
-  }
-
-  &[aria-expanded=false] {
-    @include display-icon(angle-arrow-down-primary, after, 1rem, 0, hover);
-    background-image: none;
-
-    &::after {
-      background-position-y: 1px;
-    }
-  }
-
-  &[aria-expanded=true] {
-    @include display-icon(close, after, 1.3rem, 0, no-hover);
-    background-image: none;
-    height: 5.6rem;
-
-    @include media($small-screen) {
-      @include display-icon(angle-arrow-up-primary, after, 1rem, 0, hover);
-      height: initial;
-      padding: 0;
-      position: relative;
-
-      &::after {
-        background-position-y: 1px;
-      }
-    }
-
-    &::after {
-      position: absolute;
-      right: 1.5rem;
-      top: 2.15rem;
-
-      @include media($small-screen) {
-        position: static;
-      }
-    }
-
-    .usa-banner-button-text {
-      display: none;
-
-      @include media($small-screen) {
-        display: inline;
-      }
-    }
-  }
-}
-
-.usa-banner-icon {
-  width: 3.8rem;
-}

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

@@ -1,518 +0,0 @@
-.usa-footer {
-  .usa-unstyled-list {
-    display: block;
-  }
-
-  .usa-footer-primary-link {
-    color: $color-base;
-    display: block;
-    font-weight: $font-bold;
-    margin-top: 0;
-    padding-bottom: $spacing-medium;
-    padding-top: $spacing-medium;
-    text-decoration: none;
-
-    @include media($medium-screen) {
-      border-top: none;
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .usa-footer-primary-link ~ li a,
-  .usa-footer-secondary-link {
-    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 {
-  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: 1.5rem;
-    padding-right: 2.5rem;
-
-    @include media($medium-screen) {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    li {
-      margin-left: 1rem;
-
-      @include media($medium-screen) {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .usa-grid-full {
-    @include media($medium-screen) {
-      padding-left: 2.5rem;
-      padding-right: 2.5rem;
-    }
-  }
-}
-
-.usa-footer-medium {
-  .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: $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: 5%;
-        width: inherit;
-      }
-
-      &:last-child {
-        @include media($large-screen) {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-
-  .usa-footer-nav ul {
-    @include media($medium-screen) {
-      align-items: center;
-    }
-  }
-}
-
-.usa-footer-slim {
-  .usa-footer-nav {
-    a {
-      display: block;
-    }
-
-    .usa-footer-primary-content {
-      @include media($large-screen) {
-        margin-right: 5%;
-        width: inherit;
-      }
-
-      &:last-child {
-        @include media($large-screen) {
-          margin-right: 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;
-      }
-    }
-
-    @include media($medium-screen) {
-      padding-bottom: 0;
-      padding-top: 0;
-
-      .usa-grid-full {
-        align-items: center;
-      }
-    }
-  }
-
-  .usa-footer-contact_info {
-    > * {
-      @include media($medium-screen) {
-        margin: 0;
-      }
-    }
-
-    @include media($medium-screen) {
-      @include padding ($spacing-md-small null);
-    }
-
-    @include media($medium-screen) {
-      width: 100%;
-    }
-
-    @include media($large-screen) {
-      @include span-columns(6);
-    }
-  }
-}
-
-/* stylelint-disable selector-no-qualifying-type */
-ul.usa-footer-primary-content,
-li.usa-footer-primary-content,
-li.usa-footer-primary-content {
-  border-top: 1px solid $color-gray-light;
-
-  @include media($medium-screen) {
-    border: none;
-  }
-
-  &:last-child {
-    border-bottom: 1px solid $color-gray-light;
-
-    @include media($medium-screen) {
-      border-bottom: none;
-    }
-  }
-}
-/* stylelint-enable */
-
-.usa-sign_up-block {
-  padding-bottom: 4.5rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-
-  @include media($medium-screen) {
-    float: right;
-    padding: 0;
-  }
-
-  label:first-of-type {
-    margin-top: 0;
-  }
-
-  button {
-    float: none;
-    margin-right: 0;
-    margin-top: 1.5rem;
-  }
-
-  input {
-    width: 100%;
-  }
-}
-
-.usa-footer-secondary_section {
-  background-color: $color-gray-lighter;
-  padding-bottom: $spacing-medium;
-  padding-top: $spacing-medium;
-
-  a {
-    color: $color-base;
-  }
-}
-
-.usa-footer-big-secondary-section {
-  @include media($medium-screen) {
-    padding-top: $spacing-medium;
-    padding-bottom: $spacing-medium;
-  }
-}
-
-.usa-footer-contact-links {
-  @include media($medium-screen) {
-    text-align: right;
-  }
-}
-
-.usa-social-links {
-  a {
-    text-decoration: none;
-  }
-}
-
-.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 {
-    padding-bottom: 2.4rem;
-
-    @include media($medium-screen) {
-      padding-bottom: 0;
-    }
-
-    &:last-child {
-      border-bottom: 1px solid $color-gray-light;
-
-      @include media($medium-screen) {
-        border-bottom: none;
-      }
-    }
-
-    li:not(.usa-footer-primary-link) {
-      line-height: $heading-line-height;
-      padding-bottom: 0.35em;
-      padding-top: 0.35em;
-    }
-
-    .usa-footer-primary-link {
-      background-image: url('#{$image-path}/arrow-down.png');
-      background-image: url('#{$image-path}/arrow-down.svg');
-      background-position: 1.5rem center;
-      background-repeat: no-repeat;
-      background-size: 1.3rem;
-      margin-left: 0;
-      padding-left: 3.5rem;
-
-      @include media($medium-screen) {
-        background: none;
-        margin-bottom: .8rem;
-        padding-bottom: 0;
-        padding-left: 0;
-      }
-
-      > * {
-        @include margin(0 null);
-      }
-    }
-
-    &.hidden { /* stylelint-disable-line selector-no-qualifying-type */
-      padding-bottom: 0;
-
-      li {
-        display: none;
-      }
-
-      .usa-footer-primary-link { /* stylelint-disable-line selector-no-qualifying-type */
-        background-image: url('#{$image-path}/arrow-right.png');
-        background-image: url('#{$image-path}/arrow-right.svg');
-        cursor: pointer;
-        display: block;
-
-        @include media($medium-screen) {
-          background: none;
-          padding-left: 0;
-        }
-      }
-    }
-  }
-}
-
-.usa-footer-topic {
-  margin: 0;
-  padding: 2rem 0;
-}
-
-.usa-sign_up-header {
-  @include media($medium-screen) {
-    margin: 0;
-    padding: 2rem 0;
-  }
-}
-
-.usa-footer-logo-img {
-  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: 5rem;
-}
-
-.usa-footer-logo-heading {
-  display: block;
-  margin-top: $spacing-small;
-
-  @include media($medium-screen) {
-    display: inline-block;
-    margin-top: $spacing-large;
-    padding-left: $spacing-md-small;
-  }
-}
-
-.usa-footer-big-logo-heading {
-  margin-top: $spacing-md-small;
-
-  @include media($medium-screen) {
-    margin-top: $spacing-medium;
-  }
-}
-
-.usa-footer-slim-logo-heading {
-  display: inline-block;
-  margin-top: $spacing-md-small;
-  padding-left: $spacing-md-small;
-}
-
-.usa-footer-contact-heading {
-  margin-top: 0;
-
-  @include media($medium-screen) {
-    margin-top: 1rem;
-  }
-}
-
-.usa-social_link {
-  $background-height: 3rem; // Height of icon within hit area.
-  // Link hit target is 44 x 44 pixels following
-  // Apple iOS Human Interface Guidelines.
-  $hit-area: 4.4rem;
-
-  @include margin(2.5rem 1rem 1.5rem 0);
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: auto $background-height;
-  display: inline-block;
-  height: $hit-area;
-  left: -1.6rem; // relative left positioning
-  position: relative;
-  text-align: center;
-  width: $hit-area;
-
-  @include media($medium-screen) {
-    @include margin(0 0 0 $spacing-x-small);
-    left: $spacing-md-small;
-  }
-
-  span {
-    @include sr-only();
-  }
-}
-
-.usa-link-facebook {
-  @extend .usa-social_link;
-  background-image: url('#{$image-path}/social-icons/png/facebook25.png');
-  background-image: url('#{$image-path}/social-icons/svg/facebook25.svg');
-}
-
-.usa-link-twitter {
-  @extend .usa-social_link;
-  background-image: url('#{$image-path}/social-icons/png/twitter16.png');
-  background-image: url('#{$image-path}/social-icons/svg/twitter16.svg');
-}
-
-.usa-link-youtube {
-  @extend .usa-social_link;
-  background-image: url('#{$image-path}/social-icons/png/youtube15.png');
-  background-image: url('#{$image-path}/social-icons/svg/youtube15.svg');
-}
-
-.usa-link-rss {
-  @extend .usa-social_link;
-  background-image: url('#{$image-path}/social-icons/png/rss25.png');
-  background-image: url('#{$image-path}/social-icons/svg/rss25.svg');
-}