feat(aio): add footer links with GoogleFeedbackService (#15605)

aio/src/styles/1-layouts/_footer.scss

@@ -1,40 +1,91 @@
 footer {
-    position: relative;
-    line-height: 24px;
-}
+  position: relative;
+  line-height: 24px;
+  flex: 1;
+  padding: 20px;
+  z-index: 10;
+  background-color: $blue;
+  color: $offwhite;
+  font-weight: 300;
 
-footer .footer {
-    flex: 1;
-    padding: 20px;
-    z-index: 10;
-    background-color: $blue;
-    color: $offwhite;
+  a {
+      color: $offwhite;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+      &:visited {
+        text-decoration: none;
+      }
+  }
+  a.action {
+    cursor: pointer;
+  }
+  h3 {
+    font-size: 130%;
+  }
+  p {
     text-align: center;
-    font-weight: 300;
-    a {
-        color: $offwhite;
-        text-decoration: none;
-        &:hover {
-            text-decoration: underline;
-        }
-        &:visited {
-        text-decoration: none;
-        }
+    margin: 10px 0px 5px;
+  }
+
+  div.grid-fluid {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    -webkit-justify-content: space-around;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+
+    -webkit-align-items: flex-start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+
+    -webkit-align-content: flex-start;
+    -ms-flex-line-pack: start;
+    align-content: flex-start;
+
+    text-align: left;
+
+    ul {
+      list-style-position: inside;
+      padding: 0px;
+      margin: 0px;
+
+      li {
+        list-style-type: none;
+        padding: 0px;
+        text-align: left;
+      }
     }
-    p {
-        margin: 0 0 5px;
+  }
+
+  @media (max-width: 700px) {
+    h3 {
+      font-size: 110%;
     }
+  }
+  @media (max-width: 600px) {
+    h3 {
+      font-size: 100%;
+    }
+  }
 }
 
 footer::after {
-    content: "";
+    // content: "";
     position: absolute;
     z-index: 10;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-    background: 
+    background:
         url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left repeat-y,
         url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 168px repeat-y,
         url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 336px repeat-y,
@@ -49,4 +100,4 @@ footer::after {
         url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 1848px repeat-y;
     opacity: 0.1;
     background-size: 160px auto;
-}
+}

aio/src/styles/1-layouts/_sidenav.scss

@@ -1,10 +1,50 @@
-/** STEF:  HELP WITH LOGO SPACING **/
-.nav-link.home {
-  margin: 0 20px 0 10px;
+/************************************
+
+             Media queries
+
+ To use these, put this snippet in the approriate selector:
+
+     @include bp(tiny) {
+         background-color: purple;
+     }
+
+     Replace "tiny" with "medium" or "big" as necessary.
+*************************************/
+
+@mixin bp($point) {
+
+  $bp-xsmall: "(min-width: 320px)";
+  $bp-teeny: "(min-width: 480px)";
+  $bp-tiny: "(min-width: 600px)";
+  $bp-small: "(min-width: 650px)";
+  $bp-medium: "(min-width: 800px)";
+  $bp-big: "(min-width: 1000px)";
+
+  @if $point == big {
+    @media #{$bp-big} { @content; }
+  }
+  @else if $point == medium {
+    @media #{$bp-medium} { @content; }
+  }
+  @else if $point == small {
+    @media #{$bp-small}  { @content; }
+  }
+  @else if $point == tiny {
+    @media #{$bp-tiny}  { @content; }
+  }
+  @else if $point == teeny {
+    @media #{$bp-teeny}  { @content; }
+  }
+  @else if $point == xsmall {
+    @media #{$bp-xsmall}  { @content; }
+  }
 }
-/** STEF:  MENU AT TOP OF SIDE-NAV HELP! **/
+
+/************************************/
+
 aio-nav-menu.top-menu .vertical-menu-item  {
   background-color: $lightgray;
+  text-transform: uppercase;
 }
 
 .mat-sidenav.sidenav {

aio/src/styles/1-layouts/_top-menu.scss

@@ -1,22 +1,56 @@
+
+.fill-remaining-space {
+  flex: 1 1 auto;
+}
+
+.nav-link {
+  margin-right: 10px;
+  margin-left: 20px;
+  cursor: pointer;
+}
+
+.nav-link.home img {
+  position: relative;
+  margin-top: -15px;
+  top: 12px;
+  height: 36px;
+}
+
+@media (max-width: 700px) {
+  .nav-link {
+    font-size: 80%;
+    margin-right: 8px;
+    margin-left: 0px;
+  }
+}
+
+@media (max-width: 600px) {
+  .nav-link {
+    font-size: 80%;
+    margin-right: 8px;
+    margin-left: 0px;
+  }
+}
+
 aio-top-menu {
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 80%;
-}
 
-aio-top-menu ul {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  list-style-position: inside;
-  padding: 0;
-  margin: 0;
-}
+  ul {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    list-style-position: inside;
+    padding: 0px;
+    margin: 0px;
 
-aio-top-menu li {
-  list-style-type: none;
-  padding: 0;
+    li {
+      list-style-type: none;
+      padding: 0px;
+    }
+  }
 }
 
 md-toolbar.mat-toolbar {
@@ -48,12 +82,12 @@ aio-search-box input {
     transition: width 0.4s ease-in-out;
     &:focus {
       width: 50%;
-    }  
+    }
   }
   @include bp(medium) {
     transition: width 0.4s ease-in-out;
     &:focus {
       width: 50%;
-    }  
+    }
   }
-}
+}