From db8aa33dfba79c48fd86917e9e6019e9cabd1ae2 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Tue, 5 Jul 2022 12:24:26 +0200 Subject: [PATCH] Cleaned up Portal styles --- ghost/sodo-search/public/main.css | 122 +- .../src/components/Frame.styles.js | 1145 ----------------- .../src/components/Global.styles.js | 145 --- .../sodo-search/src/components/PopupModal.js | 26 +- ghost/sodo-search/src/index.css | 9 + ghost/sodo-search/tailwind.config.js | 99 +- 6 files changed, 151 insertions(+), 1395 deletions(-) delete mode 100644 ghost/sodo-search/src/components/Frame.styles.js delete mode 100644 ghost/sodo-search/src/components/Global.styles.js diff --git a/ghost/sodo-search/public/main.css b/ghost/sodo-search/public/main.css index a044b4d014..db7f1db658 100644 --- a/ghost/sodo-search/public/main.css +++ b/ghost/sodo-search/public/main.css @@ -549,44 +549,6 @@ video { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.visible { - visibility: visible; -} - .static { position: static; } @@ -595,76 +557,72 @@ video { position: fixed; } -.absolute { - position: absolute; -} - .relative { position: relative; } -.sticky { - position: -webkit-sticky; - position: sticky; -} - -.block { - display: block; -} - -.flex { - display: flex; +.m-auto { + margin: auto; } .hidden { display: none; } -.flex-grow { - flex-grow: 1; +.h-screen { + height: 100vh; } -.transform { - -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.w-screen { + width: 100vw; } -.border { - border-width: 1px; +.max-w-lg { + max-width: 51.2rem; } -.uppercase { - text-transform: uppercase; +.rounded-lg { + border-radius: 0.8rem; +} + +.bg-\[rgba\(0\2c 0\2c 0\2c 0\.2\)\] { + background-color: rgba(0,0,0,0.2); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.p-4 { + padding: 1.6rem; +} + +.pt-8 { + padding-top: 3.2rem; +} + +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline { outline-style: solid; } -.blur { - --tw-blur: blur(8px); - -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .filter { -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +/* Custom reset */ + +html { + font-size: 62.5%; } -.transition { - transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} +body { + font-size: 1.5rem; +} \ No newline at end of file diff --git a/ghost/sodo-search/src/components/Frame.styles.js b/ghost/sodo-search/src/components/Frame.styles.js deleted file mode 100644 index ca4fc17bff..0000000000 --- a/ghost/sodo-search/src/components/Frame.styles.js +++ /dev/null @@ -1,1145 +0,0 @@ -/** By default, CRAs webpack bundle combines and appends the main css at root level, so they are not applied inside iframe - * This uses a hack where we append `` tag with all CSS inside the head of iframe dynamically, thus making it available easily - * We can create separate variables to keep styles grouped logically, and export them as one appeneded string -*/ - -import {GlobalStyles} from './Global.styles'; - -// Global styles -const FrameStyles = ` -.gh-portal-main-title { - text-align: center; - color: var(--grey0); - line-height: 1.1em; -} - -.gh-portal-text-disabled { - color: var(--grey3); - font-weight: normal; - opacity: 0.35; -} - -.gh-portal-text-center { - text-align: center; -} - -.gh-portal-input-label { - color: var(--grey1); - font-size: 1.3rem; - font-weight: 600; - margin-bottom: 2px; - letter-spacing: 0px; -} - -.gh-portal-setting-data { - color: var(--grey6); - font-size: 1.3rem; - line-height: 1.15em; -} - -.gh-portal-error { - color: var(--red); - font-size: 1.4rem; - line-height: 1.6em; - margin: 12px 0; -} - -/* Buttons -/* ----------------------------------------------------- */ -.gh-portal-btn { - position: relative; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.5rem; - font-weight: 500; - line-height: 1em; - letter-spacing: 0.2px; - text-align: center; - white-space: nowrap; - text-decoration: none; - color: var(--grey0); - background: var(--white); - border: 1px solid var(--grey12); - min-width: 80px; - height: 44px; - padding: 0 1.8rem; - border-radius: 6px; - cursor: pointer; - transition: all .25s ease; - box-shadow: none; - user-select: none; - outline: none; -} - -.gh-portal-btn:hover { - border-color: var(--grey10); -} - -.gh-portal-btn:disabled { - opacity: 0.5 !important; - cursor: auto; -} - -.gh-portal-btn-container.sticky { - transition: none; - position: sticky; - bottom: 0; - margin: 0 0 -32px; - padding: 32px 0 32px; - background: linear-gradient(0deg, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%); -} - -.gh-portal-btn-container.sticky.m28 { - margin: 0 0 -28px; - padding: 28px 0 28px; -} - -.gh-portal-btn-container.sticky.m24 { - margin: 0 0 -24px; - padding: 24px 0 24px; -} - -.gh-portal-btn-container .gh-portal-btn { - margin: 0; -} - -.gh-portal-btn-icon svg { - width: 16px; - height: 16px; - margin-right: 4px; - stroke: currentColor; -} - -.gh-portal-btn-icon svg path { - stroke: currentColor; -} - -.gh-portal-btn-link { - line-height: 1; - background: none; - padding: 0; - height: unset; - min-width: unset; - box-shadow: none; - border: none; -} - -.gh-portal-btn-link:hover { - box-shadow: none; - opacity: 0.85; -} - -.gh-portal-btn-branded { - color: var(--brandcolor); -} - -.gh-portal-btn-list { - font-size: 1.5rem; - color: var(--brandcolor); - height: 38px; - width: unset; - min-width: unset; - padding: 0 4px; - margin: 0 -4px; - box-shadow: none; - border: none; -} - -.gh-portal-btn-list:hover { - box-shadow: none; - opacity: 0.75; -} - -.gh-portal-btn-logout { - position: absolute; - top: 22px; - left: 24px; - background: none; - border: none; - height: unset; - color: var(--grey3); - padding: 0; - margin: 0; - z-index: 999; - box-shadow: none; -} - -.gh-portal-btn-logout .label { - opacity: 0; - transform: translateX(-6px); - transition: all 0.2s ease-in-out; -} - -.gh-portal-btn-logout:hover { - padding: 0; - margin: 0; - background: none; - border: none; - height: unset; - box-shadow: none; -} - -.gh-portal-btn-logout:hover .label { - opacity: 1.0; - transform: translateX(-4px); -} - -.gh-portal-btn-site-title-back { - transition: transform 0.25s ease-in-out; - z-index: 10000; -} - -.gh-portal-btn-site-title-back span { - margin-right: 4px; - transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1); -} - - -.gh-portal-btn-site-title-back:hover span { - transform: translateX(-3px); -} - -@media (max-width: 960px) { - .gh-portal-btn-site-title-back { - display: none; - } -} - -.gh-portal-logouticon { - color: var(--grey9); - cursor: pointer; - width: 23px; - height: 23px; - padding: 6px; - transform: translateX(0); - transition: all 0.2s ease-in-out; -} - -.gh-portal-logouticon path { - stroke: var(--grey9); - transition: all 0.2s ease-in-out; -} - -.gh-portal-btn-logout:hover .gh-portal-logouticon { - transform: translateX(-2px); -} - -.gh-portal-btn-logout:hover .gh-portal-logouticon path { - stroke: var(--grey3); -} - -/* Global layout styles -/* ----------------------------------------------------- */ -.gh-portal-popup-background { - position: absolute; - display: block; - top: 0; - right: 0; - bottom: 0; - left: 0; - animation: fadein 0.2s; - background: linear-gradient(315deg , rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%); - backdrop-filter: blur(2px); - -webkit-backdrop-filter: blur(2px); - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} - -.gh-portal-popup-background.preview { - background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(249,249,250,1) 100%); - animation: none; - pointer-events: none; -} - -@keyframes fadein { - 0% { opacity: 0; } - 100%{ opacity: 1.0; } -} - -.gh-portal-popup-wrapper { - position: relative; - padding: 5vmin 0 0; - height: 100%; - max-height: 100vh; - overflow: scroll; -} - -/* Hiding scrollbars */ -.gh-portal-popup-wrapper { - padding-right: 30px !important; - margin-right: -30px !important; - -ms-overflow-style: none; - scrollbar-width: none; -} - -.gh-portal-popup-wrapper::-webkit-scrollbar { - display: none; -} - -.gh-portal-popup-wrapper.full-size { - height: 100vh; - padding: 0; -} - -.gh-portal-popup-container { - outline: none; - position: relative; - display: flex; - box-sizing: border-box; - flex-direction: column; - justify-content: flex-start; - font-size: 1.5rem; - text-align: left; - letter-spacing: 0; - text-rendering: optimizeLegibility; - background: var(--white); - width: 500px; - margin: 0 auto 40px; - padding: 32px; - transform: translateY(0px); - border-radius: 10px; - box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1); - animation: popup 0.25s ease-in-out; - z-index: 9999; -} - -.gh-portal-popup-container.full-size { - width: 100vw; - min-height: 100vh; - justify-content: flex-start; - animation: popup-full-size 0.25s ease-in-out; - margin: 0; - border-radius: 0; - transform: translateY(0px); - transform-origin: top; - padding: 2vmin 6vmin; - padding-bottom: 4vw; -} - -.gh-portal-popup-container.full-size.account-plan { - justify-content: flex-start; - padding-top: 4vw; -} - -.gh-portal-popup-container.preview { - animation: none !important; -} - -@keyframes popup { - 0% { - transform: translateY(-30px); - opacity: 0; - } - 1% { - transform: translateY(30px); - opacity: 0; - } - 100%{ - transform: translateY(0); - opacity: 1.0; - } -} - -@keyframes popup-full-size { - 0% { - transform: translateY(0px); - opacity: 0; - } - 1% { - transform: translateY(30px); - opacity: 0; - } - 100%{ - transform: translateY(0); - opacity: 1.0; - } -} - -.gh-portal-powered { - position: absolute; - bottom: 24px; - left: 24px; - z-index: 9999; -} - -.gh-portal-powered a { - border: none; - display: flex; - align-items: center; - line-height: 0; - border-radius: 4px; - background: #ffffff; - padding: 6px 8px 6px 7px; - color: #303336; - font-size: 1.25rem; - letter-spacing: -0.2px; - font-weight: 500; - text-decoration: none; - transition: color 0.5s ease-in-out; - width: 146px; - height: 28px; - line-height: 28px; -} - -.gh-portal-powered a:hover { - color: #15171A; -} - -@keyframes powered-fade-in { - 0% { - transform: scale(0.98); - opacity: 0; - } - 75% { - opacity: 1.0; - } - 100%{ - transform: scale(1); - } -} - -.gh-portal-powered a svg { - height: 16px; - width: 16px; - margin: 0 6px 0 0; -} - -.gh-portal-powered.outside.full-size { - display: none; -} - -/* Sets the main content area of the popup scrollable. -/* 12vw is the sum horizontal padding of the popup container -*/ -.gh-portal-content { - position: relative; -} - -/* Hide scrollbar for Chrome, Safari and Opera */ -.gh-portal-content::-webkit-scrollbar { - display: none; -} - -/* Hide scrollbar for IE, Edge and Firefox */ -.gh-portal-content { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ -} - -.gh-portal-closeicon-container { - position: fixed; - top: 24px; - right: 24px; - z-index: 10000; -} - -.gh-portal-closeicon { - color: var(--grey10); - cursor: pointer; - width: 20px; - height: 20px; - padding: 12px; - transition: all 0.2s ease-in-out; -} - -.gh-portal-closeicon:hover { - color: var(--grey5); -} - -.gh-portal-popup-wrapper.full-size .gh-portal-closeicon-container, -.gh-portal-popup-container.full-size .gh-portal-closeicon-container { - top: 20px; - right: 20px; -} - -.gh-portal-popup-wrapper.full-size .gh-portal-closeicon, -.gh-portal-popup-container.full-size .gh-portal-closeicon { - color: var(--grey6); - width: 24px; - height: 24px; -} - -.gh-portal-logout-container { - position: absolute; - top: 8px; - left: 8px; -} - -.gh-portal-header { - display: flex; - flex-direction: column; - align-items: center; - padding-bottom: 24px; -} - -.gh-portal-section { - margin-bottom: 40px; -} - -.gh-portal-section.form { - margin-bottom: 20px; -} - -.gh-portal-detail-header { - position: relative; - display: flex; - align-items: center; - justify-content: center; - margin: -2px 0 40px; -} - -.gh-portal-detail-footer .gh-portal-btn { - min-width: 90px; -} - -.gh-portal-action-footer { - display: flex; - align-items: center; - justify-content: space-between; -} - -.gh-portal-list-header { - font-size: 1.25rem; - font-weight: 500; - color: var(--grey3); - text-transform: uppercase; - letter-spacing: 0.2px; - line-height: 1.7em; - margin-bottom: 4px; -} - -.gh-portal-list + .gh-portal-list-header { - margin-top: 28px; -} - -.gh-portal-list + .gh-portal-action-footer { - margin-top: 40px; -} - -.gh-portal-list { - background: var(--white); - padding: 20px; - border-radius: 8px; - border: 1px solid var(--grey12); -} - -.gh-portal-newsletter-selection { - max-width: 460px; - margin: 0 auto; -} - -.gh-portal-newsletter-selection .gh-portal-list { - margin-bottom: 40px; -} - -.gh-portal-lock-icon-container { - display: flex; - justify-content: center; - flex: 44px 0 0; - padding-top: 6px; -} - -.gh-portal-lock-icon { - width: 14px; - height: 14px; - overflow: visible; -} - -.gh-portal-lock-icon path { - color: var(--grey2); -} - -.gh-portal-text-large { - font-size: 1.8rem; - font-weight: 600; -} - -.gh-portal-list section { - display: flex; - align-items: center; - margin: 0 -20px 20px; - padding: 0 20px 20px; - border-bottom: 1px solid var(--grey12); -} - -.gh-portal-list section:last-of-type { - margin-bottom: 0; - padding-bottom: 0; - border: none; -} - -.gh-portal-list-detail { - flex-grow: 1; -} - -.gh-portal-list-detail h3 { - font-size: 1.5rem; - font-weight: 600; -} - -.gh-portal-list-detail.gh-portal-list-big h3 { - font-size: 1.6rem; - font-weight: 600; -} - -.gh-portal-list-detail p { - font-size: 1.45rem; - letter-spacing: 0.3px; - line-height: 1.3em; - padding: 0; - margin: 5px 8px 0 0; - color: var(--grey6); - word-break: break-word; -} - -.gh-portal-list-detail.gh-portal-list-big p { - font-size: 1.5rem; -} - -.gh-portal-list-toggle-wrapper { - align-items: flex-start !important; - justify-content: space-between; -} - -.gh-portal-list-toggle-wrapper .gh-portal-list-detail { - padding: 4px 24px 4px 0px; -} - -.gh-portal-list-detail .old-price { - text-decoration: line-through; -} - -.gh-portal-right-arrow { - line-height: 1; - color: var(--grey8); -} - -.gh-portal-right-arrow svg { - width: 17px; - height: 17px; - margin-top: 1px; - margin-right: -6px; -} - -.gh-portal-expire-warning { - text-align: center; - color: var(--red); - font-weight: 500; - font-size: 1.4rem; - margin: 12px 0; -} - -.gh-portal-cookiebanner { - background: var(--red); - color: var(--white); - text-align: center; - font-size: 1.4rem; - letter-spacing: 0.2px; - line-height: 1.4em; - padding: 8px; -} - -.gh-portal-publication-title { - text-align: center; - font-size: 1.6rem; - letter-spacing: -.1px; - font-weight: 700; - text-transform: uppercase; - color: #15212a; - margin-top: 6px; -} - -/* Icons -/* ----------------------------------------------------- */ -.gh-portal-icon { - color: var(--brandcolor); -} - -/* Spacing modifiers -/* ----------------------------------------------------- */ -.gh-portal-strong { font-weight: 600; } - -.mt1 { margin-top: 4px; } -.mt2 { margin-top: 8px; } -.mt3 { margin-top: 12px; } -.mt4 { margin-top: 16px; } -.mt5 { margin-top: 20px; } -.mt6 { margin-top: 24px; } -.mt7 { margin-top: 28px; } -.mt8 { margin-top: 32px; } -.mt9 { margin-top: 36px; } -.mt10 { margin-top: 40px; } - -.mr1 { margin-right: 4px; } -.mr2 { margin-right: 8px; } -.mr3 { margin-right: 12px; } -.mr4 { margin-right: 16px; } -.mr5 { margin-right: 20px; } -.mr6 { margin-right: 24px; } -.mr7 { margin-right: 28px; } -.mr8 { margin-right: 32px; } -.mr9 { margin-right: 36px; } -.mr10 { margin-right: 40px; } - -.mb1 { margin-bottom: 4px; } -.mb2 { margin-bottom: 8px; } -.mb3 { margin-bottom: 12px; } -.mb4 { margin-bottom: 16px; } -.mb5 { margin-bottom: 20px; } -.mb6 { margin-bottom: 24px; } -.mb7 { margin-bottom: 28px; } -.mb8 { margin-bottom: 32px; } -.mb9 { margin-bottom: 36px; } -.mb10 { margin-bottom: 40px; } - -.ml1 { margin-left: 4px; } -.ml2 { margin-left: 8px; } -.ml3 { margin-left: 12px; } -.ml4 { margin-left: 16px; } -.ml5 { margin-left: 20px; } -.ml6 { margin-left: 24px; } -.ml7 { margin-left: 28px; } -.ml8 { margin-left: 32px; } -.ml9 { margin-left: 36px; } -.ml10 { margin-left: 40px; } - -.pt1 { padding-top: 4px; } -.pt2 { padding-top: 8px; } -.pt3 { padding-top: 12px; } -.pt4 { padding-top: 16px; } -.pt5 { padding-top: 20px; } -.pt6 { padding-top: 24px; } -.pt7 { padding-top: 28px; } -.pt8 { padding-top: 32px; } -.pt9 { padding-top: 36px; } -.pt10 { padding-top: 40px; } - -.pr1 { padding-right: 4px; } -.pr2 { padding-right: 8px; } -.pr3 { padding-right: 12px; } -.pr4 { padding-right: 16px; } -.pr5 { padding-right: 20px; } -.pr6 { padding-right: 24px; } -.pr7 { padding-right: 28px; } -.pr8 { padding-right: 32px; } -.pr9 { padding-right: 36px; } -.pr10 { padding-right: 40px; } - -.pb1 { padding-bottom: 4px; } -.pb2 { padding-bottom: 8px; } -.pb3 { padding-bottom: 12px; } -.pb4 { padding-bottom: 16px; } -.pb5 { padding-bottom: 20px; } -.pb6 { padding-bottom: 24px; } -.pb7 { padding-bottom: 28px; } -.pb8 { padding-bottom: 32px; } -.pb9 { padding-bottom: 36px; } -.pb10 { padding-bottom: 40px; } - -.pl1 { padding-left: 4px; } -.pl2 { padding-left: 8px; } -.pl3 { padding-left: 12px; } -.pl4 { padding-left: 16px; } -.pl5 { padding-left: 20px; } -.pl6 { padding-left: 24px; } -.pl7 { padding-left: 28px; } -.pl8 { padding-left: 32px; } -.pl9 { padding-left: 36px; } -.pl10 { padding-left: 40px; } - -.hidden { display: none !important; } -`; - -const MobileStyles = ` -@media (max-width: 1440px) { - .gh-portal-popup-container:not(.full-size):not(.preview) { - width: 460px; - } - - .gh-portal-input { - height: 42px; - margin-bottom: 16px; - } - - button[class="gh-portal-btn"], - .gh-portal-btn-main, - .gh-portal-btn-primary { - height: 42px; - } -} - -@media (max-width: 960px) { - .gh-portal-powered { - display: flex; - position: relative; - bottom: unset; - left: unset; - background: var(--white); - justify-content: center; - width: 100%; - padding-top: 32px; - } -} - -@media (min-width: 520px) { - .gh-portal-popup-wrapper.full-size .gh-portal-popup-container.preview { - box-shadow: - 0 0 0 1px rgba(0,0,0,0.02), - 0 2.8px 2.2px rgba(0, 0, 0, 0.02), - 0 6.7px 5.3px rgba(0, 0, 0, 0.028), - 0 12.5px 10px rgba(0, 0, 0, 0.035), - 0 22.3px 17.9px rgba(0, 0, 0, 0.042), - 0 41.8px 33.4px rgba(0, 0, 0, 0.05), - 0 100px 80px rgba(0, 0, 0, 0.07); - animation: none; - margin: 32px; - padding: 32px 32px 0; - width: calc(100vw - 64px); - height: calc(100vh - 160px); - min-height: unset; - border-radius: 12px; - overflow: auto; - justify-content: flex-start; - } -} - -@media (max-width: 480px) { - .gh-portal-detail-header { - margin-top: 4px; - } - - .gh-portal-popup-wrapper { - height: 100%; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - background: var(--white); - overflow-y: auto; - } - - .gh-portal-popup-container { - width: 100% !important; - border-radius: 0; - overflow: unset; - animation: popup-mobile 0.25s ease-in-out; - box-shadow: none !important; - transform: translateY(0); - padding: 28px !important; - } - - .gh-portal-popup-container.full-size { - justify-content: flex-start; - } - - .gh-portal-popup-wrapper.account-home, - .gh-portal-popup-container.account-home { - background: var(--grey13); - } - - .gh-portal-popup-wrapper.full-size .gh-portal-closeicon, - .gh-portal-popup-container.full-size .gh-portal-closeicon { - width: 16px; - height: 16px; - } - - /* Small width preview in Admin */ - .gh-portal-popup-wrapper.preview:not(.full-size) footer.gh-portal-signup-footer, - .gh-portal-popup-wrapper.preview:not(.full-size) footer.gh-portal-signin-footer { - padding-bottom: 32px; - } - - .gh-portal-popup-container.preview:not(.full-size) { - max-height: 660px; - margin-bottom: 0; - } - - .gh-portal-popup-container.preview:not(.full-size).offer { - max-height: 860px; - padding-bottom: 0 !important; - } - - .gh-portal-popup-wrapper.preview.full-size { - height: unset; - max-height: 660px; - } - - .gh-portal-popup-container.preview.full-size { - max-height: 660px; - margin-bottom: 0; - } - - .preview .gh-portal-invite-only-notification + .gh-portal-signup-message { - margin-bottom: 16px; - } - - .preview .gh-portal-btn-container.sticky { - margin-bottom: 32px; - padding-bottom: 0; - } - - .gh-portal-powered { - padding-top: 12px; - padding-bottom: 24px; - } -} - -@media (max-width: 390px) { - .gh-portal-popup-container:not(.account-plan) .gh-portal-detail-header .gh-portal-main-title { - font-size: 2.1rem; - margin-top: 1px; - padding: 0 74px; - text-align: center; - } - - .gh-portal-input { - margin-bottom: 16px; - } - - .gh-portal-signup-header, - .gh-portal-signin-header { - padding-bottom: 16px; - } -} - -@media (min-width: 480px) and (max-height: 880px) { - .gh-portal-popup-wrapper { - padding: 4vmin 0 0; - } -} - -@keyframes popup-mobile { - 0% { - opacity: 0; - } - 100%{ - opacity: 1.0; - } -} - -/* Prevent zoom */ -@media (hover:none) { - select, textarea, input[type="text"], input[type="text"], input[type="password"], - input[type="datetime"], input[type="datetime-local"], - input[type="date"], input[type="month"], input[type="time"], - input[type="week"], input[type="number"], input[type="email"], - input[type="url"] { - font-size: 16px !important; - } -} -`; - -const MultipleProductsGlobalStyles = ` -.gh-portal-popup-wrapper.multiple-products .gh-portal-input-section { - max-width: 420px; - margin: 0 auto; -} - -/* Multiple product signup/signin-only modifications! */ -.gh-portal-popup-wrapper.multiple-products { - background: #fff; - box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1); - padding: 0; - border-radius: 5px; - height: calc(100vh - 64px); - max-width: calc(100vw - 64px); -} - -.gh-portal-popup-wrapper.multiple-products.signup { - overflow-y: scroll; - overflow-x: clip; - margin: 32px auto !important; - padding-right: 0 !important; /* Override scrollbar hiding */ -} - -.gh-portal-popup-wrapper.multiple-products.signin { - margin: 10vmin auto; - max-width: 480px; - height: unset; -} - -.gh-portal-popup-wrapper.multiple-products.preview { - height: calc(100vh - 150px) !important; -} - -.gh-portal-popup-wrapper.multiple-products .gh-portal-popup-container { - align-items: center; - width: 100% !important; - box-shadow: none !important; - animation: fadein 0.35s ease-in-out; - padding: 1vmin 0; - transform: translateY(0px); - margin-bottom: 0; -} - -.gh-portal-popup-wrapper.multiple-products.signup .gh-portal-popup-container { - min-height: calc(100vh - 64px); - position: unset; -} - -.gh-portal-popup-wrapper.multiple-products .gh-portal-powered { - position: relative; - display: flex; - flex: 1; - align-items: flex-end; - justify-content: flex-start; - bottom: unset; - left: unset; - width: 100%; - z-index: 10000; - padding-bottom: 32px; -} - -@media (max-width: 670px) { - .gh-portal-popup-wrapper.multiple-products .gh-portal-powered { - justify-content: center; - } -} - -.gh-portal-popup-wrapper.multiple-products .gh-portal-content { - position: unset; - overflow-y: visible; - max-height: unset !important; -} - -@media (max-width: 960px) { - .gh-portal-popup-wrapper.multiple-products.signup:not(.preview) { - margin: 20px !important; - height: 100%; - } -} - -@media (max-width: 480px) { - .gh-portal-popup-wrapper.multiple-products { - margin: 0 !important; - max-width: unset !important; - max-height: 100% !important; - height: 100% !important; - border-radius: 0px; - box-shadow: none; - } - - .gh-portal-popup-wrapper.multiple-products.signup:not(.preview) { - margin: 0 !important; - } - - .gh-portal-popup-wrapper.multiple-products.preview { - height: unset !important; - margin: 0 !important; - } - - .gh-portal-popup-wrapper.multiple-products:not(.dev) .gh-portal-popup-container.preview { - max-height: 640px; - } -} - -.gh-portal-popup-container.preview * { - pointer-events: none !important; -} - -.gh-portal-unsubscribe-logo { - width: 60px; - height: 60px; - border-radius: 2px; - margin-top: 12px; - margin-bottom: 6px; -} - -@media (max-width: 480px) { - .gh-portal-unsubscribe-logo { - width: 48px; - height: 48px; - } -} - -.gh-portal-unsubscribe .gh-portal-main-title { - margin-bottom: 16px; - font-size: 2.6rem; -} - -.gh-portal-unsubscribe p { - margin-bottom: 16px; -} - -.gh-portal-unsubscribe p:last-of-type { - margin-bottom: 0; -} - -.gh-portal-btn-inline { - display: inline-block; - margin-left: 4px; - font-size: 1.5rem; - font-weight: 600; - cursor: pointer; -} - -.gh-portal-toggle-checked { - transition: all 0.3s; - transition-delay: 2s; -} - -.gh-portal-checkmark-container { - display: flex; - opacity: 0; - margin-right: 8px; - transition: opacity ease 0.4s 0.2s; -} - -.gh-portal-checkmark-show { - opacity: 1; -} - -.gh-portal-checkmark-icon { - height: 22px; - color: #30cf43; -} - -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -.gh-portal-newsletter-selection { - animation: 0.5s ease-in-out fadeIn; -} - -.gh-portal-signup { - animation: 0.5s ease-in-out fadeIn; -} - -.gh-portal-btn-different-plan { - margin: 0 auto 24px; - color: var(--grey6); - font-weight: 400; -} - -.gh-portal-hide { - display: none; -} -`; - -export function getFrameStyles({site}) { - const FrameStyle = - GlobalStyles + - FrameStyles + - MobileStyles + - MultipleProductsGlobalStyles; - return FrameStyle; -} diff --git a/ghost/sodo-search/src/components/Global.styles.js b/ghost/sodo-search/src/components/Global.styles.js deleted file mode 100644 index 69eff9c5c2..0000000000 --- a/ghost/sodo-search/src/components/Global.styles.js +++ /dev/null @@ -1,145 +0,0 @@ -export const GlobalStyles = ` - /* Colors - /* ----------------------------------------------------- */ - :root { - --black: #000; - --grey0: #1d1d1d; - --grey1: #333; - --grey2: #3d3d3d; - --grey3: #474747; - --grey4: #515151; - --grey5: #686868; - --grey6: #7f7f7f; - --grey7: #979797; - --grey8: #aeaeae; - --grey9: #c5c5c5; - --grey10: #dcdcdc; - --grey11: #e1e1e1; - --grey12: #eaeaea; - --grey13: #f9f9f9; - --grey14: #fbfbfb; - --white: #fff; - --red: #f02525; - --yellow: #FFDC15; - --green: #7FC724; - } - - /* Globals - /* ----------------------------------------------------- */ - html { - font-size: 62.5%; - height: 100%; - } - - body { - margin: 0px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - font-size: 1.6rem; - height: 100%; - line-height: 1.6em; - font-weight: 400; - font-style: normal; - color: var(--grey2); - box-sizing: border-box; - overflow: hidden; - } - - button, - button span { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - } - - *, ::after, ::before { - box-sizing: border-box; - } - - h1, h2, h3, h4, h5, h6, p { - line-height: 1.15em; - padding: 0; - margin: 0; - } - - h1 { - font-size: 35px; - font-weight: 700; - letter-spacing: -0.022em; - } - - h2 { - font-size: 32px; - font-weight: 700; - letter-spacing: -0.021em; - } - - h3 { - font-size: 24px; - font-weight: 700; - letter-spacing: -0.019em; - } - - p { - font-size: 15px; - line-height: 1.5em; - margin-bottom: 24px; - } - - strong { - font-weight: 600; - } - - a, - .gh-portal-link { - cursor: pointer; - } - - svg { - box-sizing: content-box; - } - - input, - textarea { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - font-size: 1.5rem; - } - - textarea { - padding: 10px; - line-height: 1.5em; - } - - @media (max-width: 1440px) { - h1 { - font-size: 32px; - letter-spacing: -0.022em; - } - - h2 { - font-size: 28px; - letter-spacing: -0.021em; - } - - h3 { - font-size: 26px; - letter-spacing: -0.02em; - } - } - - @media (max-width: 480px) { - h1 { - font-size: 30px; - letter-spacing: -0.021em; - } - - h2 { - font-size: 26px; - letter-spacing: -0.02em; - } - - h3 { - font-size: 24px; - letter-spacing: -0.019em; - } - } -`; - -export default GlobalStyles; \ No newline at end of file diff --git a/ghost/sodo-search/src/components/PopupModal.js b/ghost/sodo-search/src/components/PopupModal.js index 7779721e44..bec32f1523 100644 --- a/ghost/sodo-search/src/components/PopupModal.js +++ b/ghost/sodo-search/src/components/PopupModal.js @@ -1,6 +1,5 @@ import Frame from './Frame'; import AppContext from '../AppContext'; -import {getFrameStyles} from './Frame.styles'; import {ReactComponent as SearchIcon} from '../icons/search.svg'; import {ReactComponent as ClearIcon} from '../icons/delete.svg'; @@ -85,21 +84,13 @@ class PopupContent extends React.Component { } function Search() { - let pageClass = 'search'; - - let className = 'gh-portal-popup-container'; - - const containerClassName = `${className} ${pageClass}`; - return ( <> -
-
-
- - - -
+
+
+ + +
@@ -128,12 +119,11 @@ export default class PopupModal extends React.Component { } renderFrameStyles() { - const FrameStyle = getFrameStyles({}); const styles = ` :root { --brandcolor: ${this.context.brandColor || ''} } - ` + FrameStyle; + `; return ( <> @@ -151,12 +141,10 @@ export default class PopupModal extends React.Component { ...Styles.frame.common }; - let className = 'gh-portal-popup-background'; - return (
-
this.handlePopupClose(e)}>
+
this.handlePopupClose(e)}>
diff --git a/ghost/sodo-search/src/index.css b/ghost/sodo-search/src/index.css index b5c61c9567..ba8bac791a 100644 --- a/ghost/sodo-search/src/index.css +++ b/ghost/sodo-search/src/index.css @@ -1,3 +1,12 @@ @tailwind base; @tailwind components; @tailwind utilities; + +/* Custom reset */ +html { + font-size: 62.5%; +} + +body { + font-size: 1.5rem; +} \ No newline at end of file diff --git a/ghost/sodo-search/tailwind.config.js b/ghost/sodo-search/tailwind.config.js index a91f57bdea..9ab1b962c0 100644 --- a/ghost/sodo-search/tailwind.config.js +++ b/ghost/sodo-search/tailwind.config.js @@ -1,10 +1,101 @@ /** @type {import('tailwindcss').Config} */ + module.exports = { + theme: { + screens: { + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', + '2xl': '1400px' + }, + spacing: { + px: '1px', + 0: '0px', + 0.5: '0.2rem', + 1: '0.4rem', + 1.5: '0.6rem', + 2: '0.8rem', + 2.5: '1rem', + 3: '1.2rem', + 3.5: '1.4rem', + 4: '1.6rem', + 5: '2rem', + 6: '2.4rem', + 7: '2.8rem', + 8: '3.2rem', + 9: '3.6rem', + 10: '4rem', + 11: '4.4rem', + 12: '4.8rem', + 14: '5.6rem', + 16: '6.4rem', + 20: '8rem', + 24: '9.6rem', + 28: '11.2rem', + 32: '12.8rem', + 36: '14.4rem', + 40: '16rem', + 44: '17.6rem', + 48: '19.2rem', + 52: '20.8rem', + 56: '22.4rem', + 60: '24rem', + 64: '25.6rem', + 72: '28.8rem', + 80: '32rem', + 96: '38.4rem' + }, + maxWidth: { + none: 'none', + 0: '0rem', + xs: '32rem', + sm: '38.4rem', + md: '44.8rem', + lg: '51.2rem', + xl: '57.6rem', + '2xl': '67.2rem', + '3xl': '76.8rem', + '4xl': '89.6rem', + '5xl': '102.4rem', + '6xl': '115.2rem', + '7xl': '128rem', + '8xl': '140rem', + '9xl': '156rem', + full: '100%', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + prose: '65ch' + }, + borderRadius: { + sm: '0.2rem', + DEFAULT: '0.4rem', + md: '0.6rem', + lg: '0.8rem', + xl: '1.2rem', + '2xl': '1.6rem', + '3xl': '2.4rem', + full: '9999px' + }, + fontSize: { + xs: '1.2rem', + sm: '1.4rem', + md: '1.5rem', + lg: '1.8rem', + xl: '2rem', + '2xl': '2.4rem', + '3xl': '3rem', + '4xl': '3.6rem', + '5xl': ['4.8rem', '1.15'], + '6xl': ['6rem', '1'], + '7xl': ['7.2rem', '1'], + '8xl': ['9.6rem', '1'], + '9xl': ['12.8rem', '1'] + } + }, content: [ './src/**/*.{js,jsx,ts,tsx}' ], - theme: { - extend: {} - }, plugins: [] -}; +}; \ No newline at end of file