make remaining animations work with Edge

bigbluebutton-html5/imports/ui/components/app/styles.scss

@@ -70,8 +70,11 @@
     width: 100%;
     height: 50%;
     opacity: 0;
-    transition: opacity calc(var(--enableAnimation) * .3s);
     pointer-events: none;
+
+    [style~="--enableAnimation:1;"] & {
+      transition: opacity .3s;
+    }
   }
 
   &:before {

bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss

@@ -32,8 +32,11 @@
   }
 
   &.glow {
-    animation: pulse calc(var(--enableAnimation) * 1s) infinite ease-in;
     border-radius: 50%;
+
+    [style~="--enableAnimation:1;"] & {
+      animation: pulse 1s infinite ease-in;
+    }
   }
 }
 

bigbluebutton-html5/imports/ui/components/audio/audio-test/styles.scss

@@ -10,7 +10,10 @@
 
   i {
     color: var(--color-primary);
-    transition: all calc(var(--enableAnimation) * .2s) ease-in-out;
+
+    [style~="--enableAnimation:1;"] & {
+      transition: all .2s ease-in-out;
+    }
   }
 
   &:hover,

bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss

@@ -3,18 +3,20 @@
     top: -50px;
     left: -20px;
     font-size: 20px;
-    animation: bounce calc(var(--enableAnimation) * 2s) infinite;
     display: block;
     font-family: 'bbb-icons';
     content: "\E906";
     position: relative;
+
+    [style~="--enableAnimation:1;"] & {
+      animation: bounce 2s infinite;
+    }
   }
 
   :global(.browser-edge) &:after {
     top: -50px;
     left: -15.5em;
     font-size: 20px;
-    animation: bounceRotate calc(var(--enableAnimation) * 2s) infinite;
   }
 }
 
@@ -45,7 +47,10 @@
   left: 0;
   right: 0;
   background-color: rgba(0, 0, 0, .85);
-  animation: fade-in calc(var(--enableAnimation) * .5s) ease-in;
+
+  [style~="--enableAnimation:1;"] & {
+    animation: fade-in .5s ease-in;
+  }
 }
 
 .hint {

bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss

@@ -49,6 +49,7 @@
     padding: 0 0 0 .5rem;
   }
 }
+
 .joinButton,
 .button {
   flex: 0 1 48%;
@@ -81,16 +82,18 @@
   color: var(--color-gray);
 }
 
-
 .connectingAnimation{
   &:after {
     overflow: hidden;
     display: inline-block;
     vertical-align: bottom;
-    animation: ellipsis steps(4,end) calc(var(--enableAnimation) * 900ms) infinite;
     content: "\2026"; /* ascii code for the ellipsis character */
     width: 0;
     margin-right: 1.25em;
+
+    [style~="--enableAnimation:1;"] & {
+      animation: ellipsis steps(4,end) 900ms infinite;
+    }
   }
 }
 
@@ -101,7 +104,6 @@
   }
 }
 
