us_web_design_standards 0.0.0 → 0.0.2

data/app/assets/stylesheets/components/_forms.scss

@@ -0,0 +1,179 @@
+$usa-form-width: 32rem;
+
+form {
+  @include media($medium-screen) {
+    max-width: $usa-form-width;
+  }
+
+  a {
+    border-bottom: 0;
+  }
+
+  button[type="submit"],
+  input[type="submit"] {
+    @include media($medium-screen) {
+      padding: {
+        left: 2.7em;
+        right: 2.7em;
+      }
+      width: auto;
+    }
+    display: block;
+    margin-top: 2.5rem;
+    margin-bottom: 1.5em;
+  }
+
+  input[name="password"] {
+    margin-bottom: 1.1rem;
+  }
+}
+
+.usa-form-note {
+  float: right;
+  font-family: $font-sans;
+  font-size: $h5-font-size;
+  margin: 0;
+  margin-bottom: 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 {
+  @include media($medium-screen) {
+    max-width: 6rem;
+  }
+}
+
+input.usa-input-medium {
+  @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-form-width {
+  max-width: $usa-form-width;
+}
+
+.usa-additional_text {
+  float: right;
+  font-style: italic;
+  font-weight: normal;
+}
+
+.usa-input-buttons-inline {
+  button,
+  button[type="submit"],
+  input[type="submit"],
+  & > * {
+    display: inline;
+    margin-right: 1.5em;
+  }
+}
+
+// Reset password checklist
+
+.usa-checklist {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+
+  li {
+    display: inline-block;
+    list-style: none;
+    margin: {
+      bottom: 0em;
+      top: 0em;
+    }
+    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('../img/correct9.png');
+    background-image: url('../img/correct9.svg');
+    background-position: 100%;
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+}

data/app/assets/stylesheets/components/_search.scss

@@ -0,0 +1,101 @@
+$usa-btn-small-width:   4.5rem;
+$usa-btn-medium-width:  8.5rem;
+$usa-btn-big-width:     11.6rem;
+
+@mixin search-icon {
+  background-image: url('../img/search.png');
+  background-image: url('../img/search.svg');
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+.usa-search {
+  @include clearfix;
+  max-width: none;
+  position: relative;
+
+  [type="search"],
+  .usa-search-input {
+    -webkit-appearance: none;
+    border: {
+      bottom-right-radius: 0;
+      right: none;
+      top-right-radius: 0;
+    }
+    float: left;
+    height: 3.3rem;
+    margin: 0;
+    padding: {
+      bottom: 0;
+      top: 0;
+    }
+    width: calc(100% - #{$usa-btn-small-width});
+
+    @include media($small-screen) {
+      width: calc(100% - #{$usa-btn-medium-width});
+    }
+  }
+
+  [type="submit"],
+  .usa-search-submit {
+    @include search-icon;
+    border: {
+      bottom-left-radius: 0;
+      top-left-radius: 0;
+    }
+    height: 3.3rem;
+    margin: 0;
+    padding: 0;
+    width: $usa-btn-small-width;
+
+    @include media($small-screen) {
+      background-image: none;
+      width: $usa-btn-medium-width;
+    }
+  }
+
+  .usa-search-submit-text {
+    display: none;
+
+    @include media($small-screen) {
+      display: block;
+    }
+  }
+
+  &.usa-search-big {
+    @include media($small-screen) {
+      $height: 4.4rem;
+      $width: $usa-btn-big-width;
+
+      [type="search"],
+      .usa-search-input {
+        height: $height;
+        width: calc(100% - #{$width});
+      }
+
+      [type="submit"],
+      .usa-search-submit {
+        height: $height;
+        font-size: $h3-font-size;
+        width: $width;
+      }
+    }
+  }
+
+  &.usa-search-small {
+    @include media($small-screen) {
+      $width: $usa-btn-small-width;
+
+      [type="search"],
+      .usa-search-input {
+        width: calc(100% - #{$width});
+      }
+
+      [type="submit"],
+      .usa-search-submit {
+        @include search-icon;
+        width: $width;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/components/_sidenav.scss

@@ -0,0 +1,78 @@
+.usa-sidenav-list {
+  @include unstyled-list();
+
+  li {
+    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;
+    padding: {
+      bottom: 1rem;
+      left: 1.8rem;
+      right: 1rem;
+      top: 1rem;
+    }
+
+    &:hover {
+      background-color: $color-gray-lightest;
+      color: $color-primary;
+      text-decoration: none;
+    }
+
+    &:focus {
+      position: relative;
+      z-index: 1;
+    }
+
+    &.usa-current {
+      color: $color-primary;
+      font-weight: $font-bold;
+    }
+
+    &.usa-current {
+      border-left: 4px solid $color-primary;
+      padding-left: 1.4rem;
+    }
+  }
+}
+
+.usa-sidenav-sub_list {
+  margin: 0;
+  width: 100%;
+
+  li {
+    border: none;
+    font-size: $h5-font-size;
+  }
+
+  a {
+    padding-left: 2.8rem;
+    line-height: $heading-line-height;
+  }
+
+  a:hover,
+  a.usa-current {
+    border: none;
+    padding-left: 2.8rem;
+  }
+
+  .usa-sidenav-sub_list {
+    a {
+      padding-left: 3.8rem;
+    }
+
+    a:hover {
+      padding-left: 3.8rem;
+    }
+  }
+}

data/app/assets/stylesheets/components/_skipnav.scss

@@ -0,0 +1,24 @@
+.skipnav {
+  @include transition(all .2s ease-in-out);
+  background: transparent;
+  color: $color-base;
+  left: 0;
+  padding: {
+    bottom: 1rem;
+    left: 1.5rem;
+    right: 1.5rem;
+    top: 1rem;
+  }
+  position: absolute;
+  top: -4.2rem;
+  z-index: 100;
+  
+  &:focus {
+    @include transition(all .2s ease-in-out);
+    background: $color-white;
+    left: 0;
+    outline: 0;
+    position: absolute;
+    top: 0;
+  }
+}

data/app/assets/stylesheets/core/_base.scss

@@ -0,0 +1,24 @@
+/* apply a natural box layout model to all elements, but allowing components to change */
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  background-color: #ffffff;
+}
+
+.lt-ie9 {
+  // Hack for clearfixes
+  * {
+    filter: none !important;
+  }
+}
+
+[aria-hidden=true] {
+  display: none !important;
+}

data/app/assets/stylesheets/core/_defaults.scss

@@ -0,0 +1,92 @@
+// Starter Kit Defaults
+// Do not modify.
+// These variables can be modified in _variables.scss
+
+// Typography
+$em-base:             10px; // default is already defined in bourbon
+$base-font-size:      rem(16px) !default;
+$small-font-size:     rem(14px) !default;
+$lead-font-size:      rem(22px) !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', 'Arial', sans-serif !default;
+$font-serif:          'Merriweather', 'Georgia', 'Times New Roman', serif;
+
+$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-darkest:  #046b99 !default;
+$color-primary-alt-dark:     #00a6d2 !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-darkest:    #981b1e !default;
+$color-secondary-dark:       #cd2026 !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-gray-dark:            #323a45 !default;
+$color-gray:                 #205493 !default; // lighten($color-gray-dark, 20%)
+$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;
+
+
+// Mobile First Breakpoints
+$small-screen:      481px !default;
+$medium-screen:     600px !default;
+$large-screen:      1201px !default;
+
+
+// Magic Numbers
+$text-max-width:    53rem !default;
+$site-max-width:    1040px !default;
+$site-margins:      3rem !default;
+$article-max-width: 600px !default;
+$input-max-width:   46rem !default;
+$border-radius:     rem(3px) !default;
+$box-shadow:        0 0 2px rgba(#000, .3) !default;
+$focus-shadow:      0 0 3px $color-focus, 0 0 7px $color-focus;
+$grid-margins:      3rem !default;