<div class="n7-input n7-input--sm">
<input id="" class="text-sm n7-input-placeholder">
</div>
{% extends '@input' %}
{% block size %} n7-input--sm{% endblock %}
{
"input": {
"id": "inputId",
"shortLabel": "inputShortLabel",
"padding": "inputPadding",
"border": "inputBorder",
"radius": "inputRadius",
"classes": "inputClasses",
"type": "inputType",
"placeholder": "inputPlaceholder",
"iconPlaceholder": "inputIconPlaceholder",
"fieldRequired": "inputRequired",
"autocomplete": "inputAutocomplete",
"ariaDescribedBy": "inputAriaDescribedBy",
"hasErrorControl": "inputHasErrorControl",
"ariaInvalid": "inputAriaInvalid",
"iconAlert": "inputIconAlert",
"hasError": "inputHasError"
}
}
/**
* INPUT
*
*
*/
@layer components {
.n7-input {
@apply flex items-center relative;
}
.n7-input [type='text'],
.n7-input input:where(:not([type])),
.n7-input [type='email'],
.n7-input [type='url'],
.n7-input [type='password'],
.n7-input [type='number'],
.n7-input [type='date'],
.n7-input [type='datetime-local'],
.n7-input [type='month'],
.n7-input [type='search'],
.n7-input [type='tel'],
.n7-input [type='time'],
.n7-input [type='week'],
.n7-input [multiple],
.n7-input textarea {
@apply w-full py-2 px-3 border n7-border-input rounded-lg;
}
.n7-input [type='text'],
.n7-input input:where(:not([type])),
.n7-input [type='email'],
.n7-input [type='url'],
.n7-input [type='password'],
.n7-input [type='number'],
.n7-input [type='date'],
.n7-input [type='datetime-local'],
.n7-input [type='month'],
.n7-input [type='search'],
.n7-input [type='tel'],
.n7-input [type='time'],
.n7-input [type='week'],
.n6-input [multiple] {
@apply h-11;
}
/* ICON STYLES */
.n7-input__icon {
@apply absolute left-4 n7-content-placeholder w-6 h-6;
}
.n7-input--sm .n7-input__icon {
@apply w-4 h-4 left-3;
}
.n7-input--lg .n7-input__icon {
@apply w-8 h-8 left-4;
}
/* HAS ICON SIZE STYLE */
.has-icon.n7-input [type='text'],
.has-icon.n7-input input:where(:not([type])),
.has-icon.n7-input [type='email'],
.has-icon.n7-input [type='url'],
.has-icon.n7-input [type='password'],
.has-icon.n7-input [type='number'],
.has-icon.n7-input [type='date'],
.has-icon.n7-input [type='datetime-local'],
.has-icon.n7-input [type='month'],
.has-icon.n7-input [type='search'],
.has-icon.n7-input [type='tel'],
.has-icon.n7-input [type='time'],
.has-icon.n7-input [type='week'],
.has-icon.n7-input [multiple],
.has-icon.n7-input textarea {
@apply pl-12;
}
/* VALIDATION STYLES */
.is-invalid .n7-input input,
.n7-input input[aria-invalid="true"],
.has-error.n7-input input {
@apply border-2 n7-border-error-dark;
}
/* SIZE STYLES */
.n7-input--sm [type='text'],
.n7-input--sm input:where(:not([type])),
.n7-input--sm [type='email'],
.n7-input--sm [type='url'],
.n7-input--sm [type='password'],
.n7-input--sm [type='number'],
.n7-input--sm [type='date'],
.n7-input--sm [type='datetime-local'],
.n7-input--sm [type='month'],
.n7-input--sm [type='search'],
.n7-input--sm [type='tel'],
.n7-input--sm [type='time'],
.n7-input--sm [type='week'],
.n7-input--sm [multiple] {
@apply h-8;
}
.n7-input--sm [type='text'],
.n7-input--sm input:where(:not([type])),
.n7-input--sm [type='email'],
.n7-input--sm [type='url'],
.n7-input--sm [type='password'],
.n7-input--sm [type='number'],
.n7-input--sm [type='date'],
.n7-input--sm [type='datetime-local'],
.n7-input--sm [type='month'],
.n7-input--sm [type='search'],
.n7-input--sm [type='tel'],
.n7-input--sm [type='time'],
.n7-input--sm [type='week'],
.n7-input--sm [multiple],
.n7-input--sm textarea {
@apply py-1 px-2;
}
.has-icon.n7-input--sm [type='text'],
.has-icon.n7-input--sm input:where(:not([type])),
.has-icon.n7-input--sm [type='email'],
.has-icon.n7-input--sm [type='url'],
.has-icon.n7-input--sm [type='password'],
.has-icon.n7-input--sm [type='number'],
.has-icon.n7-input--sm [type='date'],
.has-icon.n7-input--sm [type='datetime-local'],
.has-icon.n7-input--sm [type='month'],
.has-icon.n7-input--sm [type='search'],
.has-icon.n7-input--sm [type='tel'],
.has-icon.n7-input--sm [type='time'],
.has-icon.n7-input--sm [type='week'],
.has-icon.n7-input--sm [multiple],
.has-icon.n7-input--sm textarea {
@apply pl-10;
}
.n7-input--lg [type='text'],
.n7-input--lg input:where(:not([type])),
.n7-input--lg [type='email'],
.n7-input--lg [type='url'],
.n7-input--lg [type='password'],
.n7-input--lg [type='number'],
.n7-input--lg [type='date'],
.n7-input--lg [type='datetime-local'],
.n7-input--lg [type='month'],
.n7-input--lg [type='search'],
.n7-input--lg [type='tel'],
.n7-input--lg [type='time'],
.n7-input--lg [type='week'],
.n7-input--lg [multiple] {
@apply h-14;
}
.n7-input--lg [type='text'],
.n7-input--lg input:where(:not([type])),
.n7-input--lg [type='email'],
.n7-input--lg [type='url'],
.n7-input--lg [type='password'],
.n7-input--lg [type='number'],
.n7-input--lg [type='date'],
.n7-input--lg [type='datetime-local'],
.n7-input--lg [type='month'],
.n7-input--lg [type='search'],
.n7-input--lg [type='tel'],
.n7-input--lg [type='time'],
.n7-input--lg [type='week'],
.n7-input--lg [multiple],
.n7-input--lg textarea {
@apply py-3 px-3;
}
.has-icon.n7-input--lg [type='text'],
.has-icon.n7-input--lg input:where(:not([type])),
.has-icon.n7-input--lg [type='email'],
.has-icon.n7-input--lg [type='url'],
.has-icon.n7-input--lg [type='password'],
.has-icon.n7-input--lg [type='number'],
.has-icon.n7-input--lg [type='date'],
.has-icon.n7-input--lg [type='datetime-local'],
.has-icon.n7-input--lg [type='month'],
.has-icon.n7-input--lg [type='search'],
.has-icon.n7-input--lg [type='tel'],
.has-icon.n7-input--lg [type='time'],
.has-icon.n7-input--lg [type='week'],
.has-icon.n7-input--lg [multiple],
.has-icon.n7-input--lg textarea {
@apply pl-14;
}
}
Input component configurations.