Input "Old-Style"

INFO

This is the old input style that is still in use in some parts of the application. New modules should use the new input style.

Default Plausi-Input

.c-input.-old

<input type="text" class="c-input -old" name="" value="" />

Different Input Sizes

Small Inputs (e.g. for Units)

.c-input.-old.-small
.c-input.-old.-einheit

<input type="text" class="c-input -old -small" name="" value="" placeholder="12 g" />
<input type="text" class="c-input -old -einheit" name="" value="" placeholder="12 g" />

Medium Inputs

.c-input.-old.-medium

<input type="text" class="c-input -old -medium" name="" value="" placeholder="0,2342345 mg" />

Large Inputs

.c-input.-old.-large

<input type="text" class="c-input -old -large" name="" value="" placeholder="Large Input Placeholder" />

Input Type Number

.c-input.-old.-small

<input type="number" class="c-input -old -small" name="" value="" placeholder="-small" />

Hide Arrows in Number-Textfield:

.c-input.-hide-arrows

<input type="number" class="c-input -old -hide-arrows -small" name="" value="" placeholder="-small" />

Modifiers

.c-input.-old.-white.c-input.-old.-success.c-input.-old.-highlight/.-warning.c-input.-old.-error

<div class="h-highlight-block -small m-b-m">
    <input type="text" class="c-input -old -white" name="" value="" placeholder="-white" />
</div>
<input type="text" class="c-input -old -success m-b-m" name="" value="" placeholder="-success" />
<input type="text" class="c-input -old -warning m-b-m" name="" value="" placeholder="-warning or -highlight" />
<input type="text" class="c-input -old -error m-b-m" name="" value="" placeholder="-error" />

Pseudo Input-Fields

WARNING

Refactoring: Old Plausi Class Names -> ABEM Style

.pseudo-field

I'm not a real input field

<div class="pseudo-field">I'm not a real input field</div>

Input Wraps with inline Prefixes, Unit-(Dropdowns) or Icons

WARNING

Use these classes from now on: .c-input-wrap for the wrapper-div and then span.c-input-wrap__prefix or span.c-input-wrap__unit and .c-input-wrap__input for the input/textarea/select wrapper-div.

PLEASE NOTE: .menge-wrap, .inline-menge-wrap, .prefix, .einheit, .float-width-wrap are deprecated ⚠️

div.c-input-wrap
    > span.c-input-wrap__prefix
    > span.c-input-wrap__unit
    > div.c-input-wrap__input
        > c-select.-old / .c-input.-old

ad I.E.

mggI.E.

<div class="grid">
  <div class="col-6">
    <div class="c-input-wrap">
      <span class="c-input-wrap__prefix js-tooltip" title="I'm a tooltip">ad </span>
      <span class="c-input-wrap__unit">I.E.</span>
      <div class="c-input-wrap__input">
        <input type="text" class="c-input -old" value="200" />
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="c-input-wrap">
      <select class="c-select -old js-select2" name="opts" data-additional-classes="-old">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>
</div>

Input Wrap with Select2 / Search

.c-input-wrap.-is-search

Lorem Ipsum

<div class="c-input-wrap -is-search">
  <select
    class="c-select -old js-select2"
    data-additional-classes="-old"
    data-search
  >
    <option selected>Lorem Ipsum</option>
  </select>
</div>

Byhand Icon

ad g

<div class="c-input-wrap">
  <span class="byhand-icon js-tooltip hp-show" data-hasqtip="56" title="Handeinwaage"></span>
  <span class="c-input-wrap__prefix" style="">ad </span>
  <span class="c-input-wrap__unit">g</span>
  <div class="c-input-wrap__input">
    <input type="text" data-vv-name="istEinwaage" class="c-input -old" />
  </div>
</div>

Modifiers / Input States

Disabled Input

.c-input.-old:disabled or .c-input.-old.-disabled

<input type="text" class="c-input -old" disabled name="" value="" placeholder="Disabled Input" />

.-striped
.-error / .-highlight / .-warning / .-success / .-white

mggI.E.

mggI.E.

<div class="grid">
  <div class="col-6">
    <div class="c-input-wrap -striped">
      <select class="c-select -old js-select2" name="opts" data-additional-classes="-old">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="c-input-wrap -error">
      <select class="c-select -old js-select2" name="opts" data-additional-classes="-old">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>
</div>

Autosize Input / Flexible Textfield

TIP

Based on Autosize JS

See Textareas: Autosize for Usage Example.