Chore: Migrate more SCSS styles (#88780)

* remove animations mixins

* move drop and drop-element to angular file

* migrate submenu scss

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -572,6 +572,7 @@ export const Components = {
   },
   Variables: {
     variableOption: 'data-testid variable-option',
+    variableLinkWrapper: 'data-testid variable-link-wrapper',
   },
   Annotations: {
     annotationsTypeInput: 'data-testid annotations-type-input',

packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx

@@ -1,6 +1,7 @@
-import { css, cx } from '@emotion/css';
+import { css, cx, keyframes } from '@emotion/css';
 import React from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { useStyles2 } from '../../themes';
@@ -19,6 +20,7 @@ export type LoadingIndicatorProps = {
  * @internal
  */
 export const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) => {
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   const styles = useStyles2(getStyles);
 
   if (!loading) {
@@ -28,8 +30,8 @@ export const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) =
   return (
     <Tooltip content="Cancel query">
       <Icon
-        className={cx('spin-clockwise', { [styles.clickable]: !!onCancel })}
-        name="sync"
+        className={cx(styles.spin, { [styles.clickable]: !!onCancel })}
+        name={prefersReducedMotion ? 'hourglass' : 'sync'}
         size="sm"
         onClick={onCancel}
         data-testid={selectors.components.LoadingIndicator.icon}
@@ -38,10 +40,24 @@ export const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) =
   );
 };
 
-const getStyles = () => {
+const spin = keyframes({
+  '0%': {
+    transform: 'rotate(0deg) scaleX(-1)', // scaleX flips the `sync` icon so arrows point the correct way
+  },
+  '100%': {
+    transform: 'rotate(359deg) scaleX(-1)',
+  },
+});
+
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     clickable: css({
       cursor: 'pointer',
     }),
+    spin: css({
+      [theme.transitions.handleMotion('no-preference')]: {
+        animation: `${spin} 3s linear infinite`,
+      },
+    }),
   };
 };