You are here

Home » API reference » Drupal 10

autocomplete-loading.module.pcss.css in Drupal 10

Same filename in this branch
  1. 10 core/themes/claro/css/components/autocomplete-loading.module.pcss.css
  2. 10 core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/autocomplete-loading.module.pcss.css

Visual styles for autocomplete input field.

File

core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
View source 
  1. /**

  2.  * @file

  3.  * Visual styles for autocomplete input field.

  4.  */

  5. 

  6. @import "../base/media-queries.pcss.css";

  7. 

  8. :root {

  9.   --autocomplete-search-icon-url: url("../../images/magnifying-glass.svg");

  10.   --autocomplete-throbber-icon-url: url("../../images/throbber.svg");

  11.   --autocomplete-throbber-IE-icon-url: url("../../images/throbber.gif");

  12.   --autocomplete-throbber-IE-size: 1.125rem 1.125rem; /* 18 18 */

  13.   --autocomplete-icon-right-offset: var(--sp1);

  14. }

  15. 

  16. html.js .form-autocomplete {

  17.   padding-inline-end: var(--sp3);

  18.   background-color: var(--color--white);

  19.   background-image: var(--autocomplete-search-icon-url);

  20.   background-repeat: no-repeat;

  21.   background-position: right var(--autocomplete-icon-right-offset) center;  /* LTR */

  22. 

  23.   &:disabled {

  24.     background-color: var(--color--gray-100);

  25.   }

  26. 

  27.   &.ui-autocomplete-loading {

  28.     background: var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center;

  29.   }

  30. }

  31. 

  32. html.js[dir="rtl"] .form-autocomplete {

  33.   background-color: var(--color--white);

  34.   background-image: var(--autocomplete-search-icon-url);

  35.   background-repeat: no-repeat;

  36.   background-position: left var(--autocomplete-icon-right-offset) center;

  37. 

  38.   &:disabled {

  39.     background-color: var(--color--gray-100);

  40.   }

  41. 

  42.   &.ui-autocomplete-loading {

  43.     background: var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center;

  44.   }

  45. }

  46. 

  47. /* IE11 does not animate inline SVG. */

  48. /* rtl:begin:ignore */

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

  50. _:-ms-fullscreen,

  51. html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading {

  52.   background: var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);

  53. }

  54. 

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

  56. _:-ms-fullscreen,

  57. html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading {

  58.   background: var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);

  59. }