Replace a Sass variable with a CSS custom property - hover-transition (#10786)

Author: luixxiul

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;

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;
 

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;