inFakt Styleguide

Tabela 01

Usuń konto
Dodaj nowe konto
Nazwa banku Numer konta Swift Domyślne Edycja
mBank 01 1140 2004 0000 3002 3189 0000 pkobpplw Konto domyślne Edytuj
Reiffeisen Bank 00 1000 2004 0000 3002 3189 0000 pkobpplw Ustaw jako konto domyślne Edytuj 
<div class="table-bar--top table-bar--top-arrow">
  <div class="left">
    <a class="btn btn--light btn--delete" href="#">Usuń konto</a>
  </div>

  <div class="right">
    <a class="btn blue btn--add-white" href="#">Dodaj nowe konto</a>
  </div>
</div>
<table>
  <thead>
    <tr>
      <td class="lp">
        <input id="tab-01-q" type="checkbox">
        <label for="tab-01-1">Zaznacz</label>
      </td>
      <td>Nazwa banku</td>
      <td>Numer konta</td>
      <td>Swift</td>
      <td>Domyślne</td>
      <td>Edycja</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="lp">
        <input id="tab-01-2" type="checkbox">
        <label for="tab-01-2">Zaznacz</label>
      </td>
      <td>mBank</td>
      <td>01 1140 2004 0000 3002 3189 0000</td>
      <td>pkobpplw</td>
      <td>
        <span class="txt--green">Konto domyślne</span>
      </td>
      <td>
        <a href="#">Edytuj</a>
      </td>
    </tr>

    <tr>
      <td class="lp">
        <input id="tab-01-3" type="checkbox">
        <label for="tab-01-3">Zaznacz</label>
      </td>
      <td>Reiffeisen Bank</td>
      <td>00 1000 2004 0000 3002 3189 0000</td>
      <td>pkobpplw</td>
      <td>
        <a href="#">Ustaw jako konto domyślne</a>
      </td>
      <td>
        <a href="#">Edytuj</a>
      </td>
    </tr>
  </tbody>
</table>

Tabela 02

Oznacz jako zapłacone Wyślij e-mailem Usuń Drukuj
1-50 z 364
Numer Sortuj Nazwa klienta Sortuj Data wystawienia Sortuj Wartość brutto Sortuj Status Sortuj
15/01/2014 inFakt Sp. z o.o. 2014-01-29 545,40 Wydrukowano
03/01/2014 inFakt Sp. z o.o. 2014-01-16 2548 Szkic
25/12/2013 inFakt Sp. z o.o. 2013-01-08 255,28 Wysłano
03/08/2013 inFakt Sp. z o.o. 2013-08-07 2460,30 Zapłacono 
<div class="table-bar--top table-bar--top-arrow">
  <div class="left">
    <a class="btn btn--light btn--ok" href="#">Oznacz jako zapłacone</a>
    <a class="btn btn--light btn--send-email" href="#">Wyślij e-mailem</a>
    <a class="btn btn--light btn--delete" href="#">Usuń</a>
    <a class="btn btn--light btn--print" href="#">Drukuj</a>
  </div>

  <div class="right">
    <span class="pagination-info">1-50 z 364</span>

    <div class="group table-pagintion">
      <a class="disable prev" href="#">
        Wstecz
      </a>
      <a class="next" href="#">
        Dalej
      </a>
    </div>

    <select class="pagination-select small--xxx" name="pagination" id="pagination">
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="75">75</option>
      <option value="100">100</option>
    </select>
  </div>
