Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into donate-banner-ab-test…
Browse files Browse the repository at this point in the history 
…ing-demo
  • Loading branch information
@danielfmiranda
danielfmiranda committed Nov 6, 2024
2 parents 49a654a + c629675 commit 165f572
Show file tree
Hide file tree
Showing 12 changed files with 143 additions and 33 deletions.
3 changes: 2 additions & 1 deletion network-api/networkapi/templates/fragments/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@
{% block social_links %}
<li class="tw-mr-4"><a class="tw-twitter-glyph tw-inline-block" href="https://twitter.com/mozilla"><span class="sr-only">{% trans "Twitter" %}</span></a></li>
<li class="tw-mr-4"><a class="tw-instagram-glyph tw-inline-block" href="https://www.instagram.com/mozilla/"><span class="sr-only">{% trans "Instagram" %}</span></a></li>
<li class="tw-mr-4"><a class="tw-github-glyph tw-inline-block" href="https://www.github.com/mozilla/foundation.mozilla.org/"><span class="sr-only">{% trans "GitHub" %}</span></a></li>
<li class="tw-mr-4"><a class="tw-youtube-glyph tw-inline-block" href="https://www.youtube.com/user/Mozilla"><span class="sr-only">{% trans "Youtube" %}</span></a></li>
<li class="tw-mr-4"><a class="tw-linkedin-glyph tw-inline-block" href="https://www.linkedin.com/company/mozilla-corporation/"><span class="sr-only">{% trans "Linkedin" %}</span></a></li>
<li class="tw-mr-4"><a class="tw-tiktok-glyph tw-inline-block" href="https://www.tiktok.com/@mozilla"><span class="sr-only">{% trans "Linkedin" %}</span></a></li>
{% endblock %}
</ul>
</div>
Expand Down
6 changes: 6 additions & 0 deletions ...-api/networkapi/wagtailpages/templates/wagtailpages/fragments/mozilla-social-buttons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,11 @@
<a class="{{ social_button_classes }} before:tw-bg-[url('../_images/glyphs/social-share/facebook-share.svg')]" href="https://www.facebook.com/mozilla/">
<span class="sr-only">{% trans "Facebook" %}</span>
</a>
<a class="{{ social_button_classes }} before:tw-bg-[url('../_images/glyphs/linkedin-dark-theme.svg')]" href="https://www.linkedin.com/company/mozilla-corporation/">
<span class="sr-only">{% trans "Linkedin" %}</span>
</a>
<a class="{{ social_button_classes }} before:tw-bg-[url('../_images/glyphs/tiktok-dark-theme.svg')]" href="https://www.tiktok.com/@mozilla">
<span class="sr-only">{% trans "Tiktok" %}</span>
</a>
{% endwith %}
</div>
3 changes: 3 additions & 0 deletions source/images/glyphs/linkedin-dark-theme-hover.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions source/images/glyphs/linkedin-dark-theme.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion source/images/glyphs/linkedin-hover.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion source/images/glyphs/linkedin.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions source/images/glyphs/tiktok-dark-theme-hover.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions source/images/glyphs/tiktok-dark-theme.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions source/images/glyphs/tiktok-hover.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions source/images/glyphs/tiktok.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
121 changes: 91 additions & 30 deletions source/sass/onetrust-override.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,39 @@ $font-family-serif: "Zilla Slab", serif;
#onetrust-consent-sdk {
/* Banner Styles */
#onetrust-banner-sdk {
background: linear-gradient(to right, #acffff, #e7e7fc);
background: var(--color-gray-05, #fafafa) !important;
box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.25);
border: none;

@media only screen and (min-width: 575px) {
padding: 0 20px;
&:focus {
outline: none !important;
}

.ot-sdk-container {
width: calc(100% - 40px);
padding: 0;

@media only screen and (min-width: 810px) {
width: calc(100% - 82px);
}
}

/* Title */
#onetrust-policy-title {
font-family: $font-family-serif;
color: #000;
font-size: 28px;
font-size: 22px;
line-height: 32px;
font-weight: 300;
display: inline-block;

@media only screen and (min-width: 1199px) {
@media only screen and (min-width: 1080px) {
font-size: 28px;
}

@media only screen and (min-width: 1440px) {
font-size: 40px;
line-height: 48px;
line-height: 1.2;
}
}

Expand All @@ -37,9 +52,12 @@ $font-family-serif: "Zilla Slab", serif;
margin-bottom: 5px;

@media only screen and (min-width: 576px) {
font-size: 18px;
font-size: 16px;
line-height: 27px;
}
@media only screen and (min-width: 1080px) {
font-size: 18px;
}
}

/* Accept / Reject Buttons */
Expand All @@ -53,6 +71,8 @@ $font-family-serif: "Zilla Slab", serif;
line-height: 27px;
padding: 5px 6px;
width: 100%;
margin-bottom: 12px;
float: none;

&::before {
display: inline-block;
Expand All @@ -61,12 +81,16 @@ $font-family-serif: "Zilla Slab", serif;
line-height: 20px;
}

@media only screen and (min-width: 650px) {
@media only screen and (min-width: 810px) {
width: 250px;
margin-bottom: 20px;
margin-left: auto;
margin-right: 10px;
}

@media only screen and (min-width: 897px) {
width: 270px;
@media only screen and (min-width: 1080px) {
margin-bottom: 10px;
margin-right: auto;
}
}

Expand All @@ -86,62 +110,97 @@ $font-family-serif: "Zilla Slab", serif;
float: none;
display: inline-block;
transform: none;
padding: 0;

@media only screen and (min-width: 897px) {
width: 32%;
@media only screen and (min-width: 1080px) {
width: 30%;
padding-top: 20px;
}

@media only screen and (min-width: 1199px) {
width: 29%;
}
#onetrust-button-group {
width: 100%;
text-align: left;
margin-top: 0;

@media only screen and (min-width: 1080px) {
text-align: center;
display: flex;
flex-direction: column;
}

#onetrust-pc-btn-handler {
font-family: $font-family-sans-serif;
font-weight: 700;
font-size: 18px;
font-size: 12px;
line-height: 27px;
color: #0d10bf;
border: none;
background: none;
text-decoration: underline;
padding-top: 0;
padding-bottom: 4px;
margin-top: 0;
width: 100%;
float: none;

@media only screen and (min-width: 576px) {
@media only screen and (min-width: 810px) {
margin: 5px auto;
max-width: fit-content;
}

@media only screen and (min-width: 897px) {
margin: 5px auto;
width: 270px;
max-width: 270px;
@media only screen and (min-width: 1080px) {
margin-top: 0;
margin-bottom: 10px;
max-width: 250px;
line-height: 1;
}
}

button {
margin-top: 0px;
}
}
}

/* Title & Text Box Margin */
#onetrust-policy {
@media only screen and (min-width: 1199px) {
margin-top: 20px;
margin-left: 0;
margin-right: 0;

@media only screen and (min-width: 1080px) {
max-width: 740px;
margin: 1.2em auto;
}
}

/* Close Button */
#onetrust-close-btn-container {
/* Swap close icon fill color, must set !important due to background-image set as an inline attribute */
right: 9px;
top: 9px;

button.ot-close-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNDguMzMzIiBoZWlnaHQ9IjM0OC4zMzMiIHZpZXdCb3g9IjAgMCAzNDguMzMzIDM0OC4zMzQiPgogIDxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0zMzYuNTU5IDY4LjYxMUwyMzEuMDE2IDE3NC4xNjVsMTA1LjU0MyAxMDUuNTQ5YzE1LjY5OSAxNS43MDUgMTUuNjk5IDQxLjE0NSAwIDU2Ljg1LTcuODQ0IDcuODQ0LTE4LjEyOCAxMS43NjktMjguNDA3IDExLjc2OS0xMC4yOTYgMC0yMC41ODEtMy45MTktMjguNDE5LTExLjc2OUwxNzQuMTY3IDIzMS4wMDMgNjguNjA5IDMzNi41NjNjLTcuODQzIDcuODQ0LTE4LjEyOCAxMS43NjktMjguNDE2IDExLjc2OS0xMC4yODUgMC0yMC41NjMtMy45MTktMjguNDEzLTExLjc2OS0xNS42OTktMTUuNjk4LTE1LjY5OS00MS4xMzkgMC01Ni44NWwxMDUuNTQtMTA1LjU0OUwxMS43NzQgNjguNjExYy0xNS42OTktMTUuNjk5LTE1LjY5OS00MS4xNDUgMC01Ni44NDQgMTUuNjk2LTE1LjY4NyA0MS4xMjctMTUuNjg3IDU2LjgyOSAwbDEwNS41NjMgMTA1LjU1NEwyNzkuNzIxIDExLjc2N2MxNS43MDUtMTUuNjg3IDQxLjEzOS0xNS42ODcgNTYuODMyIDAgMTUuNzA1IDE1LjY5OSAxNS43MDUgNDEuMTQ1LjAwNiA1Ni44NDR6Ii8+Cjwvc3ZnPg==") !important;
right: auto;
top: auto;
/* Swap close icon fill color, must set !important due to background-image set as an inline attribute */
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBmaWxsPSIjNjY2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0uMjMgMjAuOEwyMC45NTIuMDhsMi4xMiAyLjEyTDIuMzUgMjIuOTJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTIzLjA3IDIwLjhMMi4zNS4wOC4yMyAyLjJsMjAuNzIgMjAuNzJ6Ii8+CiAgICA8L2c+Cjwvc3ZnPg==") !important;
}
@media only screen and (min-width: 1199px) {
right: 20px;
@media only screen and (min-width: 897px) {
right: -4px;
top: 24px;
}
}

.onetrust-close-btn-handler {
background-size: 20px;
background-size: 15px;
}

.onetrust-close-btn-ui {
width: 30px;
height: 30px;
}

.ot-sdk-three.ot-sdk-columns {
width: 100%;
}
}

