Issue #3446921: Change the style for the Page Footer component to follow with Varbase Design System

components/organisms/page-footer/page-footer.css

@@ -3,12 +3,59 @@ footer.footer {
   color: var(--bs-white);
 }
 
+footer.footer .block-menu-blockmain .nav-item a.nav-link {
+  position: relative;
+  color: var(--bs-white);
+  text-decoration: none;
+}
+
+footer.footer .block-menu-blockmain .nav-item a.nav-link:hover, footer.footer .block-menu-blockmain .nav-item a.nav-link:focus, footer.footer .block-menu-blockmain .nav-item a.nav-link:active {
+  color: var(--bs-white);
+}
+
+footer.footer .block-menu-blockmain .nav-item a.nav-link:hover:after, footer.footer .block-menu-blockmain .nav-item a.nav-link:focus:after, footer.footer .block-menu-blockmain .nav-item a.nav-link:active:after {
+  position: absolute;
+  content: "";
+  top: 80%;
+  transition: width .3s;
+  width: 2.4rem !important;
+  height: 1px;
+  bottom: 0;
+  background-color: var(--bs-white);
+}
+
+[dir="ltr"] footer.footer .block-menu-blockmain .nav-item a.nav-link:hover:after, [dir="ltr"] footer.footer .block-menu-blockmain .nav-item a.nav-link:focus:after, [dir="ltr"] footer.footer .block-menu-blockmain .nav-item a.nav-link:active:after {
+  left: 0;
+}
+
+[dir="rtl"] footer.footer .block-menu-blockmain .nav-item a.nav-link:hover:after, [dir="rtl"] footer.footer .block-menu-blockmain .nav-item a.nav-link:focus:after, [dir="rtl"] footer.footer .block-menu-blockmain .nav-item a.nav-link:active:after {
+  right: 0;
+}
+
+footer.footer .block-menu-blockmain .nav-item a.nav-link.is-active:after {
+  position: absolute;
+  content: "";
+  top: 80%;
+  width: 1.3rem;
+  height: 1px;
+  bottom: 0;
+  background-color: var(--bs-white);
+}
+
+[dir="ltr"] footer.footer .block-menu-blockmain .nav-item a.nav-link.is-active:after {
+  left: 0;
+}
+
+[dir="rtl"] footer.footer .block-menu-blockmain .nav-item a.nav-link.is-active:after {
+  right: 0;
+}
+
 footer.footer a {
   color: var(--bs-white);
   text-decoration: none;
 }
 
-footer.footer a:hover, footer.footer a:focus, footer.footer a:active, footer.footer a.active {
+footer.footer a:hover, footer.footer a:focus, footer.footer a:active {
   color: var(--bs-white);
   text-decoration: underline;
 }
@@ -34,7 +81,12 @@ footer.footer .footer-logo-image {
   float: right;
 }
 
-.social-media-menu-icons li.nav-item > a:hover, .social-media-menu-icons li.nav-item > a:focus, .social-media-menu-icons li.nav-item > a:active, .social-media-menu-icons li.nav-item > a.active {
+.social-media-menu-icons li.nav-item > a:hover, .social-media-menu-icons li.nav-item > a:focus, .social-media-menu-icons li.nav-item > a:active {
   color: #cfe2ff;
+  text-decoration: none;
+}
+
+.social-media-menu-icons li.nav-item > a:hover:after, .social-media-menu-icons li.nav-item > a:focus:after, .social-media-menu-icons li.nav-item > a:active:after {
+  display: none;
 }
 

components/organisms/page-footer/page-footer.scss

@@ -5,14 +5,54 @@ footer.footer {
   background-color: shade-color($primary, 40%);
   color: var(--bs-white);
 
+  .block-menu-blockmain {
+    .nav-item {
+      a.nav-link {
+        position: relative;
+        color: var(--bs-white);
+        text-decoration: none;
+  
+        &:hover,
+        &:focus,
+        &:active {
+          color: var(--bs-white);
+  
+          &:after {
+            position: absolute;
+            content: "";
+            top: 80%;
+            left: 0;
+            transition: width 0.3s;
+            width: 2.4rem !important;
+            height: 1px;
+            bottom: 0;
+            background-color: var(--bs-white);
+          }
+        }
+  
+        &.is-active {
+          &:after {
+            position: absolute;
+            content: "";
+            top: 80%;
+            left: 0;
+            width: 1.3rem;
+            height: 1px;
+            bottom: 0;
+            background-color: var(--bs-white);
+          }
+        }
+      }
+    }
+  }
+
   a {
     color: var(--bs-white);
     text-decoration: none;
 
     &:hover,
     &:focus,
-    &:active,
-    &.is-active {
+    &:active {
       color: var(--bs-white);
       text-decoration: underline;
     }
@@ -34,8 +74,12 @@ footer.footer {
 
   &:hover,
   &:focus,
-  &:active,
-  &.active {
+  &:active {
     color: tint-color($primary, 80%);
+    text-decoration: none;
+
+    &:after { 
+      display: none;
+    }
   }
 }