diff --git a/css/src/components/ajax-progress.module.css b/css/src/components/ajax-progress.module.css index 59268d4..8d72ade 100644 --- a/css/src/components/ajax-progress.module.css +++ b/css/src/components/ajax-progress.module.css @@ -47,9 +47,6 @@ border-radius: 50%; animation: claro-throbber 0.75s linear infinite; } -[dir="rtl"] .ajax-progress__throbber { - animation-direction: reverse; -} .ajax-progress__message { display: inline-block; @@ -77,7 +74,7 @@ box-sizing: border-box; z-index: 1000; } -.ajax-progress--fullscreen .ajax-progress__throbber { +.ajax-progress__throbber--fullscreen { position: absolute; top: 50%; left: 50%; @@ -90,6 +87,15 @@ } @media screen and (-ms-high-contrast: active) { + /** + * Throbber animation is shaky on Edge RTL on high contrast for border width + * less than 4px. + */ + @supports (-ms-ime-align:auto) { + [dir="rtl"] .ajax-progress__throbber { + border-width: 4px; + } + } .progress__bar { background-color: windowText; } diff --git a/js/claro.ajax.es6.js b/js/claro.ajax.es6.js index 76c8d1f..5a524b1 100644 --- a/js/claro.ajax.es6.js +++ b/js/claro.ajax.es6.js @@ -11,7 +11,7 @@ * The HTML markup for the throbber. */ Drupal.theme.ajaxProgressIndicatorFullscreen = () => - '
 
'; + '
 
'; /** * Theme override of the ajax progress indicator. diff --git a/js/claro.ajax.js b/js/claro.ajax.js index 9fe4573..485d592 100644 --- a/js/claro.ajax.js +++ b/js/claro.ajax.js @@ -7,7 +7,7 @@ (function (Drupal) { Drupal.theme.ajaxProgressIndicatorFullscreen = function () { - return '
 
'; + return '
 
'; }; Drupal.theme.ajaxProgressThrobber = function (message) {