Home Explore Help
Sign In
bachir
/
drupal-rorschach
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: fbd345af8d
Branches Tags
drupal-rorsc...
/
web
/
themes
/
custom
/
rorschach
/
css
/
components
/
autocomplete-loading.module.pcss.css

autocomplete-loading.module.pcss.css 2.0 KB
History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 
  1. /**
    2. 

  2.  * @file
    3. 

  3.  * Visual styles for autocomplete input field.
    4. 

  4.  */
    5. 

  5. 

  6. @import "../base/variables.pcss.css";
    7. 

  7. 

  8. :root {
    9. 

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

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

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

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

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

  14. }
    15. 

  15. 

  16. html.js .form-autocomplete {
    17. 

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

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

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

  20.   background-repeat: no-repeat;
    21. 

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

  22. 

  23.   &:disabled {
    24. 

  24.     background-color: var(--color--gray-90);
    25. 

  25.   }
    26. 

  26. 

  27.   &.ui-autocomplete-loading {
    28. 

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

  29.   }
    30. 

  30. }
    31. 

  31. 

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

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

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

  35.   background-repeat: no-repeat;
    36. 

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

  37. 

  38.   &:disabled {
    39. 

  39.     background-color: var(--color--gray-90);
    40. 

  40.   }
    41. 

  41. 

  42.   &.ui-autocomplete-loading {
    43. 

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

  44.   }
    45. 

  45. }
    46. 

  46. 

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

  48. /* rtl:begin:ignore */
    49. 

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

  50. _:-ms-fullscreen,
    51. 

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

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

  53. }
    54. 

  54. 

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

  56. _:-ms-fullscreen,
    57. 

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

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

  59. }
    60.