uswds-jekyll 2.2.1 → 3.0.0

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

@@ -1,252 +0,0 @@
-// 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-size: $h6-font-size;
-  font-weight: $font-normal;
-  line-height: $base-line-height;
-  text-transform: uppercase;
-}
-
-// Focus state mixin
-@mixin focus {
-  outline: $focus-outline;
-  outline-offset: $focus-spacing;
-}
-
-// 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;
-}
-
-// This "negates" the sr-only() helper; useful if
-// we want the default state of something to be
-// for screen readers only, but we want to force
-// it to show for sighted users under more specific
-// conditions.
-@mixin not-sr-only() {
-  position: static;
-}
-
-.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: url('#{$image-path}/#{$icon}.png');
-    background-image: 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: url('#{$image-path}/#{$icon}-hover.png');
-      background-image: 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 $site-margins-mobile;
-    text-decoration: none;
-
-    &:hover {
-      background-color: $color-gray-lightest;
-      color: $color-primary;
-      text-decoration: none;
-    }
-
-    &:focus {
-      outline-offset: 0;
-      position: relative;
-      z-index: 1;
-    }
-
-    &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
-      border-left: $sidenav-current-border-width solid $color-primary;
-      color: $color-primary;
-      font-weight: $font-bold;
-      padding-left: $site-margins-mobile - $sidenav-current-border-width;
-    }
-  }
-}
-
-@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;
-
-      &:focus {
-        outline-offset: 0;
-      }
-
-      &:hover {
-        padding-left: 3.8rem;
-      }
-    }
-  }
-}

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

