Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Prefixos e sufixos

Personalização com adendos para os campos

Pra inserir um adendo ao input no início ou no final, envolva o input em um elemento com a classe ls-prefix-group. Depois coloque outro elemento (sugerimos span) com a classe ls-label-text-prefix antes ou depois do input.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<form action="" class="ls-form row">

  <label class="ls-label col-md-8">
    <b class="ls-label-text">Escreva o endereço do seu site</b>

    <div class="ls-prefix-group">
      <span class="ls-label-text-prefix">URL</span>
      <input type="text" name="nome" required >
    </div>
  </label>

  <label class="ls-label col-md-8">
    <b class="ls-label-text">Escreva o endereço do seu site</b>

    <div class="ls-prefix-group">
      <span class="ls-label-text-prefix">http://</span>
      <input type="text" name="nome" required >
      <span class="ls-label-text-prefix">.subdominio.com.br</span>
    </div>
  </label>

  <label class="ls-label col-md-6">
    <div class="ls-prefix-group">
      <span class="ls-label-text-prefix">Seu nome:</span>
      <input type="text" name="nome" placeholder="Completo, por favor..." required>
    </div>
  </label>

  <label class="ls-label col-md-12 col-sm-12">
    <b class="ls-label-text">Maximo de backups armazenados</b>
    <div class="row">
      <div class="ls-prefix-group col-md-4 col-sm-8 col-lg-3">
        <a href="" class="ls-label-text-prefix ls-bg-white">-</a>
        <input type="number" value="8" class="ls-txt-center ls-no-spin">
        <a href="" class="ls-label-text-prefix ls-bg-white">+</a>
      </div>
    </div>
  </label>
</form>

Pra mudar o layout basta adicionar no form a classe .ls-form-inline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<form action="" class="ls-form ls-form-inline row">

  <label class="ls-label col-md-8">
    <b class="ls-label-text">Escreva o endereço do seu site</b>

    <div class="ls-prefix-group">
      <span class="ls-label-text-prefix">URL</span>
      <input type="text" name="nome" required >
    </div>
  </label>

  <label class="ls-label col-md-10 col-sm-10">
    <b class="ls-label-text">Escreva o endereço do seu site</b>

    <div class="ls-prefix-group">
      <span class="ls-label-text-prefix">http://</span>
      <input type="text" name="nome" required >
      <span class="ls-label-text-prefix">.subdominio.com.br</span>
    </div>
  </label>

  <label class="ls-label col-md-6">
    <div class="ls-prefix-group">
      <span class="ls-label-text-prefix">Seu nome:</span>
      <input type="text" name="nome" placeholder="Completo, por favor..." required>
    </div>
  </label>

  <label class="ls-label col-md-12 col-sm-12">
    <b class="ls-label-text">Maximo de backups armazenados</b>
    <div class="row">
      <div class="ls-prefix-group col-md-4 col-sm-8 col-lg-3">
        <a href="" class="ls-label-text-prefix ls-bg-white">-</a>
        <input type="text" value="8" class="ls-txt-center">
        <a href="" class="ls-label-text-prefix ls-bg-white">+</a>
      </div>
    </div>
  </label>
</form>