Compartilhamento incorporado

A ferramenta Compartilhar incorporada 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 incorporado é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embedshare

Propriedades de CSS da ferramenta de compartilhamento incorporada

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 .

OBSERVAÇÃO

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

É 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 incorporado de 28 x 28 pixels e exibe uma imagem diferente para cada um dos quatro estados de botão diferentes:

.s7ecatalogsearchviewer .s7embedshare { 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7embedshare[state='up'] { 
background-image:url(images/v2/EmbedShare_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7embedshare[state='over'] { 
background-image:url(images/v2/EmbedShare_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7embedshare[state='down'] { 
background-image:url(images/v2/EmbedShare_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7embedshare[state='disabled'] { 
background-image:url(images/v2/EmbedShare_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:

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay

Propriedades de CSS da sobreposição de plano de fundo

opacidade

Opacidade da sobreposição em segundo plano.

cor de fundo

Cor da sobreposição do plano de fundo.

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

.s7ecatalogsearchviewer .s7embeddialog .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:

.s7ecatalogsearchviewer .s7embeddialog .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 o navegador inteiro.

cor de fundo

Cor de fundo da caixa de diálogo.

largura

Deve ser 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 ser 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:

.s7ecatalogsearchviewer .s7touchinput .s7embeddialog .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 de fechamento. O container header é controlado com

.s7ecatalogsearchviewer .s7embeddialog .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

.s7ecatalogsearchviewer .s7embeddialog .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

.s7ecatalogsearchviewer .s7embeddialog .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:

.s7ecatalogsearchviewer .s7embeddialog .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:

.s7ecatalogsearchviewer .s7embeddialog .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 .

OBSERVAÇÃO

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

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 cabeçalho da caixa de diálogo com o preenchimento, o ícone de 24 x 14 pixels, o título de 16 pontos em negrito e o botão de fechamento de 28 x 28 pixels, posicionados dois pixels da parte superior e dois pixels à direita do container da caixa de diálogo:

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

O rodapé da caixa de diálogo consiste no botão "cancelar". O container de rodapé é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .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 o botão. É controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer

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

revestimento

Preenchimento interno entre o rodapé e o botão.

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

.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton

O botão só está disponível em sistemas de desktop.

Propriedades de CSS do botão Selecionar tudo

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.

OBSERVAÇÃO

O botão Selecionar tudo suporta o seletor de atributos state, que pode ser usado para aplicar diferentes capas a diferentes estados de botão.

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

.s7ecatalogsearchviewer .s7embeddialog .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.

OBSERVAÇÃO

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

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:

.s7ecatalogsearchviewer .s7embeddialog .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.

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 rodapé de caixa de diálogo com um botão Cancelar 64 x 34, um botão Selecionar tudo 82 x 34 e uma cor de texto e uma cor de plano de fundo diferentes para cada estado de botão:

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

.s7ecatalogsearchviewer .s7embeddialog .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 uma área da caixa de diálogo principal para ter 300 pixels de altura, ter uma margem de dez pixels e usar um plano de fundo branco:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:300px; 
}

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:

.s7ecatalogsearchviewer .s7embeddialog .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:

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

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

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel

Essa classe não é adequada para controlar o tamanho ou a posição da etiqueta, 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:

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

O tamanho da cópia de texto exibida na parte superior do código incorporado é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide

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

largura

Largura do campo de entrada.

revestimento

Preenchimento interno.

Exemplo - para definir a cópia de texto com largura de 430 pixels e ter um preenchimento de dez pixels na parte inferior:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide { 
    padding-bottom: 10px; 
    width: 430px; 
}

O código incorporado é encapsulado no container e controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

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

largura

A largura do container de código incorporado.

fronteira

Borda em torno do container de código incorporado.

revestimento

Preenchimento interno.

Exemplo - para definir uma borda cinza de um pixel ao redor do texto do código incorporado, torne-a de 430 pixels de largura e tenha um preenchimento de dez pixels:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer { 
    border: 1px solid #CCCCCC; 
    padding: 10px; 
    width: 430px; 
}

O texto real do código incorporado é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

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

quebra automática de texto

Estilo de quebra automática de palavras.

Exemplo - para configurar o código incorporado para usar break-word quebra automática de texto:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogmessage { 
    word-wrap: break-word; 
}

O rótulo de tamanho incorporado e o menu suspenso estão localizados na parte inferior da caixa de diálogo e colocados em um container controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

Propriedades de CSS do painel de tamanho incorporado da caixa de diálogo

revestimento

Preenchimento interno.

Exemplo - para configurar um painel de tamanho incorporado para ter dez pixels de preenchimento:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel { 
    padding: 10px; 
}

O tamanho e o alinhamento do rótulo de tamanho incorporado são controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

Propriedades de CSS do painel de tamanho incorporado da caixa de diálogo

alinhamento vertical

Alinhamento vertical do rótulo.

largura

Largura do rótulo.

Exemplo - para definir o rótulo de tamanho incorporado como alinhado na parte superior e 80 pixels de largura:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizelabel { 
    vertical-align: top; 
    width: 80px; 
}

A largura da caixa de combinação de tamanho incorporado é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox

Propriedades de CSS da caixa de combinação

largura

Largura da caixa de combinação.

OBSERVAÇÃO

A caixa de combinação suporta o seletor de atributos expanded com possíveis valores de true e false. true é usado quando a caixa de combinação exibe um dos tamanhos de incorporação predefinidos, portanto, deve ter toda a largura disponível. false é usada quando a opção de tamanho personalizado é selecionada na caixa de combinação, portanto, deve ser reduzida para permitir espaço para campos de entrada de largura e altura personalizados.

Exemplo - para definir a caixa de combinação de tamanho incorporado com 300 pixels de largura ao mostrar um item predefinido e 110 pixels de largura ao mostrar um tamanho personalizado:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="true"] { 
    width: 300px; 
} 
.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="false"] { 
    width: 110px; 
}

A altura do texto da caixa de combinação é definida por um elemento interno especial e é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext

Propriedades de CSS do texto da caixa de combinação

altura

Altura do texto da caixa de combinação.

Exemplo - para definir a altura do texto da caixa de combinação de tamanho incorporado como 40 pixels:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext { 
    height: 40px; 
}

A caixa de combinação tem um botão "suspenso" à direita e é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton

Propriedades de CSS do botão da caixa de combinação

top

Posição vertical do botão dentro da caixa de combinação.

right

Posição do botão horizontal dentro da caixa de combinação.

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 .

OBSERVAÇÃO

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

Exemplo - para definir um botão suspenso como 28 x 28 pixels e ter uma imagem separada para cada estado:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton { 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] { 
 background-image:url(images/sdk/cboxbtndn_up.png); 
} 
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] { 
 background-image:url(images/sdk/cboxbtndn_over.png); 
} 
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] { 
 background-image:url(images/sdk/cboxbtndn_over.png); 
} 
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] { 
 background-image:url(images/sdk/cboxbtndn_up.png); 
}

O painel com a lista de tamanhos incorporados exibido quando a caixa de combinação é aberta é controlado pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown

O tamanho e a posição do painel são controlados pelo componente. Não é possível alterá-lo por meio do CSS.

Propriedades de CSS do menu suspenso da caixa de combinação

fronteira

Borda do painel.

Exemplo - para definir o painel da caixa de combinação para ter uma borda cinza de um pixel:

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown { 
    border: 1px solid #CCCCCC; 
}

Um único item em um painel suspenso controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor

Propriedades de CSS da âncora do item suspenso

cor de fundo

Plano de fundo do item.

Exemplo - para definir o item do painel da caixa de combinação para ter um plano de fundo branco:

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor { 
    background-color: #FFFFFF; 
}

Uma marca de seleção exibida à esquerda do item selecionado dentro do painel da caixa de combinação que é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark

Propriedades de CSS da caixa de seleção

largura

Largura do ícone.

altura

Altura do ícone.

background-image

Imagem do item.

posição de fundo

Posição dentro da sprite de arte, se os sprites CSS forem usados.

Consulte também CSS Sprites .

Exemplo - para definir o ícone da marca de seleção como 25 x 25 pixels:

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark { 
    background-image: url("images/sdk/cboxchecked.png"); 
    height: 25px; 
    width: 25px; 
}

Quando a opção "Tamanho personalizado" é selecionada na caixa de diálogo tamanho incorporado, a caixa de diálogo exibe dois campos de entrada extras à direita para permitir que o usuário insira um tamanho incorporado personalizado. Esses campos são vinculados a um container controlado pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel

Propriedades de CSS do painel de tamanho personalizado da caixa de diálogo

left

Distância da caixa de combinação de tamanho incorporado.

Exemplo - para definir o painel de campos de entrada de tamanho personalizado como 20 pixels à direita da caixa de combinação:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel { 
    left: 20px; 
}

Cada campo de entrada de tamanho personalizado é vinculado a um container que renderiza uma borda e define a margem entre os campos. É controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize

Propriedades CSS do tamanho personalizado da caixa de diálogo

fronteira

Borda em torno do campo de entrada.

largura

Largura do campo de entrada.

margem

Margem do campo de entrada.

revestimento

Preenchimento do campo de entrada.

Exemplo - para definir os campos de entrada de tamanho personalizado com uma borda cinza de um pixel, uma margem, um preenchimento e uma largura de 70 pixels:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize { 
    border: 1px solid #CCCCCC; 
    margin-right: 20px; 
    padding-left: 2px; 
    padding-right: 2px; 
    width: 70px; 
}

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:

.s7ecatalogsearchviewer .s7embeddialog .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

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

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

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar

Propriedades de CSS da barra de rolagem

largura

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 e uma margem de oito pixels a partir da parte superior, direita e inferior do painel de rolagem:

.s7ecatalogsearchviewer .s7embeddialog .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 .s7embeddialog .s7scrollbar .s7scrolltrack

Propriedades de CSS do rastreamento da barra de rolagem

largura

Largura da faixa.

cor de fundo

Rastrear a cor do plano de fundo.

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

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

A miniatura da barra de rolagem se move 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. A altura do polegar e outros aspectos podem ser configurados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb

Propriedades de CSS da miniatura da barra de rolagem

largura

Largura do polegar.

altura

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

OBSERVAÇÃO

A miniatura suporta o seletor de atributos state, que pode ser usado para aplicar diferentes capas a diferentes estados de miniatura: up, down, over e disabled.

Exemplo - para configurar uma 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:

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

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7embeddialog .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

Largura do botão.

altura

Altura do botão.

background-image

A imagem 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 .

OBSERVAÇÃO

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

As dicas de ferramentas do botão podem ser localizadas. 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:

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

Nesta página