81 lines
4.1 KiB
CSS
81 lines
4.1 KiB
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[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,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,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;
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|