Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Classes e atributos que alteram o layout padrão e comportamento de módulos do locastyle
Perceba que em algumas classes você poderá incluir os sufixos -xs, -sm, -md e -lg. Usando estes sufixos vai fazer com que a classe em questão funcione apenas no breakpoint equivalente ao sufixo. Se tiver dúvidas sobre estes sufixos, leia a parte de GRIDS.
classes gerais
| Nome | Descrição |
|---|---|
| .ls-main-full | Adicionado na tag HTML, esconde a sidebar somente versão desktop, exibindo o conteúdo central |
| .ls-no-radius | Remove qualquer tipo de borda arredondada |
| .ls-no-left-radius | Remove borda arredondada à esquerda |
| .ls-no-right-radius | Remove borda arredondada à direita |
| .ls-no-top-radius | Remove borda arredondada no topo |
| .ls-no-bottom-radius | Remove borda arredondada abaixo |
| .ls-break-text | Força quebra de texto, mesmo quando não há espaçamento entre a palavra. |
| .ls-txt-access | Classe que esconde texto, mas fica acessível a leitores de tela. |
| .ls-table-layout-auto | Utilize essa classe para definir largura nas colunas das tabelas. |
| .ls-position-absolute | Faz com que o elemento esteja com position absolute. |
| .ls-position-relative | Faz com que o elemento esteja com position relative. |
Classes que alteram o posicionamento dos elementos:
| Nome | Descrição |
|---|---|
| .ls-clearfix | Corrige problemas quando existir filhos com float |
| .ls-float-none (-xs, -sm) | Insere float: none |
| .ls-float-right (-xs, -sm) | Insere float: right |
| .ls-float-left (-xs, -sm) | Insere float: left |
| .ls-clear-both (-xs, -sm) | Insere clear: both |
| .ls-clear-right (-xs, -sm) | Insere clear: right |
| .ls-clear-left (-xs, -sm) | Insere clear: left |
| .ls-overflow-hidden | Insere overflow: hidden |
| .ls-overflow-visible | Insere overflow: visible |
Classes que alteram o display de elementos:
| Nome | Descrição |
|---|---|
| .ls-display-block | Insere display: block |
| .ls-display-inline | Insere display: inline |
| .ls-display-inline-block | Insere display: inline-block |
| .ls-display-none | Insere display: none (escondendo o elemento) |
Classes que alteram o tamanho de elementos:
| Nome | Descrição |
|---|---|
| .ls-width-auto | Insere width: auto |
| .ls-width-50 a .ls-width-500 | Alteram o width de 50px em 50px |
| .ls-width-inherit | Insere width: inherit |
| .ls-full-width | Insere width: 100% |
| .ls-height-inherit | Insere height: inherit |
| .ls-height-auto | Insere height: auto |
Classes que alteram o tamanho de elementos:
| Nome | Descrição |
|---|---|
| .ls-no-margin | Remove toda margem |
| .ls-no-margin-left | Remove margin do lado esquerdo |
| .ls-no-margin-right | Remove margin do lado direito |
| .ls-no-margin-top | Remove margin no topo |
| .ls-no-margin-bottom | Remove margin em baixo |
| .ls-no-padding | Remove todo padding |
| .ls-no-padding-left | Remove padding do lado esquerdo |
| .ls-no-padding-right | Remove padding do lado direito |
| .ls-no-padding-top | Remove padding no topo |
| .ls-no-padding-bottom | Remove padding em baixo |
| .ls-margin-auto | Insere margin: auto nas laterais |
| .ls-xs-space | Coloca um padding de 5px na caixa |
| .ls-sm-space | Coloca um padding de 10px na caixa |
| .ls-md-space | Coloca um padding de 20px na caixa |
| .ls-lg-space | Coloca um padding de 40px na caixa |
Você poderá utilizar também classes individuais para margens:
| Nome | Descrição |
|---|---|
| .ls-xs-margin-top | Insere margin-top de 5px |
| .ls-sm-margin-top | Insere margin-top de 10px |
| .ls-md-margin-top | Insere margin-top de 20px |
| .ls-lg-margin-top | Insere margin-top de 40px |
| .ls-xs-margin-bottom | Insere margin-bottom de 5px |
| .ls-sm-margin-bottom | Insere margin-bottom de 10px |
| .ls-md-margin-bottom | Insere margin-bottom de 20px |
| .ls-lg-margin-bottom | Insere margin-bottom de 40px |
| .ls-xs-margin-right | Insere margin-right de 5px |
| .ls-sm-margin-right | Insere margin-right de 10px |
| .ls-md-margin-right | Insere margin-right de 20px |
| .ls-lg-margin-right | Insere margin-right de 40px |
| .ls-xs-margin-left | Insere margin-left de 5px |
| .ls-sm-margin-left | Insere margin-left de 10px |
| .ls-md-margin-left | Insere margin-left de 20px |
| .ls-lg-margin-left | Insere margin-left de 40px |
Classes que alteram o tamanho de elementos:
| Nome | Descrição |
|---|---|
| .ls-txt-left (-xs, -sm) | Alinha à esquerda |
| .ls-txt-right (-xs, -sm) | Alinha à direita |
| .ls-txt-justify | Justifica o texto |
| .ls-txt-center | Alinha ao centro |
| .ls-txt-center-all | Alinha verticalmente e horizontalmente o texto |
| .ls-v-align-top | Alinha o elemento ao topo |
| .ls-v-align-middle | Alinha o elemento ao meio |
| .ls-v-align-bottom | Alinha o elemento a base |
| .ls-ellipsis | Insere (...) |
| .ls-nowrap | Insere white-space: nowrap |
| .ls-no-bold | Insere font-weight: none |
| .ls-word-break-all | Insere word-break: break-all |
| .ls-word-break | Insere word-break: break-word |
| .ls-no-word-break | Insere word-break: normal |
| .ls-no-list-style | Remove o estilo padrão das listas |
| .ls-text-underline | Insere underline |
| .ls-small-letter-spacing | Diminui o espaçamento das letras do texto |
| .ls-text-uppercase | Transforma todas letras para maiúsculas. |
| .ls-text-lowercase | Transforma todas letras para minúsculas. |
| .ls-text-capitalize | Transforma a primeira letra para maiúscula. |
| .ls-text-xs | Determina que a fonte do elemento será 10px. |
| .ls-text-sm | Determina que a fonte do elemento será 12px. |
| .ls-text-md | Determina que a fonte do elemento será 14px. |
| .ls-text-lg | Determina que a fonte do elemento será 18px. |
| .ls-text-xl | Determina que a fonte do elemento será 20px. |
| .ls-style-list | Aplica o padrão de tipografia em ul e ol. |
Classes que alteram o fundo e a borda de elementos:
| Nome | Descrição |
|---|---|
| .ls-no-bg | Remove qualquer tipo de background |
| .ls-no-bghover | Remove background quando o elemento recebe hover |
| .ls-no-shadow | Remove box-shadow |
| .ls-border | Adiciona borda ao elemento |
| .ls-no-border | Remove as bordas |
| .ls-no-border-right | Remove borda do lado direito |
| .ls-no-border-left | Remove borda do lado esquerdo |
| .ls-no-border-bottom | Remove borda em baixo |
| .ls-no-border-top | Remove borda do topo |
| .ls-word-dotted | Adiciona borda pontilhada abaixo do texto |
| .ls-transparent-25 | Aplica opacidade de 25% |
| .ls-transparent-50 | Aplica opacidade de 50% |
| .ls-transparent-75 | Aplica opacidade de 75% |
Backgrounds definidos com as cores padrões de tags e alertas:
| Classe | Descrição |
|---|---|
.ls-background-primary |
Background do tema |
.ls-background-info |
Background informativo |
.ls-background-success |
Background informando uma ação completada/válida, sucesso |
.ls-background-warning |
Background informando atenção |
.ls-background-danger |
Background informando algum problema |
Classes que alterar o cursor do mouse:
| Nome | Descrição |
|---|---|
| .ls-cursor-pointer | Insere cursor: pointer |
| .ls-cursor-default | Insere cursor: default |
| .ls-cursor-crosshair | Insere cursor: crosshair |
| .ls-cursor-move | Insere cursor: move |
| .ls-cursor-help | Insere cursor: help |
| .ls-cursor-wait | Insere cursor: wait |
| .ls-cursor-inherit | Insere cursor: inherit |
| .ls-cursor-text | Insere cursor: text |
| .ls-cursor-progress | Insere cursor: progress |
| .ls-cursor-grab | Insere cursor: grag |
| .ls-cursor-grabbing | Insere cursor: grabbing |
Classes que alteram cores de fundo e de texto:
| Nome | Descrição |
|---|---|
| .ls-bg-white | Insere background branco |
| .ls-color-black | Insere cor preta ao texto |
| .ls-color-danger | Insere cor de status danger |
| .ls-color-info | Insere cor de status info |
| .ls-color-success | Insere cor de status success |
| .ls-color-warning | Insere cor de status warning |
| .ls-color-theme | Insere a cor do tema |
Classes que alteram elementos de formulário
| Nome | Descrição |
|---|---|
| .ls-no-style-input | Remove todo o estilo de input |
| .ls-no-spin | Remove as setinhas para input do tipo number |
| Nome | Descrição |
|---|---|
Até 480px - classes com final "xs" | |
| .ls-float-none-xs | float: none para resoluções até 480px. |
| .ls-float-right-xs | float: right para resoluções até 480px. |
| .ls-float-left-xs | float: left para resoluções até 480px. |
| .ls-display-none-xs | display: none para resoluções até 480px. |
| .ls-display-inline-xs | display: inline para resoluções até 480px. |
| .ls-display-inline-block-xs | display: inline-block para resoluções até 480px. |
| .ls-display-block-xs | display: block para resoluções até 480px. |
| .ls-clear-right-xs | clear: right para resoluções até 480px. |
| .ls-clear-left-xs | clear: left para resoluções até 480px. |
| .ls-clear-both-xs | clear: both para resoluções até 480px. |
| .ls-txt-right-xs | text-align: right para resoluções até 480px. |
| .ls-txt-left-xs | text-align: left para resoluções até 480px. |
Até 768px - classes com final "sm" | |
| .ls-float-none-sm | float: none para resoluções até 768px. |
| .ls-float-right-sm | float: right para resoluções até 768px. |
| .ls-float-left-sm | float: left para resoluções até 768px. |
| .ls-display-none-sm | display: none para resoluções até 768px. |
| .ls-display-inline-sm | display: inline para resoluções até 768px. |
| .ls-display-inline-block-sm | display: inline-block para resoluções até 768px. |
| .ls-display-block-sm | display: block para resoluções até 768px. |
| .ls-clear-right-sm | clear: right para resoluções até 768px. |
| .ls-clear-left-sm | clear: left para resoluções até 768px. |
| .ls-clear-both-sm | clear: both para resoluções até 768px. |
| .ls-txt-right-sm | text-align: right para resoluções até 768px. |
| .ls-txt-left-sm | text-align: left para resoluções até 768px. |
| .ls-btn-block-sm | Deixa o botão block para resoluções até 768px. |
Até 992px - classes com final "md" | |
| .ls-float-none-md | float: none para resoluções até 992px. |
| .ls-float-right-md | float: right para resoluções até 992px. |
| .ls-float-left-md | float: left para resoluções até 992px. |
| .ls-display-none-md | display: none para resoluções até 992px. |
| .ls-display-inline-md | display: inline para resoluções até 992px. |
| .ls-display-inline-block-md | display: inline-block para resoluções até 992px. |
| .ls-display-block-md | display: block para resoluções até 992px. |
| .ls-clear-right-md | clear: right para resoluções até 992px. |
| .ls-clear-left-md | clear: left para resoluções até 992px. |
| .ls-clear-both-md | clear: both para resoluções até 992px. |
| .ls-txt-right-md | text-align: right para resoluções até 992px. |
| .ls-txt-left-md | text-align: left para resoluções até 992px. |
| .ls-btn-block-md | Deixa o botão block para resoluções até 992px. |
Até 1200px - classes com final "lg" | |
| .ls-float-none-lg | float: none para resoluções até 1200px. |
| .ls-float-right-lg | float: right para resoluções até 1200px. |
| .ls-float-left-lg | float: left para resoluções até 1200px. |
| .ls-display-none-lg | display: none para resoluções até 1200px. |
| .ls-display-inline-lg | display: inline para resoluções até 1200px. |
| .ls-display-inline-block-lg | display: inline-block para resoluções até 1200px. |
| .ls-display-block-lg | display: block para resoluções até 1200px. |