@@ -1,156 +0,0 @@
-// These variables drive almost every aspect of the U.S. Web Design
-// system. Every variable is declared as !default so that it can be
-// overridden by a previous import.
-//
-// XXX Do not modify this file!
-//
-// If you want to override a variable, set that variable in one of your
-// own partials, then @import '{path/to/uswds/}core/variables'.
-
-// Typography
-// Removing the !default from $em-base so we are not inheriting that
-// value from Bourbon.
-$em-base:             10px;
-$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;
-
-$font-sans:           'Source Sans Pro', $helvetica !default;
-$font-serif:          'Merriweather', $georgia !default;
-
-// TODO these should be called font-weight-${}
-$font-normal:         400 !default;
-$font-bold:           700 !default;
-
-// Color
-$color-blue:                 #0071bc !default;
-$color-blue-darker:          #205493 !default;
-$color-blue-darkest:         #112e51 !default;
-
-$color-aqua:                 #02bfe7 !default;
-$color-aqua-dark:            #00a6d2 !default;
-$color-aqua-darkest:         #046b99 !default;
-$color-aqua-light:           #9bdaf1 !default;
-$color-aqua-lightest:        #e1f3f8 !default;
-
-$color-red:                  #e31c3d !default;
-$color-red-dark:             #cd2026 !default;
-$color-red-darkest:          #981b1e !default;
-$color-red-light:            #e59393 !default;
-$color-red-lightest:         #f9dede !default;
-
-$color-white:                #ffffff !default;
-$color-black:                #000000 !default;
-$color-black-light:          #212121 !default;
-
-$color-gray-dark:            #323a45 !default;
-$color-gray:                 #5b616b !default;
-$color-gray-medium:          #757575 !default;
-$color-gray-light:           #aeb0b5 !default;
-$color-gray-lighter:         #d6d7d9 !default;
-$color-gray-lightest:        #f1f1f1 !default;
-
-$color-gray-warm-dark:       #494440 !default;
-$color-gray-warm-light:      #e4e2e0 !default;
-$color-gray-cool-light:      #dce4ef !default;
-
-$color-gold:                 #fdb81e !default;
-$color-gold-light:           #f9c642 !default;
-$color-gold-lighter:         #fad980 !default;
-$color-gold-lightest:        #fff1d2 !default;
-
-$color-green:                #2e8540 !default;
-$color-green-light:          #4aa564 !default;
-$color-green-lighter:        #94bfa2 !default;
-$color-green-lightest:       #e7f4e4 !default;
-
-$color-cool-blue:            #205493 !default;
-$color-cool-blue-light:      #4773aa !default;
-$color-cool-blue-lighter:    #8ba6ca !default;
-$color-cool-blue-lightest:   #dce4ef !default;
-
-$color-purple:               #4c2c92 !default;
-
-// Functional colors
-$color-primary:              $color-blue !default;
-$color-primary-darker:       $color-blue-darker !default;
-$color-primary-darkest:      $color-blue-darkest !default;
-
-$color-primary-alt:          $color-aqua !default;
-$color-primary-alt-dark:     $color-aqua-dark !default;
-$color-primary-alt-darkest:  $color-aqua-darkest !default;
-$color-primary-alt-light:    $color-aqua-light !default;
-$color-primary-alt-lightest: $color-aqua-lightest !default;
-
-$color-secondary:            $color-red !default;
-$color-secondary-dark:       $color-red-dark !default;
-$color-secondary-darkest:    $color-red-darkest !default;
-$color-secondary-light:      $color-red-light !default;
-$color-secondary-lightest:   $color-red-lightest !default;
-
-$color-base:                 $color-black-light !default;
-$color-focus:                $color-gray-light !default;
-$color-visited:              $color-purple !default;
-
-$color-shadow:               rgba(#000, 0.3) !default;
-$color-transparent:          rgba(#000, 0) !default;
-
-// Mobile First Breakpoints
-$small-screen:  481px !default;
-$medium-screen: 600px !default;
-$large-screen:  1201px !default;
-
-// Grid column counts by screen size
-$grid-columns-small: 1 !default;
-$grid-columns-medium: 6 !default;
-$grid-columns-large: 12 !default;
-
-// @media single-keyword helpers
-$small: new-breakpoint(min-width $small-screen $grid-columns-small) !default;
-$medium: new-breakpoint(min-width $medium-screen $grid-columns-medium) !default;
-$large: new-breakpoint(min-width $large-screen $grid-columns-large) !default;
-
-// Relative font and image file paths
-$font-path:   '../fonts' !default;
-$image-path:  '../img' !default;
-
-// Set $asset-pipeline to true if you're using the Rails Asset Pipeline
-$asset-pipeline:      false !default;
-
-// Magic Numbers
-$text-max-width:                66ch !default; // 66 characters per line
-$lead-max-width:                77rem !default;
-$site-max-width:                1040px !default;
-$site-margins:                  3rem !default;
-$site-margins-mobile:           1.5rem !default;
-$article-max-width:             600px !default;
-$input-max-width:               46rem !default;
-$label-border-radius:           2px !default;
-$checkbox-border-radius:        2px !default;
-$border-radius:                 3px !default;
-$button-border-radius:          5px !default;
-$box-shadow:                    0 0 2px $color-shadow !default;
-$focus-outline:                 2px dotted $color-gray-light !default;
-$focus-spacing:                 3px !default;
-$nav-width:                     951px !default;
-$sidenav-current-border-width:  0.4rem !default; // must be in rem for math
-
-// 44 x 44 pixels hit target following Apple iOS Human Interface
-// Guidelines
-$hit-area: 4.4rem !default;
-
-$spacing-x-small: 0.5rem;
-$spacing-small: 1rem;
-$spacing-md-small: 1.5rem;
-$spacing-medium: 2rem;
-$spacing-large: 3rem;

data/assets/uswds/scss/elements/_buttons.scss

@@ -1,217 +0,0 @@
-// Buttons variables
-
-$button-stroke: inset 0 0 0 2px;
-
-// Buttons
-
-// This mixin is only needed until we fully remove the
-// deprecated usa-button-disabled style.
-@mixin disabledesque {
-  background-color: $color-gray-lighter;
-  pointer-events: none;
-
-  &:hover,
-  &.usa-button-hover,
-  &:active,
-  &.usa-button-active,
-  &:focus,
-  &.usa-focus {
-    background-color: $color-gray-lighter;
-    border: 0;
-    box-shadow: none;
-  }
-}
-
-/* stylelint-disable selector-no-qualifying-type */
-.usa-button,
-.usa-button-primary,
-.usa-button:visited,
-.usa-button-primary:visited,
-button,
-[type=button],
-[type=submit],
-[type=reset],
-[type=image] {
-  @include font-smoothing;
-  @include margin(0.5em 0.5em 0.5em null);
-  appearance: none;
-  background-color: $color-primary;
-  border: 0;
-  border-radius: $button-border-radius;
-  color: $color-white;
-  cursor: pointer;
-  display: inline-block;
-  font-family: $font-sans;
-  font-size: $base-font-size;
-  font-weight: $font-bold;
-  line-height: 1;
-  padding: 1rem 2rem;
-  text-align: center;
-  text-decoration: none;
-  width: 100%;
-
-  @include media($small-screen) {
-    width: auto;
-  }
-
-  &:hover,
-  &.usa-button-hover {
-    background-color: $color-primary-darker;
-    border-bottom: 0;
-    color: $color-white;
-    text-decoration: none;
-  }
-
-  &:active,
-  &.usa-button-active {
-    background-color: $color-primary-darkest;
-  }
-
-  &.usa-button-primary-alt {
-    background-color: $color-primary-alt;
-    color: $color-base;
-
-    &:hover,
-    &.usa-button-hover {
-      background-color: $color-primary-alt-dark;
-    }
-
-    &:active,
-    &.usa-button-active {
-      background-color: $color-primary-alt-darkest;
-      color: $color-white;
-    }
-  }
-
-  &.usa-button-secondary {
-    background-color: $color-white;
-    box-shadow: $button-stroke $color-primary;
-    color: $color-primary;
-
-    &:hover,
-    &.usa-button-hover {
-      box-shadow: $button-stroke $color-primary-darker;
-      color: $color-primary-darker;
-    }
-
-    &:active,
-    &.usa-button-active {
-      box-shadow: $button-stroke $color-primary-darkest;
-      color: $color-primary-darkest;
-    }
-  }
-
-  &.usa-button-secondary-inverse,
-  &.usa-button-outline-inverse {    // Outline inverse to be deprecated in 2.0
-    background: transparent;
-    box-shadow: $button-stroke $color-white;
-    color: $color-white;
-
-    &:hover,
-    &.usa-button-hover {
-      box-shadow: $button-stroke $color-gray-lighter;
-      color: $color-gray-lighter;
-    }
-
-    &:active,
-    &.usa-button-active {
-      box-shadow: $button-stroke $color-gray-light;
-      color: $color-gray-lighter;
-    }
-  }
-
-  &.usa-button-gray {
-    background-color: $color-gray;
-
-    &:hover,
-    &.usa-button-hover {
-      background-color: $color-gray-dark;
-    }
-
-    &:active,
-    &.usa-button-active {
-      background-color: $color-base;
-    }
-  }
-
-  &.usa-button-red {
-    background-color: $color-secondary;
-
-    &:hover,
-    &.usa-button-hover {
-      background-color: $color-secondary-dark;
-    }
-
-    &:active,
-    &.usa-button-active {
-      background-color: $color-secondary-darkest;
-    }
-  }
-
-  &.usa-button-big {
-    border-radius: 8px;
-    font-size: 2.4rem;
-    padding: 1.5rem 3rem;
-  }
-
-  &:disabled {
-    @include disabledesque;
-  }
-}
-/* stylelint-disable */
-
-.usa-button-disabled  // Deprecated
-{
-  @include disabledesque
-}
-
-.usa-button-secondary-disabled,          // Deprecated
-.usa-button-secondary-inverse-disabled,  // Deprecated
-.usa-button-secondary:disabled,
-.usa-button-secondary-inverse:disabled,
-.usa-button-outline-inverse:disabled {   // Outline inverse to be deprecated in 2.0
-  box-shadow: $button-stroke $color-gray-lighter;
-  pointer-events: none;
-  color: $color-gray-lighter;
-
-  &:hover,
-  &.usa-button-hover,
-  &:active,
-  &.usa-button-active,
-  &:focus,
-  &.usa-focus {
-    background-color: $color-white;
-    border: 0;
-  }
-}
-
-html .usa-button-secondary-disabled,          // Deprecated
-.usa-button-secondary:disabled {
-  background-color: $color-white;
-}
-
-html .usa-button-secondary-inverse-disabled,  // Deprecated
-.usa-button-secondary-inverse:disabled {
-  background-color: transparent;
-  color: $color-gray;
-  box-shadow: $button-stroke $color-gray;
-}
-
-@mixin button-unstyled {
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  font-weight: $font-normal;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  -webkit-font-smoothing: auto;
-
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-.usa-button-unstyled {
-  @include button-unstyled;
-}