From 804855d4bca35cfd51ab450f7b41a2a780663942 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Tue, 4 Jun 2019 16:05:10 -0400
Subject: [PATCH] Working on Task Order card

---
 styles/core/_variables.scss                 |  1 +
 styles/sections/_task_order.scss            | 32 +++++++++++++++++++++
 templates/portfolios/task_orders/index.html | 13 +++++++++
 3 files changed, 46 insertions(+)

diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss
index 4463f1bd..c9b36104 100644
--- a/styles/core/_variables.scss
+++ b/styles/core/_variables.scss
@@ -165,6 +165,7 @@ $checkbox-border-radius: 2px;
 $border-radius: 3px;
 $button-border-radius: 5px;
 $box-shadow: 0px 2px 5px 0px $color-shadow;
+$box-shadow-big: 0 4px 10px 0 rgba(193,193,193,0.5);
 $focus-outline: 2px dotted $color-gray-light;
 $focus-spacing: 3px;
 $nav-width: 300px;
diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index bdcaf40e..fa275d34 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -572,3 +572,35 @@
     }
   }
 }
+
+.card {
+  width: 100%;
+  box-shadow: $box-shadow-big;
+  padding: ($gap * 2) ($gap * 2.5) ($gap * 4) ($gap * 3);
+  margin-bottom: 20px;
+
+  .card__status {
+    margin-bottom: $gap * 2;
+    display: flex;
+    align-items: baseline;
+  }
+
+  .card__header {
+
+  }
+
+  .card__body {
+    font-size: $small-font-size;
+    color: $color-gray-medium;
+  }
+}
+
+.card {
+  .label {
+    margin-left: 0;
+  }
+
+  .datetime {
+    font-size: $small-font-size;
+  }
+}
diff --git a/templates/portfolios/task_orders/index.html b/templates/portfolios/task_orders/index.html
index 59c0a3f8..469367f6 100644
--- a/templates/portfolios/task_orders/index.html
+++ b/templates/portfolios/task_orders/index.html
@@ -14,6 +14,19 @@
 {% endmacro %}
 
 {% macro TaskOrderList(task_orders, label='success', expired=False, funded=False) %}
+    <div class="card">
+      <div class="card__status">
+        <span class='label label--warning'>Pending</span>
+        <span class='datetime'>Started May 21, 2019</span>
+      </div>
+      <div class="card__header">
+        <h3>Task Order #12345</h3>
+      </div>
+      <div class="card__body">
+        This is a TO description. This is a TO description. This is a TO description. This is a TO description. This is a TO description. This is a TO description.
+      </div>
+    </div>
+
   <task-order-list
     inline-template
     v-bind:data='{{ task_orders | tojson }}'