From 34e6414f0ccb13c40757fa6384d637025bd93689 Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Wed, 8 May 2024 13:45:56 +0200 Subject: [PATCH] Merge pull request #18160 from overleaf/rd-footer-bs-new [web] Migrate the footer to Boostrap 5 GitOrigin-RevId: 65c3d9bb4aa4647dd3e9aefed8f86162488d3174 --- .../bootstrap-5/abstracts/all.scss | 1 + .../bootstrap-5/abstracts/variables.scss | 5 + .../stylesheets/bootstrap-5/base/layout.scss | 3 - .../stylesheets/bootstrap-5/base/links.scss | 6 +- .../bootstrap-5/components/all.scss | 1 + .../bootstrap-5/components/footer.scss | 367 ++++++++++++++++++ 6 files changed, 379 insertions(+), 4 deletions(-) create mode 100644 services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/footer.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss index 2906efe1aa..f22cfa6898 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss @@ -1,2 +1,3 @@ @import 'mixins'; @import 'variable-overrides'; +@import 'variables'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss new file mode 100644 index 0000000000..d2712b14ed --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss @@ -0,0 +1,5 @@ +// Footer +$footer-height: 50px; + +// Header +$header-height: 68px; diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss b/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss index 9b247c22a6..db5772f9bc 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss +++ b/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; diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss b/services/web/frontend/stylesheets/bootstrap-5/base/links.scss index 2848f5dc44..269a131b70 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss +++ b/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; +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss index 54a3765f9b..96f5b86f10 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss @@ -5,3 +5,4 @@ @import 'tooltip'; @import 'card'; @import 'badge'; +@import 'footer'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss b/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss new file mode 100644 index 0000000000..3539357150 --- /dev/null +++ b/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); + } + } +}