From 0996f254cbe4637112bdeea4777845153d770dcd Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Fri, 3 May 2019 09:55:54 -0400
Subject: [PATCH 1/2] Use prettier rather than sass-convert

---
 script/format | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/script/format b/script/format
index 7bb1e17d..c25b320e 100755
--- a/script/format
+++ b/script/format
@@ -5,8 +5,10 @@ FILES_TO_FORMAT="atst/ tests/ app.py script/"
 if [ "$1" == "check" ]; then
   pipenv run black --check ${FILES_TO_FORMAT}
   yarn run prettier --list-different "js/**/*.js" --config ./prettier.config.json
+  yarn run prettier --list-different "styles/**/*.scss"
 else
   pipenv run black ${FILES_TO_FORMAT}
   yarn run prettier --list-different --write "js/**/*.js" --config ./prettier.config.json
-  sass-convert ./styles --in-place --recursive --from scss --to scss --quiet
+  tt
+  yarn run prettier --list-different --write "styles/**/*.scss"
 fi

From 9e4647254f95e647befbc2e48d3630e2d029e200 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Fri, 3 May 2019 14:01:24 -0400
Subject: [PATCH 2/2] Run script/format with prettier

---
 styles/components/_accordion_table.scss  | 12 ++++++---
 styles/components/_alerts.scss           |  6 ++---
 styles/components/_audit_log.scss        |  2 +-
 styles/components/_dod_login_notice.scss |  3 ++-
 styles/components/_empty_state.scss      |  1 -
 styles/components/_forms.scss            |  8 +++++-
 styles/components/_global_layout.scss    |  3 ++-
 styles/components/_modal.scss            | 13 +++-------
 styles/components/_portfolio_layout.scss |  8 +++---
 styles/components/_search_bar.scss       |  2 +-
 styles/components/_selector.scss         |  3 ++-
 styles/components/_top_message.scss      |  1 -
 styles/elements/_accordions.scss         |  1 -
 styles/elements/_block_lists.scss        |  4 +--
 styles/elements/_buttons.scss            |  5 ++--
 styles/elements/_diff.scss               |  6 ++---
 styles/elements/_icon_link.scss          |  5 +++-
 styles/elements/_icons.scss              |  3 ++-
 styles/elements/_inputs.scss             | 31 +++++++++++++-----------
 styles/elements/_panels.scss             |  8 ++++--
 styles/elements/_sidenav.scss            |  3 +--
 styles/elements/_tables.scss             | 10 +++++---
 styles/elements/_tooltip.scss            |  8 +++---
 styles/elements/_typography.scss         | 10 ++++++--
 styles/sections/_home.scss               |  5 ++--
 styles/sections/_reports.scss            | 21 +++++++---------
 styles/sections/_request_approval.scss   |  2 --
 styles/sections/_task_order.scss         | 13 ++++------
 28 files changed, 104 insertions(+), 93 deletions(-)

diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss
index 41c115dd..e9060bc5 100644
--- a/styles/components/_accordion_table.scss
+++ b/styles/components/_accordion_table.scss
@@ -28,7 +28,8 @@
     border-top: none;
   }
 
