Compartilhamento de email email-share

A ferramenta Compartilhamento de email consiste em um botão adicionado ao painel Compartilhamento em redes sociais e à caixa de diálogo modal que é exibida quando a ferramenta é ativada. A posição do botão é totalmente gerenciada pela ferramenta Compartilhamento em redes sociais.

A aparência do botão de compartilhamento de email é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emailshare

Propriedades CSS da ferramenta de compartilhamento de email

largura
Largura do botão.
altura
Altura do botão.
imagem de fundo
A imagem exibida para um determinado estado de botão.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
Este botão oferece suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

É possível remover o botão do painel Compartilhamento em redes sociais definindo a propriedade CSS display:none em sua classe CSS.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar um botão de compartilhamento de email com 28 x 28 pixels que exiba uma imagem diferente para cada um dos quatro estados de botão diferentes.

.s7ecatalogsearchviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

A sobreposição de plano de fundo que cobre a página da Web quando a caixa de diálogo está ativa é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

Propriedades CSS da sobreposição inversa

opacidade
Opacidade de sobreposição de plano de fundo.
cor de fundo
Cor de sobreposição do plano de fundo.

Exemplo - para configurar a sobreposição do plano de fundo como cinza com 70% de opacidade:

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Por padrão, a caixa de diálogo modal é exibida centralizada na tela em sistemas desktop e ocupa toda a área da página da Web em dispositivos de toque. Em todos os casos, o posicionamento e o dimensionamento da caixa de diálogo são gerenciados pelo componente. A caixa de diálogo é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

Propriedades CSS da caixa de diálogo

raio da borda
Raio da borda da caixa de diálogo (caso a caixa de diálogo não use toda a janela do navegador);
cor de fundo
Cor de fundo da caixa de diálogo;
largura
Deve ser desdefinido ou definido como 100%, nesse caso, a caixa de diálogo usa toda a janela do navegador (esse modo é preferível em dispositivos de toque);
altura
Deve ser desdefinido ou definido como 100%, nesse caso, a caixa de diálogo usa toda a janela do navegador (esse modo é preferível em dispositivos de toque).

Exemplo - para configurar a caixa de diálogo para usar toda a janela do navegador e ter um fundo branco em dispositivos de toque:

.s7ecatalogsearchviewer .s7touchinput .s7emaildialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

O cabeçalho da caixa de diálogo consiste em um ícone, um texto de título e um botão Fechar. O contêiner de cabeçalho é controlado com o seguinte seletor de classe CSS

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

Propriedades CSS do cabeçalho da caixa de diálogo

preenchimento
Preenchimento interno para conteúdo de cabeçalho.

O ícone e o texto do título são colocados em um container extra controlado com

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

Propriedades CSS da linha de diálogo

preenchimento
Preenchimento interno para o ícone e título do cabeçalho.

O ícone de cabeçalho é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

Propriedades CSS do ícone de cabeçalho da caixa de diálogo

largura
Largura do ícone.
altura
Altura do ícone.
imagem de fundo
Imagem do ícone.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

O título do cabeçalho é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

Propriedades CSS do texto do cabeçalho da caixa de diálogo

espessura da fonte
Peso da fonte.
tamanho da fonte
Altura da fonte.
Família de fontes
Família da fonte.
preenchimento
Preenchimento de texto interno.

O botão Fechar é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

Propriedades CSS do botão Fechar ​

top
Posição vertical do botão em relação ao contêiner de cabeçalho.
direita
Posição do botão horizontal em relação ao contêiner de cabeçalho.
largura
Largura do botão.
altura
Altura do botão.
preenchimento
Preenchimento interno do botão.
imagem de fundo
Imagem do botão para cada estado.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
Este botão oferece suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

A dica de ferramenta do botão Fechar e o título da caixa de diálogo podem ser localizados. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar o cabeçalho da caixa de diálogo com preenchimento, ícone de 24 x 17 pixels e título de 16 pontos em negrito. E, finalmente, um botão Fechar com 28 x 28 pixels posicionado a dois pixels da parte superior e a dois pixels da direita do contêiner da caixa de diálogo:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgemail_cap.png");
    height: 17px;
    width: 24px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

O rodapé da caixa de diálogo consiste nos botões Cancelar e Enviar email. O contêiner de rodapé é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

Propriedades CSS do rodapé da caixa de diálogo ​

borda
Borda que você pode usar para separar visualmente o rodapé do restante da caixa de diálogo.

O rodapé tem um contêiner interno que mantém ambos os botões. Ele é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

Propriedades CSS do contêiner de botão da caixa de diálogo

preenchimento
Preenchimento interno entre o rodapé e os botões.

O botão Cancelar é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

Propriedades CSS do botão de cancelamento da caixa de diálogo

