From d201f3460e68d27cd44fd20e17b2abc9b1cde80a Mon Sep 17 00:00:00 2001 From: Ryan Clayton Date: Wed, 3 Jan 2024 09:43:29 -0700 Subject: [PATCH 1/3] Revert "MWPW-137523 - Allow dark quiet marquees" (#1693) Revert "MWPW-137523 - Allow dark quiet marquees (#1654)" This reverts commit 921efe5aa02f7039b9c49bfde82b959a4a8c9076. --- libs/blocks/marquee/marquee.css | 172 ++++++++++++++++++++------------ libs/blocks/marquee/marquee.js | 3 +- 2 files changed, 109 insertions(+), 66 deletions(-) diff --git a/libs/blocks/marquee/marquee.css b/libs/blocks/marquee/marquee.css index 0d5b79ee32..dc30cd4f70 100644 --- a/libs/blocks/marquee/marquee.css +++ b/libs/blocks/marquee/marquee.css @@ -8,7 +8,7 @@ min-height: 560px; } -.marquee:is(.small, .inline, .large.compact) { +.marquee.small, .marquee.quiet, .marquee.inline, .marquee.large.compact { min-height: 360px; } @@ -17,28 +17,30 @@ margin-bottom: 0; } -.marquee:is(.light, .mobile-light, .quiet, .inline) { +.marquee.light, .marquee.mobile-light, .marquee.quiet, .marquee.inline { color: var(--text-color); } -.marquee:is(.mobile-dark, .quiet.dark) { +.marquee.mobile-dark { color: var(--color-white); } -.marquee .icon-area :is(picture, a) { +.marquee .icon-area picture, +.marquee .icon-area a { display: contents; } -.marquee:is(.mobile-dark, .quiet.dark) a:is(:not(.con-button), :not(.con-button):hover) { - color: var(--link-color-dark); -} - .marquee.mobile-light a:not(.con-button) { color: var(--link-color); } -.marquee.static-links a:not(.con-button), -.static-links .marquee a:not(.con-button), +.marquee.mobile-dark a:not(.con-button), +.marquee.mobile-dark a:not(.con-button):hover { + color: var(--link-color-dark); +} + +.marquee.static-links:not(.mobile-dark) a:not(.con-button), +.static-links .marquee:not(.mobile-dark) a:not(.con-button), .marquee.static-links a:not(.con-button):hover, .static-links .marquee a:not(.con-button):hover { color: inherit; @@ -93,7 +95,8 @@ margin: 0 auto; } -.marquee .media :is(img, video) { +.marquee .media img, +.marquee .media video { display: block; width: 100%; height: auto; @@ -125,11 +128,8 @@ left: 0; } -.marquee:is(.center, .centered) :is(.foreground, .action-area) { - justify-content: center; -} - -.marquee .background :is(.tablet-only, .desktop-only) { +.marquee .background .tablet-only, +.marquee .background .desktop-only { display: none; } @@ -173,6 +173,10 @@ display: block; } +.marquee:is(.center, .centered) .icon-area img { + margin: 0 auto; +} + .marquee.large .icon-area img { height: 64px; } @@ -204,14 +208,24 @@ padding: 0; } -.marquee .text :is(.detail-l, .heading-xl, .heading-xxl) { +.marquee .text .detail-l, +.marquee .text .heading-xl, +.marquee .text .heading-xxl { margin-bottom: var(--spacing-xs); } -.marquee:is(.center, .centered) { +.marquee.center, +.marquee.centered { text-align: center; } +.marquee.center .foreground, +.marquee.center .action-area, +.marquee.centered .foreground, +.marquee.centered .action-area { + justify-content: center; +} + /* Split */ .marquee.split { flex-direction: column; @@ -223,14 +237,16 @@ margin: 0; } -.marquee.split .media :is(img, video) { +.marquee.split .media img, +.marquee.split .media video { width: 100%; height: 100%; object-fit: cover; max-height: 360px; } -.marquee:is(.split, .small.split) .foreground { +.marquee.split .foreground, +.marquee.small.split .foreground { padding: var(--spacing-m) 0; } @@ -318,11 +334,8 @@ gap: var(--spacing-s); } - .marquee:is(.split, .split.small, .split.large) .media :is(img, video) { - max-height: initial; - } - - .marquee .background :is(.mobile-only, .desktop-only) { + .marquee .background .mobile-only, + .marquee .background .desktop-only { display: none; } @@ -345,12 +358,30 @@ .marquee.tablet-dark { color: var(--color-white); } + + .marquee.split.large .text { + margin: 0; + } + + .marquee.quiet .foreground .text { + max-width: 600px; + } + + .marquee.center .foreground .text, + .marquee.centered .foreground .text { + margin: 0 auto; + } + + .marquee.quiet.large .foreground .text { + max-width: 800px; + } .marquee.tablet-light a:not(.con-button) { color: var(--link-color); } - .marquee.tablet-dark a:is(:not(.con-button), :not(.con-button):hover) { + .marquee.tablet-dark a:not(.con-button), + .marquee.tablet-dark a:not(.con-button):hover { color: var(--link-color-dark); } @@ -381,7 +412,7 @@ text-decoration: none; } -.marquee .media { + .marquee .media { width: var(--grid-container-width); /* 10 grid / 83% */ } @@ -396,22 +427,6 @@ flex-direction: row; padding: var(--spacing-xl) 0; } - - .marquee:is(.center, .centered) .foreground .text { - margin: 0 auto; - } - - .marquee.split.large .text { - margin: 0; - } - - .marquee.quiet .foreground .text { - max-width: 600px; - } - - .marquee.quiet.large .foreground .text { - max-width: 800px; - } .marquee.split .foreground.container .text { max-width: calc(50% - var(--grid-column-width)); @@ -452,8 +467,18 @@ .marquee.split.row-reversed .foreground.container { justify-content: flex-end; } + + .marquee.split .media img, + .marquee.split.small .media img, + .marquee.split.large .media img, + .marquee.split .media video, + .marquee.split.small .media video, + .marquee.split.large .media video{ + max-height: initial; + } - .marquee.split .media.bleed :is(picture, video) { + .marquee.split .media.bleed picture, + .marquee.split .media.bleed video { height: 100%; object-fit: fill; } @@ -478,13 +503,8 @@ min-height: 360px; } - .marquee .media :is(img, video) { - width: 100%; - max-width: initial; - min-height: 150px; - } - - .marquee .background :is(.mobile-only, .tablet-only) { + .marquee .background .mobile-only, + .marquee .background .tablet-only { display: none; } @@ -507,8 +527,9 @@ .marquee.desktop-light a:not(.con-button) { color: var(--link-color); } - - .marquee.desktop-dark a:is(:not(.con-button), :not(.con-button):hover) { + + .marquee.desktop-dark a:not(.con-button), + .marquee.desktop-dark a:not(.con-button):hover { color: var(--link-color-dark); } @@ -550,11 +571,30 @@ gap: 100px; /* 1 column */ } - :is(.marquee, .marquee.small, .marquee.large) .text { + .marquee.small .foreground, + .marquee.split .foreground.container { + padding: 0; + } + + .marquee.quiet .foreground, + .marquee.inline .foreground, + .marquee.split .foreground { + justify-content: initial; + } + + html[dir="rtl"] .marquee .foreground { + flex-direction: row-reverse; + } + + .marquee .text, + .marquee.small .text, + .marquee.large .text { order: unset; } - :is(.marquee, .marquee.small, .marquee.large) .media { + .marquee .media, + .marquee.small .media, + .marquee.large .media { order: unset; } @@ -566,17 +606,18 @@ max-width: 600px; } - .marquee.small .foreground, - .marquee.split .foreground.container { - padding: 0; - } - - .marquee:is(.quiet, .inline, .split) .foreground { - justify-content: initial; + .marquee.quiet.center .foreground, + .marquee.inline.center .foreground, + .marquee.quiet.centered .foreground, + .marquee.inline.centered .foreground { + justify-content: center; } - .marquee:is(.quiet, .inline):is(.center, .centered) .foreground { - justify-content: center; + .marquee .media img, + .marquee .media video { + width: 100%; + max-width: initial; + min-height: 150px; } .marquee.small .text { @@ -653,7 +694,8 @@ right: auto; } - .marquee.split:is(.one-third, .one-third.large) .foreground.container .text { + .marquee.split.one-third .foreground.container .text, + .marquee.split.one-third.large .foreground.container .text { max-width: calc(33.3334% - var(--grid-column-width)); } diff --git a/libs/blocks/marquee/marquee.js b/libs/blocks/marquee/marquee.js index 24302f0f57..38a9127775 100644 --- a/libs/blocks/marquee/marquee.js +++ b/libs/blocks/marquee/marquee.js @@ -65,7 +65,8 @@ const decorateImage = (media) => { }; export default function init(el) { - if (!['light', 'quiet'].some((s) => el.classList.contains(s))) el.classList.add('dark'); + const isLight = el.classList.contains('light'); + if (!isLight) el.classList.add('dark'); const children = el.querySelectorAll(':scope > div'); const foreground = children[children.length - 1]; if (children.length > 1) { From 112c01c0847bf3fb27e5e4be731d5240be8e1545 Mon Sep 17 00:00:00 2001 From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com> Date: Wed, 3 Jan 2024 09:13:21 -0800 Subject: [PATCH 2/3] MWPW-140052-Word break css for korean (#1675) * Update styles.css * update css to support language based korean sites too --- libs/styles/styles.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/libs/styles/styles.css b/libs/styles/styles.css index 7e2d9c3ffc..254b5c48d1 100644 --- a/libs/styles/styles.css +++ b/libs/styles/styles.css @@ -132,8 +132,11 @@ --font-size-multiplier: 1.25; } -:root:lang(ko-KR) { +:root:lang(ko-KR), +:root:lang(ko) { --body-font-family: adobe-clean-han-korean, 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif; + + word-break: keep-all; } :root:lang(ja-JP), From 4062a67c204f506ceafd753a565c987061cdeca3 Mon Sep 17 00:00:00 2001 From: Jacky Sun <67350368+JackySun9@users.noreply.github.com> Date: Wed, 3 Jan 2024 12:22:24 -0800 Subject: [PATCH 3/3] [MWPW-140706] Quiz options should use Adobe Clean and [MWPW-140499] fix multiple merch card width issue on result page (#1694) * MWPW-140499: fix multiple merch card width issue on result page (#1660) fix multiple merch card width issue on result page Co-authored-by: xiasun * MWPW-140706: Quiz options should use Adobe Clean (#1682) --------- Co-authored-by: xiasun Co-authored-by: Erich Champion --- libs/blocks/quiz-results/quiz-results.css | 2 +- libs/blocks/quiz/quiz.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/libs/blocks/quiz-results/quiz-results.css b/libs/blocks/quiz-results/quiz-results.css index 7a414a4490..ae9ed62410 100644 --- a/libs/blocks/quiz-results/quiz-results.css +++ b/libs/blocks/quiz-results/quiz-results.css @@ -20,7 +20,7 @@ justify-content: center; width: 100%; max-width: 100%; - grid-template-columns: repeat(auto-fit,minmax(300px,max-content)); + grid-template-columns: repeat(auto-fit,300px); gap: 32px; padding-bottom: 32px; } diff --git a/libs/blocks/quiz/quiz.css b/libs/blocks/quiz/quiz.css index 44aca3fefe..a95c9ae8e7 100644 --- a/libs/blocks/quiz/quiz.css +++ b/libs/blocks/quiz/quiz.css @@ -68,6 +68,7 @@ border-radius: 0.5rem; cursor: pointer; display: flex; + font-family: inherit; margin: 0 0 16px; padding: 0; user-select: none; @@ -180,6 +181,7 @@ html[dir="rtl"] .quiz-option-icon { border: 2px solid var(--color-white); border-radius: 30px; cursor: pointer; + font-family: inherit; font-size: 14px; font-weight: 700; min-height: 32px;