Merge pull request #18160 from overleaf/rd-footer-bs-new

[web] Migrate the footer to Boostrap 5

GitOrigin-RevId: 65c3d9bb4aa4647dd3e9aefed8f86162488d3174

services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss

@@ -1,2 +1,3 @@
 @import 'mixins';
 @import 'variable-overrides';
+@import 'variables';

services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss

@@ -0,0 +1,5 @@
+// Footer
+$footer-height: 50px;
+
+// Header
+$header-height: 68px;

services/web/frontend/stylesheets/bootstrap-5/base/layout.scss

@@ -1,6 +1,3 @@
-$header-height: 68px;
-$footer-height: 50px;
-
 .content {
   min-height: 100vh;
   padding-top: $header-height + $spacing-08;

services/web/frontend/stylesheets/bootstrap-5/base/links.scss

@@ -7,7 +7,7 @@
   --link-visited-color: var(--link-ui-visited);
 }
 
-a:not([role='button']) {
+a {
   color: var(--link-color);
 
   &:hover {
@@ -18,3 +18,7 @@ a:not([role='button']) {
     color: var(--link-visited-color);
   }
 }
+
+a[role='button'] {
+  color: inherit;
+}

services/web/frontend/stylesheets/bootstrap-5/components/all.scss

@@ -5,3 +5,4 @@
 @import 'tooltip';
 @import 'card';
 @import 'badge';
+@import 'footer';

services/web/frontend/stylesheets/bootstrap-5/components/footer.scss

@@ -0,0 +1,367 @@
+footer.site-footer {
+  background-color: var(--bg-light-primary);
+  border-top: 1px solid var(--border-primary-dark);
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  @include body-sm;
+
+  height: $footer-height;
+
+  ul {
+    list-style: none;
+    margin: var(--spacing-00);
+
+    li {
+      display: inline-block;
+      margin: var(--spacing-07) var(--spacing-04);
+    }
+
+    i {
+      font-size: var(--font-size-05);
+    }
+  }
+
+  li.lngOption {
+    text-align: left;
+    display: list-item;
+
+    img {
+      vertical-align: text-bottom;
+    }
+
+    a:hover,
+    a:focus {
+      color: var(--content-primary-dark);
+
+      &:visited {
+        color: var(--content-primary-dark);
+      }
+    }
+  }
+
+  a {
+    color: var(--content-secondary-dark);
+
+    &:hover,
+    &:focus {
+      color: var(--content-secondary-dark);
+    }
+  }
+}
+
+.site-footer-content {
+  @extend .container-fluid;
+}
+
+.sprite-icon-lang {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.fat-footer {
+  background: var(--bg-dark-primary);
+  color: var(--content-secondary-dark);
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+
+  .fat-footer-container {
+    margin: var(--spacing-11) auto;
+
+    @include media-breakpoint-down(sm) {
+      margin: var(--spacing-11) 0;
+    }
+  }
+
+  a {
+    color: var(--content-secondary-dark);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--content-secondary-dark);
+      text-decoration: underline;
+    }
+
+    &:visited {
+      color: var(--content-secondary-dark);
+    }
+  }
+
+  .footer-brand-container {
+    flex: 1;
+  }
+
+  .fat-footer-sections {
+    display: grid;
+    column-gap: var(--spacing-07);
+    padding: 0 var(--spacing-07) var(--spacing-07);
+  }
+
+  .footer-brand {
+    display: block;
+    height: 37px;
+    width: 130px;
+    background-image: url('../../../../public/img/ol-brand/overleaf-white.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+
+  .footer-section-heading {
+    color: var(--content-secondary-dark);
+
+    @include heading-sm;
+
+    margin-bottom: var(--spacing-07);
+    margin-top: var(--spacing-07);
+  }
+
+  .footer-section ul {
+    @include body-sm;
+  }
+
+  .footer-section li {
+    padding-bottom: var(--spacing-04);
+  }
+
+  #footer-brand {
+    grid-column: 1/-1;
+    margin-top: var(--spacing-07);
+  }
+
+  .fat-footer-base {
+    color: var(--content-disabled);
+
+    @include body-sm;
+
+    .fat-footer-base-meta a:not(.dropdown-toggle) {
+      color: inherit;
+    }
+
+    .language-picker .dropdown-menu {
+      .dropdown-header {
+        display: none; /* hiding rather than removing as still needed in the thin footer */
+      }
+
+      a {
+        color: var(--content-secondary);
+
+        &:hover {
+          color: white;
+        }
+
+        &:visited {
+          color: var(--content-secondary);
+        }
+      }
+    }
+  }
+
+  .fat-footer-base-item {
+    display: flex;
+    white-space: nowrap;
+  }
+
+  @include media-breakpoint-down(md) {
+    .fat-footer-sections {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(4, auto);
+    }
+
+    .fat-footer-base {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: var(--spacing-07) auto var(--spacing-07);
+
+      .fat-footer-base-section {
+        display: flex;
+        align-items: center;
+      }
+
+      .fat-footer-base-social {
+        order: 1;
+      }
+
+      .fat-footer-base-meta {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        order: 2;
+      }
+
+      .fat-footer-base-item {
+        padding: var(--spacing-02);
+        margin: var(--spacing-06);
+      }
+
+      .fat-footer-base-meta .fat-footer-base-item {
+        gap: var(--spacing-09);
+      }
+
+      .fat-footer-base-social .fat-footer-base-item {
+        gap: var(--spacing-07);
+      }
+
+      .fat-footer-social {
+        @include heading-lg;
+      }
+
+      .fat-footer-base-copyright {
+        order: 2;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .fat-footer-container {
+      width: (map-get($grid-breakpoints, 'md') - ($spacing-04 * 2));
+    }
+
+    #footer-brand {
+      grid-column: auto;
+      grid-row: 1/-1;
+    }
+
+    .fat-footer-sections {
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(2, auto);
+    }
+
+    .footer-section:last-of-type {
+      grid-column: 4;
+    }
+
+    .fat-footer-base {
+      display: flex;
+      justify-content: space-between;
+      margin: var(--spacing-07) auto;
+
+      .fat-footer-base-section {
+        display: flex;
+        align-items: center;
+      }
+
+      .fat-footer-base-item {
+        padding: var(--spacing-02);
+        margin: var(--spacing-02);
+      }
+
+      .fat-footer-base-meta .fat-footer-base-item {
+        gap: var(--spacing-07);
+      }
+
+      .fat-footer-social {
+        margin: var(--spacing-07) var(--spacing-02);
+
+        @include heading-lg;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .fat-footer-container {
+      width: (map-get($grid-breakpoints, 'lg') - $spacing-07);
+    }
+
+    .fat-footer-sections {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .fat-footer-container {
+      width: (map-get($grid-breakpoints, 'xl') - $spacing-09);
+    }
+
+    .fat-footer-sections {
+      grid-template-columns: repeat(6, 1fr);
+      grid-template-rows: auto;
+    }
+
+    .footer-section:last-of-type {
+      grid-column: 6;
+    }
+  }
+}
+
+.cookie-banner {
+  @include body-sm;
+
+  padding: var(--spacing-04) var(--spacing-07);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  color: var(--content-secondary);
+  background: var(--bg-light-secondary);
+  box-shadow: var(--spacing-00) var(--spacing-02) var(--spacing-04)
+    var(--spacing-00) #0000001a;
+
+  .cookie-banner-actions {
+    padding-top: var(--spacing-04);
+  }
+
+  @include media-breakpoint-up(md) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+
+    .cookie-banner-content {
+      flex: 1;
+    }
+
+    .cookie-banner-actions {
+      flex-shrink: 0;
+      white-space: nowrap;
+      padding-top: var(--spacing-07);
+    }
+  }
+}
+
+.website-redesign-fat-footer {
+  .fat-footer-container {
+    @include media-breakpoint-down(sm) {
+      margin: var(--spacing-11) 0;
+    }
+  }
+
+  &.fat-footer {
+    background: var(--content-primary-dark);
+    color: var(--content-primary);
+
+    a {
+      color: var(--content-primary);
+
+      &:visited {
+        color: var(--content-primary);
+      }
+    }
+
+    .footer-section-heading {
+      color: var(--content-primary);
+    }
+
+    h2 {
+      font-weight: 400;
+    }
+
+    .fat-footer-base {
+      color: var(--content-primary);
+    }
+  }
+
+  .footer-brand {
+    background-image: url('../../../../public/img/ol-brand/overleaf-black.svg');
+  }
+
+  @include media-breakpoint-down(sm) {
+    .fat-footer-sections {
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: repeat(6, auto);
+    }
+  }
+}