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

French Geoportal Extensions for OpenLayers libraries

/* SEARCH ENGINE */

[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;
  width: 100%;
  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^="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;
  z-index: 2;
}

[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);
  }

}

[id^="GPsearchEngine"] .GPautoCompleteContainer {
  /* position: absolute; */
  box-shadow: 0 2px 6px 0 rgba(0, 0, 18, 0.16);
  list-style: none;
  overflow: hidden;
  flex-direction: column;
  width: 100%;
  z-index: 1;
}
[id^="GPsearchEngine"] ul li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[id^=GPsearchEngine-].ol-collapsed form[id^=GPsearchInput-Base-] {
  overflow: hidden;
}
[id^=GPsearchEngine-] form[id^=GPsearchInput-Base-] {
  overflow: visible;
}

[id^="GPsearchEngine"] {
    display: flex;
    flex-direction: column;
    padding: 0;
}

[id^="GPsearchEngine"] form[id^=GPsearchInput-Base-].GPSearchBar > :first-child {
    display: flex;
    flex-direction: row;
    padding: 0;
}

[id^="GPsearchEngine"] form[id^=GPsearchInput-Base-] .GPOptionsContainer {
    display: flex;
    height: calc(100% - 2px);
}

[id^="GPsearchEngine"] form[id^=GPsearchInput-Base-] .GPOptionsContainer button {
    margin: 0.5rem;
}

.GPautoCompleteHeader {
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.75rem 0;
}

[id^="GPsearchEngine"] form[id^=GPsearchInput-Base-] .GPautoCompleteHeader button {
  /* margin: 12px 12px 0; */
  max-width: unset;
}
[id^="GPsearchEngine"] form[id^=GPsearchInput-Base-] .GPautoCompleteFooter button {
  margin: 0 12px 12px;
  max-width: unset;
}

[id^="GPsearchEngine"] .GPautoCompleteContainer .GPautoCompleteHeader {
  display: none;
}
[id^="GPsearchEngine"] .GPautoCompleteContainer[data-type="history"] .GPautoCompleteHeader {
  display: block;
}

/* Advanced search panel */
[id^="GPsearchEngine-Advanced"] {
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 2rem);
    overflow: hidden;
}
[id^="GPsearchEngine-Advanced"] [id^="GPsearchEngine-"]{
    max-height: unset;
}

[id^="GPsearchEngine-Advanced"] [id^="GPsearchEngine-"] { 
    position: static;
}
[id^="GPsearchEngine-Advanced"] > div {
    display: flex;
    flex-direction: column;
    width: 100%;
}
[id^="GPsearchEngine-Advanced"] > .GPAdvancedContainer  {
    display: none;
    box-sizing: content-box;
    max-width: 100%;
    max-height: unset;
    padding: 0.75rem 0.75rem 1px;
    box-sizing: border-box;
}
[id^="GPsearchEngine-Advanced"]:has(.GPSearchEngine-advanced-btn[aria-expanded="true"]) > .GPAdvancedContainer  {
    display: flex;
    z-index: 1;
}
[id^="GPsearchEngine-Advanced"] .GPSearchEngine-advanced-btn[aria-expanded="false"]::after {
    transform: rotate(180deg);
}

/* [id^="GPsearchEngine-Advanced"] .GPAdvancedContainer[data-open="true"] > button {
    display: none;
} */

[id^="GPsearchEngine-Advanced"][data-open="true"] section {
    overflow: hidden auto;
}
/* [id^="GPsearchEngine-Advanced"] [data-open="true"] section::before {
    display: none;
} */

[id^="GPsearchEngine-Advanced"] section .fr-collapse {
  box-sizing: border-box;   
}

[id^="GPsearchEngine-Advanced"] [id^="GPsearchInput-Base-"] .GPsearchInputText {
    border-radius: 0.25rem 0.25rem 0 0;
}
[id^="GPsearchEngine-Advanced"] section [id^="GPsearchInput-Base-"] .GPsearchInputSubmit {
    display: none;
}
[id^="GPsearchEngine-Advanced"] section [id^="GPsearchEngine-"] { 
    margin-top: 0.5rem;
}