Thomasorus Design System

Form 

<form action="">
    <div>
        <label for="name">Name</label>
        <div class="error" id="name-error" hidden="true">Erreur : le nom n'est pas conforme</div>
        <input data-size="30" id="name" type="text" name="" autocomplete="name" value="Thomasorus" aria-invalid="true" aria-describedby="name-info">
        <div class="hint" id="name-info">Par exemple, votre nom de famille et votre prénom</div>

    </div>

    <div>
        <label for="password">Password</label>
        <input data-size="30" id="password" type="password" name="" value="mypassword" required>
    </div>
</form>
 
<form action="">
    <div>
        <label for="name">Name</label>
        <div class="error" id="name-error" hidden="true">Erreur : le nom n'est pas conforme</div>
        <input data-size="30" id="name" type="text" name="" autocomplete="name" value="Thomasorus" aria-invalid="true"
            aria-describedby="name-info">
        <div class="hint" id="name-info">Par exemple, votre nom de famille et votre prénom</div>

    </div>


    <div>
        <label for="password">Password</label>
        <input data-size="30" id="password" type="password" name="" value="mypassword" required>
    </div>
</form>
 
/* No context defined. */
  • Content: 
    :root {
     /* padding for form */
    /* 30 is min, 50 is max */
     --padding-form: calc(((30 / 16) * 1rem) + (50 - 30) * var(--fluid-bp));

    /* Margin for input */
    /* 30 is min, 50 is max */
    --margin-input: calc(((30 / 16) * 1rem) + (50 - 30) * var(--fluid-bp));

    /* Margin for label */
    /* 5 is min, 10 is max */
    --margin-label: calc(((5 / 16) * 1rem) + (10 - 5) * var(--fluid-bp));
}

form {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--background-dark);
    padding: 30px;
    padding:var(--padding-form);
}

form .error, form .hint {
    color: var(grey-pitchblack);
}

form .hint {
    color: var(--text);
    font-style: italic;
}

form .error {
    color: var(--text);
    font-weight: 600;
}


form > *+* {
    margin-top:  30px;
    margin-top: var(--margin-input);
}

form label {
    margin-top: 5px;
    margin-bottom: var(--margin-label);
}

form .grouped {
    display: flex;
}

form .grouped > * {
    margin-right: 30px;
    margin-right: var(--margin-l);
}
  • URL: /components/raw/form/form.demo.css
  • Filesystem Path: src/components/inline-elements/form/form.demo.css
  • Size: 1.1 KB

No notes defined.