From 9ade628696647d22ccdea337b3968a49753851e2 Mon Sep 17 00:00:00 2001
From: Roger Steve Ruiz <roger.ruiz@gsa.gov>
Date: Tue, 24 May 2016 17:08:55 -0400
Subject: [PATCH] Fix various linting errors

---
 docs/doc_assets/css/styleguide.scss | 144 ++++++++++++++++++----------
 1 file changed, 93 insertions(+), 51 deletions(-)

diff --git a/docs/doc_assets/css/styleguide.scss b/docs/doc_assets/css/styleguide.scss
index 84cfa335a6..abfbc48c59 100644
--- a/docs/doc_assets/css/styleguide.scss
+++ b/docs/doc_assets/css/styleguide.scss
@@ -32,14 +32,17 @@ $site-top:           124px;
       @include margin(2.7rem 0 1rem);
       height: 6rem;
     }
+
     margin-top: 4px;
 
     .logo {
+
       @include media($medium-screen + $width-nav-sidebar) {
         @include padding(0 null null $site-margins);
         text-align: left;
         width: auto;
       }
+
       float: left;
       text-align: center;
       padding-top: 1.3rem;
@@ -61,6 +64,7 @@ $site-top:           124px;
         font-size: $h3-font-size;
         margin-top: .9rem;
       }
+
       margin: 0;
       font-size: $h5-font-size;
     }
@@ -70,6 +74,7 @@ $site-top:           124px;
         display: block;
         padding-right: $site-margins;
       }
+
       float: right;
       display: none;
       margin-top: -5px;
