Input

Default
.e-input 

<div class="e-field">
  <label for="input1" class="e-field__label">
    Form input label
  </label>
  <input id="input1" type="text" placeholder="Placeholder" class="e-input">
</div>


                        <div class="e-field">
                          <label for="input1" class="e-field__label">Form input label</label>
                          <input id="input1" type="text" placeholder="Placeholder" class="e-input">
                        </div>

Sizes

Small
.e-input-small 

<div class="e-field">
  <label for="textarea2" class="e-field__label">
    Form input label
  </label>
  <input id="textarea2" type="text" class="e-input e-input-small">
</div>


                          <div class="e-field">
                            <label for="textarea2" class="e-field__label">Form input label</label>
                            <input id="textarea2" type="text" class="e-input e-input-small">
                          </div>

Medium
.e-input-medium 

<div class="e-field">
  <label for="textarea2" class="e-field__label">
    Form input label
  </label>
  <input id="textarea2" type="text" class="e-input e-input-medium">
</div>


                          <div class="e-field">
                            <label for="textarea2" class="e-field__label">Form input label</label>
                            <input id="textarea2" type="text" class="e-input e-input-medium">
                          </div>

Large
.e-input-large 

<div class="e-field">
  <label for="textarea2" class="e-field__label">
    Form input label
  </label>
  <input id="textarea2" type="text" class="e-input e-input-large">
</div>


                          <div class="e-field">
                            <label for="textarea2" class="e-field__label">Form input label</label>
                            <input id="textarea2" type="text" class="e-input e-input-large">
                          </div>

Variations

Error
.e-input-error 

<div class="e-field">
  <label for="input3" class="e-field__label">
    Form input label
  </label>
  <input id="input3" class="e-input e-input-error">
</div>


                          <div class="e-field">
                            <label for="input3" class="e-field__label">Form input label</label>
                            <input id="input3" class="e-input e-input-error">
                          </div>

Error with message
.e-input-error

An error occured 
<div class="e-field">
  <label for="input3" class="e-field__label">
    Form input label
  </label>
  <input id="input3" class="e-input e-input-error">
  <span class="e-field__message e-field__message-error">
    An error occured
  </span>
</div>


                          <div class="e-field">
                            <label for="input3" class="e-field__label">Form input label</label>
                            <input id="input3" class="e-input e-input-error"><span class="e-field__message e-field__message-error">An error occured</span>
                          </div>

Disabled
:disabled, .e-input-disabled 

<div class="e-field">
  <label for="input2" class="e-field__label">
    Form input label
  </label>
  <input id="input2" disabled class="e-input">
</div>


                          <div class="e-field">
                            <label for="input2" class="e-field__label">Form input label</label>
                            <input id="input2" disabled class="e-input">
                          </div>

Code
.e-input-code 

<div class="e-field">
  <label for="input4" class="e-field__label">
    Form input label
  </label>
  <input id="input4" class="e-input e-input-code">
</div>


                          <div class="e-field">
                            <label for="input4" class="e-field__label">Form input label</label>
                            <input id="input4" class="e-input e-input-code">
                          </div>

Last update

Message style(scss): stylelint basics
Date:
()
Committer: Tamás Bíró
Component history