Merge pull request #167 from GSA-TTS/fix-fy21-project-ending-cards

Updated the Project Ending card styles
GSA-TTS · May 14, 2024 · de04b06 · de04b06
2 parents e812eed + b71e7e0
commit de04b06
Show file tree

Hide file tree

Showing 3 changed files with 238 additions and 25 deletions.
diff --git a/_data/assetPaths.json b/_data/assetPaths.json
@@ -85,6 +85,6 @@
   "warning.svg": "/assets/assets/warning-5OR6W6GJ.svg",
   "app.js": "/assets/js/app-EDZES2YK.js",
   "app.map": "/assets/js/app-EDZES2YK.js.map",
-  "index.css": "/assets/styles/index-6NLQABYQ.css",
-  "index.map": "/assets/styles/index-6NLQABYQ.css.map"
+  "index.css": "/assets/styles/index-67SYVII2.css",
+  "index.map": "/assets/styles/index-67SYVII2.css.map"
 }
diff --git a/_includes/theme/styles/_impact-reports.scss b/_includes/theme/styles/_impact-reports.scss
@@ -97,15 +97,15 @@ $c-report-header: #006680;
 
     .top-button-wrapper {
       justify-content: flex-end;
-    
+
       .usa-button {
         &.to-top {
           font-size: size('body', 5);
           font-weight: 500;
           padding: units(2) units(2.5);
           width: 25%;
           margin-bottom: units(4);
-      
+
           span {
             padding: 0;
             margin-top: units(1px);
@@ -114,16 +114,16 @@ $c-report-header: #006680;
             color: white;
             margin-right: units(0.5);
           }
-      
+
           @media screen and (min-width: 640px) {
             width: initial;
           }
         }
       }
-    
+
       @include at-media-max('tablet-lg') {
         justify-content: center;
-    
+
         .usa-button {
           &.to-top {
             margin-bottom: units(1);
@@ -147,7 +147,7 @@ $c-report-header: #006680;
         .to-top {
           color: #FFF;
           background-color: $x-grimace-light;
-  
+
           &:hover {
             background-color: $x-grimace;
           }
@@ -162,7 +162,7 @@ $c-report-header: #006680;
         .to-top {
           color: #FFF;
           background-color: $x-grimace-light;
-  
+
           &:hover {
             background-color: $x-grimace;
           }
@@ -178,11 +178,11 @@ $c-report-header: #006680;
         .to-top {
           background-color: $x-lilac;
           color: #162e51;
-  
+
           span {
             color: #162e51;
           }
-  
+
           &:hover {
             background-color: $x-lilac-light;
           }
@@ -650,6 +650,221 @@ $c-report-header: #006680;
   }
 }
 
+.ReasonForRejection {
+  .usa-card__container,
+  .usa-card__container:before {
+    background-image: none !important;
+  }
+
+  .usa-card__container {
+    border: none;
+
+    .usa-card__body {
+
+      .card_color {
+        .borderPercent {
+          border-radius: 0 5px 5px 0;
+          height: 10px;
+          left: 0;
+          position: absolute;
+          top: -5px;
+          z-index: 2;
+        }
+
+        .border {
+          border: 0;
+          height: 7px;
+          left: 0;
+          position: absolute;
+          top: -5px;
+          width: 100%;
+          background-color: #c7c8ce;
+        }
+
+        .percent {
+          font-size: 2.25rem;
+          font-weight: 700;
+        }
+
+        .heading {
+          font-size: 1.15rem;
+          margin-bottom: 6px;
+          font-family: "Poppins-Medium", Helvetica, Arial, sans-serif;
+        }
+
+        ul {
+          list-style: disc;
+          padding-left: units(2);
+
+          li {
+            display: revert;
+
+            &:before {
+              display: none;
+            }
+          }
+        }
+
+        &--scheme-1 {
+          .borderPercent {
+            background-color: #4e5163;
+          }
+
+          .border {
+            background-color: #c7c8ce;
+          }
+
+          .heading {
+            color: #4e5163 !important;
+          }
+
+          .percent {
+            color: #4e5163 !important;
+          }
+
+          ul {
+            li {
+              &::marker {
+                color: #4e5163 !important;
+              }
+            }
+          }
+        }
+
+        &--scheme-2 {
+          .borderPercent {
+            background-color: #b34928;
+          }
+
+          .border {
+            background-color: #fecfc1;
+          }
+
+          .heading {
+            color: #b34928 !important;
+          }
+
+          .percent {
+            color: #b34928 !important;
+          }
+
+          ul {
+            li {
+              &::marker {
+                color: #b34928 !important;
+              }
+            }
+          }
+        }
+
+        &--scheme-3 {
+          .borderPercent {
+            background-color: #292a2b;
+          }
+
+          .border {
+            background-color: #bcbcbc;
+          }
+
+          .heading {
+            color: #292a2b !important;
+          }
+
+          .percent {
+            color: #292a2b !important;
+          }
+
+          ul {
+            li {
+              &::marker {
+                color: #292a2b !important;
+              }
+            }
+          }
+        }
+
+        &--scheme-4 {
+          .borderPercent {
+            background-color: #0a6680;
+          }
+
+          .border {
+            background-color: #afcfd7;
+          }
+
+          .heading {
+            color: #0a6680 !important;
+          }
+
+          .percent {
+            color: #0a6680 !important;
+          }
+
+          ul {
+            li {
+              &::marker {
+                color: #0a6680 !important;
+              }
+            }
+          }
+        }
+
+        &--scheme-5 {
+          .borderPercent {
+            background-color: #39337b;
+          }
+
+          .border {
+            background-color: #c1bfd5;
+          }
+
+          .heading {
+            color: #39337b !important;
+          }
+
+          .percent {
+            color: #39337b !important;
+          }
+
+          ul {
+            li {
+              &::marker {
+                color: #39337b !important;
+              }
+            }
+          }
+        }
+
+        &--scheme-6 {
+          .borderPercent {
+            background-color: #4e5164;
+          }
+
+          .border {
+            background-color: #c7c8ce;
+          }
+
+          .heading {
+            color: #4e5164 !important;
+          }
+
+          .percent {
+            color: #4e5164 !important;
+          }
+
+          ul {
+            li {
+              &::marker {
+                color: #4e5164 !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .fy23-impact-report-page {
   color: color('gray-warm-90');
 
@@ -695,19 +910,14 @@ $c-report-header: #006680;
 
     h3,
     h4 {
-      margin-top: units(5); 
-      margin-bottom: units(2.5);   
+      margin-top: units(5);
+      margin-bottom: units(2.5);
     }
 
     h4 {
       font-size: size('body', 8);
       font-weight: 700;
       color: color('gray-warm-90');
-
-      .usa-link {
-        font-size: size('body', 9);
-        font-weight: 600;
-      }   
     }
 
     strong,
@@ -725,10 +935,10 @@ $c-report-header: #006680;
         color: color('gray-warm-90');
         font-weight: 600;
       }
-  
+
       .section-divider {
         margin-bottom: units(2);
-      }   
+      }
     }
 
     &#section-fy23-in-review {
@@ -872,13 +1082,13 @@ $c-report-header: #006680;
       padding: units(3);
       margin-top: units(6);
       margin-bottom: units(6);
-      margin-left: 0; 
-      width: auto; 
+      margin-left: 0;
+      width: auto;
 
       &:last-child {
         margin-bottom: 0;
       }
-      
+
       h3 {
         margin-top: 0;
       }
@@ -898,6 +1108,7 @@ $c-report-header: #006680;
 
     tr {
       &:nth-child(odd) {
+
         td,
         th {
           background: color('violet-10');
@@ -907,13 +1118,15 @@ $c-report-header: #006680;
 
     thead {
       tr {
+
         th,
         td {
           background-color: #000 !important;
           color: white;
           font-weight: 700;
           border-right: 1px solid white;
-          border-bottom: 5px solid color('violet-50');;
+          border-bottom: 5px solid color('violet-50');
+          ;
           text-align: center;
 
           &:last-child {

diff --git a/reports/fy21-impact-report/03-by-the-numbers.md b/reports/fy21-impact-report/03-by-the-numbers.md
@@ -111,7 +111,7 @@ In FY21, we began tracking and analyzing data on why 10x projects end at particu
   <div class="usa-card usa-card--no-media ReasonForRejection grid-col-12 desktop:grid-col-4">
     <div class="usa-card__container">
       <div class="usa-card__body">
-        <div class="card_color--scheme-{{- card.color -}}">
+        <div class="card_color card_color--scheme-{{- card.color -}}">
           <div class="borderPercent grid-col-12 desktop:grid-col-4" style="width: {{- card.percent -}}%;"></div>
           <div class="border"></div>
           <div class="percent">{{- card.percent -}}%</div>