Show Menu
TÓPICOS×

Construção de estilo para formulários adaptáveis

Pré-requisitos

Conhecimento da CSS e da estrutura LESS.

O que pode ser personalizado

O artigo lista classes css de formulários adaptáveis disponíveis ao público. É possível aproveitar essas classes para estilizar vários componentes de um formulário adaptável. O estilo dos componentes de criação, como caixas de diálogo e barras de status que exibem avisos, está além do escopo deste artigo. Use essas construções de estilização para criar estilos (usando CSS ou Menos) somente quando não for possível estilizar componentes usando o editor de temas.

Personalização de estilos em formulários adaptáveis

A estrutura MENOS simplifica o caso de uso para personalizar estilos em formulários adaptáveis. A estrutura permite que você defina estilos usando um conjunto de variáveis e funções (combinações). A estrutura MENOS ajuda a reduzir o tamanho do código agrupado e aumenta sua capacidade de reutilização.
Você pode personalizar estilos de formulário adaptáveis das seguintes maneiras:
  • Alterar o tema
  • Alterar o estilo do componente

Alterar tema

É possível alterar o tema de um formulário adaptável para garantir que sua aparência seja consistente com as páginas da Web nas quais o formulário adaptativo está incorporado.
As alterações na aparência geral do formulário adaptável usando as propriedades de CSS normalmente fazem parte das alterações de tema. Alterações importantes no "ok e comportamento" do formulário adaptativo, como alterações no layout e posicionamento dos componentes, não são consideradas mudanças de tema.
Com base no bootstrap, o seguinte conjunto de propriedades de CSS define o tema de uma página da Web:
  • Cor do plano de fundo
  • Borda (tipo, cor, espessura)
  • Cor da fonte
  • Preenchimento
  • Imagem
  • Tamanho da Fonte
  • LineHeight
Atualmente, as variáveis MENOS são definidas apenas para essas propriedades dos diversos elementos em um formulário adaptável.

Alteração do estilo do componente

É possível fazer alterações na aparência, no layout, no posicionamento e na visibilidade dos elementos. Para realizar essa tarefa, crie ou atualize seus arquivos .css personalizados para incluir os construções de estilo listados neste artigo.
Para aplicar um estilo a um formulário adaptável, abra o formulário adaptável na guia básica para edição, abra as propriedades do contêiner de formulário adaptável e especifique o caminho do Arquivo CSS personalizado. O estilo padrão cria construções do formulário adaptativo e é substituído pelas construções listadas no arquivo .css personalizado.

Componentes

Os componentes discutidos neste artigo têm suas classes CSS predefinidas. É possível editar as variáveis para modificar os estilos nas classes CSS. Como alternativa, você pode regravar a classe inteira. Esta seção descreve as classes nos componentes e estilos que podem ser modificadas usando variáveis.

Estilo do contêiner

Um contêiner é o componente de nível superior. Outros painéis e campos estão sob o componente de contêiner.
Classe CSS
guideContainerNode
Descrição das variáveis
Descrição das variáveis
container-bgColor
Cor de fundo do contêiner
container-padding
Preenchimento do contêiner
container-margin
Margem do contêiner
container-fontColor
Cor da fonte do contêiner

Estilo de campo

Os formulários adaptativos incluem vários tipos de campos. Cada campo tem um nome de classe exclusivo, que é o nome do campo. O campo também tem um nome de classe comum guideFieldNode .
Os campos incluem rótulos, widgets, descrição da Ajuda (descrição longa e curta) e ícones de Ajuda do campo (ponto de interrogação).
Classe CSS
guideFieldNode
Variáveis
Descrição
field-padding
Preenchimento para o campo
field-error-font-color
Cor da fonte da mensagem de erro do campo
field-error-font-size
Tamanho da fonte da mensagem de erro do campo

Estilo de etiqueta

