Vebego Component Library
<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>
<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": "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
}
  • 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.