add logo and link to angular in footer

Author: rangle-fatima

src/_app-theme.scss

@@ -8,6 +8,8 @@
 @import './styles/typography-theme';
 @import './app/shared/navbar/navbar-theme';
 @import './app/shared/example-viewer/example-viewer-theme';
+@import './app/shared/footer/footer-theme';
+
 
 // Styles for the docs app that are based on the current theme.
 @mixin material-docs-app-theme($theme) {
@@ -43,4 +45,5 @@
   @include component-category-list-theme($theme);
   @include nav-bar-theme($theme);
   @include example-viewer-theme($theme);
+  @include footer-theme($theme);
 }

src/app/shared/footer/_footer-theme.scss

@@ -0,0 +1,15 @@
+@mixin footer-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  app-footer {
+    footer ul {
+      a {
+        color: md-color($primary, default-contrast);
+      }
+    }
+  }
+}

src/app/shared/footer/footer.html

@@ -1,4 +1,19 @@
 <footer class="docs-footer">
-  Powered by Google ©2010-2016. Code licensed under an MIT-style License.
-  Documentation licensed under CC BY 4.0.
+  <div class="footer-list">
+    <div class="footer-logo">
+      <img class="docs-angular-logo"
+          src="../../../assets/img/homepage/angular-white-transparent.svg"
+          alt="Angular">
+    </div>
+
+    <div class="footer-links">
+      <ul class="footer-links">
+        <li> <a class="" href="https://wwww.angular.io">Learn Angular</a> </li>
+      </ul>
+    </div>
+    
+    <div class="footer-cc">
+      <p>Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.</p>
+    </div>
+  </div>
 </footer>

src/app/shared/footer/footer.scss

@@ -1,6 +1,50 @@
 .docs-footer {
   margin-top: 40px;
   padding: 15px;
-  text-align: center;
   font-size: 12px;
 }
+
+.footer-list {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+  padding: 8px;
+}
+
+.docs-angular-logo {
+  height: 50px;
+}
+
+.footer-logo {
+  width: 8.33%;
+}
+
+.footer-cc {
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+footer ul {
+  list-style: none;
+  padding: 0;
+
+  a {
+    font-size: 16px;
+    padding: 0;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+@media screen and (max-width: 884px){
+  .footer-list {
+    flex-direction: column;
+  }
+  .footer-logo {
+    width: 0;
+  }
+}