Tangible Pattern Library

Input 

<div class="c-input">
    <input type="text" class="c-input__control" id="" name="">
</div>
 
<div class="c-input{% if modifier is defined %} {{ modifier }}{% endif %}">
  <input type="{{ type }}" class="c-input__control" id="{{ id }}" name="{{ name }}"
    {% if value is defined %}value="{{ value }}"{% endif %}
    {% if required == true %}required 
      data-value-missing='{{ (craft.app.language == 'it') ? "Compila questo campo" : "Fill out this field" }}'
    {% endif %}
  >
</div>
 
{
  "type": "text"
}
  • Content: 
    .c-input__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);
  
  // 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/input/_input.scss
  • Filesystem Path: src/pattern-library/02-components/form-atoms/02-input/_input.scss
  • Size: 507 Bytes

No notes defined.