OktoStrap

OktoStrap

Components

info Tipo de alerta de Erro!
check_circle Tipo de alerta de Sucesso!
warning Tipo de alerta de perigo!
info Tipo de alerta de informação!
<div class="alert alert-danger">
    <i class="icon material-icons">info</i>
    Tipo de alerta de Erro!
    <button class="close"><i class="material-icons">close</i></button>
</div>

<div class="alert alert-success">
    <i class="icon material-icons">check_circle</i>
    Tipo de alerta de Sucesso!
    <button class="close"><i class="material-icons">close</i></button>
</div>

<div class="alert alert-warning">
    <i class="icon material-icons">warning</i>
    Tipo de alerta de perigo!
    <button class="close"><i class="material-icons">close</i></button>
</div>

<div class="alert alert-info">
    <i class="icon material-icons">info</i>
    Tipo de alerta de informação!
    <button class="close"><i class="material-icons">close</i></button>
</div>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="#">Home</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Library</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

Estilo padrão

:hover

Destaca quando passa o mouse por cima.

:disabled

Não deixa clicar quando desabilitado.

.active

Status ativo.

<button class="btn btn-default [modifier]">Default</button>
<button class="btn btn-primary [modifier]">Primary</button>
<button class="btn btn-info [modifier]">Info</button>
<button class="btn btn-success [modifier]">Success</button>
<button class="btn btn-warning [modifier]">Warning</button>
<button class="btn btn-danger [modifier]">Danger</button>
Card title
This is some text within a card body.
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        
        This is some text within a card body.
    </div>
</div>

Drawer

Componente estilo "gaveta" da aplicação.

O componente é escondido por padrão, para exibilo, é necessário a classe drawer-open.

Por padrão, o componente possui posicionamento absoluto. Adicione a classe drawer-container ao elemento pai para deixá-lo relativo.

Caso seja necessário deixar fixo, utilize drawer-fixed.

Para mudar o lado, adicione a classe drawer-right.

Card title close
This is some text within a card body.
Filtros close

<div class="drawer-container" style="width: 100%; height: 400px;">
    <div class="drawer drawer-open">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    Card title
                    <a class="drawer-close" href><i class="material-icons">close</i></a>
                </h5>
                
                This is some text within a card body.
            </div>
        </div>
    </div>
    
    <div class="drawer drawer-open drawer-right">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    Filtros
                    <a class="drawer-close" href><i class="material-icons">close</i></a>
                </h5>
                
                <div class="form-group">
                    <label for="">Planta</label>
                    <select class="form-control">
                        <option>Selecione uma planta</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="required">Status</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                        <label class="form-check-label" for="inlineRadio1">Ativo</label>
                    </div>
                
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                        <label class="form-check-label" for="inlineRadio2">Inativo</label>
                    </div>
                </div>

                <button class="btn btn-primary btn-block">Filtrar</button>
            </div>
        </div>
    </div>
</div>

Empty state

Estado vazio de registros, caso uma busca não retorne nenhum resultado, utilizar este caso vazio.

Estilo padrão

search

Nenhum registro encontrado

Por favor refaça sua busca

.small

Estilo de caso vazio com tamanho reduzido, usado geralmente em listas.

search

Nenhum registro encontrado

Por favor refaça sua busca
<div class="empty-state [modifier]">
    <i class="empty-state-icon material-icons">search</i>

    <div class="empty-state-content">
        <h2 class="empty-state-title">Nenhum registro encontrado</h2>
        <small class="empty-state-description">Por favor refaça sua busca</small>
    </div>

    <button class="btn btn-primary">Criar novo registro</button>
</div>
<div class="row justify-content-md-center">
    <form class="col-md-12">
        <div class="form-group">
            <label class="required" for="inputText">Input text</label>
            <input type="text" name="inputText" placeholder="Insira seu usuário" class="form-control">
        </div>

        <div class="form-group">
            <label class="required" for="inputPassword">Input password</label>
            <input type="password" name="inputPassword" placeholder="Insira sua senha" class="form-control">
        </div>

        <div class="form-group">
            <label class="required" for="inputDisabled">Input disabled</label>
            <input type="text" name="inputDisabled" placeholder="Insira sua senha" disabled class="form-control">
        </div>

        <div class="form-group">
            <label class="required" for="inputDisabled">Select</label>
            <select name="inputDisabled" class="form-control">
                <option value="1">Opção 1</option>
                <option value="2">Opção 2</option>
                <option value="3">Opção 3</option>
            </select>
        </div>

        <div class="form-group">
            <label class="required">Radio inline</label>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">Opção 1</label>
            </div>
        
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label" for="inlineRadio2">Opção2</label>
            </div>
        
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
                <label class="form-check-label" for="inlineRadio3">Opção 3 (disabled)</label>
            </div>
        </div>

        <div class="form-group">
            <label class="required">Check inline</label>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                <label class="form-check-label" for="inlineCheckbox1">Opção 1</label>
            </div>
        
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                <label class="form-check-label" for="inlineCheckbox2">Opção2</label>
            </div>
        
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
                <label class="form-check-label" for="inlineCheckbox3">Opção 3 (disabled)</label>
            </div>
        </div>

        <div class="form-group">
            <label class="required">Mensagem</label>
            <textarea placeholder="Insira uma mensagem" class="form-control"></textarea>
        </div>
    </form>