-
 .duration {
   display: flex;
   align-self: center;

bigbluebutton-html5/imports/ui/components/button/styles.scss

@@ -52,7 +52,10 @@
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
-  transition: all calc(var(--enableAnimation) * .2s) ease-in-out;
+
+  [style~="--enableAnimation:1;"] & {
+    transition: all .2s ease-in-out;
+  }
 
   &:hover,
   &:focus {

bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss

@@ -26,9 +26,12 @@
   border-radius: var(--border-radius) 0 0 var(--border-radius);
   color: var(--color-gray-light);
   padding: var(--sm-padding-y) var(--sm-padding-x);
-  transition: all calc(var(--enableAnimation) * .3s);
   cursor: pointer;
 
+  [style~="--enableAnimation:1;"] & {
+    transition: all .3s;
+  }
+
   --bg-faded: rgba(167,179,189,0.25);
 
   &:hover,

bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.scss

@@ -129,7 +129,10 @@
     font-weight: inherit;
     border: none;
     border-radius: 0.4rem;
-    transition: box-shadow calc(var(--enableAnimation) * .2s);
+
+    [style~="--enableAnimation:1;"] & {
+      transition: box-shadow .2s;
+    }
   }
 
   input:focus {
@@ -145,6 +148,9 @@
 .urlError {
   color: red;
   padding: 1em;
-  transition: calc(var(--enableAnimation) * 1s);
+  
+  [style~="--enableAnimation:1;"] & {
+    transition: 1s;
+  }
 }
 

bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss

@@ -42,5 +42,8 @@
 
 .appearActive {
   opacity: 1;
-  transition: opacity calc(var(--enableAnimation) * 700ms) ease-in;
+
+  [style~="--enableAnimation:1;"] & {
+    transition: opacity 700ms ease-in;
+  }
 }

bigbluebutton-html5/imports/ui/components/presentation/styles.scss

@@ -7,7 +7,10 @@
 
 .enterActive {
   opacity: 1;
-  transition: opacity calc(var(--enableAnimation) * 400ms) ease-in;
+
+  [style~="--enableAnimation:1;"] & {
+    transition: opacity 400ms ease-in;
+  }
 }
 
 .appear {
@@ -16,7 +19,10 @@
 
 .appearActive {
   opacity: 1;
-  transition: opacity calc(var(--enableAnimation) * 400ms) ease-in;
+
+  [style~="--enableAnimation:1;"] & {
+    transition: opacity 400ms ease-in;
+  }
 }
 
 .presentationArea {

bigbluebutton-html5/imports/ui/components/toast/styles.scss

@@ -162,7 +162,6 @@
   border: none;
   cursor: pointer;
   opacity: .5;
-  transition: calc(var(--enableAnimation) * .3s) ease;
   font-size: .35rem;
   color: var(--color-gray-dark);
   padding: .4rem;
@@ -172,6 +171,11 @@
   right: var(--md-padding-y);
   font-size: 70%;
   top: var(--lg-padding-y);
+
+  [style~="--enableAnimation:1;"] & {
+    transition: .3s ease;
+  }
+
   &:before {
     margin-left: -.2rem;
   }

bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss

@@ -22,9 +22,12 @@
   border-radius: 50%;
   text-align: center;
   text-transform: capitalize;
-  transition: calc(var(--enableAnimation) * .3s) ease-in-out;
   font-size: .85rem;
 
+  [style~="--enableAnimation:1;"] & {
+    transition: .3s ease-in-out;
+  }
+
   &:after,
   &:before {
     content: "";
@@ -42,7 +45,6 @@
     background-color: var(--user-indicator-voice-bg);
     color: var(--user-avatar-text);
     opacity: 0;
-    transition: calc(var(--enableAnimation) * .3s) ease-in-out;
     font-family: 'bbb-icons';
     font-size: .65rem;
     line-height: 0;
@@ -50,6 +52,10 @@
     vertical-align: middle;
     letter-spacing: -.65rem;
     z-index: 1;
+
+    [style~="--enableAnimation:1;"] & {
+      transition: .3s ease-in-out;
+    }
   }
 }
 
@@ -61,9 +67,11 @@
   left: 0;
   background-color: var(--user-color);
   border-radius: inherit;
-  animation: pulse calc(var(--enableAnimation) * 1s) infinite ease-in;
-}
 
+  [style~="--enableAnimation:1;"] & {
+    animation: pulse 1s infinite ease-in;
+  }
+}
 
 [style~="--enableAnimation:0;"] .talking::before {
   content: '';
@@ -78,7 +86,6 @@
   opacity: .5;
 }
 
-
 @keyframes pulse {
   0% {
     opacity: 1;
@@ -117,7 +124,6 @@
   }
 }
 
-
 .listenOnly {
   &:after {
     content: "\00a0\e90c\00a0";

bigbluebutton-html5/imports/ui/components/user-list/styles.scss

@@ -44,11 +44,14 @@
 %list-item {
   display: flex;
   flex-flow: row;
-  transition: all calc(var(--enableAnimation) * .3s);
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   cursor: pointer;
 
+  [style~="--enableAnimation:1;"] & {
+    transition: all .3s;
+  }
+
   &:first-child {
     margin-top: 0;
   }
@@ -134,7 +137,10 @@
 .enterActive,
 .appearActive {
   opacity: 1;
-  transition: all calc(var(--enableAnimation) * 600ms);
+  
+  [style~="--enableAnimation:1;"] & {
+    transition: all 600ms;
+  }
 }
 
 .leave {
@@ -143,5 +149,8 @@
 
 .leaveActive {
   opacity: 0;
-  transition: all calc(var(--enableAnimation) * 600ms);
+
+  [style~="--enableAnimation:1;"] & {
+    transition: all 600ms;
+  }
 }

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss

@@ -15,8 +15,11 @@
 .enterActive,
 .appearActive {
   opacity: 1;
-  transition: all calc(var(--enableAnimation) * 300ms);
   max-height: 10rem;
+
+  [style~="--enableAnimation:1;"] & {
+    transition: all 300ms;
+  }
 }
 
 .leave {
@@ -26,8 +29,11 @@
 
 .leaveActive {
   opacity: 0;
-  transition: all calc(var(--enableAnimation) * 500ms);
   max-height: 0rem;
+  
+  [style~="--enableAnimation:1;"] & {
+    transition: all 500ms;
+  }
 }
 
 // Text under username
@@ -41,8 +47,11 @@
 .subUserNameAppearActive {
   transform: translateY(0%);
   opacity: 1;
-  transition: all calc(var(--enableAnimation) * 500ms);
   max-height: 10rem;
+
+  [style~="--enableAnimation:1;"] & {
+    transition: all 500ms;
+  }
 }
 
 .subUserNameLeave {
@@ -52,8 +61,11 @@
 
 .subUserNameLeaveActive {
   opacity: 0;
-  transition: all calc(var(--enableAnimation) * 300ms);
   transform: translateY(-100%);
+
+  [style~="--enableAnimation:1;"] & {
+    transition: all 300ms;
+  }
 }
 
 .actionsHeader {

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss

@@ -5,8 +5,11 @@
   text-align: center;
   flex-basis: 1rem;
   justify-content: center;
-  transition: calc(var(--enableAnimation) * .3s) all;
   margin-left: var(--sm-padding-x) / 2;
+
+  [style~="--enableAnimation:1;"] & {
+    transition: .3s all;
+  }
 }
 
 .userIcons {

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss

@@ -15,9 +15,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  transition: all calc(var(--enableAnimation) * .3s);
   font-weight: 400;
   color: var(--color-gray-dark);
+
+  [style~="--enableAnimation:1;"] & {
+    transition: all .3s;
+  }
 }
 
 .userNameSub {

bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss

@@ -54,8 +54,11 @@
     border: 5px solid var(--color-white-with-transparency);
     border-radius: 5px;
     opacity: 0;
-    transition: opacity calc(var(--enableAnimation) * .1s);
     pointer-events: none;
+
+    [style~="--enableAnimation:1;"] & {
+      transition: opacity .1s;
+    }
   }
 
   &.talking::after {
@@ -97,7 +100,10 @@
     content: "\e949"; /* ascii code for the ellipsis character */
     font-family: 'bbb-icons' !important;
     display: inline-block;
-    animation: spin calc(var(--enableAnimation) * 4s) infinite linear;
+
+    [style~="--enableAnimation:1;"] & {
+      animation: spin 4s infinite linear;
+    }
   }
 }