dave/calorie-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moved css variables to themeToggle

Browse Source
This commit is contained in:
Fractal-Tess
2022-09-12 11:40:54 +03:00
parent 63885d51dc
commit 18a0ceb0df
2 changed files with 18 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/components/ThemeToggleIcon.svelte
View File

@@ -28,6 +28,18 @@
</svg> </svg>
<style> <style>
svg {
--transition-duration-short: 0.15s;
--transition-duration-long: 0.4s;
--ease-1: cubic-bezier(0.25, 0, 0.3, 1);
--ease-out-1: cubic-bezier(0, 0, 0, 1);
--ease-elastic-1: cubic-bezier(0.5, 1.25, 0.75, 1.25);
--ease-elastic-2: cubic-bezier(0.5, 1.5, 0.75, 1.25);
}
svg .moon, svg .moon,
svg .sun, svg .sun,
svg .sun-beams { svg .sun-beams {
@@ -56,30 +68,30 @@
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
svg .sun { svg .sun {
transition: transform var(--transition-duration-long) transition: transform var(--transition-duration-long)
var(--ease-elastic-3); var(--ease-elastic-1);
} }
svg .sun-beams { svg .sun-beams {
transition: transform var(--transition-duration-long) transition: transform var(--transition-duration-long)
var(--ease-elastic-4), var(--ease-elastic-2),
opacity var(--transition-duration-long) var(--ease-3); opacity var(--transition-duration-long) var(--ease-1);
} }
svg .moon > circle { svg .moon > circle {
transition: transform calc(var(--transition-duration-long) / 2) transition: transform calc(var(--transition-duration-long) / 2)
var(--ease-out-5); var(--ease-out-1);
} }
@supports (cx: 1) { @supports (cx: 1) {
svg .moon > circle { svg .moon > circle {
transition: cx calc(var(--transition-duration-long) / 2) transition: cx calc(var(--transition-duration-long) / 2)
var(--ease-out-5); var(--ease-out-1);
} }
} }
:global(.light) svg .sun { :global(.light) svg .sun {
transform: scale(1.75); transform: scale(1.75);
transition-timing-function: var(--ease-3); transition-timing-function: var(--ease-1);
transition-duration: calc(var(--transition-duration-long) / 2); transition-duration: calc(var(--transition-duration-long) / 2);
} }

23
src/styles/app.scss
View File

@@ -14,31 +14,8 @@ html {
@apply rounded-3xl overflow-hidden; @apply rounded-3xl overflow-hidden;
} }
/* css vars */
* { * {
@apply transition-all; @apply transition-all;
// TODO: Remove all transitions here and rework the theme changing button
--transition-duration-short: 0.15s;
--transition-duration-long: 0.4s;
--ease-1: cubic-bezier(0.25, 0, 0.5, 1);
--ease-2: cubic-bezier(0.25, 0, 0.4, 1);
--ease-3: cubic-bezier(0.25, 0, 0.3, 1);
--ease-4: cubic-bezier(0.25, 0, 0.2, 1);
--ease-5: cubic-bezier(0.25, 0, 0.1, 1);
--ease-out-1: cubic-bezier(0, 0, 0.75, 1);
--ease-out-2: cubic-bezier(0, 0, 0.5, 1);
--ease-out-3: cubic-bezier(0, 0, 0.3, 1);
--ease-out-4: cubic-bezier(0, 0, 0.1, 1);
--ease-out-5: cubic-bezier(0, 0, 0, 1);
--ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
--ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
--ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
--ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
--ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
} }
// Class is used for development purposes only. // Class is used for development purposes only.