diff options
Diffstat (limited to 'browser/components/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss')
-rw-r--r-- | browser/components/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss b/browser/components/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss new file mode 100644 index 0000000000..3bc2dffca0 --- /dev/null +++ b/browser/components/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss @@ -0,0 +1,103 @@ +// Variable for the about:welcome modal scrollbars +$modal-scrollbar-z-index: 1100; + +.activity-stream { + &.modal-open { + overflow: hidden; + } +} + +.modalOverlayOuter { + background: var(--newtab-overlay-color); + height: 100%; + position: fixed; + top: 0; + left: 0; + width: 100%; + display: none; + z-index: $modal-scrollbar-z-index; + overflow: auto; + + &.active { + display: flex; + } +} + +.modalOverlayInner { + min-width: min-content; + width: 100%; + max-width: 960px; + position: relative; + margin: auto; + background: var(--newtab-background-color-secondary); + box-shadow: $shadow-large; + border-radius: 4px; + display: none; + z-index: $modal-scrollbar-z-index; + + // modal takes over entire screen + @media(width <= 960px) { + height: 100%; + top: 0; + left: 0; + box-shadow: none; + border-radius: 0; + } + + &.active { + display: block; + } + + h2 { + color: var(--newtab-text-primary-color); + text-align: center; + font-weight: 200; + margin-top: 30px; + font-size: 28px; + line-height: 37px; + letter-spacing: -0.13px; + + @media(width <= 960px) { + margin-top: 100px; + } + + @media(width <= 850px) { + margin-top: 30px; + } + } + + .footer { + border-top: $border-secondary; + border-radius: 4px; + height: 70px; + width: 100%; + position: absolute; + bottom: 0; + text-align: center; + background-color: $white; + + // if modal is short enough, footer becomes sticky + @media(width <= 850px) and (height <= 730px) { + position: sticky; + } + + // if modal is narrow enough, footer becomes sticky + @media(width <= 650px) and (height <= 600px) { + position: sticky; + } + + .modalButton { + margin-top: 20px; + min-width: 150px; + height: 30px; + padding: 4px 30px 6px; + font-size: 15px; + + &:focus, + &.active, + &:hover { + @include fade-in-card; + } + } + } +} |