You are here

search_api_federated_solr_autocomplete.css in Search API Federated Solr 8.3

#autocomplete-wrapper {
  position: relative;
}

#federated-search-page-block-form .search-autocomplete-container {
  position: absolute;
  border: 1px solid #999;
  background: #fff;
  z-index: 1000;
  width: 100%;
  display: block;
}

#federated-search-page-block-form .search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__title {
  font-size:.8em;
  line-height:1.46667em;
  position: relative;
  font-weight: bold;
  padding: 10px 20px;
  border-bottom: 1px dashed #ccc;
  display: block;
}
.search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__close-button {
  font-size:.8em;
  line-height:1.46667em;
  font-style:normal;
  padding:3px 7px;
  border-color:#ccc;
  color:#333;
  cursor:pointer;
  position:absolute;
  right:5px
}

.search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__close-button:hover {
  border-color:#b5b5b5;
  background-color:#f6f6f6
}

#federated-search-page-block-form .search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__directions {
  display: block;
  padding:10px 20px;
}

#federated-search-page-block-form .search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__directions-item {
  display: block;
  font-size:.8em;
  line-height:1.46667em;
}

.search-autocomplete-container:not(.visually-hidden) .autocomplete-suggestion {
  cursor:pointer;
  background-color:#fff;
  white-space: nowrap;
}

.search-autocomplete-container:not(.visually-hidden) .autocomplete-suggestion__link {
  display: block;
  color:#737373;
  text-decoration: none;
  font-size:.8em;
  line-height:1.46667em;
  padding:15px 20px;
  border:1px solid #fff;
  border-bottom-color:#ccc;
}

.search-autocomplete-container:not(.visually-hidden) .highlight .autocomplete-suggestion__link,
.search-autocomplete-container:not(.visually-hidden) .autocomplete-suggestion__link:hover {
  text-decoration: underline;
  background-color:#f6f6f6;
  border:1px solid #f6f6f6;
  border-bottom-color:#ccc;
}

.autocomplete-selected {
  background: #f0f0f0;
}

.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
}

File

css/search_api_federated_solr_autocomplete.css
View source
  1. #autocomplete-wrapper {
  2. position: relative;
  3. }
  4. #federated-search-page-block-form .search-autocomplete-container {
  5. position: absolute;
  6. border: 1px solid #999;
  7. background: #fff;
  8. z-index: 1000;
  9. width: 100%;
  10. display: block;
  11. }
  12. #federated-search-page-block-form .search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__title {
  13. font-size:.8em;
  14. line-height:1.46667em;
  15. position: relative;
  16. font-weight: bold;
  17. padding: 10px 20px;
  18. border-bottom: 1px dashed #ccc;
  19. display: block;
  20. }
  21. .search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__close-button {
  22. font-size:.8em;
  23. line-height:1.46667em;
  24. font-style:normal;
  25. padding:3px 7px;
  26. border-color:#ccc;
  27. color:#333;
  28. cursor:pointer;
  29. position:absolute;
  30. right:5px
  31. }
  32. .search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__close-button:hover {
  33. border-color:#b5b5b5;
  34. background-color:#f6f6f6
  35. }
  36. #federated-search-page-block-form .search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__directions {
  37. display: block;
  38. padding:10px 20px;
  39. }
  40. #federated-search-page-block-form .search-autocomplete-container:not(.visually-hidden) .search-autocomplete-container__directions-item {
  41. display: block;
  42. font-size:.8em;
  43. line-height:1.46667em;
  44. }
  45. .search-autocomplete-container:not(.visually-hidden) .autocomplete-suggestion {
  46. cursor:pointer;
  47. background-color:#fff;
  48. white-space: nowrap;
  49. }
  50. .search-autocomplete-container:not(.visually-hidden) .autocomplete-suggestion__link {
  51. display: block;
  52. color:#737373;
  53. text-decoration: none;
  54. font-size:.8em;
  55. line-height:1.46667em;
  56. padding:15px 20px;
  57. border:1px solid #fff;
  58. border-bottom-color:#ccc;
  59. }
  60. .search-autocomplete-container:not(.visually-hidden) .highlight .autocomplete-suggestion__link,
  61. .search-autocomplete-container:not(.visually-hidden) .autocomplete-suggestion__link:hover {
  62. text-decoration: underline;
  63. background-color:#f6f6f6;
  64. border:1px solid #f6f6f6;
  65. border-bottom-color:#ccc;
  66. }
  67. .autocomplete-selected {
  68. background: #f0f0f0;
  69. }
  70. .visually-hidden {
  71. position: absolute !important;
  72. clip: rect(1px 1px 1px 1px);
  73. }