diff options
Diffstat (limited to 'browser/components/shopping/content/shopping-container.css')
-rw-r--r-- | browser/components/shopping/content/shopping-container.css | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/browser/components/shopping/content/shopping-container.css b/browser/components/shopping/content/shopping-container.css new file mode 100644 index 0000000000..6ac09964bf --- /dev/null +++ b/browser/components/shopping/content/shopping-container.css @@ -0,0 +1,152 @@ +/* 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/. */ + +:host { + --shopping-close-button-size: var(--button-min-height); + --shopping-header-font-size: 1.3rem; +} + +#shopping-container { + display: flex; + flex-direction: column; + width: 100%; +} + +#header-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; + background-color: var(--shopping-header-background); + box-sizing: border-box; + padding-block: 16px 8px; + padding-inline: 16px 8px; + position: sticky; + top: 0; + width: 100%; + z-index: 2; +} + +#shopping-header { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem; +} + +#shopping-header-title { + font-size: var(--shopping-header-font-size); + font-weight: var(--font-weight-bold); + margin: 0; +} + +.shopping-header-overflow { + box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.20); +} + +#beta-marker { + font-size: var(--font-size-small); + font-weight: var(--font-weight-default); + padding: 2px 4px; + margin: 0; + line-height: 150%; + text-transform: uppercase; + color: var(--icon-color); + border: 1px solid var(--icon-color); + border-radius: var(--border-radius-small); +} + +#close-button { + min-width: var(--shopping-close-button-size); + min-height: var(--shopping-close-button-size); + -moz-context-properties: fill; + fill: currentColor; + background-image: url("chrome://global/skin/icons/close.svg"); + background-repeat: no-repeat; + background-position: center; + margin-inline-end: 0; + + @media not (prefers-contrast) { + color: var(--icon-color); + } +} + +#content { + overflow: auto; + display: flex; + flex-direction: column; + align-items: stretch; + gap: 16px; + padding: 0 16px 16px; +} + +#content:focus-visible { + outline-offset: -2px; +} + +.loading-box { + box-shadow: none; + border: none; + background: var(--in-content-button-background); + margin-block: 1rem; +} + +.loading-box.small { + height: 2.67rem; +} + +.loading-box.medium { + height: 5.34rem; +} + +.loading-box.large { + height: 12.8rem; +} + +.loading-box:nth-child(odd) { + background-color: var(--in-content-button-background); +} + +.loading-box:nth-child(even) { + background-color: var(--in-content-button-background-hover); +} + +@media not (prefers-reduced-motion) { + .animate > .loading-box { + animation-name: fade-in; + animation-direction: alternate; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + } + + /* First box + every 4th box, fifth box + every 4th box */ + .loading-box:nth-child(4n-3) { + animation-delay: -1s; + } + + /* Second box + every 4th box, sixth box + every 4th box */ + .loading-box:nth-child(4n-2) { + animation-delay: 0s; + } + + /* Third box + every 4th box */ + .loading-box:nth-child(4n-1) { + animation-delay: -1.5s; + } + + /* Fourth box + every 4th box */ + .loading-box:nth-child(4n) { + animation-delay: -0.5s; + } + + @keyframes fade-in { + from { + opacity: .25; + } + to { + opacity: 1; + } + } +} |