Modals

Modals são caixas de diálogo que sobrepõem a página de maneira inteligente e agradável. São muito utilizadas para formulários ou informações rápidas.

  <!-- Um elemento com o atributo data-modal dispara um modal que possui o id informado no data-modal. -->


  <button
  class="btn info" data-modal="myModal">My Modal</button>



  <div
  class="gt-modal">

  
    <!-- Aqui você vai atribuir um id ao seu modal -->
  
  
    <div
    id="myModal" class="modal">
  
    
      <!-- Este botão é responsável por fechar o modal -->
    
    
      <button
      class="modal-close" type="button">×</button>
    
    
      <div
      class="modal-body">
    
      
        <!-- Digite o conteúdo do modal aqui -->
      
    
      </div>
    
  
    </div>
  

  </div>

            

Botões

Recomendamos que as classes para botão sejam utilizadas preferencialmente nos elementos button e a.

.btn

A classe básica para botões é a .btn. Ela pode ser utilizada junto com classes auxiliares para gerar cores e detalhes diferentes.

.action

As .action são botões. Contudo, foram criadas para escopos com espaço reduzido, como uma posição numa tabela, ou o cabeçalho de um cartão. São excelentes para serem aplicadas com ícones. Deve ser utilizada em tags a e button.

Dropdowns & Dropups

Um dropdown/up é um menu contextual, que deve conter uma lista de links. É dependente do GainTime JS.

Recomendamos que você utlize div para colocar a classe dropdown ou a classe dropdup, e que dentro de div você tenha um elemento que descreva o contexto, e um elemento do tipo lista não ordenada (ul).

Basic

• A

DOWN-LEFT

• A

DOWN-RIGHT

• A
• B

UP-LEFT

• A
• B
• C

UP-RIGHT

• C
• B
• A

• OI TUDO BEM?

<div class="btn dropdown-right danger">
  <span>DOWN RIGHT</span>
  <ul>
    <li>A</li>
    <li>B</li>
  </ul>
</div>
            

Tags

As .tag são rótulos de ênfase visual para serem adicionadas preferencialmente em span, em phrase tags (ex: strong, em, code, samp, kbd, var), ou em formatting tags (ex: b, i, u, strike).

Badges

Os .badge são uma boa opção para contadores de notificações e afins. Eles dão um realce arredondado em elementos do tipo span.

Informações

A classe de informação .inform foi construida para criar caixas de texto com destaque. Muito útil para textos de alerta ou aviso. Deve ser adicionada ao elemento div, preferencialmente, e unida a .warning, .info, .success ou .danger.

Mensagens

As mensagens .msg são semelhantes às informações, porém são feitas para serem temporárias e, por isso, devem ser acompanhadas por um botão type="button" class="close" que vai fazer com que a .msg seja removida do DOM.

Na .msg você pode ficar a vontade para usar tags de texto. :)

A função de fechar a mensagem é totalmente dependente do GainTime JS.

<div class="msg success">
  <button type="button" class="close"></button>
  <p>Exemplo de mensagem temporária.</p>
</div>
            

Barra de progresso

As barras de progresso .bar são dependentes de HTML5 e GainTime JS. Elas possuem uma estrutura particular que precisa ser seguida.

A estrutura básica é a seguinte:

Atributos obrigatórios:

• class="bar" - Classe que ativa a barra de progresso.
• data-percentage="x%" - Atributo que determina o progresso.

Atributos opcionais:

• class="bar" - Classe que ativa a barra de progresso.
• data-color="" - Atributo que determina a cor do indicador de progresso. Variações: .success, .warning, .danger, .info. O padrão é #2e7bcf, mas você pode criar a sua própria classe de cor e atribuir ao data-color.
• data-tooltip="" - Determina a mensagem que vai aparecer quando a barra estiver em :hover.
• data-text="" - Determina o texto que deve aparecer no indicador de progresso.

Tooltips

Essa não é a melhor implementação de tooltip que você vai ver na vida, mas pode ser útil. Temos apenas Tooltips que aparecem abaixo do elemento, e eles são ativados através do atributo data-tooltip="Seu Texto Aqui". As barras de progresso da seção anterior são exemplos de uso.

Cards

Os cards são caixas flexíveis muito úteis na hora de listar itens com título, imagem e descrição.

  <div
  class="card">

  
    <div
    class="card-body">
  
    
      <h4
      class="card-title">Título do card</h4>
    
    ...
    
      <div
      class="card-img">
    
      
        <img/>
      
    
      </div>
    
  
    </div>
  

  </div>

              

Card com Grid System

project7

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

project7

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Listas verticais

A classe .vertical-list vai colocar todos os itens que são seus filhos diretos em formato de lista vertical.

• ASD
• ASD
• ASD

Vertical List table

A classe .vertical-list-table vai colocar todos os itens que são seus filhos diretos em formato de tabela vertical. A .vertical-list-table pode ser ainda concatenada com as classes .bordered e .striped.

• Item com a classe .active
• ASD
• ASD

Lista de .btn: