<div class="m-input-group">
<input type="email" placeholder="firstname.lastname" class="a-input" aria-label="firstname.lastname" aria-describedby="@internetstiftelsen.se">
<span class="m-input-group__label" id="@internetstiftelsen.se">@internetstiftelsen.se</span>
</div>
{{#unless multipleInputs}}
<div class="m-input-group">
{{#if before}}
<span class="m-input-group__label" id="{{before}}">{{before}}</span>
{{/if}}
<input type="{{type}}" placeholder="{{placeholder}}" class="a-input" aria-label="{{placeholder}}" aria-describedby="{{#if before}}{{before}}{{#if after}} {{after}}{{/if}}{{/if}}{{#if after}}{{after}}{{/if}}">
{{#if after}}
<span class="m-input-group__label" id="{{after}}">{{after}}</span>
{{/if}}
</div>
{{/unless}}
{{#if multipleInputs}}
<div class="m-input-group">
<input type="text" placeholder="Name" class="a-input" aria-label="Name" aria-describedby="@">
<span class="m-input-group__label" id="@">@</span>
<input type="text" placeholder="Server" class="a-input" aria-label="Server">
</div>
{{/if}}
{
"type": "email",
"placeholder": "firstname.lastname",
"before": null,
"after": "@internetstiftelsen.se",
"multipleInputs": false
}
@charset 'UTF-8';
@include molecule(input-group) {
display: flex;
align-items: stretch;
@include e(label) {
display: flex;
align-items: center;
padding: 0 rhythm(1);
background: $color-concrete;
border: 1px solid $color-granit;
font-size: rem(16px);
&:first-child {
border-radius: $border-radius 0 0 $border-radius;
border-right: none;
}
&:last-child {
border-radius: 0 $border-radius $border-radius 0;
border-left: none;
}
&:not(:first-child):not(:last-child) {
border-left: none;
border-right: none;
}
}
@include atom(input) {
&:first-child {
border-radius: $border-radius 0 0 $border-radius;
}
&:last-child {
border-radius: 0 $border-radius $border-radius 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
}
No notes defined.