echo-input
テキスト入力を即す欄を表示する。要素に直接クラスを付与する(ほとんどの場合、input要素、textarea要素となる)。
左右に 1em
の余白が確保される。
レイアウトは component > .echo-form, layout > .echo-forms
を使用することが望ましい。
.is-error
を付与するとエラー表示となり、色が $important
に変わる。
(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
に対応している。
このサンプルコードでは比較のため、同サイズのボタンを表示している。
<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) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。
このサンプルコードでは比較のため、同サイズのボタンを表示している。
<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>