inFakt Styleguide

Pola tekstowe, select, textarea

<div class="field">
  <label for="test">Pole tekstowe</label>
  <input id="test" type="text">
</div>

Rozmiary pól tekstowych

Rozmiary pól tekstowych definiujemy odpowiednimi klasami. Takie same klasy mogą być wykorzystane do ustawienia szerokości pól typu select oraz textarea.

<div class="field">
  <label for="test-1">small--xxxx</label>
  <input id="test-1" class="small--xxxx" type="text">
</div>
<div class="field">
  <label for="test-2">small--xxx</label>
  <input id="test-2" class="small--xxx" type="text">
</div>
<div class="field">
  <label for="test-3">small--xx</label>
  <input id="test-3" class="small--xx" type="text">
</div>
<div class="field">
  <label for="test-4">small--x</label>
  <input id="test-4" class="small--x" type="text">
</div>
<div class="field">
  <label for="test-5">small--x-xx</label>
  <input id="test-5" class="small--x-xx" type="text">
</div>
<div class="field">
  <label for="test-6">small--x-xxx</label>
  <input id="test-6" class="small--x-xxx" type="text">
</div>
<div class="field">
  <label for="test-7">small--x-x</label>
  <input id="test-7" class="small--x-x" type="text">
</div>
<div class="field">
  <label for="test-8">small</label>
  <input id="test-8" class="small" type="text">
</div>
<div class="field">
  <label for="test-9">medium--xxx</label>
  <input id="test-9" class="medium--xxx" type="text">
</div>
<div class="field">
  <label for="test-10">medium--xx</label>
  <input id="test-10" class="medium--xx" type="text">
</div>
<div class="field">
  <label for="test-11">medium--x</label>
  <input id="test-11" class="medium--x" type="text">
</div>
<div class="field">
  <label for="test-12">medium</label>
  <input id="test-12" class="medium" type="text">
</div>
<div class="field">
  <label for="test-13">medium-xxx</label>
  <input id="test-13" class="medium-xxx" type="text">
</div>
<div class="field">
  <label for="test-14">long--xx</label>
  <input id="test-14" class="long--xx" type="text">
</div>
<div class="field">
  <label for="test-15">long--xxx</label>
  <input id="test-15" class="long--xxx" type="text">
</div>
<div class="field">
  <label for="test-16">long--extra</label>
  <input id="test-16" class="long--extra" type="text">
</div>
<div class="field">
  <label for="test-17">auto</label>
  <input id="test-17" class="auto" type="text">
</div>

Textarea

<div class="summary-info summary-info--textarea">
  <div class="field">
    <label for="text-1">Tekst w e-mailu</label>
    <textarea name="text-1" id="text-1" cols="30" rows="5"></textarea>
  </div>
</div>

Select

W celu dostosowania wyglądu pól select do wyglądu graficznego innych elementów formularza w aplikacji, wykorzystujemy bibliotekę Select2.

<div class="field">
  <label for="test-27">Wybierz</label>
  <select name="test-27" id="test-27">
    <option value="14">Zakup towarów i materiałów</option>
    <option value="15">Opłata za media</option>
    <option value="14">Koszty firmy</option>
    <option value="14">Dokument wewnętrzny</option>
  </select>
</div>

Selekty ułożone liniowo

<div class="field">
  <label for="date-start-company">Data rozpoczęcia księgowania</label>
  <div class="select-month-year">
    <select name="date-start-accounting" id="date-start-accounting-month-1">
      <option value="1">Styczeń</option>
      <option value="2">Luty</option>
      <option value="3">Marzec</option>
      <option value="4">Kwiecień</option>
      <option value="5">Maj</option>
      <option value="6" selected>Czerwiec</option>
      <option value="7">Lipiec</option>
      <option value="8">Sierpień</option>
      <option value="9">Wrzesień</option>
      <option value="10">Październik</option>
      <option value="11">Listopad</option>
      <option value="12">Grudzień</option>
    </select>

    <select name="date-start-accounting" id="date-start-accounting-month">
      <option value="10">2010</option>
      <option value="11">2011</option>
      <option value="12">2012</option>
      <option value="13">2013</option>
      <option value="14">2014</option>
    </select>

  </div>
</div>

Formularz zgrupowany

W przypadku informacji dotyczących tego samego aspektu, stosujemy zgrupowany formularz, w którym poszczególne pola formularza stykają się ze sobą.

<div class="field field-group">
  <div class="row">
    <label for="user-country">Kraj</label>
    <input id="user-country" type="text" value="Polska" readonly>
  </div>

  <div class="row">
    <label for="user-zip-code">Kod pocztowy</label>
    <input id="user-zip-code" type="text">
  </div>

  <div class="row">
    <label for="user-state">Województwo</label>
    <select name="user-state" id="user-state">
      <option value="">Małopolskie</option>
      <option value="">Podkarpackie</option>
    </select>
  </div>

  <div class="row">
    <label for="user-powiat">Powiat</label>
    <input id="user-powiat" type="text">
  </div>
</div>

Datepicker

Do wyboru daty w aplikacji wykorzystujemy plugin jQuery UI – Datepicker.

<div class="field">
  <label for="test-20">Data:</label>
  <input id="test-20" class="small x-datepicker" type="text">
</div>