autocomplete-loading.module.css

Same filename in this branch
  1. 11.x core/themes/olivero/css/components/autocomplete-loading.module.css
  2. 11.x core/themes/stable9/css/system/components/autocomplete-loading.module.css
  3. 11.x core/modules/system/css/components/autocomplete-loading.module.css
  4. 11.x core/misc/components/autocomplete-loading.module.css
  5. 11.x core/themes/stable9/css/core/components/autocomplete-loading.module.css
Same filename in other branches
  1. 9 core/themes/olivero/css/components/autocomplete-loading.module.css
  2. 9 core/themes/stable9/css/system/components/autocomplete-loading.module.css
  3. 9 core/themes/claro/css/components/autocomplete-loading.module.css
  4. 9 core/themes/stable/css/system/components/autocomplete-loading.module.css
  5. 9 core/modules/system/css/components/autocomplete-loading.module.css
  6. 8.9.x core/themes/claro/css/components/autocomplete-loading.module.css
  7. 8.9.x core/themes/stable/css/system/components/autocomplete-loading.module.css
  8. 8.9.x core/modules/system/css/components/autocomplete-loading.module.css
  9. 10 core/themes/olivero/css/components/autocomplete-loading.module.css
  10. 10 core/themes/stable9/css/system/components/autocomplete-loading.module.css
  11. 10 core/themes/claro/css/components/autocomplete-loading.module.css
  12. 10 core/modules/system/css/components/autocomplete-loading.module.css
  13. 10 core/misc/components/autocomplete-loading.module.css
  14. 10 core/themes/stable9/css/core/components/autocomplete-loading.module.css

Visual styles for animated throbber.

See also

autocomplete.js

File

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

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Visual styles for animated throbber.
  10. *
  11. * @see autocomplete.js
  12. */
  13. /* cspell:ignore is-autocompleting */
  14. /**
  15. * Since the autocomplete library is attached conditionally and not globally,
  16. * we can be 99% sure that the default icon will be used.
  17. * With inline SVGs we can prevent a HTTP request and repaint addressing the
  18. * autocomplete input's background — until are sure that it will be pushed by
  19. * the server with HTTP/2.
  20. *
  21. * The active autocomplete state's background-image is inlined because non-used
  22. * CSS selectors are usually ignored; popular browsers don't download their
  23. * 'url' references.
  24. * If these selectors become active, the browser needs some time for painting
  25. * previously ignored remote asset: it should get it from server, parse it and
  26. * repaint the background of autocomplete field. With the inlined background we
  27. * can prevent an additional timeout caused by a new request/response pair.
  28. * Besides this, the autocomplete event itself may easily finish before the
  29. * missing asset gets downloaded/parsed/painted, and the missing instant visual
  30. * feedback would be a usability/accessibility issue as well.
  31. */
  32. .js .form-autocomplete {
  33. margin-inline-end: calc(var(--input-border-size) - 1.5 * var(--input-padding-horizontal));
  34. padding-inline-end: calc(var(--input-padding-horizontal) * 2.5 - var(--input-border-size));
  35. background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
  36. background-repeat: no-repeat;
  37. background-position: 100% 50%;
  38. }
  39. .js .form-autocomplete.is-autocompleting {
  40. 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");
  41. background-position: center right -10px;
  42. }
  43. .js[dir="rtl"] .form-autocomplete {
  44. background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");
  45. background-position: 0 50%;
  46. }
  47. .js[dir="rtl"] .form-autocomplete.is-autocompleting {
  48. 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");
  49. background-position: center left 10px;
  50. }
  51. /**
  52. * Autocomplete wrapper for autocomplete message.
  53. */
  54. .claro-autocomplete {
  55. position: relative;
  56. display: inline-block;
  57. max-width: 100%;
  58. }
  59. .claro-autocomplete__message {
  60. position: absolute;
  61. inset-inline-end: 0;
  62. inset-block-end: 100%;
  63. max-width: 100%;
  64. margin-block-end: 0.15rem;
  65. color: var(--color-link);
  66. font-size: var(--font-size-xxs); /* ~11px */
  67. font-weight: bold;
  68. line-height: calc(18rem / 16); /* 18px */
  69. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.