inFakt Styleguide

Dodatkowe elementy

Formularz zawierający „preloader” ładowania danych.

loader
<div class="row">
  <label for="user-zip-code2">Kod pocztowy</label>
  <input id="user-zip-code2" type="text">
  <img class="loader" src="/wp-content-new/themes/infakt/assets/images/it/dev/blue_loader.gif" alt="loader">
</div>

Formularze z tooltipami.

Jeśli Twoja firma nie jest jeszcze zarejestrowana, zaznacz tę opcję oraz wybierz planowaną datę rozpoczęcia działalności gospodarczej.
<div class="field checbox--default">
  <input type="checkbox" id="user-statute-1">
  <label for="user-statute-1">Moja firma nie jest jeszcze zarejestrowana</label>

  <div class="tooltip-box--ico">
    <span class="ico-active question-ico"></span>
    <div class="tooltip width-300 hide">
      Jeśli Twoja firma nie jest jeszcze zarejestrowana, zaznacz tę opcję oraz wybierz planowaną datę rozpoczęcia działalności gospodarczej.
    </div>
  </div>
</div>
Uwaga: Zaznacz pierwszy miesiąc, który ma być rozliczany przez Biuro Rachunkowe inFakt.
<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 class="tooltip-box--ico">
      <span class="ico-active question-ico"></span>
      <div class="tooltip width-300 hide">
        Uwaga: Zaznacz pierwszy miesiąc, który ma być rozliczany przez Biuro Rachunkowe inFakt.
      </div>
    </div>
  </div>
</div>

Grupa przycisków

Wstecz
<div class="btn--group">
  <a class="btn--before light" href="#">Wstecz</a>
  <button type="submit" class="btn green btn--next">Dalej</button>
</div>

Wyszukiwarka numeru NIP z captcha

Odśwież obrazek Źródło: www.stat.gov.pl/regon
<div class="field">
  <label for="nip_number">Twój numer NIP</label>
  <input type="text" id="nip_number" class="medium--x">
</div>
<!-- Captcha -->
<div class="field">
  <div class="captcha">
    <div>
      <img src="/wp-content-new/themes/infakt/assets/images/it/dev/captcha.png" alt="">
      <a href="#" title="Odśwież obrazek" class="captcha-refresh">
        <span>Odśwież obrazek</span>
      </a>
      <span>Źródło: www.stat.gov.pl/regon</span>
    </div>

    <div class="field">
      <label for="captcha_code">Kod z obrazka</label>
      <input type="text" id="captcha_code" class="medium--x">
    </div>
  </div>
</div>
<button class="btn blue btn--search btn--left">Wyszukaj</button>
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, architecto?
      %
      Wskaźnik VAT to procentowy udział sprzedaży, w związku z którą przysługuje odliczenie VAT do całkowitej wartości sprzedaży. Wskaźnik określa, jaki procent odliczenia VAT przysługuje od kosztów, których nie da się jednoznacznie przyporządkować sprzedaży opodatkowanej ani zwolnionej.
<ul class="group list-radio">
  <li class="radio">
    <input type="radio" name="vat-3" id="vat-8" checked>
    <label for="vat-8">Prowadzę sprzedaż ogólną <span class="desc">(nie wystawiam faktur ze stawką “zw”)</span></label>
  </li>

  <li class="radio">
    <input type="radio" name="vat-3" id="vat-9">
    <label for="vat-9">Prowadzę sprzedaż mieszaną <span class="desc">(wystawiam  faktury  ze stawką “23%, 22%, 8%, 7%, 5%, 3%, 0%” i “zw”.)</span></label>

    <ul class="list-decimal--inside">
      <li>
        <label>Podaj prognozowany wskaźnik VAT w 2014 roku.</label>
        <div class="tooltip-box--ico">
          <span class="ico-active question-ico"></span>
          <div class="tooltip hide width-300">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, architecto?
          </div>
        </div>
        <div class="field radio-level--inside">
          <label for="data-vat-1">Podaj wskaźnik</label>
          <input class="small--x" id="data-vat-1" type="text"> %

          <div class="tooltip-box--ico">
            <span class="ico-active question-ico"></span>
            <div class="tooltip hide width-300">
              Wskaźnik VAT to procentowy udział sprzedaży, w związku z którą przysługuje odliczenie VAT do całkowitej wartości sprzedaży. Wskaźnik określa, jaki procent odliczenia VAT przysługuje od kosztów, których nie da się jednoznacznie przyporządkować sprzedaży opodatkowanej ani zwolnionej.
            </div>
          </div>
        </div>
      </li>

      <li>
        <label>Podaj wartość sprzedaży opodatkowanej od początku roku.</label>
        <div class="field radio-level--inside">
          <label for="data-vat-2">Podaj sumę</label>
          <input class="small--x" id="data-vat-2" type="text" value="25,50"></div>
      </li>

      <li>
        <label>Podaj wartość sprzedaży zwolnionej od początku roku.</label>
        <div class="field radio-level--inside">
          <label for="data-vat-3">Podaj sumę</label>
          <input class="small--x" id="data-vat-3" type="text" value="25,50"></div>
      </li>

      <li>
        <label>Podaj wartość sprzedaży całkowitej od początku roku.</label>
        <div class="field radio-level--inside">
          <label for="data-vat-4">Podaj sumę</label>
          <input class="small--x" id="data-vat-4" type="text" value="25,50"></div>
      </li>

       <li>
        <label>Podaj wartość VATu odliczonego od pozostałych nabyć.</label>
        <div class="field radio-level--inside">
          <label for="data-vat-5">Podaj sumę</label>
          <input class="small--x" id="data-vat-5" type="text" value="25,50"></div>
      </li>

      <li>
        <label>Czy posiadasz towary lub środki trwałe w okresie korekty?</label>
        <ul class="group list-radio">
          <li>
            <div class="radio">
              <input type="radio" name="data-vat" id="data-vat-6" checked>
              <label for="data-vat-6">Tak</label>
            </div>
          </li>

          <li>
            <div class="radio">
              <input type="radio" name="data-vat" id="data-vat-7">
              <label for="data-vat-7">Nie</label>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>