Locaweb Style

Documentação

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

Tamanho dos campos

Aumente ou diminua o tamanho dos campos de formulários

Adicionando a classe .ls-field-lg o input recebe a altura padrão de botão grande.

   
1

<input type="text" class="ls-field-lg" placeholder="Placeholder">&nbsp;&nbsp;<input type="submit" class="ls-btn ls-btn-lg" value="Botão">

Para alterar a altura dos campos, basta incluir as classes abaixo:

Nome Resultado
ls-field-lg  
ls-field-md (tamanho default)  
ls-field-sm  
ls-field-xs  

Alterando altura dos selects

Para alterar a altura dos selects customizados, basta adicionar as classes abaixo na select.

1
2
3
4
5
6
7
8
9

<div class="ls-custom-select ls-field-sm">
  <select>
    <option value="">Pequeno</option>
    <option value="0"> qui dolorum quia </option>
    <option value="1"> dicta mollitia repudiandae </option>
  </select>
</div>

<input type="submit" class="ls-btn ls-btn-sm" value="Botão">
Nome Resultado Botão
ls-field-lg
ls-field-md (tamanho default)
ls-field-sm
ls-field-xs

Alterando altura dos campos com prefixos e sufixos

Para alterar a altura dos prefixos e sufixos, basta adicionar as classes abaixo na classe .ls-prefix-group

Nome Resultado
ls-field-lg
ls-field-md (tamanho default)
ls-field-sm
ls-field-xs 
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

  <form action="" class="ls-form ls-form-horizontal row">
  <label class="ls-label col-md-12 col-xs-12">
    <b class="ls-label-text">E-mail</b>
    <div class="ls-prefix-group ls-field-lg">
      <span class="ls-label-text-prefix">URL</span>
      <input type="text" name="nome" required >
    </div>
  </label>
  <div class="ls-actions-btn">
    <button class="ls-btn ls-btn-lg">Salvar</button>
    <button class="ls-btn-danger ls-btn-lg">Cancelar</button>
  </div>
</form>

<form action="" class="ls-form ls-form-inline row">
  <label class="ls-label col-md-11 col-xs-12">
    <b class="ls-label-text">Digite seu site</b>
    <div class="ls-prefix-group ls-field-md">
      <span class="ls-label-text-prefix">URL</span>
      <input type="text" name="nome" required >
    </div>
  </label>
  <div class="ls-actions-btn">
    <button class="ls-btn">Salvar</button>
  </div>
</form>

<form action="" class="ls-form ls-form-inline row">
  <label class="ls-label col-md-11 col-xs-12">
    <b class="ls-label-text">Domínio</b>
    <div class="ls-prefix-group ls-field-sm">
      <span class="ls-label-text-prefix">www</span>
      <input type="text" name="nome" required >
      <span class="ls-label-text-prefix">.com.br</span>
    </div>
  </label>
  <div class="ls-actions-btn">
    <button class="ls-btn ls-btn-sm">Enviar</button>
  </div>
</form>


<form action="" class="ls-form ls-form-inline row">
  <label class="ls-label col-md-8 col-xs-12">
    <b class="ls-label-text ls-hidden-accessible">E-mail</b>
    <div class="ls-prefix-group ls-field-xs">
      <span class="ls-label-text-prefix">URL</span>
      <input type="text" name="nome" required >
    </div>
  </label>
  <div class="ls-actions-btn">
    <button class="ls-btn ls-btn-xs">Salvar</button>
  </div>
</form>