O rótulo do elemento HTML usado para o campo inclui as classes left ou top , dependendo se o rótulo está na parte superior ou esquerda.
Classe CSS
guideFieldLabel
Variáveis
Descrição
label-font-color
Cor da fonte para o rótulo do campo
label-font-size
Tamanho da fonte para o rótulo do campo
label-line-height
Propriedade de altura da linha CSS para o rótulo do campo
label-font-weight
Propriedade de espessura de fonte CSS para o rótulo do campo
label-margin
Margem para o rótulo do campo
As regras de CSS para o rótulo são aplicadas usando o rótulo guideFieldLabel . Se você for um autor, substitua esta regra para tornar suas alterações personalizadas visíveis.

Estilo de widgets

Dependendo do tipo, os widgets também incluem classes. Normalmente, os widgets incluem a guideFieldWidget classe. Os widgets fornecidos com HTML normalmente usam a entrada padrão do elemento HTML e selecionam. O estilo é feito de acordo. Não é possível estilizar um widget personalizado alterando as variáveis.
Classe CSS
guideFieldWidget
Variáveis
Descrição
widgets-bg-color
Cor do plano de fundo dos widgets (não funciona para caixa de seleção e botão de opção)
widgets-border-color
Cor da borda dos widgets
widgets-border-thickness
Tamanho da borda dos widgets
widgets-border-radius
Raio da borda dos widgets
widgets-border-type
Tipo de borda dos widgets
widget-border-focus-type
Tipo de foco para bordas de widget
widgets-border
Estilo de borda consolidado de widgets
widgets-font-color
Cor do texto dentro do widget
widgets-font-size
Tamanho do texto dentro do widget
widgets-line-height
Propriedade CSS lineheight para o widget
widgets-padding
Propriedade de preenchimento CSS para o widget
widgets-focus-border-color
Cor da borda quando o widget está em foco
widgets-mandatory-border-color
Cor da borda do widget para os campos obrigatórios
widgets-mandatory-bg-color
Cor do plano de fundo do widget para os campos obrigatórios
widgets-disabled-bg-color
Cor do plano de fundo do widget quando o campo está desativado
widgets-disabled-font-color
Cor da fonte do widget quando o campo está desativado
widgets-disabled-border-color
Cor da borda do widget quando o campo está desativado
widget-height
Altura do widget (não funciona para caixa de seleção e botão de opção)
checkbutton-height
Altura para caixa de seleção e botão de opção.
listboxwidget-height
Altura máxima para um menu suspenso de seleção múltipla

Limitações no estilo de widget

O estilo para campos focados, obrigatórios e desativados é restrito usando variáveis. No entanto, é possível alterá-la substituindo os estilos. A restrição que usa variáveis é fornecida principalmente para manter o número de variáveis em verificação. A restrição pode ser relaxada se a aparência de um campo mudar drasticamente porque está em qualquer um dos estados discutidos anteriormente.

Descrição da ajuda

Um autor pode especificar o conteúdo da Ajuda nos campos usando componentes de descrição curta e longa. Ambos os componentes têm uma classe comum .guideHelpDescription e outra classe .long / .short , dependendo do tipo de descrição. O conteúdo da Ajuda é incluído em um elemento de parágrafo para substituir o estilo da descrição. A descrição da Ajuda (longa e curta) é modificada usando variáveis que começam com widgetshelp, como mencionado na tabela a seguir:
Variáveis
Descrição
widgets-help-long-bg-color
Cor do plano de fundo da Ajuda longa dos widgets
widgets-help-long-border-color
Cor da borda da Ajuda longa dos widgets
widgets-help-long-border-indicator-color
Cor da borda do indicador esquerdo da Ajuda longa dos widgets
widgets-help-short-bg-color
Cor do plano de fundo da Ajuda curta dos widgets
widgets-help-short-color
Cor da fonte da Ajuda curta dos widgets
widgets-help-short-tooltip-bg-color
Cor do plano de fundo da Ajuda da dica de ferramenta curta dos widgets
widgets-help-short-tooltip-color
Cor da fonte da ajuda da dica de ferramenta curta dos widgets

Terms and Conditions

