Produtos Xiaomi

/*AUTOR: RAPHAEL ROCHA*/ /************************************************************************************* FOLHA DE ESTILO DO ELEMENTO LISTAGEM 7 *************************************************************************************/ /************************************************************************************ #AREA: REGRAS GERAIS ************************************************************************************/ .estiloListagem8 { overflow: hidden; position: relative; } .estiloListagem8 .containerListagem { display: flex; flex-wrap: wrap; box-sizing: border-box; } .estiloListagem8 .removeItemListagem { display: none !important; } @font-face { /* font-family: montserrat; src: url("../../../fonts/montserrat/montserrat-regular.ttf"); */ } .estiloListagem8 * { /* font-family: montserrat, montserrat_eot; */ } /************************************************************************************ #AREA: ITEM LISTAGEM ************************************************************************************/ .estiloListagem8 .boxItemListagem { align-items: center; background: #fff none repeat scroll 0 0; display: flex; flex: 1 1 219px; flex-direction: column; justify-content: flex-start; margin: 0 5px 20px; overflow: hidden; position: relative; transition: box-shadow 0.3s, opacity 0.2s, transform 0.2s; padding: 15px; margin-top: 5px; opacity: 1; transform: scale(1); } .estiloListagemMedio.estiloListagem8 .boxItemListagem, .estiloListagemMedio.estiloListagem8 div.controlaListagem { flex: 1 1 260px; } .estiloListagemGrande.estiloListagem8 .boxItemListagem, .estiloListagemGrande.estiloListagem8 div.controlaListagem { flex: 1 1 350px; } .estiloListagemMedio.estiloListagem8 .elementoListagemLinha .boxItemListagem { max-width: 260px; min-width: 260px; } .estiloListagemGrande.estiloListagem8 .elementoListagemLinha .boxItemListagem { max-width: 350px; min-width: 350px; } .estiloListagem8 .boxItemListagem:hover { align-items: center; box-shadow: 0 0 8px #999; cursor: pointer; } /************************************************************************************ #AREA: CONTEÚDO ITEM LISTAGEM ************************************************************************************/ .estiloListagem8 .linkListagemProduto { background: #fff none repeat scroll 0 0; overflow: hidden; padding: 8px; position: relative; transition: box-shadow 0.3s ease 0s, height 0.3s ease 0s, z-index 0s linear 0.4s; width: 100%; z-index: 10; } /************* #SUB_AREA: ÍCONE INSERIDO CARRINHO *************/ .estiloListagem8 .iconProdutoInseridoCarrinho { font-size: 15px; left: 0px; opacity: 0; pointer-events: none; position: absolute; top: 0px; transform: scale(0.2); transition: transform 0.3s, opacity 0.2s; } .estiloListagem8 .boxItemListagem.produtoInseridoCarrinho .iconProdutoInseridoCarrinho { opacity: 1; transform: scale(1); } /************* #SUB_AREA: INFORMAÇÕES COMPRA PRODUTO *************/ .estiloListagem8 .boxInformacoesCompraProduto { /* left: 0px; */ /* opacity: 1; */ /* position: absolute; */ /* top: 0; */ margin-top:0px; transition: opacity 0.3s; display: flex; justify-content: flex-start; /* z-index: 10; */ } .estiloListagem8 .boxInformacoesCompraProduto .itemInformacaoProduto { align-items: center; display: flex; height: 18px; padding-right: 10px; justify-content: center; /* margin-bottom: 5px; */ /* width: 42px; */ background: none !important; } .estiloListagem8 .boxInformacoesCompraProduto .itemInformacaoProduto:last-child { margin-bottom: 0; } .estiloListagem8 .boxInformacoesCompraProduto .itemInformacaoProduto p { color: #F39200; font-size: 11px; text-align: center; } .estiloListagem8 .boxInformacoesCompraProduto .itemInformacaoProduto.freteGratisProduto p { font-size: 12px; } .estiloListagem8 .boxInformacoesCompraProduto .itemInformacaoProduto.lancamentoProduto span { color: #F39200; font-size: 20px; } /************* #SUB_AREA: DIV´S QUE CONTROLAM A EXIBIÇÃO *************/ .estiloListagem8 .controlaListagem { display: flex; flex: 1 1 219px; height: 0; margin: 0 5px; } /************* #SUB_AREA: IMAGEM PRODUTO *************/ .estiloListagem8 .imagemProduto { display: flex; /* height: 205px; */ padding: 10px; position: relative; transition: filter 0.3s; width: 100%; } .estiloListagem8 .containerImagemProduto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .estiloListagem8 .boxItemListagem .imagemProduto img { max-width: 100%; max-height: 100%; transition: transform 0.5s; height: auto; width: auto; } .estiloListagem8 .boxItemListagem:hover .imagemProduto img:not(.imagemMarcaDagua) { transform: scale(1.09); } :not(.larguraColunaDivisor1) .estiloListagem8.estiloListagemPequeno .imagemProduto { max-height: 160px; height: 160px; } :not(.larguraColunaDivisor1) .estiloListagem8.estiloListagemMedio .imagemProduto { max-height: 210px; height: 210px; } :not(.larguraColunaDivisor1) .estiloListagem8.estiloListagemGrande .imagemProduto { max-height: 240px; height: 240px; } @media (max-width: 500px) { .estiloListagem8.estiloListagemPequeno .imagemProduto { max-height: 160px; height: 160px; } .estiloListagem8.estiloListagemMedio .imagemProduto { max-height: 210px; height: 210px; } .estiloListagem8.estiloListagemGrande .imagemProduto { max-height: 240px; height: 240px; } } /************* #SUB_AREA: MARCA D'ÁGUA *************/ .estiloListagem8 .boxItemListagem .imagemProduto img.imagemMarcaDagua { max-height: 20%; max-width: 20%; position: absolute; z-index: 100; } .estiloListagem8 .imagemMarcaDagua.posicao0 { left: 0; top: 0; } .estiloListagem8 .imagemMarcaDagua.posicao1 { left: 50%; top: 0; transform: translate(-50%,0); } .estiloListagem8 .imagemMarcaDagua.posicao2 { right: 0; top: 0; } .estiloListagem8 .imagemMarcaDagua.posicao3 { left: 0; top: 50%; transform: translate(0,-50%); } .estiloListagem8 .imagemMarcaDagua.posicao4 { left: 50%; top: 50%; transform: translate(-50%,-50%); } .estiloListagem8 .imagemMarcaDagua.posicao5 { right: 0; top: 50%; transform: translate(0,-50%); } .estiloListagem8 .imagemMarcaDagua.posicao6 { bottom: 0; left: 0; } .estiloListagem8 .imagemMarcaDagua.posicao7 { bottom: 0; left: 50%; transform: translate(-50%,0); } .estiloListagem8 .imagemMarcaDagua.posicao8 { bottom: 0; right: 0; } /************* #SUB_AREA: VÍDEO LISTAGEM *************/ .estiloListagem8 .boxVideoListagem { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .estiloListagem8 .boxVideoListagem iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*INICIO IMAGEM SECUNDÁRIA E EFEITO HOVER*/ .estiloListagem8 .hoverImgSecundaria { position: relative; } .estiloListagem8 .boxItemListagem:hover .hoverImgSecundaria img:not(.imgSecundariaListagem) { /*visibility: hidden;*/ } .estiloListagem8 .boxItemListagem .hoverImgSecundaria img, .estiloListagem8 .imgSecundariaListagem { transition: opacity 0.3s, transform 1s; } .estiloListagem8 .boxItemListagem .hoverImgSecundaria .imgSecundariaListagem { height: 100%; position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; } .estiloListagem8 .imgSecundariaListagem img { display: none; } .estiloListagem8 .imgSecundariaListagem { opacity: 0; } .estiloListagem8 .boxItemListagem:hover .hoverImgSecundaria .imgPrincipalListagem { opacity: 0; } .estiloListagem8 .boxItemListagem:hover .hoverImgSecundaria .imgSecundariaListagem img { display: block; } .estiloListagem8 .boxItemListagem:hover .hoverImgSecundaria .imgSecundariaListagem { opacity: 1; } /*FIM IMAGEM SECUNDÁRIA E EFEITO HOVER*/ /************* #SUB_AREA: INFORMAÇÕES PRODUTO - REGRAS GERAIS *************/ .estiloListagem8 .informacoesProduto { margin-top: 10px; transition: filter 0.6s ease 0s; } .estiloListagem8 .informacoesProduto + .informacoesProduto { margin-top: 5px; } .estiloListagem8 .informacoesProduto p { color: #000000; font-size: 13px; } .estiloListagem8 .informacoesProduto > div { margin-bottom: 5px; text-align: left; } .estiloListagem8 .informacoesProduto > .precoAtualProduto { margin-bottom: 0px; } .estiloListagem8 .informacoesProduto > div:last-child { margin: 0; } .estiloListagem8 .informacoesProduto > div:empty, .estiloListagem8 .informacoesProduto > div p:empty { display: none; } /************* #SUB_AREA: MARCA/MODELO PRODUTO *************/ .estiloListagem8 .boxMarcaModeloProduto { font-weight: 300; align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; } .estiloListagem8 .boxMarcaModeloProduto .modeloProduto { /* margin-left: 3px; */ } .estiloListagem8 .boxMarcaModeloProduto .modeloProduto p { color: #000000 !important; } .estiloListagem8 .boxMarcaModeloProduto .marcaProduto p { color: #000000 !important; margin-right: 5px; } /************* #SUB_AREA: NOME PRODUTO *************/ .estiloListagem8 .nomeProduto { max-height: 42px; overflow: hidden; padding: 1px 0; } .estiloListagem8 .nomeProduto p { font-size: 15px; line-height: 20px; } /************* #SUB_AREA: PREÇO ATUAL PRODUTO *************/ .estiloListagem8 .precoAtualProduto { margin-top: 0; transition: margin-top 0.2s; } .estiloListagem8 .precoAtualProduto p { font-size: 17px; font-weight: bold; } /************* #SUB_AREA: PREÇO ANTIGO PRODUTO *************/ .estiloListagem8 .precoAntigoProduto { transition: transform 0.3s, margin-bottom 0.2s; } .estiloListagem8 .precoAntigoProduto p { color: #b2b2b2; font-size: 15px; text-decoration: line-through; } /************* #SUB_AREA: PARCELAMENTO PRODUTO *************/ .estiloListagem8 .parcelamento { transition: transform 0.3s, margin-bottom 0.2s; } .estiloListagem8 .parcelamento p { color: #666; font-size: 12px; font-weight: 300; } .estiloListagem8 .parcelamento b { font-weight: 500; } /************************************************************************************ #AREA: BOTÃO COMPRAR ************************************************************************************/ .estiloListagem8 .boxItemListagem .linkbotaoComprar { align-items: center; background: transparent none repeat scroll 0 0; border-radius: 3px; border-top: medium none; display: flex; height: 50px; justify-content: center; margin-bottom: 10px; width: 70%; } .estiloListagem8 .boxItemListagem:hover .linkbotaoComprar { box-shadow: 0 -20px 30px rgba(0, 0, 0, 0.3) inset; } .estiloListagem8 .boxItemListagem .botaoComprarProduto8 { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .estiloListagem8 .boxItemListagem .botaoComprarProduto8 p { color: #fff; font-size: 17px; /* font-weight: bold; */ /* text-transform: uppercase; */ } .estiloListagem8 .boxItemListagem .botaoComprarProduto8 span { font-size: 25px; margin-right: 5px; } /************************************************************************************ #AREA: HOVER ITEM LISTAGEM ************************************************************************************/ .estiloListagem8 .boxItemListagem:hover .boxInformacoesCompraProduto { } .estiloListagem8 .boxItemListagem:hover .precoAntigoProduto, .estiloListagem8 .boxItemListagem:hover .parcelamento { } .estiloListagem8 .boxItemListagem:hover .precoAntigoProduto + .precoAtualProduto { } .estiloListagem8 .boxItemListagem:hover .linkbotaoComprar { } /************************************************************************************ #AREA: LISTAGEM EM LINHA ************************************************************************************/ .estiloListagem8 .elementoListagemLinha { flex-wrap: nowrap; left: 0; position: absolute; } .estiloListagem8 .elementoListagemLinha .boxItemListagem { margin-bottom: 0; max-width: 230px; min-width: 230px; } .estiloListagem8 .elementoListagemLinha > div:empty { display: none; } .estiloListagem8.emProgresso { pointer-events: none; } /*SETAS*/ .estiloListagem8 .setaListagemLinha { display: none; } .estiloListagem8[attr-num-elementos="4"] div.recebeEfeito, .estiloListagem8[attr-num-elementos="3"] div.recebeEfeito { opacity: 0; transform: scale(0); } .estiloListagem8 .elementoListagemLinha ~ .setaListagemLinha { cursor: pointer; display: block; opacity: 0.9; padding: 5px; position: absolute; top: calc(50% - 5px); z-index: 10; } .estiloListagem8 .elementoListagemLinha ~ .setaListagemLinha span { color: #c7c6c6; font-size: 50px; transition: color 0.3s; } .estiloListagem8 .elementoListagemLinha ~ .setaListagemLinha:hover span { color: #a19d9d; } .estiloListagem8 .elementoListagemLinha ~ .setaDireitaListagemLinha { right: 5px; transform: translate(0, -50%) rotate(-90deg); } .estiloListagem8 .elementoListagemLinha ~ .setaEsquerdaListagemLinha { left: 5px; transform: translate(0, -50%) rotate(90deg); } /*INDICADOR SLIDER*/ .estiloListagem8 .indicadorSliderMobile { display: none; } .estiloListagem8 .elementoListagemLinha ~ .indicadorSliderMobile { pointer-events: none; position: absolute; right: 15px; top: 0; transform: rotate(-90deg) perspective(1px) translateZ(0px); transition: opacity 0.3s linear 0.4s; z-index: 10; animation-duration: 1s; animation-iteration-count: infinite; animation-name: hvr-wobble-horizontal; animation-timing-function: ease-in-out; } .estiloListagem8 .elementoListagemLinha ~ .indicadorSliderMobile span { color: #ccc; font-size: 16px; } @keyframes hvr-wobble-horizontal { 0% { transform: translateX(8px) rotate(-90deg); } 50% { transform: translateX(0) rotate(-90deg); } 100% { transform: translateX(8px) rotate(-90deg); } } /*VARIAÇÕES DE CONTEÚDO DA LISTAGEM EM LINHA*/ .larguraColunaDivisor3 .estiloListagem8[attr-num-elementos="4"] .elementoListagemLinha .boxItemListagem { max-width: 280px; min-width: 280px; } @media (max-width: 1000px) { .estiloListagem8 .elementoListagemLinha ~ .indicadorSliderMobile { display: block; } } /************************************************************************************ #AREA: ALINHAMENTO LISTAGEM ************************************************************************************/ /*OBS: Para o alinhamento à esquerda, não é necessária nenhuma regra, pois o funcionameno nativo da listagem já é com alinhamento à esquerda*/ /******************************** #AREA: ALINHAMENTO CENTRALIZADO *********************************/ .estiloListagem8.tipoAlinhamentoElementoCentralizado .containerListagem { justify-content: center; opacity: 0; } /******************************** #AREA: ALINHAMENTO À DIREITA *********************************/ .estiloListagem8.tipoAlinhamentoElementoDireita .containerListagem { justify-content: flex-end; opacity: 0; } /************************************************************************************ #AREA: VARIAÇÕES DE CONTEÚDO ************************************************************************************/ @media (min-width: 1001px) { .larguraColunaDivisor1 .estiloListagem8 .boxItemListagem { height: 200px; width: 100%; } .larguraColunaDivisor1 .estiloListagem8 .boxItemListagem .linkListagemProduto { align-items: flex-start; display: flex; flex-flow: row nowrap; height: 200px; padding: 5px; width: 100%; } .larguraColunaDivisor1 .estiloListagem8 .informacoesProduto { display: flex; flex-direction: column; height: 100%; justify-content: flex-start; margin: 0; padding-top: 20px; } .larguraColunaDivisor1 .estiloListagem8 .boxInformacoesCompraProduto { display: flex; right: auto; position: absolute; right: 0px; top: -10px; background-color: white; padding: 3px; border-radius: 5px; } .larguraColunaDivisor1 .estiloListagem8 .boxItemListagem:hover .precoAntigoProduto + .precoAtualProduto { margin: 0; } .larguraColunaDivisor1 .estiloListagem8 .informacoesProduto + .boxInformacoesCompraProduto { bottom: 0; position: absolute; top: auto; } .larguraColunaDivisor1 .estiloListagem8 .informacoesProduto + .boxInformacoesCompraProduto .boxItemInformacaoProduto { width: 75px; } .larguraColunaDivisor1 .estiloListagem8 .informacoesProduto + .boxInformacoesCompraProduto p { font-size: 10px; } .larguraColunaDivisor1 .estiloListagem8 .imagemProduto { height: 100%; min-width: 50%; width: 50%; } .larguraColunaDivisor1 .estiloListagem8 .boxInformacoesCompraProduto .itemInformacaoProduto span { font-size: 20px; } .larguraColunaDivisor1 .estiloListagem8 .informacoesProduto > div { margin: 0 ; } .larguraColunaDivisor1 .estiloListagem8 .informacoesProduto p { font-size: 12px; } .larguraColunaDivisor1 .estiloListagem8 .nomeProduto p, .larguraColunaDivisor1 .estiloListagem8 .precoAtualProduto p { font-size: 15px; } .larguraColunaDivisor1 .estiloListagem8 .precoAtualProduto p, .larguraColunaDivisor1 .estiloListagem8 .boxMarcaModeloProduto .modeloProduto { margin: 0; } .larguraColunaDivisor1 .estiloListagem8 .boxItemListagem .botaoComprarProduto8 { } /************* #SUB_AREA: HOVER *************/ .larguraColunaDivisor1 .estiloListagem8 .boxItemListagem:hover .linkListagemProduto { height: 230px; } .larguraColunaDivisor1 .estiloListagem8 .boxItemListagem:hover .imagemProduto img:not(.imagemMarcaDagua) { transform: scale(1.04); } .larguraColunaDivisor1 .estiloListagem8 .boxItemListagem:hover .botaoComprarProduto8 { bottom: 10px; opacity: 1; } } /************************************************************************************ #AREA: VARIAÇÕES DE RESOLUÇÃO ************************************************************************************/ @media (max-width: 570px) { .estiloListagem8 .boxItemListagem, .estiloListagem8 .controlaListagem { flex: 1 1 165px; } } @media (max-width: 500px) { .estiloListagem8 .boxItemListagem, .estiloListagem8 .controlaListagem { flex: 1 1 165px !important; margin: 0 5px 5px; padding: 10px; } .estiloListagemGrande.estiloListagem8 .boxItemListagem, .estiloListagemGrande.estiloListagem8 .controlaListagem { flex: 1 1 250px !important; } .estiloListagem8 .boxInformacoesCompraProduto { display: block; } .estiloListagem8 .boxInformacoesCompraProduto .itemInformacaoProduto p { font-size: 12px; } .estiloListagem8 .linkListagemProduto { padding: 0; padding-bottom: 10px; } .estiloListagem8 .imagemProduto{ /* height: 138px;; */ } .estiloListagem8 .informacoesProduto { margin-top: 3px; } .estiloListagem8 .boxItemListagem, .estiloListagem8 .controlaListagem { margin-left:3px; margin-right: 3px; } .conteudoListagemProdutosBusca { margin-top: 81px; } }