vijayrajanna · August 1, 2015 23:04 · Aug 1, 2015
diff --git a/Timeline.markdown b/Timeline.markdown
@@ -0,0 +1,7 @@
+Timeline
+--------
+Simple timeline abstraction for an email workflow approval process we have with one of our internal tools
+
+A [Pen](http://codepen.io/abhisharma2/pen/vEKWVo) by [Abhi Sharma](http://codepen.io/abhisharma2) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/abhisharma2/pen/vEKWVo/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
+<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+<button id="toggleButton">Toggle</button>
+
+<ul class="timeline" id="timeline">
+  <li class="li complete">
+    <div class="timestamp">
+      <span class="author">Abhi Sharma</span>
+      <span class="date">11/15/2014<span>
+    </div>
+    <div class="status">
+      <h4> Shift Created </h4>
+    </div>
+  </li>
+  <li class="li complete">
+    <div class="timestamp">
+      <span class="author">PAM Admin</span>
+      <span class="date">11/15/2014<span>
+    </div>
+    <div class="status">
+      <h4> Email Sent </h4>
+    </div>
+  </li>
+  <li class="li complete">
+    <div class="timestamp">
+      <span class="author">Aaron Rodgers</span>
+      <span class="date">11/15/2014<span>
+    </div>
+    <div class="status">
+      <h4> SIC Approval </h4>
+    </div>
+  </li>
+  <li class="li">
+    <div class="timestamp">
+      <span class="author">PAM Admin</span>
+      <span class="date">TBD<span>
+    </div>
+    <div class="status">
+      <h4> Shift Completed </h4>
+    </div>
+  </li>
+ </ul>      
diff --git a/script.js b/script.js
@@ -0,0 +1,10 @@
+var completes = document.querySelectorAll(".complete");
+var toggleButton = document.getElementById("toggleButton");
+
+
+function toggleComplete(){
+  var lastComplete = completes[completes.length - 1];
+  lastComplete.classList.toggle('complete');
+}
+
+toggleButton.onclick = toggleComplete;
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,86 @@
+.timeline
+  list-style-type: none
+  display: flex
+  align-items: center
+  justify-content: center
+.li
+  transition: all 200ms ease-in
+
+.timestamp
+  margin-bottom: 20px
+  padding: 0px 40px
+  display: flex
+  flex-direction: column
+  align-items: center
+  font-weight: 100
+.status
+  padding: 0px 40px
+  display: flex
+  justify-content: center
+  border-top: 2px solid #D6DCE0
+  position: relative
+  transition: all 200ms ease-in  
+  h4
+    font-weight: 600
+  &:before
+    content: ''
+    width: 25px
+    height: 25px
+    background-color: white
+    border-radius: 25px
+    border: 1px solid #ddd
+    position: absolute
+    top: -15px
+    left: 42%
+    transition: all 200ms ease-in 
+.li.complete
+  .status
+    border-top: 2px solid #66DC71
+    &:before
+      background-color: #66DC71
+      border: none
+      transition: all 200ms ease-in 
+    h4
+      color: #66DC71
+
+@media (min-device-width: 320px) and (max-device-width: 700px)
+  .timeline
+    list-style-type: none
+    display: block
+  .li
+    transition: all 200ms ease-in
+    display: flex
+    width: inherit
+  .timestamp
+    width: 100px
+  .status
+    &:before
+      left: -8%
+      top: 30%
+      transition: all 200ms ease-in 
+
+/// Layout stuff
+html,body
+  width: 100%
+  height: 100%
+  display: flex
+  justify-content: center
+  font-family: 'Titillium Web', sans serif
+  color: #758D96
+
+button
+  position: absolute
+  width: 100px
+  min-width: 100px
+  padding: 20px
+  margin: 20px
+  font-family: 'Titillium Web', sans serif
+  border: none
+  color: white
+  font-size: 16px
+  text-align: center
+#toggleButton
+  position: absolute
+  left: 50px
+  top: 20px
+  background-color: #75C7F6
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>