Add sample on todo page.

1 files changed, 33 insertions, 3 deletions

diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
index c17267c5..6a603863 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
@@ -1,12 +1,42 @@
+.align-self-bottom {
+  align-self: flex-end;
+}
+
+.first-item-box {
+  justify-content: space-between;
+}
+
+.item-box {
+  display: flex;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.sample-box {
+  box-sizing: border-box;
+  align-self: flex-start;
+}
+
 .item-id {
   display: inline-block;
   text-align: center;
-  background: skyblue;
   border-radius: 0.2rem;
   width: 1.2rem;
   height: 1.2rem;
 }
 
-mat-list-item {
-  margin: 10px;
+.item-id-sample {
+  display: inline-block;
+  border-radius: 0.2em;
+  width: 1em;
+  height: 1em;
+}
+
+.item-id-open {
+  background: red;
+}
+
+.item-id-closed {
+  background: green;
 }