packages/styles/scss/base/_media.scss

   1 /**
   2  * reduced motion MQ: for vestibular disorders
   3  */
   4 @mixin reduce-motion {
   5         // keep-motion is for some SUPER particular cases where the animation must be kept, ie
   6         // - it brings sense to the action
   7         // - it's triggered by the user
   8         // - it's super small and played less than 3s
   9         // doc: https://www.w3.org/WAI/GL/wiki/Animation_caused_by_user_interaction
  10         // example, reload spinner on folders in Mail side bar
  11
  12         *:not(.keep-motion),
  13         *:not(.keep-motion)::before,
  14         *:not(.keep-motion)::after {
  15                 // Using values greater than 0 to have animation events still triggering
  16                 animation-delay: 0.01ms !important;
  17                 animation-duration: 0.01ms !important;
  18                 animation-iteration-count: 1 !important;
  19
  20                 // This magic value is needed because of https://bugs.webkit.org/show_bug.cgi?id=242510
  21                 // which affects visibility changes on Safari (iOS + MacOS) when reduce motion is
  22                 // enabled in accessibility settings. Even though transitions are not involved.
  23                 // This needs to be set to 0 to prevent lag. In general in all browsers, but particularly
  24                 // in safari when changing theme.
  25                 // Warning: This breaks transition events, which need to be handled in JS.
  26                 transition-delay: 0s !important;
  27                 transition-duration: 0s !important;
  28         }
  29 }
  30
  31 @include media('reduced-motion') {
  32         @include reduce-motion;
  33 }
  34
  35 .feature-animations-off {
  36         @include reduce-motion;
  37 }