<div class="form-group form-group--has-info">
<label class="label" for="form-group-input-info">Ein Eingabefeld</label>
<div class="form-group__inner">
<input class="input input--text" type="text" placeholder="Das ist ein Platzhalter" id="form-group-input-info" name="form-group-input-info" />
<details class="form-group__info">
<summary class="form-group__info-header">
<svg class="icon icon--info" id="icon-1a7c" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-info"></use>
</svg>
</summary>
<div class="form-group__info-desc">
<h4 class="form-group__info-desc-headline">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</details>
</div>
</div>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
//- Tag
tag = group ? 'fieldset' : 'div';
//- Label settings
labelSettings = labelSettings || {};
labelSettings.label = label;
labelSettings.labelFor = id || `form-group-${randomString()}`;
//- Render label as legend if group
if (group) labelSettings.legend = true;
//- Form element settings
settings = settings || {};
// Add id if not group
if (!group) settings.id = labelSettings.labelFor;
// Set name global for group
if (group && name) settings.name = name;
//- Options
if (disabled) settings.disabled = labelSettings.disabled = true;
if (invalid) settings.invalid = labelSettings.invalid = true;
//- Required
if (required) {
labelSettings.required = true;
settings.required = true;
}
//- Hideable
if (hideable) attr['data-hideable'] = true;
//- Hideable
if (hidden) attr.class.push('form-group--hidden');
//- Info element
if (info) attr.class.push('form-group--has-info');
//- Fullwide
if (fullwide) attr.class.push('form-group--fullwide');
//- Section
if (section) attr.class.push('form-group-section');
//- Medium section spacing
if (sectionMedium) attr.class.push('form-group-section--medium');
//- Large section spacing
if (sectionLarge) attr.class.push('form-group-section--large');
//- Inline
if (inline) attr.class.push('form-group--inline');
//- Wrap
#{tag}.form-group&attributes(attr)
if !labelSettings.omitted
//- Render label
!= include('@label', labelSettings)
//- Form group inner
.form-group__inner
//- Render direct form element (e.g. input, select)
if !group && use
!= include(`@${use}`, settings)
//- Render group of form elements (e.g. radio, checkbox)
if group
for groupItem in group
- groupItemSettings = Object.assign({}, settings, groupItem.settings);
!= include(`@${groupItem.use}`, groupItemSettings)
//- Info text
if info
details.form-group__info
summary.form-group__info-header
!= include('@icon', {icon: 'info'})
.form-group__info-desc
h4.form-group__info-desc-headline #{info.headline}
p #{info.text}
//- Render hint label
if hint
-
labelSettings.hint = true
labelSettings.required = false
labelSettings.label = hint
!= include('@label', labelSettings)
{
"label": "Ein Eingabefeld",
"id": "form-group-input-info",
"use": "input--text",
"settings": {
"placeholder": "Das ist ein Platzhalter"
},
"info": {
"headline": "Lorem ipsum",
"text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
}
}
.form-group {
border: 0;
flex-grow: 1;
margin: 0 0 2rem;
max-width: 54rem;
padding: 0;
@include mq($from: m) {
flex-basis: 20rem;
}
}
.form-group--inline {
@include mq($from: m) {
.form-group__inner {
display: flex;
}
.form-group {
margin: 0 1rem;
}
.form-group:first-child {
margin-left: 0;
}
.form-group:last-child {
margin-right: 0;
}
}
}
.form-group--hidden {
display: none;
}
.form-group--small {
@include mq($from: m) {
max-width: 50%;
}
}
.form-group--fullwide {
max-width: 100%;
}
.form-group-section {
border-bottom: 1px solid $color-steelgrey-light;
padding-bottom: 2rem;
}
.form-group-section--medium {
padding-bottom: 1.5rem;
}
.form-group-section--large {
padding-bottom: 2rem;
padding-top: 1rem;
}
.form--inline .form-group {
padding-left: 1rem;
padding-right: 1rem;
}
.form-group__inner {
position: relative;
}
.form-group__info-header {
color: $color-steelgrey-dark;
cursor: pointer;
font-size: 2rem;
position: absolute;
right: -3rem;
top: 50%;
transform: translate(0, -50%);
transition-duration: $default-transition-duration;
transition-property: color;
&:hover,
&:focus {
color: $color-steelgrey-xdark;
}
&::-o-details-marker {
display: none;
}
&::-moz-details-marker {
display: none;
}
&::-webkit-details-marker {
display: none;
}
&::before {
display: none;
}
}
.form-group__info-desc {
background-color: $color-steelgrey-light;
box-shadow: 0 5px 10px 0 #fff;
font-size: 1.3rem;
line-height: 2rem;
margin-top: 1rem;
padding: 1.5rem 2rem;
position: absolute;
z-index: z('info-desc');
:last-child {
margin-bottom: 0;
}
@include mq($from: m) {
right: -30rem;
top: -50%;
width: 25rem;
@media screen and (-webkit-min-device-pixel-ratio: 0) {
right: -35rem;
}
}
}
.form-group__info-desc::after {
@include mq($from: m) {
border-color: transparent $color-steelgrey-light transparent transparent;
border-style: solid;
border-width: 15px 15px 15px 0;
content: '';
height: 0;
left: -15px;
position: absolute;
top: 2rem;
width: 0;
}
}
.form-group__info-desc-headline {
margin-bottom: 0.5rem;
}
There are no notes for this item.