Replace a Sass variable with a CSS custom property - hover-transition (…

…#10786)
matrix-org · May 22, 2023 · 2e3cb0a · 2e3cb0a
1 parent 74d3018
commit 2e3cb0a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/res/css/_animations.pcss b/res/css/_animations.pcss
@@ -34,6 +34,10 @@ limitations under the License.
     transition: opacity 300ms ease;
 }
 
+:root {
+    --hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
+}
+
 @keyframes mx--anim-pulse {
     0% {
         opacity: 1;

diff --git a/res/css/_common.pcss b/res/css/_common.pcss
@@ -23,8 +23,6 @@ limitations under the License.
 @import "./_spacing.pcss";
 @import url("maplibre-gl/dist/maplibre-gl.css");
 
-$hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
-
 :root {
     font-size: 10px;
 

diff --git a/res/css/views/settings/_AvatarSetting.pcss b/res/css/views/settings/_AvatarSetting.pcss
@@ -22,7 +22,7 @@ limitations under the License.
     position: relative;
 
     .mx_AvatarSetting_hover {
-        transition: opacity $hover-transition;
+        transition: opacity var(--hover-transition);
 
         /* position to place the hover bg over the entire thing */
         position: absolute;