</div>



<svg class="loader-spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="loader-spinner-circle" fill="none" cx="33" cy="33" r="30"></circle>
</svg>

<button disabled class="btn btn-primary">
    <svg class="loader-spinner loader-spinner-small loader-spinner-white mr-1" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="loader-spinner-circle" fill="none" cx="33" cy="33" r="30"></circle>
    </svg>

    Salvando...
</button>
<div class="modal" tabindex="-1" role="dialog" style="position: relative; display: block">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="material-icons">close</i>
                </button>
            </div>
            
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-dark bg-primary">

    <div>
        <button class="btn btn-primary mr-1" type="button">
            <i class="material-icons">menu</i>
        </button>
    
        <a class="navbar-brand" href="#">
            <img src="/assets/images/logo-okto-white.png" alt="OKTO" height="26">
            <span class="navbar-brand-text d-none d-sm-inline">Nome do módulo</span>
        </a>
    </div>

    <ul class="navbar-nav">
        <li class="nav-item">
            <button class="btn btn-primary" type="button">
                <i class="material-icons">notifications</i>
            </button>
        </li>
        <li class="nav-item">
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" 
                    type="button" 
                    id="dropdownMenuButton" 
                    data-toggle="dropdown" 
                    aria-haspopup="true" 
                    aria-expanded="false">
                    <i class="material-icons">account_circle</i>
                    <span class="d-none d-sm-inline">Pedro</span>
                </button>

                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Perfil</a>
                    <a class="dropdown-item" href="#">Configurações</a>
                    <a class="dropdown-item" href="#">Sair</a>
                </div>
            </div>
        </li>
    </ul>
</nav>
<ul class="pagination justify-content-end">
    <li class="page-item">
        <a class="disabled" href>
            <i class="material-icons">first_page</i>
        </a>
    </li> 
    <li class="page-item">
        <a class="disabled" href>
            <i class="material-icons">keyboard_arrow_left</i>
        </a>
    </li>
    <li class="page-item">
        <a class="page-link active" href>1</a>
    </li>
    <li class="page-item">
        <a class="page-link" href>2</a>
    </li>
    <li class="page-item">
        <a class="page-link" href>3</a>
    </li>
    <li class="page-item">
        <a class="disabled">...</a>
    </li>
    <li class="page-item">
        <a class="page-link" href>5</a>
    </li>
    <li class="page-item">
        <a href>
            <i class="material-icons">keyboard_arrow_right</i>
        </a>
    </li>
    <li class="page-item">
        <a href>
            <i class="material-icons">last_page</i>
        </a>
    </li> 
</ul>

Sidebar

Barra laterial retrátil de navegação

<div class="sidebar" style="position: relative; height: 420px">
    <ul>
        <li class="sidebar-item-close">
            <a>
                <img src="/assets/images/logo-okto-white.png" alt="Okto" height="20">
            </a>
        </li>
        <li class="active">
            <a href="#">
                <i class="material-icons mr-2">place</i>
                <span class="w-100">Lugares</span>
                <i class="material-icons ml-2">keyboard_arrow_down</i>
            </a>

            <ul class="sidebar-nested">
                <li><a href="#">Restaurantes</a></li>
                <li><a href="#">Lanchonetes</a></li>
                <li><a href="#">Hotéis</a></li>
            </ul>
        </li>
        <li>
            <a href="#">
                <i class="material-icons mr-2">show_chart</i>
                <span class="w-100">Relatórios</span>
                <i class="material-icons m-l-2">keyboard_arrow_left</i>
            </a>

            <ul class="sidebar-nested" style="display: none">
                <li><a href="#">Desempenho</a></li>
                <li><a href="#">Custo</a></li>
                <li><a href="#">Tempo</a></li>
            </ul>
        </li>
        <li>
            <a href="#">
                <i class="material-icons mr-2">settings</i>
                <span class="w-100">Configurações</span>
            </a>
        </li>
    </ul>
</div>

Skeletons

Componente que ocupa o espaço de um conteúdo enquanto o mesmo carrega.

<table class="table table-striped skeleton-table">
    <thead>
        <tr>
            <th class="status"></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="status"></td>
            <td class="two-lines"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="status"></td>
            <td class="two-lines"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="status"></td>
            <td class="two-lines"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="status"></td>
            <td class="two-lines"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Steps

