uswds-rails 0.1.0

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

@@ -0,0 +1,164 @@
+$usa-form-width: 32rem;
+
+form {
+  a {
+    border-bottom: 0;
+  }
+
+  [type=submit],
+  [type=submit] {
+    display: block;
+    margin-bottom: 1.5em;
+    margin-top: 2.5rem;
+
+    @include media($medium-screen) {
+      padding-left: 2.7em;
+      padding-right: 2.7em;
+      width: auto;
+    }
+  }
+
+  [name=password],
+  [name=confirmPassword] {
+    margin-bottom: 1.1rem;
+  }
+}
+
+.usa-form {
+  @include media($medium-screen) {
+    max-width: $usa-form-width;
+  }
+}
+
+.usa-form-note {
+  float: right;
+  font-family: $font-sans;
+  font-size: $h5-font-size;
+  margin: 0 0 1.5rem;
+
+  + * {
+    clear: both;
+  }
+}
+
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.usa-form-large {
+  @include media($medium-screen) {
+    max-width: 46rem;
+  }
+}
+
+input {
+  &.usa-input-tiny { /* stylelint-disable-line selector-no-qualifying-type */
+    @include media($medium-screen) {
+      max-width: 6rem;
+    }
+  }
+
+  &.usa-input-medium { /* stylelint-disable-line selector-no-qualifying-type */
+    @include media($medium-screen) {
+      max-width: 12rem;
+    }
+  }
+}
+
+.usa-input-grid {
+  @include media($medium-screen) {
+    padding-right: 5%;
+  }
+}
+
+.usa-input-grid:last-of-type {
+  @include media($medium-screen) {
+    padding-right: 0;
+  }
+}
+
+.usa-input-grid-small {
+  @include media($medium-screen) {
+    float: left;
+    width: 35%;
+  }
+
+  input {
+    margin-bottom: 3rem;
+  }
+
+  select {
+    margin-bottom: 3rem;
+  }
+}
+
+.usa-input-grid-medium {
+  @include media($medium-screen) {
+    float: left;
+    width: 65%;
+  }
+
+  input {
+    margin-bottom: 3rem;
+  }
+
+  select {
+    margin-bottom: 3rem;
+  }
+}
+
+.usa-input-grid-large {
+  @include media($medium-screen) {
+    float: left;
+    width: 100%;
+  }
+
+  input {
+    margin-bottom: 3rem;
+  }
+
+  select {
+    margin-bottom: 3rem;
+  }
+}
+
+.usa-additional_text {
+  font-weight: normal;
+}
+
+// Reset password checklist
+
+.usa-checklist {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+
+  li {
+    display: inline-block;
+    list-style: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-left: 3em;
+    text-indent: -2em;
+
+    &::before {
+      content: ' ';
+      display: inline-block;
+      height: .8em;
+      margin-right: .2em;
+      width: 1.8em;
+    }
+  }
+}
+
+.usa-checklist-checked {
+  &::before {
+    background-image: url('#{$image-path}/correct9.png');
+    background-image: url('#{$image-path}/correct9.svg');
+    background-position: 100%;
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+}

data/vendor/assets/stylesheets/uswds/components/_graphic-list.scss

@@ -0,0 +1,35 @@
+// A collection of media block objects
+
+.usa-graphic_list {
+  .usa-graphic_list-row {
+    .usa-media_block {
+      margin-bottom: $site-margins;
+
+      @include media($medium-screen) {
+        margin-bottom: $site-margins * 2;
+      }
+    }
+
+    &:last-child {
+      .usa-media_block {
+        @include media($medium-screen) {
+          margin-bottom: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .usa-media_block-img {
+    margin-right: $site-margins;
+  }
+
+  .usa-media_block-body {
+    > :first-child {
+      margin-top: 0;
+    }
+  }
+}

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

@@ -0,0 +1,221 @@
+// Header variables ---------- //
+
+$height-nav-secondary: 5rem;
+$width-nav-sidebar:    250px;
+
+// z-indexes - TODO refactor to a site-wide z-index management approach
+$z-index-header:  7000;
+$z-index-overlay: 8000;
+$z-index-nav:     9000;
+
+// Header ------------- //
+
+.usa-header {
+  width: 100%;
+  z-index: $z-index-header;
+
+  @include media($nav-width) {
+    border-bottom: 1px solid $color-gray-light;
+  }
+
+  a {
+    border-bottom: none;
+  }
+
+  .usa-search {
+    margin-bottom: 1.5rem;
+
+    @include media($nav-width) {
+      float: right;
+      margin-bottom: 0;
+      max-width: 21.5rem;
+    }
+  }
+}
+
+.usa-logo {
+  float: left;
+  line-height: 4rem;
+  margin-left: 1.5rem;
+
+  @include media($nav-width) {
+    line-height: 7.5rem;
+    margin-left: 0;
+  }
+
+  a {
+    color: $color-base;
+    text-decoration: none;
+  }
+
+  br {
+    display: none;
+
+    @include media($nav-width) {
+      display: block;
+    }
+  }
+}
+
+.usa-logo-text {
+  display: block;
+  font-size: $h5-font-size;
+  font-style: normal;
+  font-weight: $font-bold;
+  margin: 0;
+
+  @include media($nav-width) {
+    display: block;
+    font-size: 2.4rem;
+    line-height: $heading-line-height;
+  }
+}
+
+.usa-menu-btn {
+  /* stylelint-disable declaration-block-no-ignored-properties */
+  @include button-unstyled;
+  background-color: $color-primary;
+  color: $color-white;
+  display: inline;
+  float: right;
+  font-size: $h6-font-size;
+  height: 4rem;
+  line-height: 4rem;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 5.8rem;
+  /* stylelint-enable */
+
+  @include media($nav-width) {
+    display: none;
+  }
+
+  &:hover {
+    color: $color-white;
+    background-color: $color-primary-darker;
+  }
+
+  &:visited {
+    color: $color-white;
+  }
+}
+
+.usa-overlay {
+  @include position(fixed, 0);
+  background: $color-black;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+  visibility: hidden;
+  z-index: $z-index-overlay;
+
+  &.is-visible {
+    opacity: 0.1;
+    visibility: visible;
+  }
+}
+
+// Basic header ----------- //
+
+.usa-header-basic {
+  .usa-logo {
+    @include media($nav-width) {
+      bottom: 1.9rem;
+      position: absolute;
+    }
+  }
+
+  .usa-navbar {
+    @include media($nav-width) {
+      position: relative;
+      width: 18%; // TODO: review this more
+    }
+  }
+}
+
+// Extended header ----------- //
+
+.usa-header-extended {
+  .usa-header {
+    @include media($nav-width) {
+      border-bottom: none;
+    }
+  }
+
+  .usa-logo {
+    @include media($nav-width) {
+      @include margin(3rem null);
+    }
+  }
+
+  em {
+    @include media($nav-width) {
+      font-size: 3.2rem;
+      line-height: 1;
+    }
+  }
+
+  .usa-navbar {
+    @include media($nav-width) {
+      @include outer-container();
+      @include padding(null $site-margins);
+      display: block;
+      height: auto;
+      max-width: $site-max-width;
+    }
+  }
+
+  .usa-nav {
+    @include media($nav-width) {
+      border-top: 1px solid $color-gray-light;
+      float: none;
+      padding: 0;
+      width: 100%;
+    }
+  }
+
+  .usa-nav-inner {
+    @include media($nav-width) {
+      @include outer-container();
+      @include padding(null $site-margins null 2rem);
+      margin-top: -1px;
+      max-width: $site-max-width;
+      position: relative;
+    }
+  }
+
+  .usa-nav-primary {
+    @include media($nav-width) {
+      @include clearfix;
+    }
+
+    button {
+      &[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%;
+        }
+      }
+    }
+  }
+
+  .usa-nav-link {
+    @include media($nav-width) {
+      padding-top: 1.9rem;
+    }
+  }
+
+  .usa-nav-submenu {
+    .usa-grid-full {
+      @include media($nav-width) {
+        padding-left: 1.2rem;
+      }
+    }
+  }
+
+  .usa-megamenu {
+    @include media($nav-width) {
+      padding-left: $site-margins;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+// Hero feature
+// ==========================
+
+.usa-hero {
+  @include padding($site-margins null);
+  background-image: url('#{$image-path}/hero.png');
+  background-position: center;
+  background-size: cover;
+
+  .usa-button {
+    color: $color-white;
+  }
+}
+
+.usa-section-dark {
+  .usa-hero-link {
+    color: $color-primary-alt;
+  }
+}
+
+.usa-hero-callout {
+  background-color: $color-primary-darkest;
+  padding: 3rem;
+
+  @include media($small-screen) {
+    max-width: 30rem;
+  }
+
+  > *:first-child {
+    @include margin(0 null $site-margins null);
+  }
+
+  .usa-button {
+    font-size: $small-font-size;
+    margin-top: 7rem;
+    width: 100%;
+  }
+}
+
+.usa-hero-callout-alt {
+  color: $color-white;
+  display: block;
+}