From 55690531cb80796b71e3d31ceb30e964bc9d494b Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 31 May 2023 12:24:37 +0530 Subject: [PATCH 1/4] fix clamps --- .../components/CardHeader/stylesheet.scss | 44 +++---------------- .../GetStartedExperience/stylesheet.scss | 7 +-- .../SiteTypeSetup/PrimarySite/stylesheet.scss | 2 +- 3 files changed, 8 insertions(+), 45 deletions(-) diff --git a/src/OnboardingSPA/components/CardHeader/stylesheet.scss b/src/OnboardingSPA/components/CardHeader/stylesheet.scss index 0a2b044b0..dd33a3e84 100644 --- a/src/OnboardingSPA/components/CardHeader/stylesheet.scss +++ b/src/OnboardingSPA/components/CardHeader/stylesheet.scss @@ -3,60 +3,28 @@ font-weight: 700; line-height: 1.25; text-align: center; - font-size: clamp(1.5rem, 1.82vw + 1.05rem, 2.5rem); - - @media (max-width: #{($break-medium)}) { - font-size: clamp(1rem, 3.5vw, 1.2rem); - margin: 10px; - } - - @media (min-width: 2600px) { - font-size: clamp(1rem, 2.44vw + 0.39rem, 6.25rem); - margin: 40px; - } + font-size: clamp(1.875rem, 1.76rem + 0.54vw, 3.125rem); } .nfd-step-card-subheading { margin: 5px; font-weight: 700; color: var(--wp-admin-theme-color); - font-size: clamp(1rem, 0.91vw + 0.77rem, 1.5rem); + font-size: 1.5rem; + font-size: clamp(1rem, 0.91rem + 0.43vw, 2rem); text-align: center; line-height: 1; - - @media (min-width: #{ ($break-medium)}) { - padding-bottom: 30px; - } - - @media (min-width: 2600px) { - font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem); - margin: 80px; - } } .nfd-step-card-subheading-other { font-weight: 700; margin-top: 35px; color: var(--wp-admin-theme-color); - font-size: clamp(0.8rem, 2.5vw, 1.2rem); - @media (max-width: #{($break-medium)}) { - margin: 3px; - font-size: clamp(0.7rem, 2.2vw, 1.2rem); - } - - @media (min-width: 2600px) { - font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem); - margin: 80px; - } + font-size: clamp(1rem, 0.93rem + 0.32vw, 1.75rem); } .nfd-step-card-question { margin: 18px; - font-size: clamp(1rem, 2vw, 1.8rem); - - @media (min-width: 2600px) { - font-size: clamp(3.38rem, -0.47vw + 3.49rem, 2.37rem); - font-weight: 700; - margin: 60px; - } + font-size: 1.3125rem; + font-size: clamp(1.3125rem, 1.2092391304347827rem + 0.5163043478260869vw, 2.5rem); } diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss index 0fc48734e..d27d2dcfc 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss @@ -12,7 +12,7 @@ color: var(--nfd-onboarding-black); background: var(--nfd-onboarding-base-gray); font-weight: 350; - font-size: clamp(0.8rem, 1.5vw, 1.2rem); + font-size: clamp(1rem, 0.92rem + 0.38vw, 1.875rem); line-height: 1.5; margin: 5px; white-space: nowrap; @@ -21,11 +21,6 @@ padding-right: 100px; } - @media (min-width: 3700px) { - font-size: clamp(3.7rem, -0.27vw + 3.5rem, 3rem); - margin: 25px; - font-weight: 360; - } } &-tabs input:checked + label { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss index 27d72cf86..32d5bec10 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss @@ -15,7 +15,7 @@ &-categories { margin-top: 3rem; margin-bottom: 1rem; - width: 50vw; + width: 40vw; text-align: center; } From 7240f8cbbfee6a854543c3e8b7764f2b95eb0234 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 31 May 2023 12:42:11 +0530 Subject: [PATCH 2/4] round off clamps --- src/OnboardingSPA/components/CardHeader/stylesheet.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/CardHeader/stylesheet.scss b/src/OnboardingSPA/components/CardHeader/stylesheet.scss index dd33a3e84..32d19474d 100644 --- a/src/OnboardingSPA/components/CardHeader/stylesheet.scss +++ b/src/OnboardingSPA/components/CardHeader/stylesheet.scss @@ -26,5 +26,5 @@ .nfd-step-card-question { margin: 18px; font-size: 1.3125rem; - font-size: clamp(1.3125rem, 1.2092391304347827rem + 0.5163043478260869vw, 2.5rem); + font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 2.5rem); } From 11344d33a8fb7d6f06620a5771fa6f20c8d92622 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 31 May 2023 14:35:50 +0530 Subject: [PATCH 3/4] fix navcard button being huge --- .../components/Button/NavCardButton/stylesheet.scss | 12 ++---------- .../components/CardHeader/stylesheet.scss | 4 +++- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss b/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss index 6f8589b0a..36b269d9b 100644 --- a/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss +++ b/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss @@ -3,17 +3,9 @@ background-color: var(--wp-admin-theme-color-darker-10); padding: 16px; width: 90%; - font-size: clamp(0.7rem, 1.2vw, 1.4em); + font-size: clamp(1rem, 0.91rem + 0.43vw, 2rem); font-weight: 500; border-radius: 4px; border: none; outline: 1px solid transparent; - - @media (max-width: #{($break-medium)}) { - padding: 24px 32px; - } - - @media (min-width: 2600px) { - font-size: clamp(2.81rem, -0.48vw + 2.93rem, 1.78rem); - } -} \ No newline at end of file +} diff --git a/src/OnboardingSPA/components/CardHeader/stylesheet.scss b/src/OnboardingSPA/components/CardHeader/stylesheet.scss index 32d19474d..a4ea567e9 100644 --- a/src/OnboardingSPA/components/CardHeader/stylesheet.scss +++ b/src/OnboardingSPA/components/CardHeader/stylesheet.scss @@ -3,7 +3,8 @@ font-weight: 700; line-height: 1.25; text-align: center; - font-size: clamp(1.875rem, 1.76rem + 0.54vw, 3.125rem); + font-size: 1rem; + font-size: clamp(1rem, 0.8152173913043478rem + 0.9239130434782609vw, 3.125rem); } .nfd-step-card-subheading { @@ -27,4 +28,5 @@ margin: 18px; font-size: 1.3125rem; font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 2.5rem); + line-height: 1.2; } From 7c2aa68c9d5d4bf20715bb1915e4bcbe5b083641 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 31 May 2023 16:44:55 +0530 Subject: [PATCH 4/4] fix large input box on larger screens --- src/OnboardingSPA/components/CardHeader/stylesheet.scss | 5 +---- .../GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss | 3 +-- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/components/CardHeader/stylesheet.scss b/src/OnboardingSPA/components/CardHeader/stylesheet.scss index a4ea567e9..0ece43590 100644 --- a/src/OnboardingSPA/components/CardHeader/stylesheet.scss +++ b/src/OnboardingSPA/components/CardHeader/stylesheet.scss @@ -3,15 +3,13 @@ font-weight: 700; line-height: 1.25; text-align: center; - font-size: 1rem; - font-size: clamp(1rem, 0.8152173913043478rem + 0.9239130434782609vw, 3.125rem); + font-size: clamp(1rem, 0.81rem + 0.92vw, 3.125rem); } .nfd-step-card-subheading { margin: 5px; font-weight: 700; color: var(--wp-admin-theme-color); - font-size: 1.5rem; font-size: clamp(1rem, 0.91rem + 0.43vw, 2rem); text-align: center; line-height: 1; @@ -26,7 +24,6 @@ .nfd-step-card-question { margin: 18px; - font-size: 1.3125rem; font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 2.5rem); line-height: 1.2; } diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss index 32d5bec10..b90cd7c52 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss @@ -38,14 +38,13 @@ &-input { width: 30vw; - height: 5.5vh; font-size: 16px; font-weight: 300; margin: 0 1rem 1.5rem 1rem; padding: 8px 16px !important; &::placeholder { - font-size: 15px; + font-size: 16px; } @media (max-width: #{($break-medium - 1)}) {