largura
Largura do botão.
altura
Altura do botão.
cor
Cor do texto do botão para cada estado.
cor de fundo
Cor do plano de fundo do botão para cada estado.
NOTE
Este botão oferece suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

O botão Enviar email é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

Propriedades CSS do botão de ação da caixa de diálogo

largura
Largura do botão.
altura
Altura do botão.
cor
Cor do texto do botão para cada estado.
cor de fundo
Cor do plano de fundo do botão para cada estado.
NOTE
Este botão oferece suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

Além disso, ambos os botões compartilham uma classe CSS comum, que pode conter configurações CSS que são as mesmas para outros botões da caixa de diálogo:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

Propriedades CSS do botão

espessura da fonte
Peso da fonte do botão.
tamanho da fonte
Tamanho da fonte do botão.
Família de fontes
Família de fontes do botão.
altura da linha
Altura do texto dentro do botão. Afeta o alinhamento vertical.
sombra-caixa
Sombra projetada.
margem direita
Margem direita do botão.

As dicas de ferramenta deste botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar um rodapé de caixa de diálogo com o botão Cancelar 64 x 34 e um botão enviar email 82 x 34, com a cor do texto e a cor do plano de fundo diferentes para cada estado do botão:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

A área de diálogo principal, entre o cabeçalho e o rodapé, contém conteúdo de diálogo rolável e painel de rolagem à direita. Em todos os casos, o componente gerencia a largura dessa área. Não é possível defini-la no CSS. A área de diálogo principal é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

Propriedades CSS da área de exibição da caixa de diálogo ​

altura
A altura da área da caixa de diálogo principal. Ela deve ser especificada somente quando a caixa de diálogo funciona no modo desktop. Não é aplicável quando a caixa de diálogo é dimensionada para ocupar toda a janela do navegador.
cor de fundo
A cor de fundo da área da caixa de diálogo principal.
margem
Margem externa.
NOTE
A área da caixa de diálogo principal oferece suporte ao seletor de atributos state opcional. Está definido como sendsuccess quando o formulário de email é enviado e a caixa de diálogo mostra uma mensagem de confirmação. Desde que a mensagem de confirmação seja pequena, esse seletor de atributos pode ser usado para reduzir a altura da caixa de diálogo quando essa mensagem de confirmação é exibida.

Exemplo - para configurar a área da caixa de diálogo principal para uma altura inicial de 300 pixels e uma altura de 100 pixels quando a mensagem de confirmação for exibida, tenha uma margem de dez pixels e use um plano de fundo branco:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

Todo o conteúdo do formulário (como rótulos e campos de entrada) reside dentro de um container controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody

Se a altura desse contêiner parecer ser maior que a área da caixa de diálogo principal, a rolagem vertical será ativada automaticamente pelo componente.

Propriedades CSS do corpo da caixa de diálogo ​

preenchimento
Preenchimento interno.

Exemplo - para configurar o conteúdo do formulário para ter um preenchimento de dez pixels:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody {
    padding: 10px;
}

O formulário da caixa de diálogo é preenchido linha por linha, onde cada linha carrega uma parte do conteúdo do formulário (como um rótulo e um campo de entrada de texto). A linha de formulário única é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

Propriedades CSS da linha da caixa de diálogo

preenchimento
Preenchimento de linha interna.

Exemplo - para configurar um formulário de caixa de diálogo com preenchimento de dez pixels para cada linha:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

Todos os rótulos estáticos no formulário da caixa de diálogo são controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

Essa classe não é adequada para controlar o tamanho ou a posição dos rótulos, pois pode ser aplicada a textos em vários locais da interface do usuário do formulário.

Propriedades CSS do rótulo da caixa de diálogo. ​

espessura da fonte
Espessura da fonte do rótulo.
tamanho da fonte
Tamanho da fonte do rótulo.
Família de fontes
Família de fontes do rótulo.
cor
Cor do texto do rótulo.

Os rótulos da caixa de diálogo podem ser localizados. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar todos os rótulos para serem cinza, negrito, com uma fonte de nove pixels:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

Todos os rótulos estáticos exibidos à esquerda dos campos de entrada de formulário são controlados com:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

Propriedades CSS do rótulo de entrada da caixa de diálogo

largura
A largura do rótulo estático.
text-align
O alinhamento do texto horizontal.
margem
Margem do rótulo estático.
preenchimento
Preenchimento estático do rótulo.

Exemplo - para configurar rótulos de campo de entrada com largura de 50 pixels, alinhados à direita, têm dez pixels de preenchimento e uma margem de dez pixels à direita:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

Cada campo de entrada de formulário é colocado no container que permite aplicar uma borda personalizada ao redor do campo de entrada. Ele é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

Propriedades CSS do contêiner de entrada da caixa de diálogo

