adds more calendar time to kitchen sink

docs/sink.html

@@ -170,21 +170,21 @@
   
   <div class="ui black top attached menu">
     <div class="header item">
-      <b>Heads Up</b>
+      <b>Redesign Timeline</b>
     </div>
-    <div class="item">
-      <div class="badge">8</div>
-      Days of work
+    <div class="right item">
+      <div class="badge">6.5</div>
+      Days Left
     </div>
   </div>
   <div class="ui bottom attached segment">
   <div class="ui block">
     <div class="header">UI Elements</div>
-    <p>These are UI elements that exist outside of collections</p>
+    <p>This is an estimate of total time left to compete reskin and docs for the following elements</p>
   </div>
   <table class="ui sortable grid table">
     <thead>
-      <th>Name</th>
+      <th>UI Element</th>
       <th>Estimated</th>
       <th>Spent</th>
       <th>Status</th>
@@ -200,8 +200,9 @@
       </tr>
       <tr>
         <td>Text Block</td>
-        <td>0.5 days</td>
         <td>0.5</td>
+        <td>0.5</td>
+        <td></td>
         <td></td>
       </tr>
       <tr>
@@ -209,18 +210,21 @@
         <td>0.5</td>
         <td>0</td>
         <td></td>
+        <td></td>
       </tr>
       <tr>
         <td>Grid</td>
         <td>1</td>
         <td>0</td>
         <td></td>
+        <td></td>
       </tr>
       <tr>
         <td>Divider</td>
         <td>0.25</td>
         <td>0</td>
         <td></td>
+        <td></td>
       </tr>
       <tr>
         <td>Tags</td>
@@ -244,6 +248,7 @@
         <td>1</td>
         <td>0</td>
         <td></td>
+        <td></td>
       </tr>
       <tr>
         <td>Menu</td>
@@ -257,18 +262,21 @@
         <td>1</td>
         <td>0</td>
         <td></td>
+        <td></td>
       </tr>
       <tr>
         <td>Video</td>
         <td>0.5</td>
         <td>0</td>
         <td></td>
+        <td></td>
       </tr>
       <tr>
         <td>Steps</td>
         <td>0.5</td>
         <td>0</td>
         <td></td>
+        <td></td>
       </tr>
       <tr>
         <td>Segment</td>
@@ -277,7 +285,7 @@
         <td class="warning">In Progress</td>
         <td></td>
       </tr>
-      <tr class="negative">
+      <tr>
         <td>Table</td>
         <td>0.5</td>
         <td>1</td>
@@ -289,7 +297,64 @@
         <th>10.5 days</th>
         <th>4 days</th>
         <th></th>
-        <th>Updated: Mon 29th</th>
+        <th></th>
+      </tfoot>
+    </tbody>
+  </table>
+  <div class="ui divider"></div>
+  <div class="ui block">
+    <div class="header">UI Collections</div>
+  </div>
+  <table class="ui sortable grid table">
+    <thead>
+      <th>Name</th>
+      <th>Estimated</th>
+      <th>Spent</th>
+      <th>Status</th>
+      <th>Notes</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Activity Feed</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Forms</td>
+        <td>2 days</td>
+        <td>1</td>
+        <td class="positive">Complete</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>List View</td>
+        <td>0.75</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Item View</td>
+        <td>1</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>User List View</td>
+        <td>0.5</td>
+        <td>0</td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tfoot>
+        <th>5 Elements</th>
+        <th>5.25 days</th>
+        <th>1 days</th>
+        <th></th>
+        <th></th>
       </tfoot>
     </tbody>
   </table>

src/ui/flat/menu.css

@@ -379,6 +379,17 @@
      Colors 
 ---------------*/
 
+
+
+/*--- Grey ---*/
+
+.ui.grey.menu {
+  background-color: #F0F0F0;
+}
+
+
+
+/*--- Black ---*/
 .ui.black.menu {
   background-color: #333333;
 }

src/ui/flat/table.css

@@ -50,11 +50,15 @@
   cursor: auto;
   text-align: left;
   font-weight: bold;
-  background-color: rgba(0, 0, 0, 0.03);
-  color: rgba(0, 0, 0, 0.8);
+  color: rgba(0, 0, 0, 0.95);
   padding: 0.5em 0.7em;
   vertical-align: middle;
 }
+.ui.table tfoot th {
+  font-weight: normal;
+  font-style: italic;
+  color: rgba(0, 0, 0, 0.8);
+}
 
 .ui.table td {
   padding: 0.40em 0.7em;
@@ -231,22 +235,19 @@
 }
 
 /* Sortable Table */
-.ui.sortable.table th {
+.ui.sortable.table thead th {
   cursor: pointer;
   color: #555555;
   vertical-align: top;
 }
-.ui.sortable.table th.sorted,
-.ui.sortable.table th.sorted:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+.ui.sortable.table thead th.sorted,
+.ui.sortable.table thead th.sorted:hover {
+  background-color: rgba(0, 0, 0, 0.8);
 
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  
-  color: #333333;
+  color: #EEEEEE;
 }
 
-.ui.sortable.table th:after {
+.ui.sortable.table thead th:after {
   display: inline-block;
   content: '';
   width: 1em;
@@ -264,10 +265,10 @@
   vertical-align: middle;
   vertical-align: calc();
 }
-.ui.sortable.table th.ascending:after {
+.ui.sortable.table thead th.ascending:after {
   content: '\25b4';
 }
-.ui.sortable.table th.descending:after {
+.ui.sortable.table thead th.descending:after {
   content: '\25be';
 }