Field

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>

  • Content:
    @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;
    }
    
    
  • URL: /components/raw/field/_index.scss
  • Filesystem Path: resources/styles/atoms/field/_index.scss
  • Size: 1.4 KB