Expand All @@ -161,8 +220,10 @@ $font-family-serif: "Zilla Slab", serif;
/* Desktop Layout Changes */
#onetrust-banner-sdk:not(.ot-iab-2) {
#onetrust-group-container {
@media only screen and (min-width: 1199px) {
width: 100%;
@media only screen and (min-width: 1080px) {
width: 65%;
margin-right: 48px;
}
}
}
Expand All @@ -184,7 +245,7 @@ $font-family-serif: "Zilla Slab", serif;
/* Close Button */
/* Swap close icon fill color, must set !important due to background-image set as an inline attribute */
#close-pc-btn-handler {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNDguMzMzIiBoZWlnaHQ9IjM0OC4zMzMiIHZpZXdCb3g9IjAgMCAzNDguMzMzIDM0OC4zMzQiPgogIDxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0zMzYuNTU5IDY4LjYxMUwyMzEuMDE2IDE3NC4xNjVsMTA1LjU0MyAxMDUuNTQ5YzE1LjY5OSAxNS43MDUgMTUuNjk5IDQxLjE0NSAwIDU2Ljg1LTcuODQ0IDcuODQ0LTE4LjEyOCAxMS43NjktMjguNDA3IDExLjc2OS0xMC4yOTYgMC0yMC41ODEtMy45MTktMjguNDE5LTExLjc2OUwxNzQuMTY3IDIzMS4wMDMgNjguNjA5IDMzNi41NjNjLTcuODQzIDcuODQ0LTE4LjEyOCAxMS43NjktMjguNDE2IDExLjc2OS0xMC4yODUgMC0yMC41NjMtMy45MTktMjguNDEzLTExLjc2OS0xNS42OTktMTUuNjk4LTE1LjY5OS00MS4xMzkgMC01Ni44NWwxMDUuNTQtMTA1LjU0OUwxMS43NzQgNjguNjExYy0xNS42OTktMTUuNjk5LTE1LjY5OS00MS4xNDUgMC01Ni44NDQgMTUuNjk2LTE1LjY4NyA0MS4xMjctMTUuNjg3IDU2LjgyOSAwbDEwNS41NjMgMTA1LjU1NEwyNzkuNzIxIDExLjc2N2MxNS43MDUtMTUuNjg3IDQxLjEzOS0xNS42ODcgNTYuODMyIDAgMTUuNzA1IDE1LjY5OSAxNS43MDUgNDEuMTQ1LjAwNiA1Ni44NDR6Ii8+Cjwvc3ZnPg==") !important;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBmaWxsPSIjNjY2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0uMjMgMjAuOEwyMC45NTIuMDhsMi4xMiAyLjEyTDIuMzUgMjIuOTJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTIzLjA3IDIwLjhMMi4zNS4wOC4yMyAyLjJsMjAuNzIgMjAuNzJ6Ii8+CiAgICA8L2c+Cjwvc3ZnPg==") !important;
}
}
}
24 changes: 24 additions & 0 deletions tailwind-plugins/glyph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,14 @@ module.exports = [
".linkedin-glyph": {
...glyph("linkedin"),
...hoverGlyph("linkedin-hover"),
"&:before": {
width: "16px",
height: "18px",
},
},
".tiktok-glyph": {
...glyph("tiktok"),
...hoverGlyph("tiktok-hover"),
"&:before": {
width: "16px",
height: "16px",
Expand Down Expand Up @@ -123,6 +131,22 @@ module.exports = [
height: "16px",
},
},
"& .linkedin-glyph": {
...glyph("linkedin-dark-theme"),
...hoverGlyph("linkedin-dark-theme-hover"),
"&:before": {
width: "16px",
height: "18px",
},
},
"& .tiktok-glyph": {
...glyph("tiktok-dark-theme"),
...hoverGlyph("tiktok-dark-theme-hover"),
"&:before": {
width: "16px",
height: "16px",
},
},
"& .form-error-glyph": {
...glyph("form-error-dark-theme"),
},
Expand Down

0 comments on commit 165f572

Please sign in to comment.