GDL - Global Design Language

Input: States 

<div class="u-mb-medium">
    <div class="c-form--error">

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

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

        <span class="c-form-helper u-label-08 u-pt-xxsmall u-inline-block">Helper error text</span>

    </div>

    <!-- TODO: REVIEW ICON POSITION -->

</div>

<div class="u-mb-medium">
    <div class="c-form--success">

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

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

        <span class="c-form-helper u-label-08 u-pt-xxsmall u-inline-block">Helper success text</span>

    </div>

    <!-- TODO: REVIEW ICON POSITION -->

</div>

<div class="u-mb-medium">
    <div class="">

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

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

    </div>

    <!-- TODO: REVIEW ICON POSITION -->

</div>
 
<div class="u-mb-medium">
  {% render "@input--default", {status: "error", label:'Status error', helper: "Helper error text"}, true %}
</div>

<div class="u-mb-medium">
  {% render "@input--default", {status: "success", label:'Status success', helper: "Helper success text"}, true %}
</div>

<div class="u-mb-medium">
  {% render "@input--default", {disabled: true, label:'Status disabled'}, true %}
</div>
 
{
  "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.