GDL - Global Design Language

Input: Default 

<div class="">

    <label class="u-label-04 u-color-base" for="">Label</label>

    <input class=" u-block u-size-full" type="text" placeholder="Placeholder text">

</div>

<!-- TODO: REVIEW ICON POSITION -->
 
<div class="{% if status=='error' %}c-form--error{% elif status=='success' %}c-form--success{% endif %}">

{% if label %}
  <label class="{% if small %}u-label-03{% else %}u-label-04{% endif %} u-color-base" for="">{{label}}</label>
{% endif %}

<input class="{% if small %}c-form-size--small{% endif %}{% if wide %}c-form-size--wide{% endif %} u-block u-size-full" type="{{type}}" placeholder="{{placeholder}}" {% if disabled %}disabled{% endif %}>

{% if helper %}
  <span class="c-form-helper u-label-08 u-pt-xxsmall u-inline-block">{{helper}}</span>
{% endif %}

</div>

<!-- TODO: REVIEW ICON POSITION -->
{# {% if status=='error' %}
  <svg class="o-icon {% if small %}o-icon--sm{% else %}o-icon--md{% endif %} u-absolute c-form-icon c-form-icon--left">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-alert-triangle"></use>
  </svg>
{% elif subject %}  
  <svg class="o-icon {% if small %}o-icon--sm{% else %}o-icon--md{% endif %} u-absolute c-form-icon c-form-icon--left">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{subject}}"></use>
  </svg>
{% endif %} #}
 
{
  "label": "Label",
  "placeholder": "Placeholder text",
  "type": "text"
}
  • Content: 
    // Name:            Input
// Description:     Input text in website's forms
//
// Component:       `c-form-input`
//
// ========================================================================

// Variables
// ========================================================================

$input-outline-size: 3px;
$input-min-small-height: 38px;
$input-min-default-height: 48px;

// ========================================================================

select,
input[type] {

  //
  // Sizes
  //

  &.c-form-size--small {
    --form-input-padding: #{$padding-xsmall} #{$padding-small};
    min-height: $input-min-small-height;
    @include type(label-07);
  }
  
  &.c-form-size--wide {
    @include type(title-05);
  }
}
  • URL: /components/raw/input/input.scss
  • Filesystem Path: src/lib/components/forms/input/input.scss
  • Size: 722 Bytes

No notes defined.