diff options
Diffstat (limited to 'browser/components/asrouter/content-src/styles/_shopping.scss')
| -rw-r--r-- | browser/components/asrouter/content-src/styles/_shopping.scss | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/browser/components/asrouter/content-src/styles/_shopping.scss b/browser/components/asrouter/content-src/styles/_shopping.scss new file mode 100644 index 0000000000..218e996cb8 --- /dev/null +++ b/browser/components/asrouter/content-src/styles/_shopping.scss @@ -0,0 +1,209 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. + +/* stylelint-disable max-nesting-depth */ + +.onboardingContainer.shopping { + height: auto; + + .outer-wrapper { + height: auto; + } +} + +.onboardingContainer.shopping .screen[pos='split'] { + height: auto; + margin: 0 auto; + min-height: fit-content; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(58, 57, 68, 20%); + overflow-x: auto; + + @media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + box-shadow: 0 2px 6px rgba(21, 20, 26, 100%); + } + + &::before { + display: none; + } + + .section-main { + width: auto; + height: auto; + margin: 0 auto; + + .main-content { + border-radius: 4px; + color: inherit; + font: menu; + + @media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + background-color: #52525E; + } + + &.no-steps { + padding: 16px 0 36px; + } + + .welcome-text { + text-align: start; + margin-block: 10px 12px; + + h1 { + width: auto; + font-weight: 400; + line-height: 1.5; + font-size: 1.7em; + } + + h2 { + color: inherit; + font-size: 1em; + } + } + + .action-buttons { + .primary, + .secondary { + min-width: auto; + } + + .primary { + font-weight: 400; + padding: 4px 16px; + } + + &.additional-cta-container { + align-items: center; + } + } + + .legal-paragraph { + font-size: 0.85em; + line-height: 1.5; + margin-block: 0 20px; + padding-inline: 30px; + text-align: start; + + a { + text-decoration: underline; + } + } + + .brand-logo { + width: 100%; + max-width: 294px; + max-height: 290px; + height: auto; + } + } + + .dismiss-button { + top: 0; + margin: 14px 10px; + } + } + + .section-secondary { + display: none; + } + + .info-text, .link-paragraph { + font-size: 1em; + margin: 10px auto; + line-height: 1.5; + } + + .link-paragraph { + margin-block: 0 10px; + padding-inline: 30px; + text-align: start; + + a { + text-decoration: underline; + } + } +} + +.onboardingContainer.shopping .screen[pos='split'][layout='survey'] { + .main-content { + padding: 12px; + + .main-content-inner { + min-height: auto; + align-items: initial; + + .welcome-text { + align-items: initial; + padding: 0; + margin-top: 0; + + h1, + h2 { + line-height: 20px; + } + + h1 { + font-size: 1em; + font-weight: 590; + margin: 0; + margin-inline-end: 28px; + } + + h2 { + color: inherit; + margin-block: 10px 0; + } + } + + .action-buttons { + .cta-link { + padding: 4px; + margin-block: -4px; + outline-offset: 0; + min-height: revert; + } + } + + .multi-select-container { + color: inherit; + padding: 0; + margin-block: 0 24px; + align-items: center; + overflow: visible; + font-size: 1em; + gap: 12px; + width: 100%; + + #multi-stage-multi-select-label { + color: inherit; + line-height: 20px; + margin-block: -2px 0; + font-size: 1em; + } + + .multi-select-item input { + margin-block: 0; + } + } + + .steps { + height: auto; + margin-bottom: 12px; + } + } + } + + .dismiss-button { + width: 24px; + height: 24px; + min-width: 24px; + min-height: 24px; + margin: 10px; + } +} + +.onboardingContainer.shopping shopping-message-bar { + font: menu; +} |