borda
Borda ao redor do container do campo de entrada.
preenchimento
Preenchimento interno.
NOTE
O contêiner de campo de entrada dá suporte ao seletor de atributo state opcional. Está definido como verifyerror quando o usuário comete um erro no formato de dados de entrada e a validação em linha falha. Esse seletor de atributo pode ser usado para realçar entradas de usuário incorretas no formulário.

A maioria dos campos de entrada que se espalham do rótulo à esquerda até a borda direita do corpo da caixa de diálogo (que inclui o campo De e o campo Mensagem) são controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

Propriedades CSS do campo de entrada da caixa de diálogo

largura
Largura do campo de entrada.

O campo Para é mais estreito porque aloca espaço para o botão Remover email à direita. Ele é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

Propriedades CSS do campo curto de entrada da caixa de diálogo

largura
Largura do campo de entrada.

Exemplo - Para configurar um formulário para ter uma borda cinza de um pixel com nove pixels de preenchimento ao redor de todos os campos de entrada. Ter a mesma borda em vermelho para campos com falha na validação. E, por fim, ter 250 pixels de largura para o campo e o restante dos campos de entrada com 300 pixels de largura:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

O campo de entrada de mensagens de email também é controlado com:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

Essa classe permite que você defina propriedades específicas para o elemento TEXTAREA subjacente.

Propriedades CSS da mensagem da caixa de diálogo

altura
Altura da mensagem.
quebra automática de linha
Estilo de quebra de linha.

Exemplo - para configurar uma mensagem de email com 50 pixels de altura e usar a quebra automática de linha break-word:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

O botão Adicionar outro endereço de email permite que um usuário adicione mais de um endereço no formulário de email. Ele é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

Propriedades CSS do botão adicionar endereço de email da caixa de diálogo

altura
Altura do botão.
cor
Cor do texto do botão para cada estado.
imagem de fundo
Imagem do botão para cada estado.
background-position
Posição da imagem do botão dentro da área do botão.
espessura da fonte
Peso da fonte do botão.
tamanho da fonte
Tamanho da fonte do botão.
Família de fontes
Família de fontes do botão.
altura da linha
Altura do texto dentro do botão. Afeta o alinhamento vertical.
text-align
Alinhamento de texto horizontal.
preenchimento
Preenchimento interno.
NOTE
Este botão oferece suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar o botão "Adicionar outro endereço de email" com 25 pixels de altura, use a fonte em negrito de 12 pontos com alinhamento à direita e uma cor de texto e imagem diferentes para cada estado:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

O botão Remover permite que um usuário remova endereços extras do formulário de email. Ele é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

Propriedades CSS do botão Remover email da caixa de diálogo

largura
Largura do botão.
altura
Altura do botão.
imagem de fundo
Imagem do botão para cada estado.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
Este botão oferece suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar um botão Remover para ter 25 x 25 pixels e usar uma imagem diferente para cada estado:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

O conteúdo que está sendo compartilhado é exibido na parte inferior do corpo da caixa de diálogo e inclui uma miniatura, título, URL de origem e descrição. Ele é colocado em um contêiner controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

Propriedades CSS do conteúdo da caixa de diálogo ​

borda
Borda do container.
preenchimento
Preenchimento interno.

Exemplo - para configurar um contêiner inferior para ter uma borda pontilhada de um pixel e nenhum preenchimento:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

A imagem em miniatura é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

A propriedade background-image é definida pela lógica do componente.

Propriedades CSS da imagem em miniatura da caixa de diálogo

largura
Largura da miniatura.
altura
Altura da miniatura.
alinhamento vertical
Miniatura de alinhamento vertical.
preenchimento
Preenchimento interno.

Exemplo - para configurar a miniatura como 90 x 60 pixels e alinhada à parte superior com dez pixels de preenchimento:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

O título, a origem e a descrição do conteúdo são agrupados ainda mais em um painel à direita da miniatura do conteúdo. Ele é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

Propriedades CSS do painel de informações da caixa de diálogo

largura
Largura do painel.

Exemplo - para configurar um painel de informações de conteúdo com 300 pixels de largura:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

O título do conteúdo é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

Propriedades CSS do título da caixa de diálogo

margem
Margem externa.
espessura da fonte
Peso da fonte.
tamanho da fonte
Tamanho da fonte.
Família de fontes
Família da fonte.

Exemplo - para configurar um título de conteúdo para usar fonte em negrito e ter uma margem de dez pixels:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

A origem do conteúdo é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

Propriedades CSS da origem do conteúdo da caixa de diálogo ​

margem
Margem externa.
espessura da fonte
Peso da fonte.
tamanho da fonte
Tamanho da fonte.
Família de fontes
Família da fonte.

Exemplo - para configurar a origem do conteúdo para ter uma margem de dez pixels:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

A descrição do conteúdo é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

