<input class="input input--password" type="password" placeholder="Hier ein Passwort eingeben" id="input-26bd" name="input-26bd" />
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
attr.class.push(`input--${type}`);
attr.id = id || attr.id || `input-${randomString()}`;
attr.name = name || attr.name || attr.id;
//- Process options
if (error) attr.class.push('input-validation-error');
if (disabled) attr.disabled = true;
if (invalid) attr['aria-invalid'] = 'true';
if (borderless) attr.class.push('input--borderless');
if (size) attr.class.push(`input--${size}`);
//- Typeahead
if (typeahead) {
attr['data-typeahead'] = typeahead.source;
attr['data-typeahead-target-id'] = typeahead.targetId;
attr['data-typeahead-disabled'] = (typeahead.disabled) ? 'true' : 'false';
attr['data-typeahead-chosen'] = (typeahead.chosen) ? 'true' : 'false';
}
//- Render atom
if type === 'textarea'
textarea.input(placeholder=placeholder, required=required)&attributes(attr) #{value}
else
input.input(type=type, value=value, placeholder=placeholder, required=required)&attributes(attr)
if error
span.field-validation-error(role='alert') Fehlermeldung
{
"title": "Eingabefeld für ein Passwort",
"type": "password",
"placeholder": "Hier ein Passwort eingeben"
}
// Input settings
$default-input-size: 4.5rem;
$default-input-font-size: 1.7rem;
// Input styles
.input {
background-color: #fff;
border: 1px solid $color-anthracite;
border-radius: 3px;
color: $root-color;
display: block;
font-size: $default-input-font-size;
font-weight: normal;
height: $default-input-size;
line-height: $root-line-height;
max-width: 100%;
padding: calc((#{$default-input-size} - #{$root-line-height} * #{$default-input-font-size}) / 2 - 1px) 1rem;
transition-duration: $default-transition-duration;
transition-property: border-color;
width: 100%;
// Inline stacked
& + & {
margin-top: $spacer;
}
// Focus, Hover
&:hover,
&:focus {
border-color: $color-steelgrey-xdark;
outline: 0;
}
// Placeholder
&::placeholder {
color: $color-anthracite;
opacity: 1;
}
// Disabled as last to override hover/focus styles
&[disabled] {
border-color: $color-steelgrey;
color: $color-steelgrey-dark;
}
// Remove outline on invalid
&:invalid {
box-shadow: none;
}
// Invalid
&[aria-invalid='true'] {
background-color: rgba($color-red, 0.2);
border-color: $color-red;
color: $color-red;
}
// Invalid placeholder
&[aria-invalid='true']::placeholder {
color: $color-red-dark;
opacity: 0.5;
}
}
// Without border
.input--borderless {
border: 0;
}
// Limited input size
.input--small {
max-width: 35.5rem;
}
// Input as textarea
.input--textarea {
min-height: 2 * $default-input-size;
}
//errors
.input-validation-error {
background-color: rgba($color-red, 0.2);
border-color: $color-red;
color: $color-red;
}
.field-validation-error {
color: $color-red;
font-size: 1.5rem;
font-weight: 700;
}
// Input as date
.input--date {
@mixin calendar-svg($color: $color-steelgrey-dark) {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.0266902,3 L17.9806683,3 C18.5436297,3 19,3.44716883 19,4.01699829 L19,17.9830017 C19,18.5446744 18.5550537,19 17.9806683,19 L2.01933169,19 C1.45637034,19 1,18.5528312 1,17.9830017 L1,4.01699829 C1,3.45532564 1.44494629,3 2.01933169,3 L4.04003535,3 L4.04003535,4.50924898 C4.04003535,5.62403463 4.94741548,6.52774695 6.06672559,6.52774695 C7.18603569,6.52774695 8.09341582,5.62403463 8.09341582,4.50924898 L8.09341582,3 L11.9733098,3 L11.9733098,4.50924898 C11.9733098,5.62403463 12.8806899,6.52774695 14,6.52774695 C15.1193101,6.52774695 16.0266902,5.62403463 16.0266902,4.50924898 L16.0266902,3.5 L16.0266902,3 Z" id="Combined-Shape" fill="' + $color +'" fill-rule="evenodd"></path><path d="M9.51067942,15 L9.51067942,13.823301 L8.20582505,13.8 L8.20582505,9 L6.99417457,9 C6.99417457,9 6.14368913,9.46601942 5.19999981,9.82718447 L5.26990272,11.0504854 C6.07378622,10.7592233 6.7262134,10.4679612 6.7262134,10.4679612 L6.7262134,13.8 L5.22330078,13.823301 L5.22330078,15 L9.51067942,15 Z M14.9417474,9 L10.1999998,9 L10.1999998,10.176699 L12.9378639,10.2 L11.0504852,15 L12.6932037,15 L14.9417474,9 Z" id="17" fill="#FFFFFF" fill-rule="evenodd"></path><path d="M5,1.65092773 L5,4.62788086 C5,5.18016561 5.44771525,5.62788086 6,5.62788086 C6.55228475,5.62788086 7,5.18016561 7,4.62788086 L7,1.65092773 C7,1.09864298 6.55228475,0.650927734 6,0.650927734 C5.44771525,0.650927734 5,1.09864298 5,1.65092773 Z" id="Line" fill="' + $color + '" fill-rule="nonzero"></path><path d="M13,1.65092773 L13,4.62788086 C13,5.18016561 13.4477153,5.62788086 14,5.62788086 C14.5522847,5.62788086 15,5.18016561 15,4.62788086 L15,1.65092773 C15,1.09864298 14.5522847,0.650927734 14,0.650927734 C13.4477153,0.650927734 13,1.09864298 13,1.65092773 Z" id="Line-Copy" fill="' + $color + '" fill-rule="nonzero"></path></svg>');
}
@include calendar-svg();
background-position: right 1rem center;
background-size: 2rem;
padding-right: 4rem;
&[aria-invalid='true'] {
@include calendar-svg($color-red);
opacity: 0.5;
}
}
@include mq($from: m) {
.input--25 {
width: 25%;
}
.input--75 {
width: 75%;
}
.input {
// Inline stacked
& + & {
margin-left: $spacer;
margin-top: 0;
}
}
}
There are no notes for this item.