<div class="container">
<div class="desc desc-line mt-5">Input</div>
<div class="row py-4">
<div class="col-12 col-lg-6">
<form>
<div class="form-group">
<label for="inputEmail">E-Mail</label>
<input type="email" class="form-control" id="inputEmail" placeholder="E-Mail">
<div class="info-text">Bitte geben Sie Ihre E-Mail-Adresse ein!</div>
</div>
<div class="form-group">
<label for="inputPassword">Passwort</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Passwort">
</div>
<div class="form-group disabled">
<label for="inputDepartment">Abteilung</label>
<input type="text" class="form-control disabled" id="inputDepartment" placeholder="Abteilung" disabled>
<div class="info-text">Dieses Feld wurde deaktiviert!</div>
</div>
</form>
</div>
<div class="col-12 col-lg-6">
<form>
<div class="form-group">
<label for="inputEmail">E-Mail</label>
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="E-Mail" value="info@spartherm.com" readonly>
<div class="valid-feedback">E-Mail-Adresse noch nicht vergeben!</div>
</div>
<div class="form-group">
<label for="inputPassword">Passwort</label>
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Passwort" value="asdf">
<div class="invalid-feedback">Das Passwort muss mindestens 8 Zeichen lang sein!</div>
</div>
</form>
</div>
</div>
<div class="desc desc-line mt-5">Textarea</div>
<div class="row py-4">
<div class="col-12 col-lg-6">
<form>
<div class="form-group">
<textarea class="form-control textarea" id="exampleFormControlTextarea1" rows="5" placeholder="Ihre Nachricht"></textarea>
</div>
</form>
</div>
<div class="col-12 col-lg-6">
<form>
<div class="form-group">
<textarea class="form-control textarea" id="exampleFormControlTextarea2" rows="5" placeholder="Ihre Bemerkungen"></textarea>
<div class="info-text">Hier können Sie uns Bemerkungen mitteilen!</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="desc desc-line mt-5">Input</div>
<div class="row py-4">
<div class="col-12 col-lg-6">
<form>
<div class="form-group">
<label for="inputEmail">E-Mail</label>
<input type="email" class="form-control" id="inputEmail" placeholder="E-Mail">
<div class="info-text">Bitte geben Sie Ihre E-Mail-Adresse ein!</div>
</div>
<div class="form-group">
<label for="inputPassword">Passwort</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Passwort">
</div>
<div class="form-group disabled">
<label for="inputDepartment">Abteilung</label>
<input type="text" class="form-control disabled" id="inputDepartment" placeholder="Abteilung" disabled>
<div class="info-text">Dieses Feld wurde deaktiviert!</div>
</div>
</form>
</div>
<div class="col-12 col-lg-6">
<form>
<div class="form-group">
<label for="inputEmail">E-Mail</label>
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="E-Mail" value="info@spartherm.com" readonly>
<div class="valid-feedback">E-Mail-Adresse noch nicht vergeben!</div>
</div>
<div class="form-group">
<label for="inputPassword">Passwort</label>
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Passwort" value="asdf">
<div class="invalid-feedback">Das Passwort muss mindestens 8 Zeichen lang sein!</div>
</div>
</form>
</div>
</div>
<div class="desc desc-line mt-5">Textarea</div>
<div class="row py-4">
<div class="col-12 col-lg-6">
<form>
<div class="form-group">
<textarea class="form-control textarea" id="exampleFormControlTextarea1" rows="5" placeholder="Ihre Nachricht"></textarea>
</div>
</form>
</div>
<div class="col-12 col-lg-6">
<form>
<div class="form-group">
<textarea class="form-control textarea" id="exampleFormControlTextarea2" rows="5" placeholder="Ihre Bemerkungen"></textarea>
<div class="info-text">Hier können Sie uns Bemerkungen mitteilen!</div>
</div>
</form>
</div>
</div>
</div>
/* Kein Inhalt definiert. */
.form-group {
margin-bottom: 1.75rem;
&.disabled {
> label {
opacity: .5;
}
.form-control {
color: $gray-400;
}
}
label {
margin-bottom: 0.625rem;
font-size: 0.875rem;
font-weight: $font-weight-normal;
color: $black;
line-height: 1;
.dark & {
color: $gray-100;
}
}
.info-text {
width: 100%;
margin-top: 0.625rem;
font-size: 0.875rem;
font-weight: $font-weight-normal;
color: $secondary;
line-height: 1;
}
.valid-feedback {
width: 100%;
margin-top: 0.625rem;
font-size: 0.875rem;
font-weight: $font-weight-normal;
color: $success;
line-height: 1;
}
.invalid-feedback {
width: 100%;
margin-top: 0.625rem;
font-size: 0.875rem;
font-weight: $font-weight-normal;
color: $danger;
line-height: 1;
}
}
.form-control {
width: 100%;
height: calc(2em + 1.25rem);
padding: 0.625rem 1.25rem;
line-height: 2;
font-size: 1rem;
font-weight: $font-weight-light;
background-color: $gray-200;
border-color: $gray-200;
color: $black;
display: inline-block;
.dark & {
background-color: $gray-900;
border-color: $gray-900;
color: white;
&:focus {
color: $white;
background-color: $gray-900;
border-color: $gray-900;
}
}
&:focus {
color: $black;
background-color: $gray-200;
border-color: $gray-200;
outline: 0;
box-shadow: none!important;
}
&.is-valid {
border: 0;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300b06a' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
&.is-invalid {
border: 0;
border-bottom: 2px solid $accent;
}
&.textarea {
line-height: 1.5;
}
}
.form-control::-moz-placeholder {
color: $gray-400;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: $gray-400;
}
.form-control::-webkit-input-placeholder {
color: $gray-400;
}
Keine Notizen vorhanden.