mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #18160 from overleaf/rd-footer-bs-new
[web] Migrate the footer to Boostrap 5 GitOrigin-RevId: 65c3d9bb4aa4647dd3e9aefed8f86162488d3174
This commit is contained in:
Rebeka Dekany
Copybot
parent
c1c098e2f9
commit
77e2206320
6 changed files with 379 additions and 4 deletions
|
|
@ -1,2 +1,3 @@
|
|||
@import 'mixins';
|
||||
@import 'variable-overrides';
|
||||
@import 'variables';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
// Footer
|
||||
$footer-height: 50px;
|
||||
|
||||
// Header
|
||||
$header-height: 68px;
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
$header-height: 68px;
|
||||
$footer-height: 50px;
|
||||
|
||||
.content {
|
||||
min-height: 100vh;
|
||||
padding-top: $header-height + $spacing-08;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,3 +5,4 @@
|
|||
@import 'tooltip';
|
||||
@import 'card';
|
||||
@import 'badge';
|
||||
@import 'footer';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue