use individual css transform props

krishnanlab · Sep 25, 2024 · d8ce387 · d8ce387
1 parent 6dd0d15
commit d8ce387
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 16 deletions.
diff --git a/frontend/src/assets/loading.svg b/frontend/src/assets/loading.svg
diff --git a/frontend/src/components/Asterisk.module.css b/frontend/src/components/Asterisk.module.css
@@ -1,5 +1,6 @@
 .asterisk {
  margin: 0 -5px;
- transform: scale(0.75) translateY(-0.35em);
+ translate: 0 -0.35em;
+ scale: 0.75;
  color: var(--accent);
 }
diff --git a/frontend/src/components/Header.module.css b/frontend/src/components/Header.module.css
@@ -1,5 +1,5 @@
 :root {
- --header-padding-shrink: clamp(0px, calc(var(--y) / 2), 20px);
+ --header-padding-shrink: clamp(0px, calc(var(--y) / 4), 10px);
  --header-logo-shrink: clamp(0px, calc(var(--y) / 2), 10px);
  --header-shrink: calc(
  var(--header-padding-shrink) + var(--header-logo-shrink)
@@ -11,7 +11,7 @@
  position: sticky;
  top: 0;
  margin-bottom: var(--header-shrink);
- padding: calc(20px - var(--header-padding-shrink) / 2);
+ padding: calc(20px - var(--header-padding-shrink));
  background: var(--deep);
  box-shadow: var(--shadow);
  color: var(--white);
@@ -66,14 +66,14 @@
  bottom: 0.1em;
  left: 5px;
  height: 1px;
- transform: scaleX(0);
+ scale: 0 1;
  background: currentColor;
  content: "";
- transition: transform var(--fast);
+ transition: scale var(--fast);
 }
 
 .link:hover::after {
- transform: scaleX(1);
+ scale: 1 1;
 }
 
 @media (max-width: 620px) {

diff --git a/frontend/src/components/Slider.module.css b/frontend/src/components/Slider.module.css
@@ -45,7 +45,7 @@
  position: absolute;
  top: 50%;
  height: 5px;
- transform: translateY(-50%);
+ translate: 0 -50%;
  border-radius: 999px;
  background: currentColor;
 }
@@ -74,7 +74,7 @@
 }
 
 .primary-marker {
- transform: translate(-50%, calc(-50% + 1.2em));
+ translate: -50% calc(-50% + 1.2em);
 }
 
 .track:has(.thumb:is(:hover, [data-focused]))
@@ -84,7 +84,7 @@
 }
 
 .secondary-marker {
- transform: translate(-50%, calc(-50% - 1.2em));
+ translate: -50% calc(-50% - 1.2em);
  color: var(--gray);
  opacity: 0;
 }

diff --git a/frontend/src/components/TableOfContents.module.css b/frontend/src/components/TableOfContents.module.css
@@ -4,7 +4,7 @@
  position: fixed;
  flex-direction: column;
  gap: 10px;
- transform: translateY(calc(-1 * var(--header-shrink)));
+ translate: 0 calc(-1 * var(--header-shrink));
  border-radius: 0 0 var(--rounded) 0;
  background: var(--white);
  box-shadow: var(--shadow);