DIV-112 added styling for progress side nav

edivorce/apps/core/static/css/main.scss

@@ -23,6 +23,8 @@ $color-grey-lightest: #fdfdfd;
 $color-green: #57b26a;
 $color-green-light: #d9f6df;
 
+$color-gold-light: #e6ca85;
+
 $font-custom:  Myriad-Pro, Calibri, Arial, Sans Serif;
 
 @font-face {
@@ -102,6 +104,12 @@ a {
 	line-height: 28px;
 }
 
+.footer {
+	height: 50px;
+	background-color: $brand-blue;
+	color: #ffffff;
+}
+
 // Bootstrap Overrides
 
 .container-wrapper {
@@ -440,15 +448,13 @@ textarea {
   flex-wrap: wrap;
   height: 100%;
 	.col {
-		flex: 1 1 8%;
-		margin: 0 0 0.5rem 0;
-		padding: 0.5em 10px;
+		flex: 1;
 		box-sizing: border-box;
 	}
 	.content-column {
 		flex-basis: 100%;
 		max-width: 800px;
-		padding: 60px;
+		padding: 35px 50px 50px 50px;
 	}
 	.progress-column {
 		flex: 0 0 262px;
@@ -474,6 +480,76 @@ textarea {
 	}
 }
 
+/* Side Progress Navigation */
+
+.progress-column {
+	h4 {
+		color: $color-grey-dark;
+		padding: 0 18px;
+		margin-top: 36px;
+	}
+	.progress-question {
+		display: flex;
+		align-items: center;
+		height: 60px;
+		margin-bottom: 12px;
+		padding: 0 12px 0 18px;
+		.progress-icon {
+			width: 46px;
+			i {
+				font-size: 20px;
+				border: solid 1px $color-grey-dark;
+				padding: 7px;
+				border-radius: 50%;
+			}
+		}
+		.progress-content {
+			width: 158px;
+			font-size: 14px;
+			line-height: 16px;
+			color: $body-copy;
+			small {
+				font-size: 11px;
+				text-transform: uppercase;
+				font-weight: 700;
+				letter-spacing: .1em;
+			}
+		}
+		.progress-status {
+			width: 28px;
+			i {
+				float: right;
+			}
+		}
+		i {
+			color: $color-grey-dark;
+		}
+		&.complete {
+			span, i {
+				color: $color-green;
+				border-color: $color-green;
+			}
+		}
+		&:hover, &:focus {
+			background-color: $color-gold-light;
+			text-decoration: none;
+			span, i {
+				color: #ffffff;
+				border-color: #ffffff;
+			}
+		}
+		&.active {
+			background-color: $brand-gold;
+			text-decoration: none;
+			span, i {
+				color: #ffffff;
+				border-color: #ffffff;
+			}
+		}
+	}
+}
+
+
 
 
 

edivorce/apps/core/templates/base.html

@@ -76,9 +76,7 @@
         {% endif %}
 
         <div class="row-flex">
-        	<div class="col-flex progress-column">
-                <p>Stuff</p>
-            </div>
+        	{% include "progress.html" %}
 
             <div class="col">
                 <div class="col-flex content-column">
@@ -96,7 +94,10 @@
 
         </div>
 
+        <footer class="footer">
 
+            
+        </footer>
 
 
 

edivorce/apps/core/templates/progress.html

@@ -0,0 +1,60 @@
+<div class="col-flex progress-column">
+    <h4>Questionnaire</h4>
+
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-share-alt" aria-hidden="true"></i></span>
+        <span class="progress-content">Qualifying Questions</span>
+    </a>
+    <a href="#" class="progress-question complete">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 1</small><br />What Are You Asking For?</span>
+        <span class="progress-status"><i class="fa fa-check" aria-hidden="true"></i></span>
+    </a>
+    <a href="#" class="progress-question active">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 2</small><br />Your information</span>
+        <span class="progress-status"><i class="fa fa-adjust" aria-hidden="true"></i></span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 3</small><br />Your information</span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 4</small><br />Your information</span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 5</small><br />Your information</span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 6</small><br />Your information</span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 7</small><br />Your information</span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 8</small><br />Your information</span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 9</small><br />Your information</span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 10</small><br />Your information</span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 11</small><br />Your information</span>
+    </a>
+    <a href="#" class="progress-question">
+        <span class="progress-icon"><i class="fa fa-commenting" aria-hidden="true"></i></span>
+        <span class="progress-content"><small>Step 12</small><br />Your information</span>
+    </a>
+
+
+</div>