You are here

autocomplete_deluxe.claro.css in Autocomplete Deluxe 2.0.x

.autocomplete-deluxe-item {
  padding: 7px 30px 7px 10px;
  border-radius: 15px;
  background-color: #e9ecf1;
  font-weight: 500;
}

.autocomplete-deluxe-item-delete {
  top: 5.3em;
  right: 8px;
  width: 16px;
  height: 16px;
  background: url("../images/close.svg");
}

#autocomplete-deluxe-input {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.ui-autocomplete {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ui-autocomplete::-webkit-scrollbar {
  display: none;
}

.node-form div.autocomplete-deluxe-container:not(.autocomplete-deluxe-multiple) {
  padding: 0;
}

div.autocomplete-deluxe-container {
  width: 100%;
  padding: 0.68rem 1.875rem 0.68rem 0.93rem;
  color: #222330;
  border: 1px solid #8e929c;
  border-radius: 0.125rem;
  background: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
}

@media screen and (max-width: 81.25rem) {
  .node-form div.autocomplete-deluxe-container {
    width: 100%;
  }
}

.node-form div.autocomplete-deluxe-container:not(.autocomplete-deluxe-multiple) input.autocomplete-deluxe-form {
  width: 100%;
  min-height: 3rem;
  padding: 0.68rem 1.875rem 0.68rem 0.93rem;
  background: white;
}

.node-form div.autocomplete-deluxe-container:not(.autocomplete-deluxe-multiple) .autocomplete-deluxe-throbber {
  top: 0.93rem;
}

.node-form div.autocomplete-deluxe-container .autocomplete-deluxe-item {
  margin: 0 0.31rem 0.18rem 0;
}

.node-form div.autocomplete-deluxe-container input.autocomplete-deluxe-form {
  min-height: 1.25rem;
  padding-top: 0;
  padding-bottom: 0;
}

.node-form div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber {
  position: absolute;
  top: 0.875rem;
  right: 0.625rem;
  width: 1.875rem;
  height: 100%;
}

.node-form div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open {
  background: url("../images/search-autocompleting.svg") no-repeat;
}

.node-form div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-closed {
  background: url("../images/search-autocomplete.svg") no-repeat;
}

.node-form .claro-autocomplete {
  width: 65%;
}

.node-form .claro-autocomplete .claro-autocomplete__message {
  display: none;
}

.node-form .claro-autocomplete input {
  width: 100%;
  padding-right: 1.875rem;
}

.node-form .accordion .claro-autocomplete {
  width: 100%;
}

.node-form .js input.form-autocomplete {
  background: url("../images/search-autocomplete.svg") no-repeat 100% 50%;
}

.node-form .js input.form-autocomplete.ui-autocomplete-loading {
  background: url("../images/search-autocompleting.svg") no-repeat 100% 50%;
}

.node-form .js .is-autocompleting + .claro-autocomplete__message {
  display: none;
}

@media screen and (max-width: 81.25rem) {
  .node-form .claro-autocomplete {
    width: 100%;
  }
}

File

assets/css/autocomplete_deluxe.claro.css
View source
  1. .autocomplete-deluxe-item {
  2. padding: 7px 30px 7px 10px;
  3. border-radius: 15px;
  4. background-color: #e9ecf1;
  5. font-weight: 500;
  6. }
  7. .autocomplete-deluxe-item-delete {
  8. top: 5.3em;
  9. right: 8px;
  10. width: 16px;
  11. height: 16px;
  12. background: url("../images/close.svg");
  13. }
  14. #autocomplete-deluxe-input {
  15. -webkit-box-shadow: none;
  16. box-shadow: none;
  17. }
  18. .ui-autocomplete {
  19. scrollbar-width: none;
  20. -ms-overflow-style: none;
  21. }
  22. .ui-autocomplete::-webkit-scrollbar {
  23. display: none;
  24. }
  25. .node-form div.autocomplete-deluxe-container:not(.autocomplete-deluxe-multiple) {
  26. padding: 0;
  27. }
  28. div.autocomplete-deluxe-container {
  29. width: 100%;
  30. padding: 0.68rem 1.875rem 0.68rem 0.93rem;
  31. color: #222330;
  32. border: 1px solid #8e929c;
  33. border-radius: 0.125rem;
  34. background: #fff;
  35. -webkit-box-shadow: none;
  36. box-shadow: none;
  37. }
  38. @media screen and (max-width: 81.25rem) {
  39. .node-form div.autocomplete-deluxe-container {
  40. width: 100%;
  41. }
  42. }
  43. .node-form div.autocomplete-deluxe-container:not(.autocomplete-deluxe-multiple) input.autocomplete-deluxe-form {
  44. width: 100%;
  45. min-height: 3rem;
  46. padding: 0.68rem 1.875rem 0.68rem 0.93rem;
  47. background: white;
  48. }
  49. .node-form div.autocomplete-deluxe-container:not(.autocomplete-deluxe-multiple) .autocomplete-deluxe-throbber {
  50. top: 0.93rem;
  51. }
  52. .node-form div.autocomplete-deluxe-container .autocomplete-deluxe-item {
  53. margin: 0 0.31rem 0.18rem 0;
  54. }
  55. .node-form div.autocomplete-deluxe-container input.autocomplete-deluxe-form {
  56. min-height: 1.25rem;
  57. padding-top: 0;
  58. padding-bottom: 0;
  59. }
  60. .node-form div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber {
  61. position: absolute;
  62. top: 0.875rem;
  63. right: 0.625rem;
  64. width: 1.875rem;
  65. height: 100%;
  66. }
  67. .node-form div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open {
  68. background: url("../images/search-autocompleting.svg") no-repeat;
  69. }
  70. .node-form div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-closed {
  71. background: url("../images/search-autocomplete.svg") no-repeat;
  72. }
  73. .node-form .claro-autocomplete {
  74. width: 65%;
  75. }
  76. .node-form .claro-autocomplete .claro-autocomplete__message {
  77. display: none;
  78. }
  79. .node-form .claro-autocomplete input {
  80. width: 100%;
  81. padding-right: 1.875rem;
  82. }
  83. .node-form .accordion .claro-autocomplete {
  84. width: 100%;
  85. }
  86. .node-form .js input.form-autocomplete {
  87. background: url("../images/search-autocomplete.svg") no-repeat 100% 50%;
  88. }
  89. .node-form .js input.form-autocomplete.ui-autocomplete-loading {
  90. background: url("../images/search-autocompleting.svg") no-repeat 100% 50%;
  91. }
  92. .node-form .js .is-autocompleting + .claro-autocomplete__message {
  93. display: none;
  94. }
  95. @media screen and (max-width: 81.25rem) {
  96. .node-form .claro-autocomplete {
  97. width: 100%;
  98. }
  99. }