Header/Footer CSS changes

src/sxastarter/src/assets/EspireComponent/footer.scss

@@ -1,141 +1,72 @@
-#footer {
-  > .container {
-    width: 100%;
-    max-width: 100%;
-    padding-bottom: 8rem;
+@import "../sass/abstracts/vars/headings";
+ @import "../sass/abstracts/vars/colors";
+ @import "../sass/abstracts/vars/media-screen";
+
+ /**
+ * Import heading, media-screen & colors
+ *
+ * Footer: style guides for global
+ */
+
+#footer{
+  background-color: $primary;
+  padding: 8rem 0 0;
+  @media screen and (max-width:$tablet-width) {
+    padding: 8rem 2rem;
   }
-
-  .link-list {
-    > .component-content {
-      li {
-        display: inline-block;
-
-        @include respond-to(below-laptop) {
-          display: block;
-        }
-
-        a {
-          color: $white;
-          font-size: 1.6rem;
-
-          &::before {
-            content: "";
-          }
-        }
-      }
-    }
-  }
-
-  #footer-top-section {
-    img {
-      max-width: 90px;
-    }
-
-    .row {
-      align-items: center;
-    }
-
-    li {
-      @include respond-to(laptop-and-above) {
-        padding: 2.8rem 1rem 3rem 1rem;
-      }
-
-      border-radius: 10px 10px 0 0;
-
-      @include respond-to(laptop-to-desktop) {
-        padding-left: 0;
-
-        a {
-          font-size: 1.2rem;
-        }
-      }
-    }
-
-    .btn {
-      border: 0;
-      font-size: 1.8rem;
-
-      @include respond-to(below-laptop) {
-        flex: 1;
-      }
-    }
-
-    @include respond-to(laptop-to-desktop) {
-      ul {
-        float: right;
-      }
-    }
-
-    @include respond-to(below-laptop) {
-      text-align: center;
-    }
+  p{
+    font-size:$footer-sub-menu;
+    color:$white;
   }
-
-  #contact-section {
-    @include respond-to(below-laptop) {
-      text-align: center;
-
-      .plain-text-reusable + .plain-text-reusable {
-        margin-top: 2.5rem;
+  .image{
+    margin-bottom:1.5rem;
+    img{
+      width:50%;
+      @media screen and (max-width:$tablet-width) {
+        width:75%;
       }
     }
-
-    padding: 5rem 0 2rem 0;
-    border-bottom: solid 1px #ffcc00;
-    margin-bottom: 1rem;
   }
-
-  #social-media-section {
-    @include respond-to(below-laptop) {
-      text-align: center;
+  .link-list{
+    h6{
+      color:$white;
+      border-bottom: 0;
     }
-
-    .link-list {
-      &:nth-child(2) {
-        ul {
-          float: right;
-
-          @include respond-to(below-laptop) {
-            float: inherit;
-
-            li {
-              display: inline-block;
-              padding: 2rem 0 0;
-              a {
-                @include respond-to(mobile-to-tablet) {
-                  font-size: 1.2rem;
-                }
-              }
-            }
-          }
+    ul{
+      margin-top:.5rem;
+      li{
+        @media screen and (max-width:$tablet-width) {
+          margin: 0.5rem 0;
         }
-      }
-
-      &:first-child {
-        li {
-          display: block;
-
-          a {
-            padding-left: 0;
+        a{
+          color: $white;
+          font-size: $footer-sub-menu;
+          padding-left: 0;
+          &::before{
+            content:" ";
+          }
+          &:hover{
+            border-bottom: 0;
           }
         }
       }
     }
   }
-
-  li {
-    @include respond-to(below-laptop) {
-      padding: 15px;
+  .separator{
+    hr{
+      border-color:$medium-grey;
+      margin:2rem 0;
     }
   }
-}
-
-.editing-mode {
-  #footer {
-    .link-list {
-      h3 {
-        display: none;
-      }
+  .copy-right{
+    p{
+      font-size:12px;
+      color:$white;
+    }
+  }
+  .rich-text{
+    @media screen and (max-width: $screen-md) {
+      padding-left:0;
     }
   }
-}
+}