Componente: Pesquisar Imóveis No Site

O componente pesquisar imóveis no site é utilizado para definir os parâmetros que serão aplicados na página de busca de imóveis.

Open

Parametrização

Configuração de CSS - Card do simulador de crédito

Classes que possibilitam a customização do card do simulador de crédito, conforme destacado na imagem abaixo.

Open

Exemplo de implementação CSS

/Card simulador credpago da página de pesquisa/
:root .flip-card-credpago-pesquisa{min-height: 500px !important;}
:root .card__wrapper.flip-card-credpago-pesquisa h2 { color: lightgrey; }
:root .flip-card-credpago-pesquisa .frente .formCredito .slds-radio_button__label, .flip-card-credpago-pesquisa .frente .formCredito .slds-radio--button__label{
background-color: inherit;
border-color: #ff5d7c !important;
color: white;
}
:root .flip-card-credpago-pesquisa .frente .formCredito .slds-radio_button [type="radio"]:checked + .slds-radio_button__label{
background: #ff5d7c !important;
box-shadow: #ffffff5e 0 0 6px 1px
}
.flip-card-credpago-pesquisa .p-button-card-action{
background: #0d006c !important;
border-color: #0d006c !important;
font-size: .8rem;
text-transform: uppercase;
}
:root .flip-card-credpago-pesquisa .flip-card-front {
background: #007ad2;
}
.flip-card-credpago-pesquisa .frente .titulo, .flip-card-credpago-pesquisa .frente .subtitulo{
color: white;
}
/Cenário aprovado/
:root .flip-card-credpago-pesquisa .card__side.flip-card-back.verso .resultadoAprovado, .flip-card-credpago-pesquisa .verso .resultadoAprovado, .flip-card-credpago-pesquisa .flip-card-back .resultadoAprovado, .flip-card-credpago-pesquisa .card__side .resultadoAprovado {
background-color: #ff5d7c !important;
color: white;
text-align: center;
}
.flip-card-credpago-pesquisa .verso .resultadoAprovado .p-button-card-action {
padding: 5px 20px !important;
}
.flip-card-credpago-pesquisa .verso .resultadoAprovado .titulo, .flip-card-credpago-pesquisa .verso .resultadoAprovado .resposta{
color: #0d006c;
}
.flip-card-credpago-pesquisa .verso .resultadoAprovado .titulo span, .flip-card-credpago-pesquisa .verso .resultadoAprovado .resposta span {
text-transform: uppercase;
font-weight: bold;
}
/Cenario reprovado/
:root .flip-card-credpago-pesquisa .verso .resultadoReprovado, .flip-card-credpago-pesquisa .card__side.flip-card-back.verso .resultadoReprovado, .flip-card-credpago-pesquisa .flip-card-back .resultadoReprovado, .flip-card-credpago-pesquisa .card__side .resultadoReprovado, .flip-card-credpago-pesquisa .flip-card-back {
background-color: #0d006c !important;
color: white;
text-align: center;
}
.flip-card-credpago-pesquisa .verso .resultadoReprovado .p-button-card-action{
background: #ff5d7c !important;
}
.flip-card-credpago-pesquisa .verso .resultadoReprovado .titulo{
color: #ff5d7c;
}

Configuração de CSS - Banner do simulador de crédito

Classes que possibilitam a customização do banner do simulador de crédito, conforme destacado na imagem abaixo.

Exemplo de implementação CSS

/* Banner simulador credpago */
@media only screen and (max-width: 767px){
:root .banner-simulador-credpago {display: none !important;}
}
:root .banner-simulador-credpago {
background-color:#0d006c;
background-image: url('/sfsites/c/resource/icones_banner/simulador/fundo_banner-simulador-credpago.png');
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
background-origin: border-box;
}
@media only screen and (max-width: 767px){
:root .banner-simulador-credpago .coluna-textos{
margin-top: 50px !important;
text-align: center !important;
align-items: center;
}
}
:root .banner-simulador-credpago .texto-principal, :root .banner-simulador-credpago .texto-secundario{
color: white !important;
}
:root .banner-simulador-credpago .flip-simulador-credpago {
border-radius: 40px;
max-width: 500px;
margin: auto;
}
:root .banner-simulador-credpago .form-simulador-credpago {
background-color: #ff5d7c;
border-radius: inherit;
padding: 1rem 3rem !important;
max-width: inherit;
margin: auto;
}
:root .banner-simulador-credpago .form-simulador-credpago .titulo {color: white;}
:root .banner-simulador-credpago .form-simulador-credpago input::placeholder {
color: #ff5d7c !important;
font-size: smaller !important;
text-transform: uppercase;
font-weight: bold;
}
:root .banner-simulador-credpago .form-simulador-credpago input{
border-radius: 40px;
border-color: transparent;
padding: 3px 15px;
}

:root .banner-simulador-credpago .form-simulador-credpago .slds-radio_button__label, .banner-simulador-credpago .form-simulador-credpago .slds-radio--button__label{
background-color: inherit;
border: 1.5px solid #0d006c !important;
color: white;
}
:root .banner-simulador-credpago .form-simulador-credpago .slds-radio_button [type="radio"]:checked + .slds-radio_button__label{
background: #0d006c !important;
box-shadow: #ffffff5e 0 0 6px 1px
}
:root .banner-simulador-credpago .form-simulador-credpago .p-button-card-action{
font-size: smaller !important;
}
/* Aprovado */
:root .banner-simulador-credpago .flip-simulador-credpago .flip-card-front, .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado {
background-color: #ff5d7c;
color: white;
text-align: center;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado .p-button-card-action {
padding: 5px 20px !important;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .titulo, .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado .resposta{
color: #0d006c;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado .titulo span, .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado .resposta span {
text-transform: uppercase;
font-weight: bold;
}
/Cenario reprovado/
:root .banner-simulador-credpago .flip-simulador-credpago .flip-card-back ,.banner-simulador-credpago .flip-simulador-credpago .verso .resultadoReprovado {
background-color: #0d006c;
color: white;
text-align: center;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoReprovado .p-button-card-action{
background: #ff5d7c !important;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoReprovado .titulo{
color: #ff5d7c;
}