css moved to app.component.scss

variables added within footer.component.scss

src/app/app.component.scss

@@ -1 +1,18 @@
+// Sticky Footer
 
+.outer-wrapper {
+  display: flex;
+  margin: 0;
+}
+
+.inner-wrapper {
+  flex: 1 1 auto;
+  flex-flow: column nowrap;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1 0 auto;
+}

src/app/core/footer/footer.component.scss

@@ -1,11 +1,17 @@
 @import '../../../styles/variables.scss';
+@import '../../../../node_modules/bootstrap/scss/_variables.scss';
+
+$footer-bg: $gray-lighter;
+$footer-border: 1px solid darken($footer-bg, 10%);
+$footer-padding: $spacer * 1.5;
 
 .footer {
-  /* just for demo */
-  background-color: #F8F8F8;
-  border-top: 1px solid #E7E7E7;
+  background-color: $footer-bg;
+  border-top:  $footer-border;
   text-align:center;
-  padding:20px;
-  /* just for demo */
+  padding: $footer-padding;
 
+  p {
+    margin: 0;
+  }
 }

src/styles/main.scss

@@ -8,22 +8,3 @@ html {
   position: relative;
   min-height: 100%;
 }
-
-// Sticky Footer
-
-.outer-wrapper {
-  display: flex;
-  margin: 0;
-}
-
-.inner-wrapper {
-  flex: 1 1 auto;
-  flex-flow: column nowrap;
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-
-.main-content {
-  flex: 1 0 auto;
-}