No notes defined.
<div class="field">
<label class="field__label" for="example-text">Example Text:</label>
<input class="field__input" name="example-text" type="text" placeholder="Enter some text">
<div class="field__help">
Sit velit omnis necessitatibus quis unde Accusamus provident sed minus.
</div>
</div>
<div class="field -error">
<label class="field__label" for="example-text">
Example Text:
<span class="field__required">*</span>
</label>
<input class="field__input" name="example-text" type="text" placeholder="Enter some text">
<div class="field__error">
Oops, ipsum alias saepe cum iusto animi? Sed illum accusamus sunt.
</div>
</div>
.field {
$b: &;
margin-bottom: 1rem;
&__required {
color: $red-400;
font-weight: bold;
}
&__input {
border: 1px solid $border;
font-family: $body-font-stack;
margin: 0 0 .5rem;
padding: $thin-padding;
width: 100%;
}
&__help {
color: $meta-text;
}
&__error {
color: $error;
}
&.-error {
#{$b}__input {
border-color: $error;
}
}
&.-outlined {
#{$b}__input {
border: 2px solid $primary;
}
}
&.-checkbox {
display: flex;
#{$b}__input {
flex: 0 0 1rem;
height: $body-line-height * 1rem;
margin: 0 $thin-h-space;
order: -1;
}
#{$b}__label {
font-weight: inherit;
user-select: none;
}
}
}
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="reset"],
input[type="search"],
input[type="search"],
input[type="submit"],
input[type="tel"],
input[type="text"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
@extend .field__input;
}