TheaterMania Component Library

Input: Text Area (Error) 

<div class="form-input">
    <label class="label label--required">Dolor sit amet</label>
    <div class="validation validation--required validation--error">
        <textarea class="textarea validation-item" required></textarea>
        <span class="input-error">Quisque rutrum aenean imperdiet.</span>
    </div>
</div>
 
<div class="form-input">
  {{> @label required=required value=label id=id }}
  <div class="validation{{#if required}} validation--required{{/if}}{{#if error}} validation--error{{/if}}">
    <textarea class="textarea validation-item"{{#if required}} required{{/if}}></textarea>
    {{#if error}}
    <span class="input-error">{{error}}</span>
    {{/if}}
  </div>
</div>
 
{
  "name": "textarea",
  "label": "Dolor sit amet",
  "required": true,
  "error": "Quisque rutrum aenean imperdiet."
}
  • Content: 
    .form-input {
  margin: 0.63rem 0 1rem;
}

.input,
.textarea {
  display: block;
  box-sizing: border-box;
  padding: 0.63rem;
  width: 100%;
  font-size: $ms-0;
  border: 1px solid $color-border;
  border-radius: $border-radius;
  color: $color-text;

  &:hover,
  &:focus {
    border-color: $color-primary-light;
  }

  &:focus {
    outline: none;
    box-shadow: inset 1px 1px 0.13rem rgba($color-black, 0.25);
  }
}

.input[disabled] {
  border: 1px solid $color-gray-lighter;

  &:hover {
    cursor: default;
  }
}

.validation {
  position: relative;
}

.validation--error {
  .validation-item {
    border-color: $color-error;
  }
}

.input-error {
  display: block;
  margin-top: 0.75rem;
  font-size: $ms-neg-1;
  color: $color-error;
}

.checkbox {
  width: 1rem;
  height: 1rem;

  &:checked {
    outline: none;
    border-color: $color-primary-light;
    box-shadow: inset 1px 1px 0.13rem rgba($color-black, 0.25);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22bevel%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M13%2033l12%2012%2024-24%22/%3E%3C/svg%3E");
    background-size: 100%;
    background-color: $color-white;
    background-position: 1px;
    background-repeat: no-repeat;
  }
}
  • URL: /components/raw/input/Input.scss
  • Filesystem Path: src/components/01-Units/Form Elements/Input/Input.scss
  • Size: 1.4 KB

There are no notes for this item.