Vebego Component Library

Textarea 

<!-- Default -->
<div class="atm-form-textarea ">
    <textarea class="form-textarea" id="textarea" name="textarea"></textarea>
    <label class="atm-form-label form-label " for="textarea">Label</label>

</div>


<!-- Disabled -->
<div class="atm-form-textarea ">
    <textarea class="form-textarea" id="textarea-disabled" name="textarea-disabled" disabled></textarea>
    <label class="atm-form-label form-label " for="textarea-disabled">Label</label>

</div>


<!-- Valid -->
<div class="atm-form-textarea form-textarea-valid">
    <textarea class="form-textarea" id="textarea-valid" name="textarea-valid">Valid text</textarea>
    <label class="atm-form-label form-label " for="textarea-valid">Label</label>

</div>


<!-- Invalid -->
<div class="atm-form-textarea form-textarea-invalid">
    <textarea class="form-textarea" id="textarea-invalid" name="textarea-invalid">Invalid text</textarea>
    <label class="atm-form-label form-label " for="textarea-invalid">Label</label>

</div>


<div class="atm-form-textarea {{modifier}}">
    <textarea    
        class="form-textarea"
        {{#if id}}id="{{id}}"{{/if}}
        {{#if name}}name="{{name}}"{{/if}}
        {{#if disabled}}disabled{{/if}}>{{value}}</textarea>
    {{render '@label' label merge=true}}
</div>
 
/* Default */
{
  "modifier": "",
  "id": "textarea",
  "name": "textarea",
  "value": "",
  "disabled": false,
  "label": {
    "for": "textarea"
  }
}


/* Disabled */
{
  "modifier": "",
  "id": "textarea-disabled",
  "name": "textarea-disabled",
  "value": "",
  "disabled": true,
  "label": {
    "for": "textarea-disabled"
  }
}


/* Valid */
{
  "modifier": "form-textarea-valid",
  "id": "textarea-valid",
  "name": "textarea-valid",
  "value": "Valid text",
  "disabled": false,
  "label": {
    "for": "textarea-valid"
  }
}


/* Invalid */
{
  "modifier": "form-textarea-invalid",
  "id": "textarea-invalid",
  "name": "textarea-invalid",
  "value": "Invalid text",
  "disabled": false,
  "label": {
    "for": "textarea-invalid"
  }
}
  • Content: 
    .atm-form-textarea {
    @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;
    }

    .form-textarea {
        @apply h-36;
        @apply w-72;
        @apply pt-6;
        @apply border-shade;

        &[disabled] {
            @apply bg-shade;
        }
    }

    .form-textarea:focus + .form-label,
    .form-textarea:active + .form-label,
    .form-textarea.filled + .form-label {
        @apply border-cta outline-none;
        @apply text-cta;
        @apply -top-2;
        @apply text-sm;
        transition: all 0.2s ease-out;
    }

    &.form-textarea-invalid {
        .form-textarea {
            @apply border-red;
            @apply text-red;

            &:focus {
                @apply border-red;
            }
        }
    }

    &.form-textarea-valid {
        .form-textarea {
            @apply border-cta;
            @apply text-black;

            &:focus {
                @apply border-cta;
            }
        }
    }
}
  • URL: /components/raw/textarea/textarea.css
  • Filesystem Path: src\components\02-atoms\forms\textarea\textarea.css
  • Size: 1.1 KB

No notes defined.