Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3308733 by mherchel, ckrina, chetansonawane, andy-blum, lauriii, alexpott, Abhijith S, ameymudras, Asha Nair, Shiv Yadav, ranjith_kumar_k_u, Libbna: Claro: "Spinner" loading icon not vertically aligned properly

merge-requests/2857/head
Alex Pott 2022-10-10 15:32:41 +01:00
parent 68b60d9c47
commit eef69b0281
No known key found for this signature in database
GPG Key ID: BDA67E7EE836E5CE
4 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/themes/claro/css/components/autocomplete-loading.module.css
View File

@ -47,11 +47,13 @@
}
.js .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
background-position: center right -10px;
}
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
background-position: center left 10px;
}
/* IE11 does not animate inline SVG. */

2
core/themes/claro/css/components/autocomplete-loading.module.pcss.css
View File

@ -40,9 +40,11 @@
}
.js .form-autocomplete.is-autocompleting {
background-image: url(../../images/icons/003ecc/spinner.svg);
background-position: center right -10px;
}
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
background-image: url(../../images/icons/003ecc/spinner-rtl.svg);
background-position: center left 10px;
}
/* IE11 does not animate inline SVG. */
/* stylelint-disable-next-line selector-type-no-unknown */

2
core/themes/claro/images/icons/003ecc/spinner-rtl.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" height="20" width="40"><style>@keyframes s{0%{transform:rotate(0deg) translate(-50%,-50%)}50%{transform:rotate(-430deg) translate(-50%,-50%);stroke-dashoffset:20}to{transform:rotate(-720deg) translate(-50%,-50%)}}</style><circle fill="none" cy="5" cx="5" stroke="#003ecc" stroke-dashoffset="6.125" stroke-dasharray="25" style="animation:s 1s linear infinite" r="4"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" height="20" width="40"><style>@keyframes s{0%{transform:rotate(0deg) translate(-50%,0)}50%{transform:rotate(-430deg) translate(-50%,0);stroke-dashoffset:20}to{transform:rotate(-720deg) translate(-50%,0)}}</style><circle fill="none" cy="5" cx="5" stroke="#003ecc" stroke-dashoffset="6.125" stroke-dasharray="25" style="animation:s 1s linear infinite;transform-origin:left" r="4"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 432 B

After

Width:  |  Height:  |  Size: 446 B

2
core/themes/claro/images/icons/003ecc/spinner.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" height="20" width="40"><style>@keyframes s{0%{transform:rotate(0deg) translate(-50%,-50%)}50%{transform:rotate(430deg) translate(-50%,-50%);stroke-dashoffset:20}to{transform:rotate(720deg) translate(-50%,-50%)}}</style><circle fill="none" cy="5" cx="5" stroke="#003ecc" stroke-dashoffset="6.125" stroke-dasharray="25" style="animation:s 1s linear infinite" r="4"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" height="20" width="40"><style>@keyframes s{0%{transform:rotate(0deg) translate(-50%,0)}50%{transform:rotate(430deg) translate(-50%,0);stroke-dashoffset:20}to{transform:rotate(720deg) translate(-50%,0)}}</style><circle fill="none" cy="5" cx="5" stroke="#003ecc" stroke-dashoffset="6.125" stroke-dasharray="25" style="animation:s 1s linear infinite;transform-origin:left" r="4"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 430 B

After

Width:  |  Height:  |  Size: 444 B