GDL - Global Design Language

Input: Sizes 

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

        <label class="u-label-03 u-color-base" for="">Size small</label>

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

    </div>

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

</div>

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

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

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

    </div>

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

</div>

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

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

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

    </div>

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

</div>
 
<div class="u-mb-medium">
  {% render "@input--default", {small: true, label:'Size small'}, true %}
</div>

<div class="u-mb-medium">
  {% render "@input--default", {label:'Size default'}, true %}
</div>

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