overleaf/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
M Fahru 0428a017a8 Merge pull request #20512 from overleaf/mf-bs5-language-picker
[web] Fix language picker color for website redesign footer

GitOrigin-RevId: 4ba974af79de5eed0d40e3ff7da3daf616525133
2024-10-01 08:05:42 +00:00

389 lines
7.1 KiB
SCSS

@use 'sass:map';
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.lng-option {
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;
.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;
#language-picker-toggle {
color: var(--content-secondary-dark);
cursor: pointer;
text-decoration: none;
&::after {
display: none;
}
&:hover {
text-decoration: underline;
}
}
.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 */
}
.dropdown-item {
&.active {
color: var(--green-70);
}
&:hover {
text-decoration: none;
}
}
}
}
.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;
.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 {
flex-wrap: wrap;
padding: var(--spacing-02);
margin: var(--spacing-06);
}
.fat-footer-base-meta .fat-footer-base-item {
gap: var(--spacing-09);
justify-content: center;
@include media-breakpoint-down(sm) {
gap: var(--spacing-06);
}
}
.fat-footer-base-social .fat-footer-base-item {
gap: var(--spacing-07);
margin-top: var(--spacing-00);
}
.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-05) 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: 0 -5px 8px 0 #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-00);
}
}
}
.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);
#language-picker-toggle {
color: inherit;
}
}
}
.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);
}
}
}