module-input

m-input

テキスト入力を即す欄を表示する。要素に直接クラスを付与する(ほとんどの場合、input要素、textarea要素となる)。
余白・レイアウト等は utility > .u-margincomponent > .c-form で指定する。
.is-error を同時に使用するとエラーがあったときの表示となる。

<div style="margin-bottom: 2rem;">
    <input type="text" class="m-input" size="20" value="吾輩は猫である。" />
    <input type="text" class="m-input is-error" size="20" value="* なに? *" />
</div>
<div>
    <textarea class="m-input" rows="5" cols="60">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</textarea>
    <textarea class="m-input is-error" rows="5" cols="60">* おおっと *</textarea>
</div>

m-input-(size)

テキスト入力を即す欄の全体のサイズを変更する。(size)は sm, lg に対応している。

<div style="margin-bottom: 2rem;">
    <input type="text" class="m-input m-input-sm" size="20" value="吾輩は猫である。" />
    <input type="text" class="m-input m-input-lg" size="20" value="吾輩は猫である。" />
</div>
<div>
    <textarea class="m-input m-input-sm" rows="5" cols="60">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</textarea>
    <textarea class="m-input m-input-lg" rows="5" cols="60">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</textarea>
</div>

m-input-(color)

ボーダーの色を変更する。(color)は標準のカラーテーブルを参照。

<div style="margin-bottom: 1rem;">
    <input type="text" class="m-input m-input-gray" size="20" value="" placeholder="gray" />
</div>
<div style="margin-bottom: 1rem;">
    <input type="text" class="m-input m-input-first" size="20" value="" placeholder="first" />
</div>
<div style="margin-bottom: 1rem;">
    <input type="text" class="m-input m-input-second" size="20" value="" placeholder="second" />
</div>
<div style="margin-bottom: 1rem;">
    <input type="text" class="m-input m-input-third" size="20" value="" placeholder="third" />
</div>
<div style="margin-bottom: 1rem;">
    <input type="text" class="m-input m-input-fourth" size="20" value="" placeholder="fourth" />
</div>
<div style="margin-bottom: 1rem;">
    <input type="text" class="m-input m-input-info" size="20" value="" placeholder="info" />
</div>
<div>
    <input type="text" class="m-input m-input-important" size="20" value="" placeholder="important" />
</div>