Vebego Component Library

Input 

<!-- Default -->
<div class="atm-form-input  ">
    <input class="form-input" type="text" id="input" name="input">
    <label class="atm-form-label form-label " for="input">Label</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>


<!-- Disabled -->
<div class="atm-form-input  ">
    <input class="form-input" type="text" id="input-disabled" name="input-disabled" disabled>
    <label class="atm-form-label form-label " for="input-disabled">Label</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>


<!-- Invalid -->
<div class="atm-form-input form-input-invalid ">
    <input class="form-input" type="text" id="input-invalid" name="input-invalid" value="Invalid text">
    <label class="atm-form-label form-label " for="input-invalid">Label</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>


<!-- Valid -->
<div class="atm-form-input form-input-valid ">
    <input class="form-input" type="text" id="input-valid" name="input-valid" value="Valid text">
    <label class="atm-form-label form-label " for="input-valid">Label</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>


<!-- Password -->
<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>


<!-- With Icon -->
<div class="atm-form-input  form-input-with-icon">
    <input class="form-input" type="text" id="input-icon" name="input-icon">
    <label class="atm-form-label form-label " for="input-icon">Enter username</label>

    <span class="atm-icon form-input-prepend-icon far fa-user   "></span>
    <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>
 
/* Default */
{
  "modifier": "",
  "type": "text",
  "id": "input",
  "name": "input",
  "value": "",
  "disabled": false,
  "label": {
    "for": "input"
  },
  "errorIcon": {
    "icon": "fa-times",
    "style": "far",
    "modifier": "form-input-error-icon"
  },
  "validIcon": {
    "icon": "fa-check",
    "style": "far",
    "modifier": "form-input-valid-icon"
  },
  "prependIcon": null
}


/* Disabled */
{
  "modifier": "",
  "type": "text",
  "id": "input-disabled",
  "name": "input-disabled",
  "value": "",
  "disabled": true,
  "label": {
    "for": "input-disabled"
  },
  "errorIcon": {
    "icon": "fa-times",
    "style": "far",
    "modifier": "form-input-error-icon"
  },
  "validIcon": {
    "icon": "fa-check",
    "style": "far",
    "modifier": "form-input-valid-icon"
  },
  "prependIcon": null
}


/* Invalid */
{
  "modifier": "form-input-invalid",
  "type": "text",
  "id": "input-invalid",
  "name": "input-invalid",
  "value": "Invalid text",
  "disabled": false,
  "label": {
    "for": "input-invalid"
  },
  "errorIcon": {
    "icon": "fa-times",
    "style": "far",
    "modifier": "form-input-error-icon"
  },
  "validIcon": {
    "icon": "fa-check",
    "style": "far",
    "modifier": "form-input-valid-icon"
  },
  "prependIcon": null
}


/* Valid */
{
  "modifier": "form-input-valid",
  "type": "text",
  "id": "input-valid",
  "name": "input-valid",
  "value": "Valid text",
  "disabled": false,
  "label": {
    "for": "input-valid"
  },
  "errorIcon": {
    "icon": "fa-times",
    "style": "far",
    "modifier": "form-input-error-icon"
  },
  "validIcon": {
    "icon": "fa-check",
    "style": "far",
    "modifier": "form-input-valid-icon"
  },
  "prependIcon": null
}


/* Password */
{
  "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
}


/* With Icon */
{
  "modifier": "",
  "type": "text",
  "id": "input-icon",
  "name": "input-icon",
  "value": "",
  "disabled": false,
  "label": {
    "for": "input-icon",
    "text": "Enter username"
  },
  "errorIcon": {
    "icon": "fa-times",
    "style": "far",
    "modifier": "form-input-error-icon"
  },
  "validIcon": {
    "icon": "fa-check",
    "style": "far",
    "modifier": "form-input-valid-icon"
  },
  "prependIcon": {
    "icon": "fa-user",
    "style": "far",
    "modifier": "form-input-prepend-icon"
  }
}
  • Content: 
    .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;
    }
}
  • URL: /components/raw/input/input.css
  • Filesystem Path: src\components\02-atoms\forms\input\input.css
  • Size: 2.7 KB

No notes defined.