Tangible Pattern Library

Textarea 

<div class="c-textarea">
    <textarea class="c-textarea__control" id="" rows="6" name=""></textarea>
</div>
 
<div class="c-textarea{% if modifier is defined %} {{ modifier }}{% endif %}">
  <textarea class="c-textarea__control" 
            id="{{ id }}"
            rows="{{ rows }}" 
            {% if required == true %}required 
              data-value-missing='{{ (craft.app.language == 'it') ? "Compila questo campo" : "Fill out this field" }}'
            {% endif %}
            name="{{ name }}"
  ></textarea>
</div>
 
{
  "rows": 6
}
  • Content: 
    .c-textarea__control {
  padding: spacing(space-16) spacing(space-24);
  background-color: useHSL(--base-100);
  border: none;
  outline: none;
  box-shadow: inset 0 0 0 remify(1px) useHSL(--primary-100);
  width: 100%;
  @include font-scale(level-3, $font-secondary, regular);
  color: useHSL(--primary-100);
  resize: vertical;

  // iOS fix
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;

  &:active,
  &:focus {
    box-shadow: inset 0 0 remify(4px) useHSL(--accent-100);
  }

}
  • URL: /components/raw/textarea/_textarea.scss
  • Filesystem Path: src/pattern-library/02-components/form-atoms/04-textarea/_textarea.scss
  • Size: 528 Bytes

No notes defined.