No notes defined.
<!-- Default -->
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
<!-- Disabled -->
<div class="formSelect is-disabled">
<label class="label is-optional" data-disabled="true" for="field-disabled">Auswahlliste</label>
<span class="formSelect-input">
<span class="select" data-disabled="true">
<select id="field-disabled" disabled="disabled">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
<div class="formMessage js-formValidator-message">
Dieses Angaben können nicht geändert werden.
</div>
</div>
<!-- Valid -->
<div class="formSelect is-required">
<label class="label is-required" data-invalid="false" for="field-valid">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-valid" required="" aria-invalid="false">
<option value="" disabled="disabled" selected="selected">Please select</option>
<option value="1">
Option 1
</option>
<option value="2" selected="selected">
Option 2
</option>
<option value="3">
Option 3
</option>
</select>
</span>
</span>
<div class="formMessage js-formValidator-message">
Ich bin erfolgreich geprüft.
</div>
</div>
<!-- invalid -->
<div class="formSelect is-required">
<label class="label is-required" data-invalid="true" for="field-invalid">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-invalid" required="" aria-invalid="true">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
<div class="formMessage js-formValidator-message">
Ich bin die Fehlerbeschreibung.
</div>
</div>
<!-- Multiple Selection (do not use!) -->
<div class="formSelect">
<label class="label is-optional" for="field-multiple-select">Auswahlliste</label>
<span class="formSelect-input is-multiple">
<span class="select">
<select id="field-multiple-select">
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
<div class="formSelect{{#if is-required}} is-required{{/if}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"{{#if validate}} data-validate="true"{{/if}}>
{{> @label}}
<span class="formSelect-input{{#is-multiple}} is-multiple{{/is-multiple}}">
{{render '@select' (contextData '@formselect' this) merge=true}}
</span>
{{#message}}
{{render '@formmessage' (contextData '@formselect' this) merge=true}}
{{/message}}
</div>
/* Default */
{
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
/* Disabled */
{
"id": "disabled",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
],
"is-disabled": true,
"message": {
"content": "Dieses Angaben können nicht geändert werden."
}
}
/* Valid */
{
"id": "valid",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2,
"is-selected": true
},
{
"label": "Option 3",
"value": 3
}
],
"is-required": true,
"is-valid": true,
"message": {
"content": "Ich bin erfolgreich geprüft."
}
}
/* invalid */
{
"id": "invalid",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
],
"is-required": true,
"is-invalid": true,
"message": {
"content": "Ich bin die Fehlerbeschreibung."
}
}
/* Multiple Selection (do not use!) */
{
"id": "multiple-select",
"label": "Auswahlliste",
"placeholder": false,
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
],
"is-multiple": true
}
@import "_formSelect.styles";
%formSelect {
@include stack-spacing();
@include field-stacking();
.label,
.select {
@include stack-spacing(0);
}
}
%formSelect--multiple {
@extend %formSelect;
&::after { // Marker
display: none;
}
select {
padding: (math.div(4, 5) * nth($field_padding, 2)) nth($field_padding, 2);
}
option + option {
margin-top: .2em;
}
}
.formSelect {
@extend %formSelect;
&.is-multiple {
@extend %formSelect--multiple;
}
}