Propriedades CSS da descrição do conteúdo da caixa de diálogo

margem
Margem externa.
espessura da fonte
Peso da fonte.
tamanho da fonte
Tamanho da fonte.
Família de fontes
Família da fonte.

Exemplo - para configurar uma descrição de conteúdo com uma margem de dez pixels e usar uma fonte de nove pontos:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

Quando um usuário insere dados de entrada incorretos e a validação em linha falha, uma mensagem é exibida na parte superior do corpo da caixa de diálogo. Essa mensagem também aparece quando a caixa de diálogo deve renderizar um erro ou uma mensagem de confirmação quando o formulário for enviado. Ele é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

Propriedades CSS da mensagem de erro da caixa de diálogo

imagem de fundo
Ícone de erro. O padrão é um ponto de exclamação.
background-position
Posição do ícone de erro dentro da área de mensagem.
cor
Cor do texto da mensagem.
espessura da fonte
Peso da fonte.
tamanho da fonte
Tamanho da fonte.
Família de fontes
Família da fonte.
altura da linha
Altura do texto dentro da mensagem. Afeta o alinhamento vertical.
preenchimento
Preenchimento interno.
NOTE
Esta mensagem dá suporte ao seletor de atributos state com os seguintes valores possíveis: verifyerror, senderror e sendsuccess. O valor verifyerror é definido quando uma mensagem é exibida devido a uma falha de validação de entrada em linha. O valor senderror é definido quando um serviço de email de back-end relata um erro. O valor sendsuccess é definido quando o email é enviado com êxito. Dessa forma, é possível estilizar a mensagem de forma diferente, dependendo do estado da caixa de diálogo.

A dica de ferramenta do botão pode ser localizada.

Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar uma mensagem para usar uma fonte em negrito de dez pontos, tenha 25 pixels de altura de linha e 20 pixels de preenchimento à esquerda. E, finalmente, use um ícone de ponto de exclamação, texto vermelho se houver um erro e nenhum ícone e texto verde se houver sucesso:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

Se a rolagem vertical for necessária, a barra de rolagem será renderizada no painel próximo à borda direita da caixa de diálogo, que é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

Propriedades CSS do painel de rolagem da caixa de diálogo

largura
Largura do painel de rolagem

Exemplo - para configurar um painel de rolagem com 44 pixels de largura:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

A aparência da área da barra de rolagem é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

Propriedades CSS da barra de rolagem

largura
A largura da barra de rolagem.
top
O deslocamento da barra de rolagem vertical na parte superior do painel de rolagem.
inferior
O deslocamento da barra de rolagem vertical na parte inferior do painel de rolagem.
direita
O deslocamento da barra de rolagem horizontal em relação à borda direita do painel de rolagem.

Exemplo - para configurar uma barra de rolagem com 28 pixels de largura, uma margem de oito pixels na parte superior, direita e inferior do painel de rolagem:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

A faixa da barra de rolagem é a área entre os botões de rolagem superior e inferior. O componente define automaticamente a posição e a altura da faixa. A faixa é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

Propriedades CSS da faixa de rolagem

largura
A largura da faixa.
cor de fundo
A cor do plano de fundo da faixa.

Exemplo - para configurar uma faixa de barra de rolagem com 28 pixels de largura e um plano de fundo cinza:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

A miniatura da barra de rolagem se move verticalmente em uma área de rastreamento de rolagem. Sua posição vertical é totalmente controlada pela lógica do componente, no entanto, a altura da miniatura não muda dinamicamente dependendo da quantidade de conteúdo. Você pode configurar a altura da miniatura e outros aspectos com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

Propriedades CSS da miniatura da barra de rolagem

largura
A largura da miniatura.
altura
A altura do polegar.
padding-top
O preenchimento vertical entre o topo da faixa.
preenchimento inferior
O preenchimento vertical entre a parte inferior da faixa.
imagem de fundo
A imagem exibida para um determinado estado de miniatura.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
A miniatura dá suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes: up, down, over e disabled.

Exemplo - para configurar a miniatura da barra de rolagem com 28 x 45 pixels, tem uma margem de dez pixels na parte superior e inferior e tem um trabalho artístico diferente para cada estado:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

A aparência dos botões de rolagem superior e inferior é controlada com os seguintes seletores de classe CSS:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

Não é possível posicionar botões de rolagem usando propriedades CSS top, left, bottom e right. Em vez disso, a lógica do visualizador as posiciona automaticamente.

Propriedades CSS dos botões de rolagem superior e inferior

largura
A largura do botão.
altura
A altura do botão.
imagem de fundo
A imagem exibida para um determinado estado de botão.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
Estes botões oferecem suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes: up, down, over e disabled.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar botões de rolagem com 28 x 32 pixels e que tenham arte-final diferente para cada estado:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8