-  th, td {
+  th,
+  td {
     white-space: nowrap;
 
     button {
@@ -90,11 +91,13 @@
       }
     }
 
-    th, td, tr {
+    th,
+    td,
+    tr {
       border-bottom: 1px dashed $color-gray-lightest;
     }
 
-    th[scope=rowgroup] {
+    th[scope="rowgroup"] {
       position: relative;
     }
 
@@ -104,7 +107,8 @@
       background-color: $color-gray-lightest;
       padding: ($gap * 2) ($gap * 4);
 
-      th, td {
+      th,
+      td {
         .icon-link {
           font-weight: $font-normal;
           font-size: $base-font-size;
diff --git a/styles/components/_alerts.scss b/styles/components/_alerts.scss
index 209d75f0..6c368667 100644
--- a/styles/components/_alerts.scss
+++ b/styles/components/_alerts.scss
@@ -28,8 +28,7 @@
   @if $level == "success" {
     $background-color: $color-green-lightest;
     $border-color: $color-green;
-  }
-  @else if $level == "warning" {
+  } @else if $level == "warning" {
     $background-color: $color-gold-lightest;
     $border-color: $color-gold;
 
@@ -42,8 +41,7 @@
         box-shadow: inset 0 0 0 2px $color-gold-dark;
       }
     }
-  }
-  @else if $level == "error" {
+  } @else if $level == "error" {
     $background-color: $color-red-lightest;
     $border-color: $color-red;
   }
diff --git a/styles/components/_audit_log.scss b/styles/components/_audit_log.scss
index 297c180f..6884b31d 100644
--- a/styles/components/_audit_log.scss
+++ b/styles/components/_audit_log.scss
@@ -31,5 +31,5 @@
 }
 
 .page {
-  margin: .5em;
+  margin: 0.5em;
 }
diff --git a/styles/components/_dod_login_notice.scss b/styles/components/_dod_login_notice.scss
index 34cc1444..63221f7d 100644
--- a/styles/components/_dod_login_notice.scss
+++ b/styles/components/_dod_login_notice.scss
@@ -14,7 +14,8 @@
     margin: 0 auto;
     max-width: $article-max-width + $nav-width;
 
-    a.usa-button, a.usa-button:hover {
+    a.usa-button,
+    a.usa-button:hover {
       -moz-transition: none;
       -webkit-transition: none;
       -o-transition: color 0 ease-in;
diff --git a/styles/components/_empty_state.scss b/styles/components/_empty_state.scss
index 2af995fa..74514278 100644
--- a/styles/components/_empty_state.scss
+++ b/styles/components/_empty_state.scss
@@ -10,7 +10,6 @@
     padding: 8rem ($gap * 4) 0;
   }
 
-
   .icon {
     @include icon-size(50);
     @include icon-color($color-gray-light);
diff --git a/styles/components/_forms.scss b/styles/components/_forms.scss
index 3c3ac45e..47f618a4 100644
--- a/styles/components/_forms.scss
+++ b/styles/components/_forms.scss
@@ -99,7 +99,13 @@
     }
   }
 
-  > h1, > h2, > h3, > h4, > h5, > h6, > legend {
+  > h1,
+  > h2,
+  > h3,
+  > h4,
+  > h5,
+  > h6,
+  > legend {
     @include h3;
 
     margin: ($gap * 4) 0;
diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss
index ac711f59..4e5023f6 100644
--- a/styles/components/_global_layout.scss
+++ b/styles/components/_global_layout.scss
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
 }
 
diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index 02ba132e..be6e221f 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -35,12 +35,10 @@ body {
       padding: $gap * 2;
     }
 
-
     @include media($large-screen) {
       padding: $gap * 4;
     }
 
-
     .modal__body {
       background-color: $color-white;
       padding: $gap * 2;
@@ -53,13 +51,12 @@ body {
         max-height: calc(100vh - #{$gap * 8});
       }
 
-
       @include media($medium-screen) {
         padding: $gap * 5;
       }
 
-
-      h1, h2 {
+      h1,
+      h2 {
         @include h3;
       }
 
@@ -78,7 +75,6 @@ body {
           right: $gap * 2;
         }
 
-
         @include media($large-screen) {
           top: $gap * 4;
           right: $gap * 4;
@@ -93,7 +89,6 @@ body {
           margin: -$gap * 4;
         }
 
-
         .block-list__header {
           border-top: 0;
         }
@@ -123,14 +118,12 @@ body {
             right: $gap * 2;
           }
 
-
           @include media($large-screen) {
             bottom: $gap * 4;
             left: $gap * 4;
             right: $gap * 4;
           }
 
-
           .action-group {
             margin: 0;
           }
@@ -208,7 +201,7 @@ body {
     .usa-button {
       margin-left: 2rem;
 
-      &[type='button']:disabled {
+      &[type="button"]:disabled {
         background-color: $color-gray-lighter;
         opacity: inherit;
       }
diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index bed2eb07..60fd04c6 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -5,7 +5,6 @@
     min-height: 500px;
   }
 
-
   margin-left: 2 * $gap;
 
   .line {
@@ -69,7 +68,6 @@
     flex-direction: row;
   }
 
-
   margin: 2 * $gap;
 
   .col--grow {
@@ -130,7 +128,7 @@
   }
 
   .column-right {
-    margin-left: -.4rem;
+    margin-left: -0.4rem;
   }
 
   .portfolio-header__budget--amount {
@@ -139,8 +137,8 @@
 
   .portfolio-header__budget--cents {
     font-size: 2rem;
-    margin-top: .75rem;
-    margin-left: -.7rem;
+    margin-top: 0.75rem;
+    margin-left: -0.7rem;
     font-weight: bold;
   }
 
diff --git a/styles/components/_search_bar.scss b/styles/components/_search_bar.scss
index 6ed26a94..75f93c8b 100644
--- a/styles/components/_search_bar.scss
+++ b/styles/components/_search_bar.scss
@@ -51,7 +51,7 @@
     margin-top: 0;
     flex-basis: 100%;
 
-    input[type='search'] {
+    input[type="search"] {
       width: auto;
       height: $search-input-height;
       width: calc(100% - #{$search-button-width});
diff --git a/styles/components/_selector.scss b/styles/components/_selector.scss
index eb7403b6..ad8b9b68 100644
--- a/styles/components/_selector.scss
+++ b/styles/components/_selector.scss
@@ -27,7 +27,8 @@
     border-radius: 0;
     box-sizing: border-box;
     background-color: $color-white;
-    background-image: none, url("#{$image-path}/arrow-both.svg"), url("#{$image-path}/arrow-both.png");
+    background-image: none, url("#{$image-path}/arrow-both.svg"),
+      url("#{$image-path}/arrow-both.png");
     background-position: right 1.3rem center;
     background-repeat: no-repeat;
     background-size: 1rem;
diff --git a/styles/components/_top_message.scss b/styles/components/_top_message.scss
index 1b4eab63..42245312 100644
--- a/styles/components/_top_message.scss
+++ b/styles/components/_top_message.scss
@@ -6,7 +6,6 @@
     padding: $gap * 4;
   }
 
-
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-top-style: solid;
diff --git a/styles/elements/_accordions.scss b/styles/elements/_accordions.scss
index 0fee2dfd..52043bfe 100644
--- a/styles/elements/_accordions.scss
+++ b/styles/elements/_accordions.scss
@@ -117,7 +117,6 @@
         width: 100%;
       }
 
-
       > label {
         @include block-list-selectable-label;
       }
diff --git a/styles/elements/_block_lists.scss b/styles/elements/_block_lists.scss
index 59897bf3..460d2002 100644
--- a/styles/elements/_block_lists.scss
+++ b/styles/elements/_block_lists.scss
@@ -4,7 +4,8 @@
 
   padding: 0;
 
-  ul, dl {
+  ul,
+  dl {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -140,7 +141,6 @@
         width: 100%;
       }
 
-
       > label {
         @include block-list-selectable-label;
       }
diff --git a/styles/elements/_buttons.scss b/styles/elements/_buttons.scss
index af167ade..28959331 100644
--- a/styles/elements/_buttons.scss
+++ b/styles/elements/_buttons.scss
@@ -5,7 +5,7 @@
  */
 
 button,
-[type='button'] {
+[type="button"] {
   &:disabled {
     background-color: unset;
     opacity: 0.75;
@@ -20,7 +20,8 @@ button,
   }
 }
 
-.button-danger-outline, input[type="button"].button-danger-outline {
+.button-danger-outline,
+input[type="button"].button-danger-outline {
   color: $color-red;
   background-color: $color-red-lightest;
   box-shadow: inset 0 0 0 1px $color-red;
diff --git a/styles/elements/_diff.scss b/styles/elements/_diff.scss
index 3ea7e977..26e2b5f3 100644
--- a/styles/elements/_diff.scss
+++ b/styles/elements/_diff.scss
@@ -1,4 +1,4 @@
-[class*='diff--'] {
+[class*="diff--"] {
   border-left-style: solid;
   border-left-width: $gap / 2;
   padding-left: $gap / 2;
@@ -20,7 +20,7 @@
   text-decoration-color: $color-overlay;
 
   &::before {
-    content: '-';
+    content: "-";
     color: $color-red-dark;
   }
 }
@@ -30,7 +30,7 @@
   border-left-color: $color-aqua-dark;
 
   &::before {
-    content: '+';
+    content: "+";
     color: $color-aqua-dark;
   }
 }
diff --git a/styles/elements/_icon_link.scss b/styles/elements/_icon_link.scss
index 13f6a34c..645e0112 100644
--- a/styles/elements/_icon_link.scss
+++ b/styles/elements/_icon_link.scss
@@ -1,4 +1,7 @@
-@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) {
+@mixin icon-link-color(
+  $color: $color-blue,
+  $hover-color: $color-aqua-lightest
+) {
   color: $color;
 
   &:hover {
diff --git a/styles/elements/_icons.scss b/styles/elements/_icons.scss
index 4cf2c758..4937e737 100644
--- a/styles/elements/_icons.scss
+++ b/styles/elements/_icons.scss
@@ -57,7 +57,8 @@
     @include icon-size(24);
   }
 
-  &.icon--remove, &.icon--red {
+  &.icon--remove,
+  &.icon--red {
     @include icon-color($color-red);
   }
 
diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss
index 17fa7286..b90e0559 100644
--- a/styles/elements/_inputs.scss
+++ b/styles/elements/_inputs.scss
@@ -17,12 +17,10 @@
   @if $state == "error" {
     $border-width: 2px;
     $state-color: $color-red;
-  }
-  @else if $state == "warning" {
+  } @else if $state == "warning" {
     $border-width: 2px;
     $state-color: $color-gold;
-  }
-  @else if $state == "success" {
+  } @else if $state == "success" {
     $border-width: 2px;
     $state-color: $color-green;
   }
@@ -44,13 +42,13 @@
   }
 
   fieldset {
-    input[type='radio'] {
+    input[type="radio"] {
       + label::before {
         box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $state-color;
       }
     }
 
-    input[type='checkbox'] {
+    input[type="checkbox"] {
       + label::before {
         box-shadow: 0 0 0 2px $state-color;
       }
@@ -65,7 +63,6 @@
     margin: ($gap * 4) 0;
   }
 
-
   label {
     padding: 0 0 ($gap / 2) 0;
     margin: 0;
@@ -185,8 +182,8 @@
       > li {
         margin: 0;
 
-        [type='radio'] + label,
-        [type='checkbox'] + label {
+        [type="radio"] + label,
+        [type="checkbox"] + label {
           margin: 0;
 
           &:hover {
@@ -287,7 +284,10 @@
   &.no-max-width {
     padding-right: $gap * 3;
 
-    input, textarea, select, label {
+    input,
+    textarea,
+    select,
+    label {
       max-width: none;
     }
 
@@ -311,7 +311,7 @@
     @include input-state("success");
   }
 
-  [type='file'] {
+  [type="file"] {
     height: auto;
   }
 }
@@ -342,7 +342,7 @@ select {
   padding-top: 2px;
   margin-right: 2rem;
 
-  input[type=search] {
+  input[type="search"] {
     height: 4.4rem;
     font-size: 1.7rem;
     color: $color-black;
@@ -361,7 +361,9 @@ select {
     margin-right: $gap * 4;
 
     .usa-input {
-      input, label, .usa-input__message {
+      input,
+      label,
+      .usa-input__message {
         max-width: 20rem;
       }
 
@@ -375,7 +377,8 @@ select {
     margin-left: $gap * 4;
 
     .usa-input {
-      input, label {
+      input,
+      label {
         max-width: 12rem;
       }
 
diff --git a/styles/elements/_panels.scss b/styles/elements/_panels.scss
index 1ea45b33..5ffabf93 100644
--- a/styles/elements/_panels.scss
+++ b/styles/elements/_panels.scss
@@ -79,7 +79,6 @@
       padding: $gap * 4;
     }
 
-
     &--tight {
       padding: $gap * 2;
     }
@@ -88,7 +87,12 @@
       border-bottom: 1px solid $color-gray-light;
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       margin: 0;
       display: inline-block;
 
diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss
index a574c1f6..68a88128 100644
--- a/styles/elements/_sidenav.scss
+++ b/styles/elements/_sidenav.scss
@@ -15,7 +15,6 @@
       margin: 0px;
     }
 
-
     width: 25rem;
     box-shadow: $box-shadow;
 
@@ -59,7 +58,7 @@
     .sidenav__divider--small {
       display: block;
       width: 4 * $gap;
-      border: 1px solid #D6D7D9;
+      border: 1px solid #d6d7d9;
       margin-left: 2 * $gap;
       margin-bottom: $gap;
     }
diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss
index b739328c..5ad64929 100644
--- a/styles/elements/_tables.scss
+++ b/styles/elements/_tables.scss
@@ -13,8 +13,8 @@ table {
     border-collapse: separate;
   }
 
-
-  th, td {
+  th,
+  td {
     &.table-cell--align-right {
       text-align: right;
     }
@@ -83,7 +83,8 @@ table {
 
   thead {
     tr {
-      th, td {
+      th,
+      td {
         @include block-list-header;
 
         display: table-cell;
@@ -151,7 +152,8 @@ table {
     max-width: 100%;
     table-layout: fixed;
 
-    th, td {
+    th,
+    td {
       white-space: normal;
     }
   }
diff --git a/styles/elements/_tooltip.scss b/styles/elements/_tooltip.scss
index ff92c2a6..46f1146b 100644
--- a/styles/elements/_tooltip.scss
+++ b/styles/elements/_tooltip.scss
@@ -76,16 +76,16 @@
     }
   }
 
-  &[aria-hidden='true'] {
+  &[aria-hidden="true"] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .15s, visibility .15s;
+    transition: opacity 0.15s, visibility 0.15s;
   }
 
-  &[aria-hidden='false'] {
+  &[aria-hidden="false"] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .15s;
+    transition: opacity 0.15s;
   }
 }
 
diff --git a/styles/elements/_typography.scss b/styles/elements/_typography.scss
index db08c41f..6d413a39 100644
--- a/styles/elements/_typography.scss
+++ b/styles/elements/_typography.scss
@@ -20,7 +20,12 @@ p {
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: $font-sans;
   margin: ($gap * 2) 0;
 
@@ -29,7 +34,8 @@ h1, h2, h3, h4, h5, h6 {
     color: $color-gray;
   }
 
-  + .subtitle, * {
+  + .subtitle,
+  * {
     margin-top: 0;
   }
 }
diff --git a/styles/sections/_home.scss b/styles/sections/_home.scss
index 9254105c..8bf639d1 100644
--- a/styles/sections/_home.scss
+++ b/styles/sections/_home.scss
@@ -14,12 +14,13 @@
       display: flex;
     }
 
-
     h1 {
       font-weight: 200;
     }
 
-    h2, h3, h4 {
+    h2,
+    h3,
+    h4 {
       color: $color-primary;
     }
 
diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss
index 224d8328..0435a693 100644
--- a/styles/sections/_reports.scss
+++ b/styles/sections/_reports.scss
@@ -5,7 +5,6 @@
     flex-wrap: wrap;
   }
 
-
   .funding-summary-row__col {
     hr {
       margin: (2 * $gap) 0;
@@ -24,7 +23,6 @@
         max-width: 50%;
       }
 
-
       &:first-child {
         padding-left: 0;
       }
@@ -34,7 +32,6 @@
       }
     }
 
-
     align-items: stretch;
 
     .panel {
@@ -45,7 +42,6 @@
         max-width: 100%;
       }
 
-
       .subheading {
         @include h4;
 
@@ -83,7 +79,6 @@
             text-align: left;
           }
 
-
           dt {
             text-transform: uppercase;
             color: $color-gray-light;
@@ -133,7 +128,7 @@
 
           dd {
             &::before {
-              content: '#';
+              content: "#";
               color: $color-gray;
               margin-right: $gap;
             }
@@ -155,7 +150,8 @@
               dl {
                 margin: 0 0 0 $gap;
 
-                dd, dt {
+                dd,
+                dt {
                   display: inline;
                 }
               }
@@ -168,7 +164,8 @@
             text-align: right;
             margin-top: -2 * $gap;
 
-            dd, dt {
+            dd,
+            dt {
               display: inline;
             }
 
@@ -213,13 +210,15 @@
 
 table {
   .spend-table__portfolio {
-    th, td {
+    th,
+    td {
       font-weight: bold;
       border-bottom: 1px solid $color-gray-lightest;
     }
   }
 
-  th, td {
+  th,
+  td {
     &.previous-month {
       color: $color-gray;
     }
@@ -233,7 +232,6 @@ table {
         min-width: 12rem;
       }
 
-
       meter {
         width: 100%;
         height: 3rem;
@@ -244,7 +242,6 @@ table {
           display: block;
         }
 
-
         &::-webkit-meter-bar {
           background: $color-white;
         }
diff --git a/styles/sections/_request_approval.scss b/styles/sections/_request_approval.scss
index a50ae811..97c63b0c 100644
--- a/styles/sections/_request_approval.scss
+++ b/styles/sections/_request_approval.scss
@@ -75,7 +75,6 @@
         flex-direction: row-reverse;
       }
 
-
       .approval-log__log-item__header,
       .comment-log__log-item__header {
         @include h4;
@@ -107,7 +106,6 @@
             margin-right: $gap * 4;
           }
 
-
           span {
             display: block;
           }
diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 4c6d1ec6..6fcff154 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -31,7 +31,6 @@
         @include grid-row;
       }
 
-
       @include ie-only {
         width: 100%;
         max-width: 100%;
@@ -80,7 +79,8 @@
     width: 100%;
   }
 
-  .label--pending, .label--started {
+  .label--pending,
+  .label--started {
     background-color: $color-gold;
   }
 
@@ -133,12 +133,10 @@
       padding-right: $gap;
     }
 
-
     @include ie-only {
       width: calc(100% - 35rem);
     }
 
-
     .task-order-next-steps__panel-head {
       border-bottom: 1px solid black;
       padding: ($gap * 4) ($gap * 2);
@@ -154,7 +152,6 @@
         width: 100%;
       }
 
-
       .alert {
         margin-top: 3 * $gap;
         margin-bottom: 0;
@@ -204,7 +201,6 @@
       padding-left: 3 * $gap;
     }
 
-
     min-width: 35rem;
 
     hr {
@@ -299,7 +295,8 @@
     }
   }
 
-  .subheading, .description {
+  .subheading,
+  .description {
     color: $color-gray;
   }
 
@@ -424,7 +421,7 @@
       }
 
       p {
-        margin: .5rem 0;
+        margin: 0.5rem 0;
       }
 
       .officer__info--name {