</div>
<table>
  <thead>
    <tr>
      <td class="lp">
        <input id="tab-02-1" type="checkbox">
        <label for="tab-02-1">Zaznacz</label>
      </td>
      <td>
        Numer
        <a class="sort" href="#">Sortuj</a>
      </td>
      <td>
        Nazwa klienta
        <a class="sort" href="#">Sortuj</a>
      </td>
      <td>
        Data wystawienia
        <a class="sort sort-up" href="#">Sortuj</a>
      </td>
      <td>
        Wartość brutto
        <a class="sort" href="#">Sortuj</a>
      </td>
      <td>
        Status
        <a class="sort" href="#">Sortuj</a>
      </td>
    </tr>
  </thead>

  <tbody>
    <!-- Row 1 -->
    <tr>
      <td class="lp">
        <input id="tab-02-2" type="checkbox">
        <label for="tab-02-2">Zaznacz</label>
      </td>

      <td>
        <a href="#">15/01/2014</a>
      </td>

      <td>
        <a href="#">inFakt Sp. z o.o.</a>
      </td>

      <td>2014-01-29</td>

      <td>545,40</td>

      <td>
        <span class="status status--printed">Wydrukowano</span>
      </td>
    </tr>

    <!-- Row 2 -->
    <tr>
      <td class="lp">
        <input id="tab-02-3" type="checkbox">
        <label for="tab-02-3">Zaznacz</label>
      </td>

      <td>
        <a href="#">03/01/2014</a>
      </td>

      <td>
        <a href="#">inFakt Sp. z o.o.</a>
      </td>

      <td>2014-01-16</td>

      <td>2548</td>

      <td>
        <span class="status status--draft">Szkic</span>
      </td>
    </tr>

    <!-- Row 3 -->
    <tr>
      <td class="lp">
        <input id="tab-02-4" type="checkbox">
        <label for="tab-02-4">Zaznacz</label>
      </td>

      <td>
        <a href="#">25/12/2013</a>
      </td>

      <td>
        <a href="#">inFakt Sp. z o.o.</a>
      </td>

      <td>2013-01-08</td>

      <td>255,28</td>

      <td>
        <span class="status status--sent">Wysłano</span>
      </td>
    </tr>

    <!-- Row 4 -->
    <tr>
      <td class="lp">
        <input id="tab-02-6" type="checkbox">
        <label for="tab-02-6">Zaznacz</label>
      </td>

      <td>
        <a href="#" class="attach-ico">03/08/2013</a>
      </td>

      <td>
        <a href="#">inFakt Sp. z o.o.</a>
      </td>

      <td>2013-08-07</td>

      <td>2460,30</td>

      <td>
        <span class="status status--paid">Zapłacono</span>
      </td>
    </tr>
  </tbody>
</table>

Tabela 03

Nazwa towaru lub usługi Ilość Cena netto Wartość netto Stawka VAT Kwota VAT Wartość brutto
Razem: 3148,80
Programowanie PHP 1 2560,00 2560,00 23% 588,80 2148,80 
<table>
  <thead>
    <tr class="table-bar--preview">
      <td>Nazwa towaru lub usługi</td>
      <td>Ilość</td>
      <td>Cena netto</td>
      <td>Wartość netto</td>
      <td>Stawka VAT</td>
      <td>Kwota VAT</td>
      <td>Wartość brutto</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="6" class="sum-text">Razem:</td>
      <td class="sum-value">3148,80</td>
    </tr>
  </tfoot>

  <tbody>
    <!-- Row 1 -->
    <tr>
      <td>Programowanie PHP</td>
      <td>1</td>
      <td>2560,00</td>
      <td>2560,00</td>
      <td>23%</td>
      <td>588,80</td>
      <td>2148,80</td>
    </tr>
  </tbody>
</table>

Tabela 04

