Merge pull request #138 from jeznorth/MEM-591

[MEM-591] Update Header / Footer Components
bcgov · Oct 27, 2017 · 55b518b · 55b518b
2 parents 7fb55aa + 388cbe3
commit 55b518b
Show file tree

Hide file tree

Showing 8 changed files with 514 additions and 347 deletions.
diff --git a/modules/core/client/scss/global/footer.scss b/modules/core/client/scss/global/footer.scss
@@ -1,16 +1,102 @@
-tmpl-header {
-	display: block;
-	flex: 0 0 auto;
-}
+$app-footer-font-size-sm: 0.85rem;
+$app-footer-font-size: 1.15rem;
+$app-footer-color: #fff;
 
 .app-footer {
 	padding: 1rem 2rem;
-	border-top: 2px solid $corp-gold;
+	color: $app-footer-color;
+	border-top: 4px solid $corp-gold;
 	background: $corp-blue;
-	color: #FFF;
-	font-size: $footer-font-size;
-
-	a {
-		color: #FFF;
+	text-align: center;
+	font-size: $app-footer-font-size-sm;
+
+	&__nav {
+		ul {
+			margin: 0;
+			padding: 0;
+			list-style-type: none;
+		}
+
+        li {
+            display: inline-block;
+            margin: 0.25rem 0;
+
+			+ li {
+				&:before {
+					position: relative;
+					top: -1px;
+					display: inline-block;
+					margin-left: 0.5rem;
+					margin-right: 0.75rem;
+					content: '|';
+				}
+			}
+        }
+
+		a {
+			color: $app-footer-color;
+			text-decoration: none;
+		}
 	}
+
+}
+
+@media (min-width: 768px) {
+	.app-footer {
+		text-align: left;
+		font-size: $app-footer-font-size;
+	}
+}
+
+.footer-admin {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    text-align: center;
+
+    .gov-links {
+        margin-top: 0;
+        margin-bottom: 1rem;
+        padding: 0;
+
+
+    }
+
+    .connect-links {
+        margin-top: -0.5rem;
+        margin-bottom: 0;
+
+        li {
+            margin: 0.25rem;
+            display: inline-block;
+
+            img {
+                width: 2rem;
+                height: 2rem;
+            }
+        }
+    }
+}
+
+@media (min-width: 760px) {
+    .footer-admin {
+        margin-top: 3rem;
+
+        .gov-links {
+            float: left;
+            margin-bottom: 0;
+        }
+
+        .connect-links {
+            margin-right: 3.5rem;
+            float: right;
+        }
+    }
+}
+
+@media (min-width: 1200px) {
+    .footer-admin {
+        .connect-links {
+            margin-right: 0;
+        }
+    }
 }