Úteis 1
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
Todas as cores da tabela pode ser mudadas acrescente um Lantes das 4 primeiras letras da cor.
.Lprin - Cor principal;
.Lsuce - Cor secundaria;
.Lneut - Cor Neutra;
.Lgold5 - Cor Gold 5;
.Lteal - Cor Teal;
.Lnavy8 - Cor Navy 8;
.Llila3 - Cor Lilas 3;
.Lrose - Cor Rose;
<span class="bord bord-3 Lprin"></span>
<span class="bord bord-3 Lsecu"></span>
<span class="bord bord-3 Lsuce"></span>
<span class="bord bord-3 Linfo"></span>
<span class="bord bord-3 Lperi"></span>
<span class="bord bord-3 Lnotu"></span>
<span class="bord bord-3 Lclar"></span>
<span class="bord bord-3 Lgold"></span>
<span class="bord bord-3 Lmarr"></span>
<span class="bord bord-3 Llila"></span>
<span class="bord bord-3 Lteal"></span>
<span class="bord bord-3 Lrose"></span>
<span class="bord bord-3 Lrose4"></span>
<span class="bord bord-3 Lceu"></span>
<span class="bord bord-3 Lceu4"></span>
<span class="bord bord-3 Llara"></span>
<span class="bord bord-3 Llara4"></span>
<span class="bord bord-3 Loliv"></span>
<span class="bord bord-3 Loliv4"></span>
<span class="bord bord-3 Lpret"></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>
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>
Sombra [ Shadow ]
Embora as sombras em componentes sejam desabilitadas por padrão pode ser habilitadas via $swcss,
você também pode adicionar ou remover rapidamente uma sombra com nossas classes de utilitário box-shadow.
Inclui suporte para .somb-n e três tamanhos padrão (que têm variáveis associadas para corresponder).
.shad[1|50] = ex.: .shad34;
Ajuste de Objeto [ Object-Fit ]
Altere o valor da propriedade objf com nossas classes de utilitário object-fit responsivas.
Essa propriedade diz ao conteúdo para preencher o contêiner pai de várias maneiras,
como preservar a proporção ou esticar para ocupar o máximo de espaço possível.
.objf-c = contain - Conter;
.objf-co = cover - Cobrir;
.objf-f = fill - Preencher;
.objf-s = scale - Escalar;
.objf-n = none;
<img src="..." class="objf-c" alt="..." />
<img src="..." class="objf-co" alt="..." />
<img src="..." class="objf-f" alt="..." />
<img src="..." class="objf-s" alt="..." />
<img src="..." class="objf-n" alt="..." />
Opacidade
A propriedade .opa define o nível de opacidade de um elemento. O nível de opacidade descreve o nível de transparência, onde 1 não é nada transparente, 0,5 é 50% visível e 0 é completamente transparente.
.opa-100 = opacidade 100%
.opa-75 = opacidade 75%
.opa-50 = opacidade 50%
.opa-25 = opacidade 25%
.opa-0 = opacidade 0%
<div class="opa-100">100%</div>
<div class="opa-75">75%</div>
<div class="opa-50">50%</div>
<div class="opa-25">25%</div>
<div class="opa-0">0%</div>
Overflow
Ajuste a propriedade overflow dinamicamente com quatro valores e classes padrão. Essas classes não respondem por padrão.
.over-a - auto;
.over-h - hidden;
.over-v - visible;
.over-s - scroll;
<div class="over-a">auto</div>
<div class="over-h">hidden</div>
<div class="over-v">visible</div>
<div class="over-s">scroll</div>
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>