Verified Commit 30c7b074 authored by Alex Pott's avatar Alex Pott
Browse files

Issue #3308733 by mherchel, ckrina, chetansonawane, andy-blum, lauriii,... 

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

(cherry picked from commit eef69b02)
parent b7a9d21e

core/themes/claro/css/components/autocomplete-loading.module.css

+4 −2
Original line number Diff line number Diff line
@@ -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. */

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

+2 −0
Original line number Diff line number Diff line
@@ -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 */

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

+1 −1
Original line number Diff line number Diff line 
<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>
 
 No newline at end of file
 
<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>

core/themes/claro/images/icons/003ecc/spinner.svg

+1 −1
Original line number Diff line number Diff line 
<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>
 
 No newline at end of file
 
<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>