module-input

echo-input

テキスト入力を即す欄を表示する。要素に直接クラスを付与する(ほとんどの場合、input要素、textarea要素となる)。
左右に 1em の余白が確保される。

レイアウトは component > .echo-form, layout > .echo-forms を使用することが望ましい。

.is-error を付与するとエラー表示となり、色が $important に変わる。

スタイルの変化 group: form
(breakpoint).echo-***-sm.echo-***.echo-***-lg
(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ
md以下 xs 2.25rem
(36px)
sm 2.5rem
(40px)
md 2.75rem
(44px)
lg以上 sm 2.5rem
(40px)
md 2.75rem
(44px)
lg 3.125rem
(50px)

この表の解説

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

sub class echo-input-(size)

テキスト入力を即す欄の文字サイズ、最低高さを変更する。
(size)は、 sm, lg に対応している。

このサンプルコードでは比較のため、同サイズのボタンを表示している。

echo-input-sm ボタン

(default) ボタン

echo-input-lg ボタン

<p>
    <dfn>echo-input-sm</dfn>
    <input type="text" class="echo-input echo-input-sm" size="20" value="吾輩は猫である。" />
    <a href="#" class="echo-button echo-button-sm echo-button-style-a">ボタン</a>
</p>

<p>
    <dfn>(default)</dfn>
    <input type="text" class="echo-input" size="20" value="吾輩は猫である。" />
    <a href="#" class="echo-button echo-button-style-a">ボタン</a>
</p>

<p>
    <dfn>echo-input-lg</dfn>
    <input type="text" class="echo-input echo-input-lg" size="20" value="吾輩は猫である。" />
    <a href="#" class="echo-button echo-button-lg echo-button-style-a">ボタン</a>
</p>

sub class echo-input-fixed

.echo-input-(size) と同時に付与すると、テキスト入力を即す欄が (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。

このサンプルコードでは比較のため、同サイズのボタンを表示している。

echo-input-sm ボタン

(default) ボタン

echo-input-lg ボタン

<p>
    <dfn>echo-input-sm</dfn>
    <input type="text" class="echo-input echo-input-fixed echo-input-sm" size="20" value="吾輩は猫である。" />
    <a href="#" class="echo-button echo-button-fixed echo-button-sm echo-button-style-a">ボタン</a>
</p>

<p>
    <dfn>(default)</dfn>
    <input type="text" class="echo-input echo-input-fixed" size="20" value="吾輩は猫である。" />
    <a href="#" class="echo-button echo-button-fixed echo-button-style-a">ボタン</a>
</p>

<p>
    <dfn>echo-input-lg</dfn>
    <input type="text" class="echo-input echo-input-fixed echo-input-lg" size="20" value="吾輩は猫である。" />
    <a href="#" class="echo-button echo-button-fixed echo-button-lg echo-button-style-a">ボタン</a>
</p>