[feature] Add 'ghost task' to task loading, and improved tasks lit-html standards compliance (#81)

* Updated several componenets to lit-html/lit-element spec

* Added 'loading' ghost task

Author: benotter

src/components/mgt-tasks/mgt-tasks.scss

@@ -232,25 +232,30 @@
 }
 
 .Task.NewTask .FakeCheckBox::after {
-  font-family: "FabricMDL2Icons";
-  content: "\uE739";
+  font-family: 'FabricMDL2Icons';
+  content: '\uE739';
 }
 
 .Task.NewTask input:checked ~ .FakeCheckBox::after {
-  font-family: "FabricMDL2Icons";
-  content: "\uE73A";
+  font-family: 'FabricMDL2Icons';
+  content: '\uE73A';
 }
 
 .Task .TaskDetails {
-  display: flex;
-  margin: 0 0 16px 50px;
-  color: #767676;
+  margin: 0 0 16px 20px;
+  color: var(--task-detail-color, #767676);
   font-size: 0.9em;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  justify-items: flex-start;
+  align-content: stretch;
+  align-items: stretch;
 }
 
 .Task .TaskDetails input,
 .Task .TaskDetails select {
-  color: #767676;
+  color: var(--task-detail-color, #767676);
   font-size: 0.9em;
 }
 
@@ -396,3 +401,43 @@
     transform: rotate(360deg);
   }
 }
+
+.LoadingHeader {
+  max-width: 90px;
+  width: 100%;
+  height: 20px;
+  background: #F2F2F2;
+}
+
+.Task.LoadingTask .TaskCheckCont {
+  cursor: default;
+}
+.Task.LoadingTask .TaskCheck {
+  background: #f2f2f2;
+  border-color: #f2f2f2;
+  cursor: default;
+}
+.Task.LoadingTask .TaskHeader {
+  justify-content: flex-start;
+  justify-items: flex-start;
+}
+.Task.LoadingTask .TaskTitle {
+  max-width: 370px;
+  width: 100%;
+  height: 20px;
+  background: #f2f2f2;
+}
+.Task.LoadingTask .TaskDetailIcon {
+  width: 16px;
+  height: 16px;
+  margin: 5px;
+  background: #f2f2f2;
+}
+.Task.LoadingTask .TaskDetail {
+  margin-right: 8px;
+}
+.Task.LoadingTask .TaskDetailName {
+  width: 81px;
+  height: 10px;
+  background: #f2f2f2;
+}