From 4020a81ba775f51e57333da9b70e571b1b50cd0c Mon Sep 17 00:00:00 2001 From: Andrew Smithwick <andy.smithwick@gmail.com> Date: Sat, 30 Mar 2024 14:34:42 -0700 Subject: [PATCH] Synced theme transition time across elements (#194) * Synced theme transition time across elements * Made global transition 0.3s instead of snappy * Deleted old comments * Fixed body not animating properly * Delete style.module.scss --- src/pages/_app.tsx | 1 + src/styles/globals.scss | 8 ++++++-- src/styles/themes.scss | 3 --- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index b14ef1bc..eb3e06c0 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -18,6 +18,7 @@ export default function MyApp({ Component, pageProps }: AppProps) { <> <style jsx global>{` * { + transition: all ease; font-family: ${dmSans.style.fontFamily}, sans-serif; } `}</style> diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 41bacc3a..d00436b4 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -7,6 +7,7 @@ body { margin: 0; padding: 0; scroll-padding-top: 4.25rem; + transition: background-color 0.3s ease; } /* This prevents the background from scrolling while a modal is open. */ @@ -67,12 +68,14 @@ label { font-size: 100%; margin: 0; padding: 0; - transition: background 0.3s ease; + transition: background-color 0.3s ease; vertical-align: baseline; } div, +input, span, +form, object, iframe, img, @@ -96,12 +99,13 @@ header, section, summary, mark, +main, audio, video { border: 0; margin: 0; padding: 0; - transition: background 0.3s ease; + transition: background-color 0.3s ease; } a, diff --git a/src/styles/themes.scss b/src/styles/themes.scss index 12debf78..3411db4a 100644 --- a/src/styles/themes.scss +++ b/src/styles/themes.scss @@ -108,7 +108,4 @@ html, body { background-color: var(--theme-background); - transition-duration: 0.3s; - transition-property: background-color, color, border-color, border, filter; - transition-timing-function: ease; }