Nazwa towaru lub usługi Ilość Cena netto Wartość netto Stawka VAT Kwota VAT Wartość brutto
Dodaj nowe pole Razem do zapłaty: 7449,00
Sprzedawca: Jan Nowak Zapłacono: Wpisz kwotę
Odbiorca: Dodaj Pozostało do zapłaty: 0,00
Usuń 
<div class="content-edit--table">
<table class="table-wrapper--edit">
  <thead>
    <tr class="table-bar--edit">
      <th>Nazwa towaru lub usługi</th>
      <th>Ilość</th>
      <th>Cena netto</th>
      <th>Wartość netto</th>
      <th>Stawka VAT</th>
      <th>Kwota VAT</th>
      <th>Wartość brutto</th>
    </tr>
  </thead>

  <tfoot class="tfoot-summary">
    <tr class="summary-right summary-bulk sum-text-alignment">
      <td class="v-align--top" colspan="2">
        <a href="#" class="btn blue btn--add-white">Dodaj nowe pole</a>
      </td>

      <td class="align-right right-clear" colspan="4">
        <strong>Razem do zapłaty:</strong>
      </td>
      <td class="sum">7449,00</td>
    </tr>

    <tr class="summary-right table-sum-desc sum-text-alignment">
      <td colspan="4">
        <span class="grey">Sprzedawca:</span>
        Jan Nowak
      </td>

      <td class="grey align-right right-clear" colspan="2">Zapłacono:</td>
      <td>
        <a href="#">Wpisz kwotę</a>
      </td>
    </tr>

    <tr class="summary-right table-sum-desc sum-text-alignment">
      <td colspan="4">
        <span class="grey">Odbiorca:</span>
        <a href="#">Dodaj</a>
      </td>

      <td class="align-right grey right-clear" colspan="2">Pozostało do zapłaty:</td>
      <td>
        <span class="grey">0,00</span>
      </td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>
        <a class="delete-row" href="#" title="Usuń">Usuń</a>
        <div class="fake-textarea" contenteditable="true"></div>
      </td>

      <td>
        <input class="small--xxxx" type="text" value="1">
      </td>

      <td>
        <input type="text" value="2560,00">
      </td>

      <td>
        <input type="text" value="2560,00">
      </td>

      <td>
        <select class="small--x-xx" name="vat-1" id="vat-1">
          <option value="23">23%</option>
          <option value="7">7%</option>
        </select>
      </td>

      <td>
        <input type="text" value="588,80">
      </td>

      <td>
        <input type="text" value="2148,80">
      </td>
    </tr>
  </tbody>
</table>
</div>

Tabela 05

Nazwa towaru lub usługi Ilość Cena netto Wartość netto Stawka VAT Kwota VAT Wartość brutto
Dodaj nowe pole Razem: 6550,00 – 899,00 7449,00
W tym: 2500,00 23% 575,00 3075,00
4050,00 8% 324,00 4374,00
Razem do zapłaty: 7449,00
Sprzedawca: Jan Nowak Zapłacono: Wpisz kwotę
Odbiorca: Dodaj Pozostało do zapłaty: 0,00
Usuń 
<table class="table-wrapper--edit">
  <thead>
    <tr class="table-bar--edit">
      <th>Nazwa towaru lub usługi</th>
      <th>Ilość</th>
      <th>Cena netto</th>
      <th>Wartość netto</th>
      <th>Stawka VAT</th>
      <th>Kwota VAT</th>
      <th>Wartość brutto</th>
    </tr>
  </thead>

  <tfoot class="tfoot-summary tfoot-summary--expanded">
    <tr class="summary-right summary-bulk">
      <td colspan="2">
        <a href="#" class="btn blue btn--add-white">Dodaj nowe pole</a>
      </td>
      <td class="align-right">Razem:</td>
      <td>6550,00</td>
      <td>-</td>
      <td>899,00</td>
      <td>7449,00</td>
    </tr>

    <tr class="summary-right pt-5">
      <td class="align-right" colspan="3">W tym:</td>
      <td>2500,00</td>
      <td>23%</td>
      <td>575,00</td>
      <td>3075,00</td>
    </tr>

    <tr class="summary-right table-sum-separator">
      <td colspan="3"></td>
      <td>4050,00</td>
      <td>8%</td>
      <td>324,00</td>
      <td>4374,00</td>
    </tr>

    <tr class="sum-text-alignment">
      <td class="align-right right-clear" colspan="6">
        <strong>Razem do zapłaty:</strong>
      </td>
      <td class="sum">7449,00</td>
    </tr>

    <tr class="summary-right table-sum-desc sum-text-alignment">
      <td colspan="4">
        <span class="grey">Sprzedawca:</span>
        Jan Nowak
      </td>

      <td class="grey align-right right-clear" colspan="2">Zapłacono:</td>
      <td>
        <a href="#">Wpisz kwotę</a>
      </td>
    </tr>

    <tr class="summary-right table-sum-desc sum-text-alignment">
      <td colspan="4">
        <span class="grey">Odbiorca:</span>
        <a href="#">Dodaj</a>
      </td>

      <td class="align-right grey right-clear" colspan="2">Pozostało do zapłaty:</td>
      <td class="grey">0,00</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>
        <a class="delete-row" href="#" title="Usuń">Usuń</a>
        <div class="fake-textarea" contenteditable="true"></div>
      </td>

      <td>
        <input class="small--xxxx" type="text" value="1">
      </td>

      <td>
        <input type="text" value="2560,00">
      </td>

      <td>
        <input type="text" value="2560,00">
      </td>

      <td>
        <select class="small--x-xx" name="vat-1" id="vat-1">
          <option value="23">23%</option>
          <option value="7">7%</option>
        </select>
      </td>

      <td>
        <input type="text" value="588,80">
      </td>

      <td>
        <input type="text" value="2148,80">
      </td>
    </tr>
  </tbody>