O widget Termos e condições (TnC ) permite especificar termos e condições. Você pode personalizar o widget usando as variáveis descritas na tabela a seguir.
Variáveis
Descrição
tnc-unvisited Cor da fonte do link tnc não visitado.
tnc-visited Cor da fonte do link tnc visitado.

Botão

Botões também são widgets. No entanto, o estilo é ligeiramente diferente dos widgets. Em formulários adaptativos, qualquer um dos seguintes constitui um botão:
  • tipo de #
  • botão
  • elemento com class .button
Código HTML do botão:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Classe CSS
Descrição
iconButton-icon
Fornece ícones para o botão
iconButton-label
Rótulo/legenda do botão Estilos
Variáveis
Descrição
button-border-size
Tamanho da borda dos botões
button-border-type
Tipo de borda
button-padding
Propriedade de preenchimento CSS para o botão
button-font-size
Tamanho da fonte do botão
button-background-color
Cor do plano de fundo do botão
button-font-color
Cor da fonte do botão
button-border-color
Cor da borda do botão
button-large-padding
Preenchimento para botões grandes (botões com classe .buttonlarge)
button-large-font-size
Tamanho da fonte para botões grandes
button-small-padding
Preenchimento para botões pequenos (botões com classe .buttonsmall)
button-small-font-size
Tamanho da fonte para botões pequenos
button-info-background-color
Cor do fundo para botões informativos (botões com classe .buttoninformative)
button-info-font-color
Cor da fonte para botões informativos
button-info-border-color
Cor da borda para botões informativos
button-warning-background-color
Cor do plano de fundo para botões com estilo de aviso (botões com classe .buttonwarning)
button-warning-font-color
Cor da fonte para botões com estilo de aviso
button-warning-border-color
Cor da borda para botões com estilo de aviso
button-alert-background-color
Cor do plano de fundo para botões de alerta (botões com classe .buttonalert)
button-alert-font-color
Cor da fonte para botões de alerta
button-alert-border-color
Cor da borda para botões de alerta

Ponto de interrogação

Para os widgets, um questionMark é exibido quando um autor adiciona uma descrição longa no conteúdo da Ajuda. O ícone padrão fornecido no bootstrap é usado. Para usar um ícone personalizado, você pode personalizar os ícones de inicialização.
Classe CSS
guideHelpQuestionMark
Variáveis
Descrição
questionmark-font-color
Cor do ícone
questionmark-hover-font-color
Cor do ícone quando o mouse passa o mouse sobre ele

Table

É possível alterar o tema de cores para linhas de cabeçalho e corpo em uma tabela usando as seguintes variáveis.
Variáveis
Descrição
table-header-bg-color
Cor do plano de fundo da linha de cabeçalho. O valor padrão é #333 .
table-odd-row-bg-color
Cor do plano de fundo para a linha de corpo ímpar. O valor padrão é rgb(255, 255, 255) .
table-even-row-bg-color
Cor do plano de fundo para a linha de corpo par. O valor padrão é #eee .

Anexo de arquivo

O widget Anexo de arquivo de formulários adaptativos permite carregar arquivos. Você também pode personalizar o widget usando as variáveis.
Variáveis
Descrição
fileItemPadding
Preenchimento dos arquivos exibidos no widget
fileItemBackground
Cor do plano de fundo do item de arquivo
fileItemBorderColor
Cor da borda da borda superior
fileItemColor
Cor da fonte do item de arquivo
filePreviewIconColor
Cor do ícone Visualizar (ícone Bootstrap) no widget
fileItemCommentHeight
Altura do comentário do item de arquivo

Estilo do painel

Um Painel inclui uma barra de ferramentas opcional e seu conteúdo.
Classe CSS
guidePanelNode
Variáveis
Descrição
panel-background-color
Cor do plano de fundo do painel
panel-font-size
Tamanho da fonte para o texto do painel
panel-font-color
Cor da fonte para o texto do painel
panel-padding
Preenchimento dentro do painel
panel-description-font-size
Tamanho da fonte da descrição do painel
panel-description-padding
Preenchimento da descrição do painel
panel-help-bg-color
Cor do plano de fundo da ajuda do painel
panel-help-border-indicator-color
Cor da borda do indicador para a ajuda do painel
O nó do painel é dividido em navegadores e conteúdo. Não há nenhum componente de estilo separado para o conteúdo. As variáveis descritas são aplicadas no navegador e no conteúdo.
O painel superior (Painel raiz) não tem essa classe.

