diff --git a/core/misc/ajax.js b/core/misc/ajax.js index 4dba53e..0a7b0de 100644 --- a/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -704,7 +704,7 @@ * Sets the throbber progress indicator. */ Drupal.Ajax.prototype.setProgressIndicatorThrobber = function () { - this.progress.element = $('
 
'); + this.progress.element = $('
 
'); if (this.progress.message) { this.progress.element.find('.throbber').after('
' + this.progress.message + '
'); } diff --git a/core/misc/throbber-active.gif b/core/misc/throbber-active.gif deleted file mode 100644 index f66414a..0000000 --- a/core/misc/throbber-active.gif +++ /dev/null @@ -1,2 +0,0 @@ -GIF89a  {{ƵZ5ʋkFs!, c'O4ɨPʳ.rsk/ qD$FD!D`Kb$܈D%]5"S8{"8-3 / -<"& +!; \ No newline at end of file diff --git a/core/misc/throbber-active.svg b/core/misc/throbber-active.svg new file mode 100644 index 0000000..e233ee5 --- /dev/null +++ b/core/misc/throbber-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/misc/throbber-inactive.png b/core/misc/throbber-inactive.png deleted file mode 100644 index befbb9f..0000000 --- a/core/misc/throbber-inactive.png +++ /dev/null @@ -1,3 +0,0 @@ -PNG - - IHDR OybKGD pHYs  tIME4h7IDAT(ϝ! DV??V"+##SiE2fYJU!{zZk9CD#i`ߟ3AD(@U!"PU֚sBro<_nTնm 9¯s0[pj@fv (J @DBݿ҇;쩺2E]vΊ>!.3þ.t9ksNؔҠ'IENDB` \ No newline at end of file diff --git a/core/misc/throbber-inactive.svg b/core/misc/throbber-inactive.svg new file mode 100644 index 0000000..ca0bef2 --- /dev/null +++ b/core/misc/throbber-inactive.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/modules/system/css/components/ajax-progress.module.css b/core/modules/system/css/components/ajax-progress.module.css index ee56efa..5329938 100644 --- a/core/modules/system/css/components/ajax-progress.module.css +++ b/core/modules/system/css/components/ajax-progress.module.css @@ -11,9 +11,16 @@ float: right; } .ajax-progress-throbber .throbber { - background: transparent url(../../../../misc/throbber-active.gif) no-repeat 0px center; - display: inline; - padding: 1px 5px 2px; + background: transparent url(../../../../misc/throbber-active.svg) no-repeat 50% 50%; + display: inline-block; + padding: 0; + width: 18px; + height: 18px; +} +.throbber.is-throbbing { + -webkit-animation: rotate-throbber 1s linear infinite; + -moz-animation: rotate-throbber 1s linear infinite; + animation: rotate-throbber 1s linear infinite; } .ajax-progress-throbber .message { display: inline; @@ -43,3 +50,19 @@ tr .ajax-progress-throbber .throbber { padding: 4px; width: 24px; } + +/** + * AJAX Progress throbber animations. + */ +@-moz-keyframes rotate-throbber { + to {-moz-transform: rotate(-360deg);} +} +@-webkit-keyframes rotate-throbber { + to {-webkit-transform: rotate(-360deg);} +} +@-ms-keyframes rotate-throbber { + to {-ms-transform: rotate(-360deg);} +} +@keyframes rotate-throbber { + to {transform: rotate(-360deg);} +} diff --git a/core/modules/system/css/components/autocomplete-loading.module.css b/core/modules/system/css/components/autocomplete-loading.module.css index 40d3323..cb833c6 100644 --- a/core/modules/system/css/components/autocomplete-loading.module.css +++ b/core/modules/system/css/components/autocomplete-loading.module.css @@ -6,7 +6,7 @@ */ .js input.form-autocomplete { - background-image: url(../../../../misc/throbber-inactive.png); + background-image: url(../../../../misc/throbber-inactive.svg); background-position: 100% center; /* LTR */ background-repeat: no-repeat; } @@ -14,7 +14,7 @@ background-position: 0% center; } .js input.form-autocomplete.ui-autocomplete-loading { - background-image: url(../../../../misc/throbber-active.gif); + background-image: url(../../../../misc/throbber-active.svg); background-position: 100% center; /* LTR */ } .js[dir="rtl"] input.form-autocomplete.ui-autocomplete-loading { diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css index 5dc2e4d..839b879 100644 --- a/core/modules/views_ui/css/views_ui.admin.theme.css +++ b/core/modules/views_ui/css/views_ui.admin.theme.css @@ -767,14 +767,36 @@ td.group-title { } .js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber { position: absolute; - right: -5px; /* LTR */ - top: -1px; + right: 0; /* LTR */ + top: 0; z-index: 2; + height: 100%; + width: 20px; } [dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber { - left: -5px; + left: 0; right: auto; } +.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber:before { + content: ""; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0 50% 50% 0; + background-color: #fff; + background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df); + background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df); +} +.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber .throbber { + position: absolute; + top: 3px; + width: 100%; + left: 0; + margin: 0; +} .js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a { border-radius: 1.1em 0 0 0; /* LTR */ } diff --git a/core/themes/bartik/css/components/dropbutton.component.css b/core/themes/bartik/css/components/dropbutton.component.css index db55965..f259f7c 100644 --- a/core/themes/bartik/css/components/dropbutton.component.css +++ b/core/themes/bartik/css/components/dropbutton.component.css @@ -38,6 +38,7 @@ .js .dropbutton .secondary-action { border-top-color: #ccc; } +.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber:before, .js .dropbutton-toggle button { background-color: #e8e8e8; background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2); diff --git a/core/themes/seven/css/components/dropbutton.component.css b/core/themes/seven/css/components/dropbutton.component.css index 6f08502..c764307 100644 --- a/core/themes/seven/css/components/dropbutton.component.css +++ b/core/themes/seven/css/components/dropbutton.component.css @@ -155,7 +155,11 @@ .dropbutton .secondary-action { border-top: 1px solid #bfbfba; } - +.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber:before { + background-color: #f2f1eb; + background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df); + background-image: linear-gradient(to bottom, #f6f6f3, #e7e7df); +} /** * Rare instances when a dropbutton is actually just a button. * Copied from Seven's buttons.css.