Uteis 01
- Moodal
- Bordas
- Tool
- Zoom
- Listmenu
Moodal [ .moodal ]
Sistema de Modal, simples e direto:
<!-- Botão de Chamada -->
<button class="btn btn-sucesso" data-moodal="moodal2">Modal</button>
Utilize o buttom ou o a com o atributo data-moodal, com o id do modal.
<!-- moodal -->
<div id="nome-do-id" class="moodal _p">
<div class="moodal-header">
<span class="title">Modal <small>Subtitulo Moodal</small></span>
<a class="close_moodal move-e"><i class='bx bx-x-circle'></i></a>
</div>
<div class="moodal-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="moodal-footer">
<button class="close_moodal btn btn-perigo" data-moodal="nome-do-id">Fechar</button>
<button class="btn btn-sucesso">Cadastrar</button>
</div>
</div>
/* abrir um moodal pelo javascript */
openMoodal('nome-do-modal'); // Abre o modal com ID especifico
/* fechar um moodal pelo javascript */
closeMoodal('nome-do-modal'); // Fecha o modal com ID especifico
closeMoodal(backdrop); // Fecha o modal que estiver aberto"
Para controla os tamanhos do moodal temos as classes:
_pp, _p, _m, _g, _gg, _xg, _fullcontrole na primeira linha do moodal.
<div id="nome-do-id" class="moodal _p">
A cores do Header será colocada diretamente no .moodal-header:
<div class="moodal-header bg-principal c-bran">
<div class="moodal-header bg-amar5 c-bran">
<div class="moodal-header dg-pedr3 c-bran">
<div class="moodal-header dg-verm2 c-pret">
Bordas
Use utilitários de borda para adicionar ou remover bordas de um elemento. Escolha entre todas as bordas ou uma de cada vez.
Aditivo - Adicione bordas a elementos personalizados;
.bord - Borda Geral;
.bord-t - Borda Só Topo;
.bord-d - Borda a direita;
.bord-f - Borda no final;
.bord-e - Borda a esquerda
<span class="bord"></span>
<span class="bord-t"></span>
<span class="bord-d"></span>
<span class="bord-f"></span>
<span class="bord-e"></span>
Subtrativo - Ou remova as bordas;
.bord-0 - Remove Borda Geral;
.bord-t0 - Remove Borda Topo;
.bord-d0 - Remove Borda a direita;
.bord-f0 - Remove Borda no final;
.bord-e0 - Remove Borda a esquerda
<span class="bord bord-0"></span>
<span class="bord bord-t0"></span>
<span class="bord bord-d0"></span>
<span class="bord bord-f0"></span>
<span class="bord bord-e0"></span>
Opacidade na Borda
.bord-opa-10 - Opacidade 10%;
.bord-opa-25 - Opacidade 25%;
.bord-opa-50 - Opacidade 50%;
.bord-opa-75 - Opacidade 75%;
<div class="bord">
Esta é a borda padrão
</div>
<div class="bord bord-opa-75">
Esta é a borda 75% opacidade
</div>
<div class="bord bord-opa-50">
Esta é a borda 50% opacidade
</div>
<div class="bord bord-opa-25">
Esta é a borda 25% opacidade
</div>
<div class="bord bord-opa-10">
Esta é a borda 10% opacidade
</div>
Sizes
.round - ;
.round-t - round-top - topo;
.round-d - round-end - direita;
.round-f - round-bottom - final;
.round-e - round-start - esquerda;
.round-c - round-circle - circular;
.round-p - round-pill - pílula;
Use as classes de escala para cantos arredondados maiores ou menores. Os tamanhos variam de 0 a 5 e podem ser configurados modificando a API dos utilitários.
Ex.: .round-t4 | .round-e2 | .round-c5 | .round-f2
<img src="..." class="round" alt="..." />
<img src="..." class="round-t" alt="..." />
<img src="..." class="round-d" alt="..." />
<img src="..." class="round-f" alt="..." />
<img src="..." class="round-e" alt="..." />
<img src="..." class="round-c" alt="..." />
<img src="..." class="round-p" alt="..." />
Ex.: Round de 0 a 5, no geral;
<img src="..." class="round-0" alt="..." />
<img src="..." class="round-1" alt="..." />
<img src="..." class="round-2" alt="..." />
<img src="..." class="round-3" alt="..." />
<img src="..." class="round-4" alt="..." />
<img src="..." class="round-5" alt="..." />
Algumas variações:
<img src="..." class="round-f1" alt="...">
<img src="..." class="round-e2" alt="...">
<img src="..." class="round-d-c" alt="...">
<img src="..." class="round-e-p" alt="...">
<img src="..." class="round-5 round-t0" alt="...">
Cores
Altere a cor da borda usando utilitários criados com base nas cores do nosso tema.
.bord-principal - Cor principal;
.bord-secundaria - Cor secundaria;
.bord-sucesso - Cor sucesso;
.bord-perigo - Cor perigo;
.bord-alerta - Cor alerta
.bord-infor - Cor infor
.bord-claro - Cor clara
.bord-noturno - Cor noturna
.bord-black - Cor black
.bord-bran - Cor bran
Acrescentando um -s no final ela fica opacidade 50%;
<span class="bord bord-principal"></span>
<span class="bord bord-principal-s"></span>
<span class="bord bord-secundaria"></span>
<span class="bord bord-secundaria-s"></span>
<span class="bord bord-sucesso"></span>
<span class="bord bord-sucesso-s"></span>
<span class="bord bord-perigo"></span>
<span class="bord bord-perigo-s"></span>
<span class="bord bord-alerta"></span>
<span class="bord bord-alerta-s"></span>
<span class="bord bord-infor"></span>
<span class="bord bord-infor-s"></span>
<span class="bord bord-claro"></span>
<span class="bord bord-claro-s"></span>
<span class="bord bord-noturno"></span>
<span class="bord bord-noturno-s"></span>
<span class="bord bord-black"></span>
<span class="bord bord-bran"></span>
Largura da Borda [ Width ]
.bord-1 - 1px;
.bord-3 - 2px;
.bord-3 - 3px;
.bord-4 - 4px;
.bord-5 - 5px;
<span class="bord bord-1">1</span>
<span class="bord bord-3">2</span>
<span class="bord bord-3">3</span>
<span class="bord bord-4">4</span>
<span class="bord bord-5">5</span>
Curvas [ Raidus ]
.rai2 - 2px;
.rai4 - 4px;
.rai6 - 6px;
.rai8 - 8px;
.rai10 - 10px;
.rai12 - 12px;
.rai14 - 14px;
.rai16 - 16px;
.rai18 - 18px;
.rai20 - 20px;
.raip1 - 10%;
.raip2 - 20%;
.raip3 - 30%;
.raip4 - 40%;
.raip5 - 50%;
<span class="bord rai2">2px</span>
<span class="bord rai4">4px</span>
<span class="bord rai6">6px</span>
<span class="bord rai8">8px</span>
<span class="bord rai10">10px</span>
<span class="bord rai12">12px</span>
<span class="bord rai14">14px</span>
<span class="bord rai16">16px</span>
<span class="bord rai18">18px</span>
<span class="bord rai20">20px</span>
<span class="bord raip1">10%</span>
<span class="bord raip2">20%</span>
<span class="bord raip3">30%</span>
<span class="bord raip4">40%</span>
<span class="bord raip5">50%</span>
Tool - Tooltips
<div class="tool">
<b>Topo</b>
<span class="tooltext" id="t"><b>Texto Tool</b></span>
</div>
<div class="tool">
<b>Final</b>
<span class="tooltext" id="f"><b>Texto Tool</b></span>
</div>
<div class="tool">
<b>Direita</b>
<span class="tooltext" id="d"><b>Texto Tool</b></span>
</div>
<div class="tool">
<b>Esquerda</b>
<span class="tooltext" id="e"><b>Texto Tool</b></span>
</div>
Lorem ipsum dolor sit amet topconsectetur, adipisicing elit. Eos libero commodi dignissimos provident inventore. Quibusdam nemo blanditiis doloremque voluptatibus commodirightitaque eligendi accusantium rerum ut, possimus ab tempora leftalias voluptatem.
Zoom .zoom
.z{1|20} = zoom de 5% a 200%
<div class="bbl z10">
zoom 100%
</div>
<div class="z7_">
zoom 75%
</div>
<div class="z5">
zoom 50%
</div>
<div class="z12_">
zoom 125%
</div>
<div class="z15">
zoom 150%
</div>
Esquerda
Direita
Centralizado
<nav class="listmenu-e">
<ol class="listmenu">
<li class="listmenu-item"><a href="#">Home</a></li>
<li class="listmenu-item active">Library</li>
</ol>
</nav>
<nav class="listmenu">
<ol class="listmenu">
<li class="listmenu-item"><a href="#">Home</a></li>
<li class="listmenu-item"><a href="#">Library</a></li>
<li class="listmenu-item active">Data</li>
</ol>
</nav>
<nav class="listmenu-d">
<ol class="listmenu">
<li class="listmenu-item"><a href="#">Home</a></li>
<li class="listmenu-item active">Library</li>
</ol>
</nav>
<nav class="listmenu-d">
<ol class="listmenu">
<li class="listmenu-item"><a href="#">Home</a></li>
<li class="listmenu-item"><a href="#">Library</a></li>
<li class="listmenu-item active">Data</li>
</ol>
</nav>
<nav class="listmenu-c">
<ol class="listmenu">
<li class="listmenu-item"><a href="#">Home</a></li>
<li class="listmenu-item active">Library</li>
</ol>
</nav>
<nav class="listmenu-c">
<ol class="listmenu">
<li class="listmenu-item"><a href="#">Home</a></li>
<li class="listmenu-item"><a href="#">Library</a></li>
<li class="listmenu-item active">Data</li>
</ol>
</nav>