uswds-rails 0.1.0

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

@@ -0,0 +1,123 @@
+// 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:      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-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;
+
+$font-normal:         400 !default;
+$font-bold:           700 !default;
+
+// Color
+$color-primary:              #0071bc !default;
+$color-primary-darker:       #205493 !default;
+$color-primary-darkest:      #112e51 !default;
+
+$color-primary-alt:          #02bfe7 !default;
+$color-primary-alt-dark:     #00a6d2 !default;
+$color-primary-alt-darkest:  #046b99 !default;
+$color-primary-alt-light:    #9bdaf1 !default; // lighten($color-primary-alt, 60%)
+$color-primary-alt-lightest: #e1f3f8 !default; // lighten($color-primary-alt, 90%)
+
+$color-secondary:            #e31c3d !default;
+$color-secondary-dark:       #cd2026 !default;
+$color-secondary-darkest:    #981b1e !default;
+$color-secondary-light:      #e59393 !default; // lighten($color-secondary, 60%)
+$color-secondary-lightest:   #f9dede !default; // lighten($color-secondary, 90%)
+
+$color-white:                #ffffff !default;
+$color-base:                 #212121 !default;
+$color-black:                #000000 !default;
+
+$color-gray-dark:            #323a45 !default;
+$color-gray:                 #5b616b !default; // lighten($color-gray-dark, 20%)
+$color-gray-medium:          #757575 !default; // lightest gray that passes color contrast
+$color-gray-light:           #aeb0b5 !default; // lighten($color-gray-dark, 60%)
+$color-gray-lighter:         #d6d7d9 !default; // lighten($color-gray-dark, 80%)
+$color-gray-lightest:        #f1f1f1 !default; // lighten($color-gray-dark, 91%)
+
+$color-gray-warm-dark:       #494440 !default;
+$color-gray-warm-light:      #e4e2e0 !default; // lighten($color-gray-warm-dark, 90%)
+$color-gray-cool-light:      #dce4ef !default; // lighten($color-primary, 90%)
+
+$color-gold:                 #fdb81e !default;
+$color-gold-light:           #f9c642 !default; //  lighten($color-gold, 20%)
+$color-gold-lighter:         #fad980 !default; //  lighten($color-gold, 60%)
+$color-gold-lightest:        #fff1d2 !default; //  lighten($color-gold, 83%)
+
+$color-green:                #2e8540 !default;
+$color-green-light:          #4aa564 !default; // lighten($color-green, 20%)
+$color-green-lighter:        #94bfa2 !default; // lighten($color-green, 60%)
+$color-green-lightest:       #e7f4e4 !default; // lighten($color-green, 60%)
+
+$color-cool-blue:            #205493 !default;
+$color-cool-blue-light:      #4773aa !default; // lighten($color-cool-blue, 20%)
+$color-cool-blue-lighter:    #8ba6ca !default; // lighten($color-cool-blue, 60%)
+$color-cool-blue-lightest:   #dce4ef !default; // lighten($color-cool-blue, 90%)
+
+$color-focus:                #3e94cf !default;
+$color-visited:              #4c2c92 !default;
+
+$color-shadow:               rgba(#000, 0.3) !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:      53rem !default;
+$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;
+$border-radius:       rem(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;
+
+// 44 x 44 pixels hit target following Apple iOS Human Interface
+// Guidelines
+$hit-area: 4.4rem !default;

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

@@ -0,0 +1,191 @@
+// Buttons variables
+
+$button-stroke: inset 0 0 0 2px;
+
+// Buttons
+
+/* 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: $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;
+  outline: none;
+  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;
+  }
+
+  &:focus,
+  &.usa-button-focus {
+    box-shadow: $focus-shadow;
+  }
+
+  &: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-secondary;
+
+    &:hover,
+    &.usa-button-hover {
+      background-color: $color-secondary-dark;
+    }
+
+    &:active,
+    &.usa-button-active {
+      background-color: $color-secondary-darkest;
+    }
+  }
+
+  &.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-outline {
+    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;
+    }
+
+    &:focus,
+    &.usa-button-focus {
+      box-shadow: $button-stroke $color-primary-darkest, $focus-shadow;
+    }
+  }
+
+  &.usa-button-outline-inverse {
+    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;
+    }
+
+    &:focus,
+    &.usa-button-focus {
+      box-shadow: $button-stroke $color-gray-light, $focus-shadow;
+    }
+  }
+
+  &.usa-button-big {
+    font-size: 1.9rem;
+    padding: 1.5rem 3rem;
+  }
+}
+/* stylelint-disable */
+
+.usa-button:disabled,
+.usa-button-disabled {
+  background-color: $color-gray-lighter;
+  color: $color-gray-dark;
+  pointer-events: none;
+
+  &:hover,
+  &.usa-button-hover,
+  &:active,
+  &.usa-button-active,
+  &:focus {
+    background-color: $color-gray-lighter;
+    border: 0;
+    box-shadow: none;
+    color: $color-gray-dark;
+  }
+}
+
+@mixin button-unstyled {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  font-weight: $font-normal;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  text-align: left;
+  -webkit-font-smoothing: auto;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+.usa-button-unstyled {
+  @include button-unstyled;
+}

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

@@ -0,0 +1,26 @@
+$aspect-height: 9;
+$aspect-width: 16;
+
+@mixin embed-container ($height, $width) {
+  padding-bottom: percentage($height/$width);
+}
+
+.usa-embed-container {
+  iframe,
+  object,
+  embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.usa-embed-container {
+  @include embed-container($aspect-height, $aspect-width);
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}

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

@@ -0,0 +1,13 @@
+img {
+  max-width: 100%;
+}
+
+// TODO: Add documentation instructions for using this class on image links
+@mixin media-link {
+  display: inline-block;
+  line-height: 0;
+}
+
+.media_link {
+  @include media-link();
+}

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

@@ -0,0 +1,346 @@
+// scss-lint:disable QualifyingElement, PropertyCount
+
+$input-line-height: 1.3;
+$input-border-width: 1px;
+$input-padding-vertical: 1rem;
+
+// input heights will vary by browser and type
+// if height not explicitly set
+$input-height-exact: (
+  ($base-font-size * $input-line-height) +
+  ($input-padding-vertical * 2) +
+  (rem($input-border-width * 2))
+);
+
+// truncated to 1 decimal place
+// (i.e., 1.21rem -> 1.2rem)
+$input-height: floor($input-height-exact * 10) / 10;
+
+// Block form elements
+/* stylelint-disable selector-no-qualifying-type */
+input,
+textarea,
+select {
+  appearance: none;
+  border: $input-border-width solid $color-gray;
+  border-radius: 0;
+  box-sizing: border-box;
+  color: $color-base; // standardize on firefox
+  display: block;
+  font-size: $base-font-size;
+  height: $input-height;
+  line-height: $input-line-height;
+  margin: 0.2em 0;
+  max-width: $input-max-width;
+  outline: none;
+  padding: $input-padding-vertical 0.7em;
+  width: 100%;
+
+  &:focus,
+  &.usa-input-focus {
+    box-shadow: $focus-shadow;
+  }
+
+  &.usa-input-success {
+    border: 3px solid $color-green-light;
+  }
+}
+/* stylelint-enable */
+
+.usa-input-error {
+  border-left: 4px solid $color-secondary-dark;
+  margin-top: 3rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.5rem;
+  padding-top: 0.8rem;
+  position: relative;
+  right: 1.9rem;
+
+  input,
+  textarea,
+  select {
+    border: 3px solid $color-secondary-dark;
+    width: calc(100% + 1.9rem); // 1.5rem left padding + 4px border from input error spacing
+  }
+
+  label {
+    margin-top: 0;
+  }
+
+  .usa-input-inline {
+    border: $input-border-width solid $color-gray;
+    width: inherit;
+  }
+
+  .usa-input-inline-error {
+    border: 3px solid $color-secondary-dark;
+  }
+}
+
+.usa-input-error-label {
+  display: block;
+  font-size: $base-font-size;
+  font-weight: $font-bold;
+}
+
+.usa-input-error-message {
+  color: $color-secondary-dark;
+  display: block;
+  font-size: $base-font-size;
+  font-weight: $font-bold;
+  padding-bottom: 3px;
+  padding-top: 3px;
+}
+
+.usa-input-required:after {
+  color: $color-secondary-darkest;
+  content: ' (*Required)';
+}
+
+label {
+  display: block;
+  margin-top: 3rem;
+  max-width: $input-max-width;
+}
+
+textarea {
+  height: 16rem;
+}
+
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: $color-white;
+  background-image: url('#{$image-path}/arrow-down.png');
+  background-image: url('#{$image-path}/arrow-down.svg');
+  background-position: right 1.3rem center;
+  background-repeat: no-repeat;
+  background-size: 1.3rem;
+}
+
+legend {
+  font-size: $h2-font-size;
+  font-weight: $font-bold;
+}
+
+.usa-fieldset-inputs {
+  label {
+    margin-top: 0;
+  }
+}
+
+// Hint text
+
+.usa-form-hint {
+  color: $color-gray-medium;
+  font-family: $font-sans;
+  margin-bottom: 0;
+}
+
+// Custom checkboxes
+
+[type=checkbox],
+[type=radio] {
+  margin-left: -2rem;
+  opacity: 0;
+  position: absolute;
+
+  .lt-ie9 & {
+    border: 0;
+    float: left;
+    margin: 0.4em 0.4em 0 0;
+    position: static;
+    width: auto;
+  }
+}
+
+[type=checkbox] + label,
+[type=radio] + label {
+  cursor: pointer;
+  font-weight: 400;
+  margin-bottom: 0.5em;
+}
+
+[type=checkbox] + label::before,
+[type=radio] + label::before {
+  background: $color-white;
+  border-radius: $border-radius;
+  box-shadow: 0 0 0 1px $color-gray-medium;
+  content: '\a0';
+  display: inline-block;
+  height: 1.8rem;
+  line-height: 1.8rem;
+  margin-right: 0.6em;
+  text-indent: 0.15em;
+  vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
+  width: 1.8rem;
+}
+
+[type=radio] + label::before {
+  box-shadow: 0 0 0 2px $color-white, 0 0 0 3px $color-gray-medium;
+  height: 1.6rem;
+  line-height: 1.6rem;
+  width: 1.6rem;
+  border-radius: 100%;
+}
+
+[type=checkbox]:checked + label::before,
+[type=radio]:checked + label::before {
+  background-color: $color-primary;
+  box-shadow: 0 0 0 1px $color-primary;
+}
+
+[type=radio]:checked + label::before {
+  box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary;
+}
+
+[type=radio]:focus + label::before {
+  box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary, 0 0 3px 4px $color-focus, 0 0 7px 4px $color-focus;
+}
+
+[type=checkbox]:checked + label::before,
+[type=checkbox]:checked:disabled + label::before {
+  background-image: url('#{$image-path}/correct8.png');
+  background-image: url('#{$image-path}/correct8.svg');
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+[type=checkbox]:focus + label::before {
+  box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-primary;
+}
+
+[type=checkbox]:disabled + label {
+  color: $color-gray;
+}
+
+[type=checkbox]:disabled + label::before,
+[type=radio]:disabled + label::before {
+  background: $color-gray-lighter;
+  box-shadow: 0 0 0 1px $color-gray-light;
+  cursor: not-allowed;
+}
+
+// Range inputs
+
+[type=range] {
+  -webkit-appearance: none;
+  border: none;
+  padding-left: 0;
+  width: 100%;
+}
+
+[type=range]:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+[type=range]::-webkit-slider-runnable-track {
+  background: $color-gray-light;
+  border: 1px solid $color-gray-medium;
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+[type=range]::-moz-range-track {
+  background: $color-primary;
+  border: 1px solid $color-gray-medium;
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+[type=range]::-ms-track {
+  background: transparent;
+  color: transparent;
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: 1px solid $color-gray-medium;
+  height: 2.2rem;
+  border-radius: 1.5rem;
+  background: $color-gray-lightest;
+  cursor: pointer;
+  margin-top: -.65rem;
+  width: 2.2rem;
+}
+
+[type=range]::-moz-range-thumb {
+  background: $color-gray-lightest;
+  border: 1px solid $color-gray-medium;
+  border-radius: 1.5rem;
+  cursor: pointer;
+  height: 2.2rem;
+  width: 2.2rem;
+}
+
+[type=range]::-ms-thumb {
+  background: $color-gray-lightest;
+  border: 1px solid $color-gray-medium;
+  border-radius: 1.5rem;
+  cursor: pointer;
+  height: 2.2rem;
+  width: 2.2rem;
+}
+
+[type=range]::-ms-fill-lower {
+  background: $color-gray-light;
+  border: 1px solid $color-gray-medium;
+  border-radius: 2rem;
+}
+
+[type=range]::-ms-fill-upper {
+  background: $color-gray-light;
+  border: 1px solid $color-gray-medium;
+  border-radius: 2rem;
+}
+
+[type=range]:focus::-webkit-slider-thumb {
+  border: 2px solid $color-focus;
+}
+
+[type=range]:focus::-moz-range-thumb {
+  border: 2px solid $color-focus;
+}
+
+[type=range]:focus::-ms-thumb {
+  border: 2px solid $color-focus;
+}
+
+// Memorable dates
+
+.usa-date-of-birth {
+  label {
+    margin-top: 0;
+  }
+
+  [type=number]::-webkit-inner-spin-button,
+  [type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+
+  [type=number] {
+    -moz-appearance: textfield;
+  }
+}
+
+.usa-form-group-day,
+.usa-form-group-month,
+.usa-form-group-year {
+  clear: none;
+  float: left;
+  margin-right: 1.5rem;
+  width: 5rem;
+}
+
+.usa-form-group-year {
+  width: 7rem;
+}