Estilo

Esta página mostra os estilo que compõem o layout AGETIC. Os componentes descritos aqui são baseados no framework Bootstrap, e todos os componentes de estilo deste framework devem funcionar normalmente no layout AGETIC.

Barra de Título

É a barra de navegação no topo da página que além do nome do sistema, possui links de navegação, botões de login/logout, entre outros.

Exemplo:

<nav class="navbar navbar-ufms">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-2">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand nome-sistema" href="#">
                <span class="hidden-xs">Nome do Sistema</span>
                <span class="visible-xs">Sistema</span>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
            <ul class="nav navbar-nav">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
            </ul>
        </div>
    </div>
</nav>

Barra de Título com Toggle Sidebar

Além da barra de titu lo normal, temos a barra com o botão para mostrar ou esconder o sidebar

Exemplo:

<nav class="navbar navbar-ufms">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="toggle-sidebar-area">
                <button type="button" class="navbar-toggle sidebar-toggle" id="slide-submenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand nome-sistema" href="#">
                <span class="hidden-xs">Nome do Sistema</span>
                <span class="visible-xs">Sistema</span>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
            <ul class="nav navbar-nav">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
            </ul>
        </div>
    </div>
</nav>

Cabeçalho da Página

Alem do título da página, contém os links do breadcrumbs e o link de ajuda.

Exemplo:

Título da Página

  1. Início
  2. CRUD
  3. Operação
  4. Ajuda 
<section class="page-header">
    <h1 class="col-xs-6">Título da Página</h1>
    <ol class="col-xs-6 breadcrumb text-right">
        <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Início</a></li>
        <li><a href="#"> CRUD</a></li>
        <li class="active"> Operação</li>
        <li class="help text-danger"><a title="Ajuda" class="text-danger" id="impressao_padoc" >
                <i class="fa fa-question-circle" aria-hidden="true"></i> Ajuda</a>
        </li>
    </ol>
</section>

Boxes

Serve para agrupar elementos da página.

Exemplo:

Título do Box

Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer. 
<div class="box box-success col-xs-12">
    <div class="box-header">
        <h3 class="box-title"><i class="fa fa-dialog"></i>Título do Box</h3>
    </div>
    <div class="box-body">
        Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer.
    </div>
</div>

Boxes - Mostar/Esconder Conteúdo

Mostra ou esconde conteudo ao clicar no header da box.

Exemplo:

Titulo

Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer. 
<div class="box box-info">
    <div class="box-header">
        <h4 class="box-title">
            <div class="row">
                <a class="text-primary col-xs-12" data-toggle="collapse" href="#collapseExample"
                   aria-expanded="true" aria-controls="collapseExample">
                    Titulo
                    <span class="pull-right"><i class="fa fa-plus-square fa-lg"></i></span>
                </a>
            </div>
        </h4>
    </div>
    <div class="box-body collapse" id="collapseExample">
        Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto
        qualquer.
    </div>
</div>

Botões

Botões contextuais

Exemplo:

<button class="btn-adicionar"><i class="fa fa-plus"></i> Adicionar</button>
<button class="btn-editar"><i class="fa fa-pencil"></i> Editar</button>
<button class="btn-excluir"><i class="fa fa-trash"></i> Excluir</button>
<button class="btn-visualizar"><i class="fa fa-search"></i> Visualizar</button>
<div class="btn-group">
<button class="btn-visualizar xs"><i class="fa fa-search"></i></button>
<button class="btn-editar xs"><i class="fa fa-pencil"></i></button>
<button class="btn-excluir xs"><i class="fa fa-trash"></i></button>
</div>