</table>

Tabela 06

Usuń Zmień nazwę pliku
1-50 z 364
Nazwa pliku Sortuj Uwagi dla księgowego Sortuj Data dodania Sortuj Data zaksięgowania Sortuj Status Sortuj
FV_2014_08_09.pdf
Za paliwo
Edytuj
Usuń opis
Anuluj
2014-01-29 2014-01-29 Zaksięgowany
FV_2014_08_09.pdf
Za paliwo Edytuj
2014-01-29 2014-01-29 Zaksięgowany
FV_2014_08_09.pdf
Dodaj opis
Anuluj
2014-01-29 2014-01-29 Odrzucony
Powód odrzucenia Wprowadzony do środków trwałych 
<div class="table-bar--top table-bar--top-arrow">
  <div class="left">
    <a class="btn btn--light btn--delete" href="#">Usuń</a>
    <a class="btn btn--light btn--edit" href="#">Zmień nazwę pliku</a>
  </div>

  <div class="right">
    <span class="pagination-info">1-50 z 364</span>

    <div class="group table-pagintion">
      <a class="disable prev" href="#">
        Wstecz
      </a>
      <a class="next" href="#">
        Dalej
      </a>
    </div>

    <select class="pagination-select small--xxx" name="pagination" id="pagination">
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="75">75</option>
      <option value="100">100</option>
    </select>
  </div>
</div>
<table>
  <thead>
    <tr>
      <td class="lp">
        <input id="tab-06-1" type="checkbox">
        <label for="tab-06-1">Zaznacz</label>
      </td>
      <td>
        Nazwa pliku
        <a class="sort" href="#">Sortuj</a>
      </td>
      <td>
        Uwagi dla księgowego
        <a class="sort" href="#">Sortuj</a>
      </td>
      <td>
        Data dodania
        <a class="sort sort-up" href="#">Sortuj</a>
      </td>
      <td>
        Data zaksięgowania
        <a class="sort" href="#">Sortuj</a>
      </td>
      <td>
        Status
        <a class="sort" href="#">Sortuj</a>
      </td>
    </tr>
  </thead>

  <tbody>
    <!-- Row 1 -->
    <tr>
      <td class="lp">
        <input id="tab-06-2" type="checkbox">
        <label for="tab-06-2">Zaznacz</label>
      </td>

      <td>
        <a class="single-line" href="#">FV_2014_08_09.pdf</a>
      </td>

      <td>
        <div class="nowrap">
          <span class="single-line">Za paliwo</span>
          <div class="tooltip-wrapper">
            <a class="icon icon-edit" title="Edytuj" href="#">Edytuj</a>
            <div class="hide tooltip tooltip-bottom--left width-415">
              <div class="field field-column">
                <label for="desc">Uwagi dla księgowego</label>
                <textarea id="desc">Opłata za programowanie PHP serwisu dla salonu piękności Irena Eris</textarea>
              </div>
              <div class="btn--group">
                <div class="left">
                  <a href="#" class="text--red light">Usuń opis</a>
                </div>
                <div class="right">
                  <a href="#" class="light">Anuluj</a>
                  <button class="btn green btn--ok">Zapisz</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </td>

      <td>2014-01-29</td>

      <td>2014-01-29</td>

      <td>
        <span class="status status--paid">Zaksięgowany</span>
      </td>
    </tr>

    <!-- Row 2 -->
    <tr class="status--yellow">
      <td class="lp">
        <input id="tab-06-3" type="checkbox" checked>
        <label for="tab-06-3">Zaznacz</label>
      </td>

      <td>
        <a class="single-line hide" href="#">FV_2014_08_09.pdf</a>
        <div class="inplace-edit">
          <input type="text" name="product-name" value="FV_2014_08_09">
          <button class="btn green btn--ok btn-no-text" type="submit">Zapisz</button>
        </div>
      </td>

      <td>
        <div class="nowrap">
          <span class="single-line">Za paliwo</span> <a class="icon icon-edit" title="Edytuj" href="#">Edytuj</a>
        </div>
      </td>

      <td>2014-01-29</td>

      <td>2014-01-29</td>

      <td>
        <span class="status status--paid">Zaksięgowany</span>
      </td>
    </tr>

    <!-- Row 3 -->
    <tr>
      <td class="lp">
        <input id="tab-06-4" type="checkbox">
        <label for="tab-06-4">Zaznacz</label>
      </td>

      <td>
        <a class="single-line" href="#">FV_2014_08_09.pdf</a>
      </td>

      <td>
        <div class="tooltip-wrapper">
          <a href="#">Dodaj opis</a>
          <div class="tooltip tooltip-bottom--left width-415 hide">
            <div class="field field-column">
              <label for="desc1">Uwagi dla księgowego</label>
              <textarea id="desc1">Opłata za programowanie PHP serwisu dla salonu piękności Irena Eris</textarea>
            </div>
            <div class="btn--group">
              <div class="right">
                <a href="#" class="light">Anuluj</a>
                <button class="btn green btn--ok">Zapisz</button>
              </div>
            </div>
          </div>
        </div>
      </td>

      <td>2014-01-29</td>

      <td>2014-01-29</td>

      <td>
        <span class="status status--pay">Odrzucony</span>
        <div class="tooltip-box--ico">
          <span class="ico-active question-ico"></span>
          <div class="tooltip tooltip-right-top width-300 hide">
            Powód odrzucenia
            <span class="reason-details">Wprowadzony do środków trwałych</span>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Tabela 07