@@ -86,25 +91,31 @@ $site-top:           124px;
   }
 
   .disclaimer {
+    $color-gray-border: #616161;
     padding: .5rem 2rem;
-    color: white;
+    color: $color-white;
     text-align: center;
     font-size: $base-font-size / 1.25;
-    border-bottom: 1px solid #616161;
+    border-bottom: 1px solid $color-gray-border;
     font-weight: 100;
+
     .us-official {
       margin: 0;
     }
+
     .stage {
       a { text-decoration: underline; }
+
       float: none;
       display: block;
       padding-top: 5px;
     }
+
     @include media($medium-screen + $width-nav-sidebar) {
       .us-official {
         margin-left: 177px;
       }
+
       .stage {
         float: right;
         padding: 0;
@@ -118,6 +129,7 @@ $site-top:           124px;
   @include media($medium-screen + $width-nav-sidebar) {
     display: none;
   }
+
   @include padding(1.5rem null);
   display: inline;
   float: left;
@@ -146,11 +158,12 @@ $site-top:           124px;
     @include position(fixed, 0 auto 0 0);
     @include size($sliding-panel-width 100%);
     @include transform(translateX(- $sliding-panel-width));
-    background: #fff;
+    background: $color-white;
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
     z-index: 999999;
     display: block;
+
     &.is-visible {
       @include transition(all 0.25s linear);
       @include transform(translateX(0));
@@ -161,7 +174,7 @@ $site-top:           124px;
 .overlay {
   @include position(fixed, 0);
   @include transition;
-  background: #000;
+  background: $color-dark;
   opacity: 0;
   visibility: hidden;
   z-index: 9999;
@@ -223,16 +236,19 @@ $site-top:           124px;
   @include media($medium-screen) {
     top: $site-top;
   }
+
   @include position(absolute, 4rem 0 0 null);
   @include padding(1em null 0);
   width: 100%;
   z-index: -1;
+
   .lt-ie9 & {
     width: 75%;
   }
 
   @include media($medium-screen + $width-nav-sidebar) {
     width: calc(100% - #{$width-nav-sidebar});
+
     .lt-ie9 & {
       width: 75%;
     }
@@ -249,10 +265,12 @@ $site-top:           124px;
 
   > h1 {
     margin-top: 3.4rem;
+
     &:not(:first-child) {
       margin-top: 1.5em;
     }
   }
+
   @media (min-width: $medium-screen + $width-nav-sidebar) {
     @include padding(null 3em);
   }
@@ -267,10 +285,12 @@ $site-top:           124px;
 // This is a styleguide-only rule and is not needed in the main library code for
 // the footer component which uses different styles
 // TODO investigate why it's not needed in the main library CSS
-  p, a {
+  p,
+  a {
     @include media($medium-screen) {
       margin-bottom: 0;
     }
+
     color: $color-white;
     font-size: $h5-font-size;
     @include margin(0 null 1.5rem);
@@ -280,14 +300,21 @@ $site-top:           124px;
 // Pattern Preview Boxes -------- //
 
 .preview {
+  $color-grayee: #eeeeee;
   @include clearfix();
-  background-color: #fff;
+  background-color: $color-white;
   @include margin(2em null);
   padding: 1em $site-margins;
-  border: 1px solid #eeeeee;
+  border: 1px solid $color-grayee;
+
   .is-peripheral {
     opacity: .2;
   }
+
+  .usa-background-dark {
+    display: inline-block;
+    @include padding(null 1em);
+  }
 }
 
 .preview-no_border {
@@ -300,8 +327,8 @@ $site-top:           124px;
 
 .code-snippets {
 
-  .code-snippet-button:after {
-    content: "\25be  hide code";
+  .code-snippet-button::after {
+    content: '\25be  hide code';
   }
 
   &.hidden {
@@ -310,8 +337,8 @@ $site-top:           124px;
       display: none;
     }
 
-    .code-snippet-button:after {
-      content: "\25b8  show code";
+    .code-snippet-button::after {
+      content: '\25b8  show code';
     }
   }
 
@@ -322,8 +349,10 @@ $site-top:           124px;
     padding: 3em 0 0 0;
 
     td {
-      background-color: #f5f5f5;
-      border: 1px solid #e0e0e0;
+      $color-white-smoke: #f5f5f5;
+      $color-gray88: #e0e0e0;
+      background-color: $color-white-smoke;
+      border: 1px solid $color-gray88;
       position: relative;
       vertical-align: top;
 
@@ -343,7 +372,8 @@ $site-top:           124px;
       text-align: left;
     }
 
-    pre, code {
+    pre,
+    code {
       direction: ltr;
       text-align: left;
       white-space: pre;
@@ -414,7 +444,7 @@ $site-top:           124px;
 
     > * {
       background: $color-grid-light;
-      color: #000;
+      color: $color-black;
     }
 
     h3 {
@@ -428,14 +458,14 @@ $site-top:           124px;
 }
 
 h3 + .button_wrapper {
-  margin-top: -.5em
+  margin-top: -.5em;
 }
 
 .button_wrapper {
   clear: both;
   display: block;
   margin-left: -1rem;
-  padding: 0rem 1rem;
+  padding: 0 1rem;
 
   @include media($small-screen) {
     display: table;
@@ -447,7 +477,7 @@ h3 + .button_wrapper {
 }
 
 .button_wrapper-dark {
-  background: #323a45
+  background: $color-gray-dark;
 }
 
 .usa-heading {
@@ -462,9 +492,12 @@ h3 + .button_wrapper {
 }
 
 .usa-color-name {
+  font-size: 1.2rem;
+
   @include media($medium-screen) {
     margin: 0;
   }
+
   @include margin(0 null 1em);
 }
 
@@ -486,11 +519,12 @@ h3 + .button_wrapper {
     @include media($medium-screen) {
       width: 17%;
     }
+
     margin-right: 0;
   }
 
   p {
-    font-family:  monospace, monospace;
+    font-family: monospace, monospace;
   }
 }
 
@@ -498,6 +532,7 @@ h3 + .button_wrapper {
   @include media($medium-screen) {
     margin-bottom: 8rem;
   }
+
   margin-bottom: 0;
 
   .usa-color-square {
@@ -517,6 +552,7 @@ h3 + .button_wrapper {
     @include media($medium-screen) {
       margin-right: 2.35765%;
     }
+
     margin-right: 0;
   }
 
@@ -535,10 +571,6 @@ h3 + .button_wrapper {
   @include margin(1rem null 0);
 }
 
-.usa-color-name {
-  font-size: 1.2rem;
-}
-
 .usa-color-text {
   font-weight: $font-bold;
   margin-bottom: .4rem;
@@ -626,14 +658,6 @@ h3 + .button_wrapper {
   background-color: $color-gray;
 }
 
-.usa-color-gray-dark {
-  background-color: $color-gray-dark;
-}
-
-.usa-color-gray-light {
-  background-color: $color-gray-light;
-}
-
 .usa-color-gray-lighter {
   background-color: $color-gray-lighter;
 }
@@ -744,10 +768,6 @@ h3 + .button_wrapper {
   color: $color-gray-dark;
 }
 
-.usa-color-text-gray-dark {
-  color: $color-gray-dark;
-}
-
 .usa-color-text-gray {
   color: $color-gray;
 }
@@ -782,7 +802,13 @@ h6.usa-heading-alt {
 }
 
 .usa-typography-example-font {
-  h1, h2, h3, h4, h5, h6, .usa-font-example p {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .usa-font-example p {
     margin: 0;
   }
 }
@@ -808,28 +834,43 @@ h6.usa-heading-alt {
   font-size: 1.2rem;
 }
 
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
-    background: none;
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: none;
 }
 
-code[class*="language-"], pre[class*="language-"] {
+code[class*="language-"],
+pre[class*="language-"] {
   color: $color-base;
 }
 
-.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
   color: $color-primary-alt-darkest;
 }
 
-.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
   color: $color-secondary;
 }
 
-.token.atrule, .token.attr-value, .token.keyword {
+.token.atrule,
+.token.attr-value,
+.token.keyword {
   color: $color-green;
 }
 
 .token.punctuation {
-    color: $color-primary-alt-darkest;
+  color: $color-primary-alt-darkest;
 }
 
 .usa-code-sample .usa-accordion-content {
@@ -840,13 +881,6 @@ code[class*="language-"], pre[class*="language-"] {
   margin-top: 0;
 }
 
-.preview {
-  .usa-background-dark {
-    display: inline-block;
-    @include padding(null 1em);
-  }
-}
-
 .alignment-example {
   border-left: 2px solid $color-primary-darker;
   padding-left: 1rem;
@@ -873,6 +907,7 @@ code[class*="language-"], pre[class*="language-"] {
     font-size: 140px;
     line-height: 1.05;
   }
+
   .text-tiny {
     font-size: 15px;
   }
@@ -883,6 +918,7 @@ code[class*="language-"], pre[class*="language-"] {
     font-size: 120px;
     line-height: 1.275;
   }
+
   .text-tiny {
     font-size: 13px;
   }
@@ -931,7 +967,12 @@ $font-light: 300;
 }
 
 .sans-style {
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-family: $font-sans;
   }
 
@@ -1013,5 +1054,6 @@ $font-light: 300;
   @include media($medium-screen) {
     padding-left: $site-margins;
   }
+
   padding-left: 2rem;
 }