Compartilhamento de email

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

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

.s7ecatalogviewer .s7emailshare

Propriedades de CSS da ferramenta de compartilhamento de email

width	Largura do botão.
altura	Altura do botão.
background-image	A imagem que é exibida para um determinado estado de botão.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites .

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

A dica de ferramenta do botão pode ser localizada. Consulte Localização de 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 e que exibe uma imagem diferente para cada um dos quatro estados de botão diferentes.

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

A sobreposição em segundo plano que abrange a página da Web quando a caixa de diálogo está ativa é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7backoverlay

Propriedades de CSS da sobreposição traseira

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

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

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

Por padrão, a caixa de diálogo modal é exibida centralizada na tela nos sistemas de desktop e leva toda a área da página da Web para os 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:

.s7ecatalogviewer .s7emaildialog .s7dialog

Propriedades de 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 a janela inteira do navegador);
cor de fundo	Cor de fundo da caixa de diálogo;
largura	Deve estar desdefinido ou definido como 100%, caso em que a caixa de diálogo pega a janela inteira do navegador (este modo é preferencial em dispositivos de toque);
altura	Deve estar desdefinido ou definido como 100%, caso em que a caixa de diálogo pega a janela inteira do navegador (este modo é preferencial em dispositivos de toque).

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

.s7ecatalogviewer .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 container header é controlado com o seguinte seletor de classe CSS

.s7ecatalogviewer .s7emaildialog .s7dialogheader

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

revestimento

Preenchimento interno para o conteúdo do cabeçalho.

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

.s7ecatalogviewer .s7emaildialog .s7dialogheader .s7dialogline

Propriedades de CSS da linha de diálogo

revestimento

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogheadericon

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

largura	Largura do ícone.
altura	Altura do ícone.
background-image	Imagem do ícone.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites .

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

.s7ecatalogviewer .s7emaildialog .s7dialogheadertext

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

font-peso	Peso de fonte.
font-size	Altura da fonte.
família de fontes	Família de fontes.
revestimento	Preenchimento de texto interno.

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

.s7ecatalogviewer .s7emaildialog .s7closebutton

Propriedades CSS do botão Fechar

top	Posição vertical do botão em relação ao container do cabeçalho.
right	Posição do botão horizontal em relação ao container do cabeçalho.
largura	Largura do botão.
altura	Altura do botão.
revestimento	Preenchimento interno do botão.
background-image	Imagem do botão para cada estado.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites .

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

Exemplo - para configurar o cabeçalho da caixa de diálogo com o preenchimento, o ícone de 24 x 17 pixels, o título de 16 pontos em negrito e um botão Fechar de 28 x 28 pixels posicionados dois pixels da parte superior e dois pixels da direita do container da caixa de diálogo:

.s7ecatalogviewer .s7emaildialog .s7dialogheader { 
 padding: 10px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogheader .s7dialogline { 
 padding: 10px 10px 2px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogheadericon { 
    background-image: url("images/sdk/dlgemail_cap.png"); 
    height: 17px; 
    width: 24px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogheadertext { 
    font-size: 16pt; 
    font-weight: bold; 
    padding-left: 16px; 
} 
.s7ecatalogviewer .s7emaildialog .s7closebutton { 
 top:2px; 
 right:2px; 
 padding:8px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='up'] { 
 background-image:url(images/sdk/close_up.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='over'] { 
 background-image:url(images/sdk/close_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7closebutton[state='down'] { 
 background-image:url(images/sdk/close_down.png); 
} 
.s7ecatalogviewer .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 e-mail. O container de rodapé é controlado com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7dialogfooter

Propriedades CSS do rodapé da caixa de diálogo

fronteira

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogbuttoncontainer

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

revestimento

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton

Propriedades de CSS do botão Cancelar 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 de fundo do botão para cada estado.

O botão Enviar e-mail é controlado com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton

Propriedades de 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 de fundo do botão para cada estado.

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

.s7ecatalogviewer .s7emaildialog .s7dialogfooter .s7button

Propriedades de CSS do botão

font-peso	Peso de fonte do botão.
font-size	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 de caixa	Sombra.
margem direita	Margem do botão direito.

Essas dicas de ferramentas de botões podem ser localizadas. Consulte Localização de 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 e-mail 82 x 34, com a cor do texto e a cor do plano de fundo diferentes para cada estado do botão:

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogviewarea

Propriedades CSS da área de visualizaçã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 de área de trabalho. Não é aplicável quando a caixa de diálogo é dimensionada para ocupar a janela inteira do navegador.
cor de fundo	A cor de plano de fundo da área da caixa de diálogo principal.
margem	Margem externa.

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogbody

Se a altura desse container parecer maior que a área da caixa de diálogo principal, uma rolagem vertical é ativada automaticamente pelo componente.

Propriedades CSS do corpo da caixa de diálogo

revestimento

Preenchimento interno.

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogline

Propriedades de CSS da linha da caixa de diálogo

revestimento

Preenchimento interno de linha.

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

.s7ecatalogviewer .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:

.s7ecatalogviewer .s7emaildialog .s7dialoglabel

Essa classe não é adequada para controlar o tamanho ou a posição dos rótulos, pois é possível aplicá-la a textos em vários locais da interface do usuário do formulário.

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

font-peso	Peso de fonte do rótulo.
font-size	Tamanho da fonte do rótulo.
família de fontes	Família de fontes de etiquetas.
cor	Cor do texto do rótulo.

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoginputlabel

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

largura	A largura do rótulo estático.
alinhamento de texto	O alinhamento do texto horizontal.
margem	Margem estática do rótulo.
revestimento	Preenchimento estático do rótulo.

Exemplo - para configurar rótulos de campo de entrada com largura de 50 pixels, alinhamento à direita, ter dez pixels de preenchimento e uma margem de dez pixels à direita:

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

Cada campo de entrada de formulário é vinculado ao container, permitindo que você aplique uma borda personalizada ao redor do campo de entrada. É controlado com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer

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

fronteira	Borda em torno do container do campo de entrada.
revestimento	Preenchimento interno.

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:

.s7ecatalogviewer .s7emaildialog .s7dialoginputwide

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

largura

Largura do campo de entrada.

O campo Para é mais estreito porque atribui espaço para o botão Remover e-mail à direita. É controlado com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7dialoginputshort

Propriedades de 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; para ter a mesma borda em cor vermelha para campos que falham na validação, para ter 250 pixels de largura no campo Até e o restante dos campos de entrada com 300 pixels de largura:

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

O campo de entrada de mensagem de email é controlado adicionalmente com:

.s7ecatalogviewer .s7emaildialog .s7dialogmessage

Essa classe permite definir propriedades específicas para o elemento subjacente TEXTAREA.

Propriedades de CSS da mensagem da caixa de diálogo

altura	Altura da mensagem.
quebra automática de texto	Estilo de quebra automática de palavras.

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

.s7ecatalogviewer .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 destinatário no formulário de email. É controlado com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton

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

altura	Altura do botão.
cor	Cor do texto do botão para cada estado.
background-image	Imagem do botão para cada estado.
posição de fundo	Posição da imagem do botão dentro da área do botão.
font-peso	Peso de fonte do botão.
font-size	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.
alinhamento de texto	Alinhamento horizontal do texto.
revestimento	Preenchimento interno.

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

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

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

O botão Remover permite que um usuário remova destinatários extras do formulário de email. É controlado com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton

Propriedades de CSS da caixa de diálogo remover botão de e-mail

largura	Largura do botão.
altura	Altura do botão.
background-image	Imagem do botão para cada estado.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites .

A dica de ferramenta do botão pode ser localizada. Consulte Localização de 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:

.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton { 
 width:25px; 
 height:25px; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7ecatalogviewer .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, um título, um URL de origem e uma descrição. Ele é embutido em um container controlado com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogcontent

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

fronteira	Borda do container.
revestimento	Preenchimento interno.

Exemplo - para configurar um container inferior para ter uma borda pontilhada de um pixel e sem preenchimento:

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogthumbnail

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

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

largura	Largura da miniatura.
altura	Altura da miniatura.
alinhamento vertical	Miniatura do alinhamento vertical.
revestimento	Preenchimento interno.

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoginfopanel

Propriedades de 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:

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogtitle

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

margem	Margem externa.
font-peso	Peso de fonte.
font-size	Tamanho da fonte.
família de fontes	Família de fontes.

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogorigin

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

margem	Margem externa.
font-peso	Peso de fonte.
font-size	Tamanho da fonte.
família de fontes	Família de fontes.

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogdescription

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

margem	Margem externa.
font-peso	Peso de fonte.
font-size	Tamanho da fonte.
família de fontes	Família de fontes.

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage

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

background-image	Ícone Erro. O padrão é um ponto de exclamação.
posição de fundo	Posição do ícone de erro na área da mensagem.
cor	Cor do texto da mensagem.
font-peso	Peso de fonte.
font-size	Tamanho da fonte.
família de fontes	Família de fontes.
altura da linha	Altura do texto dentro da mensagem. Afeta o alinhamento vertical.
revestimento	Preenchimento interno.

A dica de ferramenta do botão pode ser localizada. Consulte Localização de 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, ter 25 pixels de altura de linha, preenchimento de 20 pixels à esquerda, usar um ícone de ponto de exclamação, texto vermelho em caso de erro e nenhum ícone e texto verde em caso de sucesso:

.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] { 
    background-image: none; 
    color: #00B200; 
} 
.s7ecatalogviewer .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 pelo seguinte seletor de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7dialogscrollpanel

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

largura

Largura do painel de rolagem.

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

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

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

.s7ecatalogviewer .s7emaildialog .s7scrollbar

Propriedades de 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.
bottom	O deslocamento da barra de rolagem vertical na parte inferior do painel de rolagem.
right	A barra de rolagem horizontal é deslocada da borda direita do painel de rolagem.

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

.s7ecatalogviewer .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:

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolltrack

Propriedades de CSS da faixa de rolagem

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb

Propriedades de CSS da miniatura da barra de rolagem

largura	A largura do polegar.
altura	A altura do polegar.
tampa superior	O preenchimento vertical entre a parte superior da faixa.
camada inferior	O preenchimento vertical entre a parte inferior da faixa.
background-image	A imagem que é exibida para um determinado estado de miniatura.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites .

Exemplo - para configurar a miniatura da barra de rolagem com 28 x 45 pixels, uma margem de dez pixels na parte superior e inferior e uma arte-final diferente para cada estado:

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb { 
    height: 45px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 28px; 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] { 
 background-image:url("images/sdk/scrollbar_thumb_up.png"); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] { 
 background-image:url("images/sdk/scrollbar_thumb_down.png"); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] { 
 background-image:url("images/sdk/scrollbar_thumb_over.png"); 
} 
.s7ecatalogviewer .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 pelos seguintes seletores de classe CSS:

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

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

Propriedades de CSS dos botões de rolagem superior e inferior

largura	A largura do botão.
altura	A altura do botão.
background-image	A imagem que é exibida para um determinado estado de botão.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites .

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

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

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] { 
background-image:url(images/sdk/scroll_up_up.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/sdk/scroll_up_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/sdk/scroll_up_down.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_up_disabled.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/sdk/scroll_down_up.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/sdk/scroll_down_over.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/sdk/scroll_down_down.png); 
} 
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_down_disabled.png); 
}