Stawka VAT Cała wartość faktury brutto Rodzaj kosztu
Dodaj kolejną stawkę
Usuń
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, repellat. 
<table class="table-wrapper--edit">
  <thead>
    <tr class="table-bar--edit">
      <th>Stawka VAT</th>
      <th>Cała wartość faktury brutto</th>
      <th>Rodzaj kosztu</th>
    </tr>
  </thead>

  <tfoot class="tfoot-summary">
    <tr class="summary-right summary-bulk sum-text-alignment">
      <td class="v-align--top" colspan="3">
        <a href="#" class="btn blue btn--add-white">Dodaj kolejną stawkę</a>
      </td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td class="width-85 nowrap">
        <a class="delete-row" href="#" title="Usuń">Usuń</a>
        <select class="small--x-xx" name="vat-1" id="vat-1">
          <option value="23">23%</option>
          <option value="7">7%</option>
        </select>
        <div class="tooltip-box--ico">
          <span class="ico-active question-ico"></span>
          <div class="tooltip width-300 hide">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, repellat.
          </div>
        </div>
      </td>
      <td class="width-300">
        <input type="text" value="2560,00">
      </td>
      <td class="v-align--middle">
        <ul class="group list-radio list-radio--inline">
          <li class="radio">
            <input type="radio" name="tab-07" id="tab-07-1" checked="checked">
            <label for="tab-07-1">Usługa</label>
          </li>
          <li class="radio">
            <input type="radio" name="tab-07" id="tab-07-2">
            <label for="tab-07-2">Towar</label>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Tabela 08

Oznacz jako zapłacone Drukuj
Miesiąc Sortuj Termin zapłaty Sortuj Dochód z okresu Sortuj Do zapłaty Sortuj Status
Styczeń 2014 2014-02-20 172,73 172,73 Szkic
1 korekta Styczeń 2014 2014-02-20 172,73 (123,12)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, repellat.
172,73 Szkic
Luty 2014 2014-02-20 172,73 172,73 Szkic 
<div class="table-bar--top table-bar--top-arrow">
  <div class="left">
    <a href="#" class="btn btn--light btn--ok">Oznacz jako zapłacone</a>
    <a class="btn btn--light btn btn--light btn--print" href="#">Drukuj</a>
  </div>
</div>
<table>
  <thead>
    <tr>
      <td class="lp">
        <input id="tab-08-1" type="checkbox">
        <label for="tab-08-1">Zaznacz</label>
      </td>

      <td>
        Miesiąc
        <a class="sort" href="#">Sortuj</a>
      </td>

      <td>
        Termin zapłaty
        <a class="sort" href="#">Sortuj</a>
      </td>

      <td>
        Dochód z okresu
        <a class="sort" href="#">Sortuj</a>
      </td>

      <td>
        Do zapłaty
        <a class="sort" href="#">Sortuj</a>
      </td>

      <td>Status</td>
    </tr>
  </thead>

  <tbody>
    <!-- Row 1 -->
    <tr class="status--red">
      <td class="lp">
        <input id="tab-08-2" type="checkbox">
        <label for="tab-08-2">Zaznacz</label>
      </td>

      <td>
        <a href="#">Styczeń 2014</a>
      </td>

      <td>2014-02-20</td>

      <td>172,73</td>
      <td>172,73</td>

      <td>
        <span class="status status--draft">Szkic</span>
      </td>
    </tr>

    <!-- Row 2 -->
    <tr>
      <td class="lp">
        <input id="tab-08-3" type="checkbox">
        <label for="tab-08-3">Zaznacz</label>
      </td>

      <td>
        <span class="grey multiply-row">1 korekta</span>
        <a href="#">Styczeń 2014</a>
      </td>

      <td>2014-02-20</td>

      <td>
        172,73 <span class="grey grey--small">(123,12)</span>
        <div class="tooltip-box--ico">
          <span class="ico-active question-ico"></span>
          <div class="tooltip tooltip-bottom--right width-300 hide">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, repellat.
          </div>
        </div>
      </td>
      <td>172,73</td>

      <td>
        <span class="status status--draft">Szkic</span>
      </td>
    </tr>

    <!-- Row 3 -->
    <tr class="status--green">
      <td class="lp">
        <input id="tab-08-4" type="checkbox">
        <label for="tab-08-4">Zaznacz</label>
      </td>

      <td>
        <a href="#">Luty 2014</a>
      </td>

      <td>2014-02-20</td>
      <td>172,73</td>
      <td>172,73</td>

      <td>
        <span class="status status--draft">Szkic</span>
      </td>
    </tr>
  </tbody>
</table>