us_web_design_standards 0.0.0 → 0.0.2

data/app/assets/stylesheets/core/_grid-settings.scss

@@ -0,0 +1,10 @@
+// Add custom grid settings here (i.e. gutters, columns, etc)
+
+// Mobile First Breakpoints
+$small-screen:  481px;
+$medium-screen: 600px;
+$large-screen:  1201px;
+
+$large: new-breakpoint(min-width $large-screen 12);
+$medium: new-breakpoint(min-width $medium-screen 6);
+$small: new-breakpoint(min-width $small-screen 1);

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

@@ -0,0 +1,116 @@
+.usa-grid,
+.usa-grid-full {
+  @include outer-container();
+  max-width: $site-max-width;
+
+  @include media($medium) {
+    .usa-width-one-whole {
+      @include span-columns(6);
+    }
+    .usa-width-one-half {
+      @include span-columns(3);
+    }
+    .usa-width-one-third {
+      @include span-columns(2);
+    }
+    .usa-width-two-thirds {
+      @include span-columns(4);
+    }
+    .usa-width-one-fourth {
+      @include span-columns(3);
+
+      &:nth-child(2n) {
+        margin-right: 0;
+      }
+    }
+    .usa-width-three-fourths {
+      @include span-columns(6);
+    }
+    .usa-width-one-sixth {
+      @include span-columns(2);
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+    }
+    .usa-width-five-sixths {
+      @include span-columns(5);
+    }
+    .usa-width-one-twelfth {
+      @include span-columns(2);
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  @include media($large) {
+    .usa-width-one-whole {
+      @include span-columns(12);
+    }
+    .usa-width-one-half {
+      @include span-columns(6);
+    }
+    .usa-width-one-third {
+      @include span-columns(4);
+    }
+    .usa-width-two-thirds {
+      @include span-columns(8);
+    }
+    .usa-width-one-fourth {
+      @include span-columns(3);
+
+      &:nth-child(2n) {
+        @include span-columns(3);
+      }
+
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+    }
+    .usa-width-three-fourths {
+      @include span-columns(9);
+    }
+    .usa-width-one-sixth {
+      @include span-columns(2);
+
+      &:nth-child(3n) {
+        @include span-columns(2);
+      }
+
+      &:nth-child(6n) {
+        margin-right: 0;
+      }
+    }
+    .usa-width-five-sixths {
+      @include span-columns(10);
+    }
+    .usa-width-one-twelfth {
+      @include span-columns(1);
+
+      &:nth-child(3n) {
+        @include span-columns(1);
+      }
+
+      &:nth-child(12n) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  // Specificies end of a row.
+  // Required if grid-box contains multiple rows.
+  // Required if browser does not support :last-child
+  .usa-end-row {
+    @include omega();
+  }
+}
+
+.usa-grid {
+  padding: 0 $grid-margins;
+}
+
+.usa-grid-full {
+  padding: 0;
+}

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

@@ -0,0 +1,105 @@
+// Mobile-first media query helper
+@mixin media($bp) {
+  @media screen and (min-width: #{$bp}) {
+    @content;
+  }
+}
+
+// Clearfix helper
+@mixin clearfix() {
+  &:after {
+    content: ".";  
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+  }
+}
+
+// Screen reader only helper
+.usa-sr-only {
+  position: absolute;
+  left:-999em;
+}
+
+@mixin sr-only() {
+  position: absolute;
+  left:-999em;
+}
+
+// Unstyled list helper
+
+@mixin unstyled-list() {
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  li {
+    display: list-item;
+    margin: 0;
+
+    &:before {
+      display: none;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+}
+
+// Content size helpers
+@mixin allow-layout-classes {
+
+  margin: {
+    left: auto;
+    right: 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-top: .5em;
+      margin-right: 2em;
+    }
+  }
+
+  &.align-right {
+    @include media($medium-screen) {
+      float: right;
+      margin-top: .5em;
+      margin-left: 2em;
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+// Typography
+$em-base:             10px;
+$base-font-size:      rem(17px);
+$small-font-size:     rem(14px);
+$lead-font-size:      rem(20px);
+$title-font-size:     rem(52px);
+$h1-font-size:        rem(40px);
+$h2-font-size:        rem(30px);
+$h3-font-size:        rem(20px);
+$h4-font-size:        rem(17px);
+$h5-font-size:        rem(15px);
+$h6-font-size:        rem(13px);
+$base-line-height:    1.5;
+$heading-line-height: 1.3;
+$lead-line-height:    1.7;
+
+$font-sans:           'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
+$font-serif:          'Merriweather', 'Georgia', 'Times New Roman', serif;
+
+$font-normal:         400;
+$font-bold:           700;
+
+
+// Color
+$color-primary:              #0071bc;
+$color-primary-darker:       #205493;
+$color-primary-darkest:      #112e51;
+
+$color-primary-alt:          #02bfe7;
+$color-primary-alt-dark:     #00a6d2;
+$color-primary-alt-darkest:  #046b99;
+$color-primary-alt-light:    #9bdaf1; // lighten($color-primary-alt, 60%)
+$color-primary-alt-lightest: #e1f3f8; // lighten($color-primary-alt, 90%)
+
+$color-secondary:            #e31c3d;
+$color-secondary-dark:       #cd2026;
+$color-secondary-darkest:    #981b1e;
+$color-secondary-light:      #e59393; // lighten($color-secondary, 60%)
+$color-secondary-lightest:   #f9dede; // lighten($color-secondary, 90%)
+
+$color-white:                #ffffff;
+$color-base:                 #212121;
+
+$color-gray-dark:            #323a45;
+$color-gray:                 #5b616b; // lighten($color-gray-dark, 20%)
+$color-gray-light:           #aeb0b5; // lighten($color-gray-dark, 60%)
+$color-gray-lighter:         #d6d7d9; // lighten($color-gray-dark, 80%)
+$color-gray-lightest:        #f1f1f1; // lighten($color-gray-dark, 91%)
+
+$color-gray-warm-dark:       #494440;
+$color-gray-warm-light:      #e4e2e0; // lighten($color-gray-warm-dark, 90%)
+$color-gray-cool-light:      #dce4ef; // lighten($color-primary, 90%)
+
+$color-gold:                 #fdb81e;
+$color-gold-light:           #f9c642; //  lighten($color-gold, 20%)
+$color-gold-lighter:         #fad980; //  lighten($color-gold, 60%)
+$color-gold-lightest:        #fff1d2; //  lighten($color-gold, 83%)
+
+$color-green:                #2e8540;  
+$color-green-light:          #4aa564; // lighten($color-green, 20%)
+$color-green-lighter:        #94bfa2; // lighten($color-green, 60%)
+$color-green-lightest:       #e7f4e4; // lighten($color-green, 60%)
+
+$color-cool-blue:            #205493;
+$color-cool-blue-light:      #4773aa; // lighten($color-cool-blue, 20%)
+$color-cool-blue-lighter:    #8ba6ca; // lighten($color-cool-blue, 60%)
+$color-cool-blue-lightest:   #dce4ef; // lighten($color-cool-blue, 90%)
+
+$color-focus:                #3e94cf;
+$color-visited:              #4c2c92;
+
+
+// Mobile First Breakpoints
+$small-screen:      481px;
+$medium-screen:     600px;
+$large-screen:      1201px;
+
+
+// Magic Numbers
+$text-max-width:    53rem;
+$site-max-width:    1040px;
+$site-margins:      3rem;
+$article-max-width: 600px;
+$input-max-width:   46rem;
+$border-radius:     rem(3px);
+$box-shadow:        0 0 2px rgba(#000, .3);
+$focus-shadow:      0 0 3px $color-focus, 0 0 7px $color-focus;
+$grid-margins:      3rem;

data/app/assets/stylesheets/elements/_buttons.scss

@@ -0,0 +1,187 @@
+// Buttons variables
+
+$button-stroke: inset 0 0 0 2px;
+
+// Buttons
+
+.usa-button,
+.usa-button-primary,
+.usa-button:visited,
+.usa-button-primary:visited,
+button,
+[type="button"],
+[type="submit"],
+[type="reset"],
+[type="image"] {
+  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;
+  margin: {
+    top: .5em;
+    bottom: .5em;
+    right: .5em;
+  }
+  outline: none;
+  padding: 1rem 2rem;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+
+  &: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;
+  }
+
+  @media (min-width: $small-screen) {
+    width: auto;
+  }
+
+  &.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;
+  }
+}
+
+[type="submit"]:disabled,
+.usa-button-disabled {
+  background-color: $color-gray-lighter;
+  color: $color-gray-dark;
+  cursor: default;
+
+  &:hover,
+  &.usa-button-hover,
+  &:active,
+  &.usa-button-active,
+  &:focus  {
+    background-color: $color-gray-lighter;
+    border: 0;
+    box-shadow: none;
+    color: $color-gray-dark;
+  }
+}
+
+.usa-button-unstyled {
+  background: none;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  padding: 0;
+  text-align: left;
+
+  &:focus,
+  &:hover {
+    box-shadow: initial;
+  }
+}