Utilize o formato de steps para fluxos de criação com muitos campos, ou que exijam diferentes tipos de informação, diminuindo o nível de carga cognitiva do usuário:

  • sem classe: Identifica para o usuário quantos passos ainda restam para terminar o processo;
  • .active: Identifica a posição atual do usuário dentro do passo-a-passo;
  • .done: Utilizado para identificar steps que já foram completamente preenchidos pelo usuário;
  • .danger: Identifica para o usuário um passo que existe um alerta não crítico;
  • .danger: Identifica para o usuário um passo que ocorreu um erro;
  1. check

    Informações

  2. 2

    Endereço

    Campo inválido
  3. 3

    Anexos

    Upload não concluído
  4. 4

    Documentos

  5. 5

    Confirmação

<div class="steps-indicator">
    <ol>
        <li class="done">
            <span class="step-number"><i class="material-icons">check</i></span>
            <p class="step-title">Informações</p>
        </li>

        <li class="danger">
            <span class="step-number">2</span>
            <p class="step-title">Endereço</p>
            <small class="step-description">Campo inválido</small>
        </li>

        <li class="warning">
            <span class="step-number">3</span>
            <p class="step-title">Anexos</p>
            <small class="step-description">Upload não concluído</small>
        </li>

        <li class="active">
            <span class="step-number">4</span>
            <p class="step-title">Documentos</p>
        </li>

        <li>
            <span class="step-number">5</span>
            <p class="step-title">Confirmação</p>
        </li>
    </ol>
</div>

Estilo padrão

Nome Email Nascimento
Pedro Souza psouza@atech.com.br 22/06/1980
Carlos Ferreira cferreira@atech.com.br 10/03/1982
Henrique Rodrigues hrodrigues@atech.com.br 29/07/1989

.table-striped

Tabela cor sim cor não

Nome Email Nascimento
Pedro Souza psouza@atech.com.br 22/06/1980
Carlos Ferreira cferreira@atech.com.br 10/03/1982
Henrique Rodrigues hrodrigues@atech.com.br 29/07/1989

.table-shadow

Tabela com sombra projetada

Nome Email Nascimento
Pedro Souza psouza@atech.com.br 22/06/1980
Carlos Ferreira cferreira@atech.com.br 10/03/1982
Henrique Rodrigues hrodrigues@atech.com.br 29/07/1989

.table-hover

Tabela com elementos clicáveis

Nome Email Nascimento
Pedro Souza psouza@atech.com.br 22/06/1980
Carlos Ferreira cferreira@atech.com.br 10/03/1982
Henrique Rodrigues hrodrigues@atech.com.br 29/07/1989
<table class="table [modifier]">
    <thead>
        <tr>
            <th>Nome</th>
            <th>Email</th>
            <th>Nascimento</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Pedro Souza</td>
            <td>psouza@atech.com.br</td>
            <td>22/06/1980</td>
        </tr>
        <tr>
            <td>Carlos Ferreira</td>
            <td>cferreira@atech.com.br</td>
            <td>10/03/1982</td>
        </tr>
        <tr>
            <td>Henrique Rodrigues</td>
            <td>hrodrigues@atech.com.br</td>
            <td>29/07/1989</td>
        </tr>
    </tbody>
</table>

Toastr

Container flutuante para alertas e mensagens.

Por padrão posicionado na parte superior direita da tela.

info Tipo de alerta de Erro!
info Tipo de alerta de Erro!
info Tipo de alerta de Erro!
info Tipo de alerta de Erro!
info Tipo de alerta de Erro!
info Tipo de alerta de Erro!
<div style="position: relative; height: 400px">

    <div class="toastr" style="position: absolute;">
        <div class="alert alert-danger">
            <i class="icon material-icons">info</i>
            Tipo de alerta de Erro!
            <button class="close"><i class="material-icons">close</i></button>
        </div>
    </div>

    <div class="toastr top-center" style="position: absolute;">
        <div class="alert alert-danger">
            <i class="icon material-icons">info</i>
            Tipo de alerta de Erro!
            <button class="close"><i class="material-icons">close</i></button>
        </div>
    </div>

    <div class="toastr top-left" style="position: absolute;">
        <div class="alert alert-danger">
            <i class="icon material-icons">info</i>
            Tipo de alerta de Erro!
            <button class="close"><i class="material-icons">close</i></button>
        </div>
    </div>

    <div class="toastr bottom-right" style="position: absolute;">
        <div class="alert alert-danger">
            <i class="icon material-icons">info</i>
            Tipo de alerta de Erro!
            <button class="close"><i class="material-icons">close</i></button>
        </div>
    </div>

    <div class="toastr bottom-center" style="position: absolute;">
        <div class="alert alert-danger">
            <i class="icon material-icons">info</i>
            Tipo de alerta de Erro!
            <button class="close"><i class="material-icons">close</i></button>
        </div>
    </div>

    <div class="toastr bottom-left" style="position: absolute;">
        <div class="alert alert-danger">
            <i class="icon material-icons">info</i>
            Tipo de alerta de Erro!
            <button class="close"><i class="material-icons">close</i></button>
        </div>
    </div>
</div>