Timeline functionality working. Checkboxes not yet included

Author: jal040

src/components/timeline/timeline.html

@@ -3,10 +3,12 @@
 
     <ion-list>
         <ng-template #recursiveList let-list>
+        <!-- <div class="cd-timeline__img cd-timeline__img--5"></div> -->
         <ion-list *ngFor="let item of list">
           <h2 (click)="toggleItem(item)">{{item.title}} </h2>
           <ion-item *ngIf="item.itemExpand && item.children.length > 0">
           <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
+
           </ion-item>
         </ion-list>
         </ng-template>

src/components/timeline/timeline.scss

@@ -11,6 +11,32 @@ timeline {
 
 }
 
+.cd-timeline__img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    -webkit-box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
+            box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
+  }
+  
+  .cd-timeline__img img {
+    display: block;
+    width: 24px;
+    height: 24px;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    margin-left: -12px;
+    margin-top: -12px;
+  }
+
+  .cd-timeline__img.cd-timeline__img--5 {
+    background: #64c5b1;
+  }
+
 .timeline {
     margin: 30px 0 0 0;
     padding: 0;
@@ -87,14 +113,18 @@ timeline {
           }
         }
     }
-    @media screen and (max-width: 1024px) {
+    .label-md{
+        margin: 13px 8px -15px 0;
+    }
+
         &:before {
-            left: 3%;
+            left: 3% !important;
         }
-        .list-ios{
-            margin-left:3%;
+        .list, .list-md{
+            margin-left:3% !important;
         }
-    }
+        
+
     @media screen and (max-width: map-get($grid-breakpoints,'lg')){
         .list-ios{
             margin-top: -1px;

src/components/timeline/timeline.ts

@@ -23,10 +23,12 @@ export class TimelineComponent {
           children: [
             {
               title: 'Meet with separation counselor',
+              checkmark: true,
               children: []
             },
             {
               title: 'Take career test',
+              checkmark: true,
               children: []
             }
           ]
@@ -36,6 +38,7 @@ export class TimelineComponent {
           children: [
             {
               title: 'Fill out specific paperwork',
+              checkmark: true,
               children: []
             }
           ]
@@ -45,6 +48,7 @@ export class TimelineComponent {
           children: [
             {
               title: 'Find out what benefits I will have after separation',
+              checkmark: true,
               children: []
             }
           ]
@@ -60,10 +64,12 @@ export class TimelineComponent {
           children: [
             {
               title: 'Go to Career Center',
+              checkmark: true,
               children: []
             },
             {
               title: 'Vocational Rehab & Employment',
+              checkmark: true,
               children: []
             }
           ]
@@ -73,6 +79,7 @@ export class TimelineComponent {
           children: [
             {
               title: 'Check out vet center',
+              checkmark: true,
               children: []
             }
           ]
@@ -82,6 +89,7 @@ export class TimelineComponent {
           children: [
             {
               title: 'Open a savings account',
+              checkmark: true,
               children: []
             }
           ]