No notes defined.
<!-- Default -->
<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>
<!-- Checkbox -->
<div class=" field -checkbox">
<label class="field__label" for="accept">
Lorem repellendus consequuntur sunt fuga alias
Delectus quos sunt ducimus consectetur excepturi
Voluptatum doloribus excepturi omnis aspernatur
harum rerum animi? Facere iste harum nihil libero
autem obcaecati. Esse necessitatibus hic.
</label>
<input class="field__input" type="checkbox" id="accept">
</div>
@use "/resources/styles/config";
.field {
$b: &;
margin-bottom: 1rem;
&__required {
color: config.$red-400;
font-weight: bold;
}
&__input {
border: 1px solid config.$border;
font-family: config.$font-family;
margin: 0 0 .5rem;
padding: config.$thin-padding;
width: 100%;
}
&__help {
color: config.$meta-text;
}
&__error {
color: config.$error;
}
&.-error {
#{$b}__input {
border-color: config.$error;
}
}
&.-outlined {
#{$b}__input {
border: 2px solid config.$primary;
}
}
&.-checkbox {
display: flex;
#{$b}__input {
flex: 0 0 1rem;
height: config.$line-height * 1rem;
margin: 0 config.$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;
}