<div class="atm-form-location-filter ">
<div class="atm-form-input ">
<input class="form-input" type="text" id="vl" name="vl" value="Maastricht">
<label class="atm-form-label form-label " for="vl">Wat is je adres?</label>
<i class="atm-icon form-input-error-icon far fa-times "></i>
<i class="atm-icon form-input-valid-icon far fa-check "></i>
</div>
<label class="atm-form-label form-label sr-only" for="vdis">Afstand</label>
<div class="atm-form-select ">
<select class="form-select" id="vdis" name="vdis">
<option value="5">5 km</option>
<option value="10">10 km</option>
<option value="15" selected>15 km</option>
<option value="20">20 km</option>
<option value="25">25 km</option>
<option value="50">50 km</option>
</select>
</div>
</div>
<div class="atm-form-location-filter {{modifier}}">
{{render '@input' location merge=true}}
{{render '@label' distanceLabel merge=true}}
{{render '@select' distance merge=true}}
</div>
{
"modifier": "",
"location": {
"id": "vl",
"name": "vl",
"type": "text",
"value": "Maastricht",
"label": {
"text": "Wat is je adres?",
"for": "vl"
}
},
"distanceLabel": {
"text": "Afstand",
"for": "vdis",
"modifier": "sr-only"
},
"distance": {
"id": "vdis",
"name": "vdis",
"options": [
{
"value": "5",
"text": "5 km"
},
{
"value": "10",
"text": "10 km"
},
{
"value": "15",
"text": "15 km",
"selected": true
},
{
"value": "20",
"text": "20 km"
},
{
"value": "25",
"text": "25 km"
},
{
"value": "50",
"text": "50 km"
}
]
}
}
.atm-form-location-filter {
@apply flex items-stretch w-full rounded-full bg-input font-display;
.atm-form-input {
@apply flex-1 min-w-0;
.form-input {
@apply w-full h-full border-none bg-transparent rounded-full pl-5 pr-3 py-4;
&:focus {
@apply ring-0 outline-none;
}
}
/* The autocomplete dropdown is injected into the input, which is only part of the pill, so let it grow past it. */
.autocomplete-dropdown {
@apply left-0 right-auto w-auto min-w-full max-w-64;
.autocomplete-item {
@apply px-4 py-3;
}
}
/* Pinned on both sides so a long placeholder is cut off instead of running into the radius dropdown. */
.form-label {
@apply left-5 right-2 truncate;
}
}
/* The radius sits in the same pill as the address, separated only by a hairline. */
.atm-form-select {
@apply relative flex shrink-0 items-center;
&::before {
content: '';
@apply absolute left-0 top-1/2 h-6 w-px -translate-y-1/2 bg-gray-200;
}
.form-select {
@apply w-auto h-full border-none bg-transparent cursor-pointer py-4 pl-2 pr-7 text-sm;
&:focus {
@apply ring-0 outline-none border-none;
}
}
}
}
No notes defined.