autocomplete-loading.module.css in Drupal 10

Visual styles for animated throbber.

See also

autocomplete.js

File

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

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Visual styles for animated throbber.
 *
 * @see autocomplete.js
 */

/**
 * Since the autocomplete library is attached conditionally and not globally,
 * we can be 99% sure that the default icon will be used.
 * With inline SVGs we can prevent a HTTP request and repaint addressing the
 * autocomplete input's background — until are sure that it will be pushed by
 * the server with HTTP/2.
 *
 * The autocompleting (active) state's background-image is inlined because
 * non-used CSS selectors are usually ignored; popular browsers don't download
 * their 'url' references.
 * If these selectors become active, the browser needs some time for painting
 * previously ignored remote asset: it should get it from server, parse it and
 * repaint the background of autocomplete field. With the inlined background we
 * can prevent an additional timeout caused by a new request/response pair.
 * Besides this, the autocompleting event itself may easily finish before the
 * missing asset gets downloaded/parsed/painted, and the missing instant visual
 * feedback would be a usability/accessibility issue as well.
 */

.js .form-autocomplete {
  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");
  background-repeat: no-repeat;
  background-position: 100% 50%;
}

.js .form-autocomplete::-ms-clear {
  display: none;
}

.js[dir="rtl"] .form-autocomplete {
  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");
  background-position: 0 50%;
}

.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");
}

.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");
}

/* IE11 does not animate inline SVG. */

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,
.js .form-autocomplete.is-autocompleting {
  background-image: url("../../images/spinner-ltr.gif");
  background-size: 2.5rem 1.25rem;
}

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
  background-image: url("../../images/spinner-rtl.gif");
}

/**
 * Autocomplete wrapper for autocompleting message.
 */

.claro-autocomplete {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.claro-autocomplete__message {
  position: absolute;
  right: 0;
  bottom: 100%;
  max-width: 100%;
  margin-bottom: 0.15rem;
  color: var(--color-link);
  font-size: var(--font-size-xxs); /* ~11px */
  font-weight: bold;
  line-height: calc(18rem / 16); /* 18px */
}

[dir="rtl"] .claro-autocomplete__message {
  right: auto;
  left: 0;
}