geopf-extensions-openlayers/src/packages/CSS/Controls/SearchEngine/GPFsearchEngine.css

French Geoportal Extensions for OpenLayers libraries

/* SEARCH ENGINE */

[id^="GPsearchEngine-"] {
  top: 8px;
  left: 46px;
}

[id^="GPsearchEngine-"] {
  /* dsfr */
  display: flex;
}

#position-container-bottom-right > [id^="GPsearchEngine-"],
#position-container-top-right > [id^="GPsearchEngine-"] {
  flex-direction: column;
  align-items: end;
}
/* Showing/hiding search engine input */

button[id^=GPshowSearchEnginePicto] {
  display: inline-block;
  transition: border-radius 0s ease-out 0s;
  transition-delay: 0.5s;
}

button[id^=GPshowSearchEnginePicto][aria-pressed="true"] {
  transition: border-radius 0.5s ease-out 0s;
}

button[id^="GPshowSearchEnginePicto-"][aria-pressed="true"] {
  border-bottom-right-radius: 0;
  transition-delay: 0s;
}

button[id^="GPshowSearchEnginePicto-"][aria-pressed="false"] + form[id^=GPsearchInput-] ~ div button[id^=GPshowAdvancedSearch],
button[id^="GPshowSearchEnginePicto-"][aria-pressed="false"] + form[id^=GPsearchInput-] ~ div button[id^=GPshowGeolocate],
button[id^="GPshowSearchEnginePicto-"][aria-pressed="false"] + form[id^=GPsearchInput-] ~ div button[id^=GPshowSearchByCoordinate] {
  display: none;
}

button[id^="GPshowSearchEnginePicto-"][aria-pressed="true"] + form[id^=GPsearchInput-] ~ div button[id^=GPshowAdvancedSearch],
button[id^="GPshowSearchEnginePicto-"][aria-pressed="true"] + form[id^=GPsearchInput-] ~ div button[id^=GPshowGeolocate],
button[id^="GPshowSearchEnginePicto-"][aria-pressed="true"] + form[id^=GPsearchInput-] ~ div button[id^=GPshowSearchByCoordinate] {
  display: inline-block;
}

[id^=GPshowSearchEngine-] + button + form[id^=GPsearchInput-] {
  max-width: 0px;
}

/* div[id^=GPautoCompleteList] {
  display: none;
} */

/* button[id^="GPshowSearchEnginePicto-"][aria-pressed="true"] + form[id^=GPsearchInput-] + div[id^=GPautoCompleteList] {
  display: block;
} */

/* Simple search input */

form[id^=GPsearchInput-] {
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: max-width 0.5s ease-out 0s;
}

button[id^=GPsearchInputReset] {
  position: absolute;
  top: 0px;
  right: 0px;
  border: unset;
}

/* General panels */


/* Advanced search picto */

button[id^=GPshowAdvancedSearch] {
  transition: border-radius 0s ease-out 0s;
  transition-delay: 0.5s;
}

/* Advanced search panel */

/* button[id^=GPshowAdvancedSearch][aria-pressed="true"] + div[id^=GPadvancedSearchPanel] {
  display: inline-block;
  visibility: visible;
  opacity: 100%;
}

button[id^=GPshowAdvancedSearch][aria-pressed="false"] + div[id^=GPadvancedSearchPanel] {
  display: none;
  visibility: hidden;
  opacity: 0%;
} */

dialog[id^=GPcoordinateSearchPanel],
dialog[id^=GPadvancedSearchPanel] {
  height: inherit;
  vertical-align: top;
  overflow: hidden;
  bottom: unset; /* fix dsfr */
}

form[id^=GPcoordinateSearchForm],
form[id^=GPadvancedSearchForm] {
  max-height: 250px;
  overflow-y: auto;
  padding-left: 15px;
  padding-right: 15px;
}

input[id^=GPcoordinateSearchSubmit],
input[id^=GPadvancedSearchSubmit] {
  margin-top: 10px;
  margin-bottom: 15px;
}

form[id^=GPadvancedSearchForm] > form[id^=GPcoordinateSearchForm] {
  padding: 0;
  max-height: unset;
  display: none;
}

form[id^=GPadvancedSearchForm]:has(option[value="Coordinates"]:checked) > form[id^=GPcoordinateSearchForm] {
  display: unset;
}

form[id^=GPadvancedSearchForm]:has(option[value="Coordinates"]:checked) > input[id^=GPadvancedSearchSubmit] {
  display: none;
}

/* Simple search input */

[id^="GPsearchInput"] {}


[id^="GPshowSearchDiv"]{
  display: flex;
}

/* General panels */

.GPsearchFirstLineWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Autocomplete list / geocode results */

.GPlabelTitle {
  font-weight: bold;
  margin-bottom: 0;
}

[id^="GPautocompleteResults-"] {
  display: flex;
  flex-direction: column;
  width: 100%;
}

[id^="GPautoCompleteList"] {
  margin-left: 33px;
}

[id^="GPautoCompleteList"] {
  /* overflow-y: auto; */
}


[id^="GPautocompleteResultsSuggest"],
[id^="GPautocompleteResultsLocation"] {
  width: inherit;
  overflow-y: auto;
}

/* Mode Mobile */

@media (max-width: 576px) {

  button[id^="GPshowSearchEnginePicto-"][aria-pressed="true"] + form[id^=GPsearchInput-] {
    /* 56px: widget de gauche, 40px: bouton loupe, 58px: bouton géoloc, 16px: padding + border des boutons droite, 10px: padding du bouton géoloc*/
    max-width: calc(100vw - 56px - 40px - 58px - 16px - 10px);
  }

}