Estilo móvel

Header bar

Essas variáveis influenciam a barra de cabeçalho que está visível em um dispositivo móvel ou em dispositivos de tela pequena que contêm o título do painel e navegadores próximos e posteriores.
Classe CSS
guide-header-bar
Variáveis
Descrição
headerbar-background-color
Cor do plano de fundo da barra de cabeçalho
headerbar-font-color
Cor da fonte do texto na barra de cabeçalho
headerbar-padding
Preenchimento para a barra de cabeçalho

Indicador de rolagem

Essas variáveis influenciam o indicador de rolagem, que é uma seta laranja que aparece em um dispositivo móvel ou em dispositivos de tela pequena. Um indicador de rolagem indica que há conteúdo além da parte visível da tela. Você pode rolar para baixo para vê-lo. Quando você chega ao final do conteúdo, a seta desaparece.
Classe CSS
mobileScrollIndicator
Variáveis
Descrição
scrollIndicatorBottom
Posição fixa do indicador de rolagem na parte inferior
scrollIndicatorRight
Posição fixa do indicador de rolagem à direita
scrollIndicatorWidth
Largura do indicador de rolagem
scrollIndicatorHeight
Altura do indicador de rolagem

Variáveis específicas do layout da barra de ferramentas fixa móvel

Essas variáveis na tabela a seguir influenciam o layout da barra de ferramentas fixa móvel.
Classe CSS
mobileToolbar
Variáveis
Descrição
mobileToolbarBottom
Posição fixa da barra de ferramentas, no dispositivo móvel, na parte inferior
mobileToolbarTop
Posição fixa da barra de ferramentas, no dispositivo móvel, na parte superior
mobileToolbarLeft
Posição fixa da barra de ferramentas, no dispositivo móvel, à esquerda
mobileToolbarRight
Posição fixa da barra de ferramentas, no dispositivo móvel, à direita
mobileButtonIconTopMargin
Posição fixa do ícone dos botões da barra de ferramentas, na parte superior
mobileButtonIconWidth
Largura do ícone dos botões da barra de ferramentas no dispositivo móvel
mobileButtonIconHeight
Altura do ícone dos botões da barra de ferramentas no dispositivo móvel
mobilefixedtoolbarbgcolor
Cor de fundo da barra de ferramentas no dispositivo móvel

Variável específica do tema

O tema de inscrição Simples em /etc/clientlibs/fd/af/guidetheme/simpleEnrollment e a categoria guide.theme.simpleEnrollment também apresentam algumas variáveis. Se quiser criar um tema que aprimore a inscrição simples, você pode usar as seguintes "variáveis extras:
Variáveis
Descrição
button-focus-bg-color
Cor do plano de fundo do botão em foco
button-hover-bg-color
Cor do plano de fundo do botão ao passar o mouse
button-radius
Raio do botão
navigation-button-bg-color
Cor do plano de fundo para botões de navegação (voltar/próximo)
navigation-button-bg-hover-color
Cor do fundo para botões de navegação (voltar/próximo) ao passar o mouse
initial-nav-color
Cor do plano de fundo para navegadores do assistente e barra de progresso correspondente, quando renderizados pela primeira vez.
active-nav-color
Cor do plano de fundo do navegador atual/ativo do assistente e barra de progresso correspondente
visited-nav-color
Cor do plano de fundo para navegadores do assistente e barra de progresso correspondente, que foram visitados.
tabs-bifercating-border-color
Contêiner de bifurcação de cores da borda em navegadores e painéis
tabs-navigator-separator-color
Presilhas de separação de cores da borda inferior para guias à esquerda (navegadores de guias).
tabs-child-nav-bg-color
Cor de fundo para navegadores aninhados/filhos/subnavegadores