<div class="atm-form-input ">
<input class="form-input" type="password" id="input-password" name="input-password">
<label class="atm-form-label form-label " for="input-password">Enter password</label>
<span class="atm-icon form-input-error-icon far fa-times "></span>
<span class="atm-icon form-input-valid-icon far fa-check "></span>
</div>
<div class="atm-form-input {{modifier}} {{#if prependIcon}}form-input-with-icon{{/if}}">
<input
class="form-input"
type="{{type}}"
{{#if id}}id="{{id}}"{{/if}}
{{#if name}}name="{{name}}"{{/if}}
{{#if value}}value="{{value}}"{{/if}}
{{#if disabled}}disabled{{/if}}>
{{render '@label' label merge=true}}
{{#if prependIcon}}
{{ render '@icon' prependIcon }}
{{/if}}
{{ render '@icon' errorIcon }}
{{ render '@icon' validIcon }}
</div>
{
"modifier": "",
"type": "password",
"id": "input-password",
"name": "input-password",
"value": "",
"disabled": false,
"label": {
"for": "input-password",
"text": "Enter password"
},
"errorIcon": {
"icon": "fa-times",
"style": "far",
"modifier": "form-input-error-icon"
},
"validIcon": {
"icon": "fa-check",
"style": "far",
"modifier": "form-input-valid-icon"
},
"prependIcon": null
}
.atm-form-input {
@apply relative;
@apply inline-block;
.form-label {
transition: all 0.2s ease-out;
top: 0;
left: 0;
@apply absolute pt-4 pl-3 cursor-text;
@apply border-none pointer-events-none;
}
.form-input {
@apply h-12;
@apply w-full md:w-72;
@apply border-shade;
transition: border 0.2s ease-in-out;
&[disabled] {
@apply bg-shade;
}
&::-ms-clear {
display: none;
width: 0;
height: 0;
}
&::-ms-reveal {
display: none;
width: 0;
height: 0;
}
&::-webkit-search-decoration,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: none;
}
}
.form-input:focus + .form-label,
.form-input:active + .form-label,
.form-input.filled + .form-label {
@apply hidden;
/* @apply -top-3;
@apply text-xs;
transition: all 0.2s ease-out; */
}
.form-input-error-icon {
@apply hidden;
}
.form-input-valid-icon {
@apply hidden;
}
.form-input-prepend-icon {
@apply absolute;
@apply inline;
@apply left-3;
top: calc(50% - 0.5em);
}
&.form-input-invalid {
.form-input {
@apply border-red;
@apply text-red;
@apply pr-10;
&:focus {
@apply border-red;
}
}
.form-input-error-icon {
@apply absolute;
@apply inline;
@apply right-3;
@apply text-red;
top: calc(50% - 0.5em);
}
}
&.form-input-valid {
.form-input {
@apply border-cta;
@apply text-black;
@apply pr-10;
&:focus {
@apply border-cta;
}
}
.form-input-valid-icon {
@apply absolute;
@apply inline;
@apply right-3;
@apply text-cta;
top: calc(50% - 0.5em);
}
}
&.form-input-with-icon {
.form-input {
@apply pl-10;
}
.form-label {
@apply left-7;
}
}
}
#mol-header-search {
.form-input:focus + .form-label,
.form-input:active + .form-label,
.form-input.filled + .form-label {
@apply hidden;
}
}
No notes defined.