.app-form
scss
.app-form {
margin: 40px 24px 32px;
@include element('info') {
@include use-font('body', 'regular');
}
@include modifier('search') {
margin: 16px;
position: relative;
&::before {
color: use-color('grey', light-alt);
content: '\E010'; //icon-search
font-family: 'chattigoicons';
font-size: 16px;
left: 8px;
position: absolute;
top: 5px;
z-index: use-layer('base');
}
}
// overrides
.c-input {
height: 48px;
margin-bottom: 16px;
}
.c-button {
margin: 0;
}
}Esta clase contiene las sobreescrituras de estilo necesario para el uso de los componentes de formulario.
Examples
html
form recuperar contraseña
<form class="app-form">
<p class="app-form__info">
Ingresa tu nombre de usuario para solicitar la información de los supervisores
que podrán ayudarte con la recuperación de tu contraseña.
</p>
<input type="text" class="c-input" />
<button class="c-button">
Solicitar información
</button>
</form>
html
app input search
<form class="app-form--search">
<input type="text" class="c-input c-input--search" placeholder="Buscar" />
</form>