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>
<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 .sun,
svg .sun-beams {
@@ -56,30 +68,30 @@
@media (prefers-reduced-motion: no-preference) {
svg .sun {
transition: transform var(--transition-duration-long)
var(--ease-elastic-3);
var(--ease-elastic-1);
}
svg .sun-beams {
transition: transform var(--transition-duration-long)
var(--ease-elastic-4),
opacity var(--transition-duration-long) var(--ease-3);
var(--ease-elastic-2),
opacity var(--transition-duration-long) var(--ease-1);
}
svg .moon > circle {
transition: transform calc(var(--transition-duration-long) / 2)
var(--ease-out-5);
var(--ease-out-1);
}
@supports (cx: 1) {
svg .moon > circle {
transition: cx calc(var(--transition-duration-long) / 2)
var(--ease-out-5);
var(--ease-out-1);
}
}
:global(.light) svg .sun {
transform: scale(1.75);
transition-timing-function: var(--ease-3);
transition-timing-function: var(--ease-1);
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;
}
/* css vars */
* {
@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.