feat: adiciona descricao de produtos e correção em imagens e espaçamentos
This commit is contained in:
Thiago Bronisio
parent
50974a13c1
commit
0680e72018
@ -8,3 +8,13 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="html--image-description"] {
|
||||
margin-right: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[class*="html--container-description"] {
|
||||
margin: 32px 32px 16px 32px;
|
||||
}
|
||||
|
||||
|
||||
@ -3,26 +3,14 @@
|
||||
"children": [
|
||||
"html#breadcrumb",
|
||||
"condition-layout.product#availability",
|
||||
"flex-layout.row#description",
|
||||
"list-context.product-list#prateleira",
|
||||
//"shelf.relatedProducts",
|
||||
"product-questions-and-answers"
|
||||
"tab-layout#description",
|
||||
"list-context.product-list#prateleira"
|
||||
]
|
||||
},
|
||||
|
||||
"product-summary.shelf#prateleira": {
|
||||
"children": [
|
||||
"stack-layout#prodsum",
|
||||
"product-summary-name",
|
||||
"product-installments",
|
||||
"product-selling-price"
|
||||
]
|
||||
},
|
||||
"list-context.product-list#prateleira": {
|
||||
"blocks": ["product-summary.shelf#prateleira"],
|
||||
"children": ["slider-layout#demo-products"]
|
||||
},
|
||||
|
||||
/*
|
||||
BREADCRUMB
|
||||
*/
|
||||
"html#breadcrumb": {
|
||||
"props": {
|
||||
"tag": "section",
|
||||
@ -32,12 +20,150 @@
|
||||
"children": ["breadcrumb"]
|
||||
},
|
||||
|
||||
"flex-layout.row#description": {
|
||||
/*
|
||||
DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#description)
|
||||
*/
|
||||
"html#container-description": {
|
||||
"props": {
|
||||
"tag": "div",
|
||||
"blockClass": "container-description"
|
||||
},
|
||||
"children": ["flex-layout.row#product-description"]
|
||||
},
|
||||
|
||||
"flex-layout.row#product-description": {
|
||||
"children": ["html#image-description", "flex-layout.row#description"]
|
||||
},
|
||||
|
||||
"html#image-description":{
|
||||
"props": {
|
||||
"marginBottom": 7
|
||||
"tag": "div",
|
||||
"testId": "product-images",
|
||||
"blockClass": "image-description"
|
||||
},
|
||||
"children": ["image#product"]
|
||||
},
|
||||
|
||||
"image#product": {
|
||||
"props": {
|
||||
"src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#description": {
|
||||
"children": ["product-description"]
|
||||
},
|
||||
|
||||
|
||||
"tab-layout#description": {
|
||||
"children": ["tab-list#description", "tab-content#description"],
|
||||
"props": {
|
||||
"blockClass": "description",
|
||||
"defaultActiveTabId": "descricao1"
|
||||
}
|
||||
},
|
||||
|
||||
"tab-list#description": {
|
||||
"children": [
|
||||
"tab-list.item#descricao1",
|
||||
"tab-list.item#descricao2",
|
||||
"tab-list.item#descricao3",
|
||||
"tab-list.item#descricao4",
|
||||
"tab-list.item#descricao5"
|
||||
]
|
||||
},
|
||||
|
||||
"tab-list.item#descricao1": {
|
||||
"props": {
|
||||
"tabId": "descricao1",
|
||||
"label": "Descrição",
|
||||
"defaultActiveTab": true
|
||||
}
|
||||
},
|
||||
|
||||
"tab-list.item#descricao2": {
|
||||
"props": {
|
||||
"tabId": "descricao2",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
|
||||
"tab-list.item#descricao3": {
|
||||
"props": {
|
||||
"tabId": "descricao3",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
|
||||
"tab-list.item#descricao4": {
|
||||
"props": {
|
||||
"tabId": "descricao4",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
|
||||
"tab-list.item#descricao5": {
|
||||
"props": {
|
||||
"tabId": "descricao5",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
|
||||
"tab-content#description": {
|
||||
"children": [
|
||||
"tab-content.item#descricao1",
|
||||
"tab-content.item#descricao2",
|
||||
"tab-content.item#descricao3",
|
||||
"tab-content.item#descricao4",
|
||||
"tab-content.item#descricao5"
|
||||
]
|
||||
},
|
||||
|
||||
"tab-content.item#descricao1": {
|
||||
"children": ["html#container-description"],
|
||||
"props": { "tabId": "descricao1" }
|
||||
},
|
||||
|
||||
"tab-content.item#descricao2": {
|
||||
"children": ["html#container-description"],
|
||||
"props": { "tabId": "descricao2" }
|
||||
},
|
||||
|
||||
"tab-content.item#descricao3": {
|
||||
"children": ["html#container-description"],
|
||||
"props": { "tabId": "descricao3" }
|
||||
},
|
||||
|
||||
"tab-content.item#descricao4": {
|
||||
"children": ["html#container-description"],
|
||||
"props": { "tabId": "descricao4" }
|
||||
},
|
||||
|
||||
"tab-content.item#descricao5": {
|
||||
"children": ["html#container-description"],
|
||||
"props": { "tabId": "descricao5" }
|
||||
},
|
||||
|
||||
/*
|
||||
PRATELEIRA DE PRODUTOS QUE QUE O CLIENTE PODE GOSTAR
|
||||
*/
|
||||
"list-context.product-list#prateleira": {
|
||||
"blocks": ["product-summary.shelf#prateleira"],
|
||||
"children": ["slider-layout#demo-products"]
|
||||
},
|
||||
|
||||
"product-summary.shelf#prateleira": {
|
||||
"children": [
|
||||
"stack-layout#prodsum",
|
||||
"product-summary-name",
|
||||
"product-list-price",
|
||||
"product-selling-price"
|
||||
]
|
||||
},
|
||||
|
||||
/*
|
||||
IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO
|
||||
*/
|
||||
"condition-layout.product#availability": {
|
||||
"props": {
|
||||
"blockClass": "availability",
|
||||
@ -52,6 +178,7 @@
|
||||
},
|
||||
"flex-layout.row#product-main": {
|
||||
"props": {
|
||||
"blockClass":"main",
|
||||
"colGap": 7,
|
||||
"rowGap": 7,
|
||||
"marginTop": 4,
|
||||
@ -85,6 +212,7 @@
|
||||
"flex-layout.col#stack": {
|
||||
"children": ["stack-layout"],
|
||||
"props": {
|
||||
"blockClass": "stack",
|
||||
"width": "50%",
|
||||
"rowGap": 0
|
||||
}
|
||||
@ -104,6 +232,10 @@
|
||||
"displayThumbnailsArrows": true
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..)
|
||||
*/
|
||||
"flex-layout.col#right-col": {
|
||||
"props": {
|
||||
"blockClass": "right-col",
|
||||
@ -113,13 +245,10 @@
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"product-identifier.product",
|
||||
"product-rating-summary",
|
||||
"flex-layout.row#list-price-savings",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"product-installments#parcelaProduct",
|
||||
"availability-subscriber",
|
||||
"sku-selector",
|
||||
"product-gifts",
|
||||
"html#buy-button",
|
||||
"shipping-simulator"
|
||||
]
|
||||
@ -132,11 +261,19 @@
|
||||
"children": ["vtex.store-components:product-name"]
|
||||
},
|
||||
|
||||
"product-installments#parcelaProduct": {
|
||||
"props": {
|
||||
"markers": ["discount", "x"],
|
||||
"blockClass": "divider",
|
||||
"message": "{installmentsNumber} <x>x</> <discount>de</discount> {installmentValue} <discount>sem juros</discount>"
|
||||
}
|
||||
},
|
||||
|
||||
"sku-selector": {
|
||||
"props": {
|
||||
"blockClass": "sku-selector",
|
||||
"imageHeight": 48,
|
||||
"imageWidth": 48,
|
||||
"imageHeight": 40,
|
||||
"imageWidth": 40,
|
||||
"variationsSpacing": 3,
|
||||
"showValueNameForImageVariation": true
|
||||
}
|
||||
@ -146,9 +283,7 @@
|
||||
"props": {
|
||||
"tag": "div",
|
||||
"testId": "buy-button",
|
||||
"blockClass": "buy-button",
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7
|
||||
"blockClass": "buy-button"
|
||||
},
|
||||
"children": ["product-quantity","add-to-cart-button"]
|
||||
},
|
||||
|
||||
@ -10,20 +10,5 @@
|
||||
"children": [
|
||||
"product-selling-price"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.row#list-price-savings": {
|
||||
"props": {
|
||||
"blockClass": "list-price-savings",
|
||||
"colGap": 2,
|
||||
"preserveLayoutOnMobile": true,
|
||||
"preventHorizontalStretch": true,
|
||||
"marginBottom": 2,
|
||||
"marginTop": 5
|
||||
}
|
||||
// "children": [
|
||||
// "product-list-price",
|
||||
// "product-price-savings"
|
||||
// ]
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,8 +7,7 @@
|
||||
"product-summary-space",
|
||||
"product-list-price#summary",
|
||||
"flex-layout.row#selling-price-savings",
|
||||
"product-installments#summary",
|
||||
"add-to-cart-button"
|
||||
"product-installments#summary"
|
||||
]
|
||||
},
|
||||
"flex-layout.col#productRating": {
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
},
|
||||
"flex-layout.col#quickviewPrice": {
|
||||
"children": [
|
||||
"flex-layout.row#list-price-savings",
|
||||
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments"
|
||||
]
|
||||
|
||||
@ -6,7 +6,4 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.b--action-primary {
|
||||
border-color: black;
|
||||
}
|
||||
/* Grid breakpoints */
|
||||
@ -8,17 +8,34 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.flexRowContent {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent--main {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.flexRowContent .flexCol--right-col .flexColChild--right-col .list-price-savings {
|
||||
display: none;
|
||||
.flexRowContent--main .flexCol--stack {
|
||||
padding-left: 40px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent--main .flexCol--stack {
|
||||
padding: 0 40px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.flexRowContent--main .flexCol--right-col {
|
||||
padding-right: 40px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent--main .flexCol--right-col {
|
||||
padding: 0 40px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ASSINANTE DE PRODUTO INDISPONIVEL */
|
||||
.flexRowContent--message-availability {
|
||||
margin-top: 24px;
|
||||
width: 375px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
@ -27,20 +44,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceValue {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
/* BOTAO DE ADICIONAR A SACOLA */
|
||||
.flexRowContent {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth):nth-child(even) {
|
||||
width: 100% !important;
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
|
||||
background-color: black;
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
/* REFERENCIA DO PRODUTO */
|
||||
.product-identifier--productReference {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
@ -7,6 +8,7 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
/* VALOR PRINCIPAL DO PRODUTO */
|
||||
.sellingPrice--hasListPrice {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
@ -14,35 +16,48 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.installments {
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
color: #929292;
|
||||
/* VALORES DE PARCELAMENTOS E JUROS */
|
||||
.installments--divider {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.installments .installmentsNumber {
|
||||
.installments--divider .installmentsNumber {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
.installments .installmentsNumber::after {
|
||||
content: "x ";
|
||||
}
|
||||
.installments .installmentValue {
|
||||
.installments--divider .installments-x--divider {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
.installments .installmentValue::before {
|
||||
.installments--divider .installmentValue--divider {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
.installments--divider .installments-discount--divider {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
/* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */
|
||||
.listPrice {
|
||||
font-family: "Opens Sans", sans-serif;
|
||||
line-height: 19px;
|
||||
color: #bababa;
|
||||
font-size: 14px;
|
||||
}
|
||||
.listPrice .listPriceValue::before {
|
||||
content: "de ";
|
||||
margin-left: 5px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.installments .installmentValue::after {
|
||||
content: " sem juros";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
.listPrice .listPriceValue::after {
|
||||
content: " por";
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -7,6 +7,7 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
/* INPUT CONTADOR DE PRODUTO */
|
||||
.quantitySelectorContainer {
|
||||
height: 49px;
|
||||
margin-top: 8px;
|
||||
|
||||
@ -9,17 +9,40 @@
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0 40px;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
/*PRODUTO INDISPONIVEL, TEXTOS */
|
||||
/* BUSCA DE CEP */
|
||||
/* TRANSPORTADORAS */
|
||||
}
|
||||
.container .productNameContainer--quickview {
|
||||
|
||||
/*IMAGEM PRINCIPAL DO PRODUTO */
|
||||
.productImage {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.productImage .productImageTag {
|
||||
width: 100%;
|
||||
max-height: 100% !important;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
|
||||
.carouselGaleryThumbs {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.carouselGaleryThumbs .thumbImg {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.carouselGaleryThumbs .productImagesThumb {
|
||||
margin: 0 16px 0 0;
|
||||
height: 100% !important;
|
||||
width: 90px !important;
|
||||
}
|
||||
.carouselGaleryThumbs .productImagesThumbCaret {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
|
||||
.productNameContainer--quickview {
|
||||
text-align: end;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
@ -27,21 +50,23 @@
|
||||
color: #575757;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .productNameContainer--quickview {
|
||||
.productNameContainer--quickview {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
.container .skuSelectorContainer {
|
||||
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorName {
|
||||
.skuSelectorContainer .skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorNameSeparator {
|
||||
.skuSelectorContainer .skuSelectorNameSeparator {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorSubcontainer--cor::before {
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor::before {
|
||||
content: "OUTRAS CORES:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
@ -49,7 +74,7 @@
|
||||
font-size: 14px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
@ -57,119 +82,107 @@
|
||||
font-size: 14px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorTextContainer {
|
||||
.skuSelectorContainer .skuSelectorTextContainer {
|
||||
display: none;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorOptionsList {
|
||||
.skuSelectorContainer .skuSelectorOptionsList {
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.container .skuSelectorContainer .skuSelectorSelectorImageValue {
|
||||
.skuSelectorContainer .skuSelectorSelectorImageValue {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorItem {
|
||||
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
.skuSelectorOptionsList .skuSelectorItem {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorItem:first-child {
|
||||
.skuSelectorOptionsList .skuSelectorItem:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorItem .frameAround {
|
||||
.skuSelectorOptionsList .skuSelectorItem .frameAround {
|
||||
border-radius: 50%;
|
||||
border-color: #000000;
|
||||
color: #000000;
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue {
|
||||
.skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #000000;
|
||||
}
|
||||
.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
|
||||
.skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.container .skuSelectorOptionsList .diagonalCross {
|
||||
.skuSelectorOptionsList .diagonalCross {
|
||||
margin: 5px;
|
||||
background-image: linear-gradient(to top right, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 0, transparent 0%);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.container .carouselGaleryThumbs {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.container .carouselGaleryThumbs .thumbImg {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.container .carouselGaleryThumbs .productImagesThumb {
|
||||
margin-right: 16px;
|
||||
height: 100% !important;
|
||||
width: 90px !important;
|
||||
}
|
||||
.container .carouselGaleryThumbs .productImagesThumbCaret {
|
||||
display: none;
|
||||
}
|
||||
.container .subscriberContainer {
|
||||
|
||||
/*PRODUTO INDISPONIVEL &&
|
||||
FORMULARIO DE PRODUTO INDISPONIVEL */
|
||||
.subscriberContainer {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
/* FORMULARIO DE PRODUTO INDISPONIVEL */
|
||||
}
|
||||
.container .subscriberContainer .title {
|
||||
.subscriberContainer .title {
|
||||
font-size: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.container .subscriberContainer .title::before {
|
||||
.subscriberContainer .title::before {
|
||||
content: "Produto indisponível";
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #868686;
|
||||
}
|
||||
.container .subscriberContainer .subscribeLabel {
|
||||
.subscriberContainer .subscribeLabel {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .subscriberContainer .subscribeLabel::before {
|
||||
.subscriberContainer .subscribeLabel::before {
|
||||
content: "Deseja saber quando estiver disponível?";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #868686;
|
||||
}
|
||||
.container .subscriberContainer .form {
|
||||
.subscriberContainer .form {
|
||||
position: relative;
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
|
||||
width: 374.65px;
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) {
|
||||
display: block;
|
||||
width: 374.65px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
|
||||
width: 182.46px;
|
||||
margin-right: 10.08px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
|
||||
padding: 0 14px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
|
||||
position: absolute;
|
||||
left: 51%;
|
||||
top: 0%;
|
||||
@ -179,27 +192,27 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
|
||||
width: -webkit-fill-available;
|
||||
margin: 0 0 0 8px;
|
||||
left: 49%;
|
||||
}
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
|
||||
padding: 0 14px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
background-color: #000000;
|
||||
@ -210,7 +223,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
|
||||
content: "AVISE-ME";
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
@ -218,49 +231,51 @@
|
||||
line-height: 25px;
|
||||
font-family: "Open sans", sans-serif;
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
|
||||
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
|
||||
padding: 0;
|
||||
}
|
||||
.container .shippingContainer {
|
||||
|
||||
/* BUSCA DE CEP */
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer {
|
||||
.shippingContainer {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before {
|
||||
content: "CALCULAR FRETE";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
padding: 0;
|
||||
margin-top: 25px;
|
||||
position: relative;
|
||||
@ -271,22 +286,22 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
|
||||
color: #000000;
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
|
||||
display: none;
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-button) {
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
height: 49px;
|
||||
width: 49px;
|
||||
margin-top: 27px;
|
||||
margin-top: auto !important;
|
||||
position: relative;
|
||||
right: 148px;
|
||||
font-size: 0;
|
||||
@ -294,37 +309,41 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer :global(.vtex-button) {
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
height: 49px !important;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
top: 26px;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-button)::before {
|
||||
.shippingContainer :global(.vtex-button)::before {
|
||||
content: "OK";
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #fff;
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
|
||||
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
|
||||
height: fit-content;
|
||||
}
|
||||
.container .shippingTable {
|
||||
|
||||
/* TRANSPORTADORAS */
|
||||
.shippingTable {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.container .shippingTable .shippingTableHead {
|
||||
.shippingTable .shippingTableHead {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow {
|
||||
.shippingTable .shippingTableHead .shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
margin-right: 39px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -332,11 +351,11 @@
|
||||
color: #202020;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
@ -344,27 +363,27 @@
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
font-size: 0;
|
||||
margin-right: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
|
||||
content: "Frete";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow {
|
||||
.shippingTable .shippingTableBody .shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||
width: 82px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
@ -373,11 +392,11 @@
|
||||
color: #afafaf;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
@ -385,7 +404,7 @@
|
||||
line-height: 16px;
|
||||
color: #afafaf;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
|
||||
width: 50px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
@ -393,16 +412,33 @@
|
||||
line-height: 16px;
|
||||
color: #afafaf;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
|
||||
padding: 0 0 15px;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.productImage {
|
||||
width: max-content;
|
||||
/* IMAGEM DA DESCRIÇÃO DO PRODUTO */
|
||||
.imageElement {
|
||||
width: 100%;
|
||||
}
|
||||
.productImage .productImageTag--main {
|
||||
max-height: 664px !important;
|
||||
|
||||
/* DESCRIÇÃO DO PRODUTO */
|
||||
.productDescriptionContainer {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
height: 40px;
|
||||
margin-bottom: 8px;
|
||||
color: #575757;
|
||||
}
|
||||
.productDescriptionContainer .productDescriptionText {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
42
styles/css/vtex.tab-layout.css
Normal file
42
styles/css/vtex.tab-layout.css
Normal file
@ -0,0 +1,42 @@
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.container--description {
|
||||
padding: 0 40px;
|
||||
}
|
||||
.container--description .listContainer {
|
||||
display: flex;
|
||||
padding: 0 80px;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.container--description .listContainer .listItem {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 38px;
|
||||
width: 114px;
|
||||
}
|
||||
.container--description .listContainer .listItem :global(.vtex-button) {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #bfbfbf;
|
||||
width: 100%;
|
||||
}
|
||||
.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
padding: 0 !important;
|
||||
height: 38px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover {
|
||||
color: black;
|
||||
border-bottom: 2px solid #000000;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
// .html {
|
||||
// background-color: red;
|
||||
// }
|
||||
|
||||
// .html--pdp-breadcrumb {
|
||||
// background-color: green;
|
||||
// }
|
||||
|
||||
.b--action-primary {
|
||||
border-color: black;
|
||||
}
|
||||
@ -1,35 +1,41 @@
|
||||
.flexRowContent {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
|
||||
.flexRowContent--main {
|
||||
@include mq(md, max) {
|
||||
display: block;
|
||||
}
|
||||
.flexCol--stack {
|
||||
padding-left: 40px;
|
||||
@include mq(md, max) {
|
||||
padding: 0 40px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.flexCol--right-col {
|
||||
.flexColChild--right-col {
|
||||
.list-price-savings {
|
||||
display: none;
|
||||
}
|
||||
padding-right: 40px;
|
||||
margin-left: 16px;
|
||||
@include mq(md, max) {
|
||||
padding: 0 40px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ASSINANTE DE PRODUTO INDISPONIVEL */
|
||||
.flexRowContent--message-availability {
|
||||
margin-top: 24px;
|
||||
width: 375px;
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceValue {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
/* BOTAO DE ADICIONAR A SACOLA */
|
||||
.flexRowContent {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
&:nth-child(even) {
|
||||
@include mq(md, max) {
|
||||
width: 100% !important;
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* REFERENCIA DO PRODUTO */
|
||||
.product-identifier--productReference {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* VALOR PRINCIPAL DO PRODUTO */
|
||||
.sellingPrice--hasListPrice {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
@ -5,36 +6,54 @@
|
||||
color: $color-black-padrao;
|
||||
}
|
||||
|
||||
.installments {
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
color: $color-gray-6;
|
||||
/* VALORES DE PARCELAMENTOS E JUROS */
|
||||
.installments--divider {
|
||||
margin-bottom: 8px;
|
||||
.installmentsNumber {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
&::after {
|
||||
content: "x ";
|
||||
}
|
||||
color: $color-gray14;
|
||||
}
|
||||
.installmentValue {
|
||||
|
||||
.installments-x--divider {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $color-gray14;
|
||||
}
|
||||
|
||||
.installmentValue--divider {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $color-gray14;
|
||||
}
|
||||
|
||||
.installments-discount--divider {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $color-gray14;
|
||||
}
|
||||
}
|
||||
|
||||
/* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */
|
||||
.listPrice {
|
||||
font-family: "Opens Sans", sans-serif;
|
||||
line-height: 19px;
|
||||
color: #bababa;
|
||||
|
||||
font-size: 14px;
|
||||
.listPriceValue {
|
||||
&::before {
|
||||
content: "de ";
|
||||
margin-left: 5px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&::after {
|
||||
content: " sem juros";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
content: " por";
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* INPUT CONTADOR DE PRODUTO */
|
||||
.quantitySelectorContainer {
|
||||
height: 49px;
|
||||
margin-top: 8px;
|
||||
|
||||
@ -1,176 +1,212 @@
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0 40px;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
|
||||
.productNameContainer--quickview {
|
||||
text-align: end;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
color: $color-gray-7;
|
||||
@include mq(md, max) {
|
||||
text-align: start;
|
||||
/*IMAGEM PRINCIPAL DO PRODUTO */
|
||||
.productImage {
|
||||
margin-right: 16px;
|
||||
.productImageTag {
|
||||
width: 100%;
|
||||
max-height: 100% !important;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
|
||||
.carouselGaleryThumbs {
|
||||
margin: 16px 0;
|
||||
|
||||
.thumbImg {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.productImagesThumb {
|
||||
margin: 0 16px 0 0;
|
||||
height: 100% !important;
|
||||
width: 90px !important;
|
||||
}
|
||||
|
||||
.productImagesThumbCaret {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
|
||||
.productNameContainer--quickview {
|
||||
text-align: end;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
color: $color-gray-7;
|
||||
@include mq(md, max) {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.skuSelectorNameSeparator {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--cor {
|
||||
&::before {
|
||||
content: "OUTRAS CORES:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
font-size: 14px;
|
||||
color: $color-gray-6;
|
||||
}
|
||||
}
|
||||
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.skuSelectorName {
|
||||
font-size: 0;
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
&::before {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
font-size: 14px;
|
||||
color: $color-gray-6;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorNameSeparator {
|
||||
font-size: 0;
|
||||
}
|
||||
.skuSelectorTextContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--cor {
|
||||
&::before {
|
||||
content: "OUTRAS CORES:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
font-size: 14px;
|
||||
color: $color-gray-6;
|
||||
}
|
||||
}
|
||||
.skuSelectorOptionsList {
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
&::before {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
font-size: 14px;
|
||||
color: $color-gray-6;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorTextContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.skuSelectorOptionsList {
|
||||
margin-top: 8px;
|
||||
.skuSelectorSelectorImageValue {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
.skuSelectorOptionsList {
|
||||
.skuSelectorItem {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.frameAround {
|
||||
border-radius: 50%;
|
||||
border-color: $color-black-padrao;
|
||||
color: $color-black-padrao;
|
||||
}
|
||||
|
||||
.skuSelectorSelectorImageValue {
|
||||
font-size: 0;
|
||||
.skuSelectorItemTextValue {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $color-black-padrao;
|
||||
}
|
||||
.skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
.skuSelectorOptionsList {
|
||||
.skuSelectorItem {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.frameAround {
|
||||
border-radius: 50%;
|
||||
border-color: $color-black-padrao;
|
||||
color: $color-black-padrao;
|
||||
}
|
||||
|
||||
.skuSelectorItemTextValue {
|
||||
.diagonalCross {
|
||||
margin: 5px;
|
||||
background-image: linear-gradient(
|
||||
to top right,
|
||||
transparent 44%,
|
||||
rgba(0, 0, 0, 0.3) 48%,
|
||||
currentColor 48%,
|
||||
currentColor 0,
|
||||
transparent 0%
|
||||
);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*PRODUTO INDISPONIVEL &&
|
||||
FORMULARIO DE PRODUTO INDISPONIVEL */
|
||||
.subscriberContainer {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
.title {
|
||||
font-size: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
&::before {
|
||||
content: "Produto indisponível";
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray-9;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribeLabel {
|
||||
font-size: 0;
|
||||
&::before {
|
||||
content: "Deseja saber quando estiver disponível?";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray-9;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
position: relative;
|
||||
:global(.vtex-store-components-3-x-content) {
|
||||
display: block;
|
||||
width: 374.65px;
|
||||
margin-top: 16px;
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $color-black-padrao;
|
||||
}
|
||||
.skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.diagonalCross {
|
||||
margin: 5px;
|
||||
background-image: linear-gradient(
|
||||
to top right,
|
||||
transparent 44%,
|
||||
rgba(0, 0, 0, 0.3) 48%,
|
||||
currentColor 48%,
|
||||
currentColor 0,
|
||||
transparent 0%
|
||||
);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.carouselGaleryThumbs {
|
||||
margin: 16px 0;
|
||||
|
||||
.thumbImg {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.productImagesThumb {
|
||||
margin-right: 16px;
|
||||
height: 100% !important;
|
||||
width: 90px !important;
|
||||
}
|
||||
|
||||
.productImagesThumbCaret {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*PRODUTO INDISPONIVEL, TEXTOS */
|
||||
.subscriberContainer {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
.title {
|
||||
font-size: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
&::before {
|
||||
content: "Produto indisponível";
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray-9;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribeLabel {
|
||||
font-size: 0;
|
||||
&::before {
|
||||
content: "Deseja saber quando estiver disponível?";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray-9;
|
||||
}
|
||||
}
|
||||
/* FORMULARIO DE PRODUTO INDISPONIVEL */
|
||||
.form {
|
||||
position: relative;
|
||||
:global(.vtex-store-components-3-x-content) {
|
||||
width: 374.65px;
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
.inputName {
|
||||
width: 182.46px;
|
||||
margin-right: 10.08px;
|
||||
margin-bottom: 15px;
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
width: 49%;
|
||||
}
|
||||
.inputName {
|
||||
width: 182.46px;
|
||||
margin-right: 10.08px;
|
||||
margin-bottom: 15px;
|
||||
@include mq(md, max) {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid $color-gray-6;
|
||||
border-radius: 0;
|
||||
}
|
||||
:global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid $color-gray-6;
|
||||
border-radius: 0;
|
||||
}
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
padding: 0 14px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: $color-gray-6;
|
||||
}
|
||||
}
|
||||
.inputEmail {
|
||||
position: absolute;
|
||||
left: 51%;
|
||||
top: 0%;
|
||||
border-radius: 0;
|
||||
width: 182.46px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 15px;
|
||||
@include mq(md, max) {
|
||||
width: -webkit-fill-available;
|
||||
margin: 0 0 0 8px;
|
||||
left: 49%;
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid $color-gray-6;
|
||||
border-radius: 0;
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
padding: 0 14px;
|
||||
font-size: 12px;
|
||||
@ -178,232 +214,207 @@
|
||||
color: $color-gray-6;
|
||||
}
|
||||
}
|
||||
.inputEmail {
|
||||
position: absolute;
|
||||
left: 51%;
|
||||
top: 0%;
|
||||
border-radius: 0;
|
||||
width: 182.46px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 15px;
|
||||
@include mq(md, max) {
|
||||
width: -webkit-fill-available;
|
||||
margin: 0 0 0 8px;
|
||||
left: 49%;
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid $color-gray-6;
|
||||
border-radius: 0;
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
padding: 0 14px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: $color-gray-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
}
|
||||
.submit {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
:global(.vtex-button) {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
:global(.vtex-button) {
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
background-color: $color-black-padrao;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&::before {
|
||||
content: "AVISE-ME";
|
||||
color: $color-white;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-family: "Open sans", sans-serif;
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
padding: 0;
|
||||
}
|
||||
height: 49px;
|
||||
background-color: $color-black-padrao;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&::before {
|
||||
content: "AVISE-ME";
|
||||
color: $color-white;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-family: "Open sans", sans-serif;
|
||||
}
|
||||
:global(.vtex-button__label) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* BUSCA DE CEP */
|
||||
.shippingContainer {
|
||||
/* BUSCA DE CEP */
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
@include mq(sm, max) {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
@include mq(sm, max) {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
@include mq(sm, max) {
|
||||
display: block;
|
||||
:global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
&::before {
|
||||
content: "CALCULAR FRETE";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray-6;
|
||||
}
|
||||
:global(.vtex-input__label) {
|
||||
}
|
||||
:global(.vtex-input-prefix__group) {
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
@include mq(sm, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
padding: 0;
|
||||
margin-top: 25px;
|
||||
position: relative;
|
||||
left: 32px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: underline;
|
||||
@include mq(sm, max) {
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
text-align: end;
|
||||
}
|
||||
:last-child {
|
||||
color: $color-black-padrao;
|
||||
}
|
||||
:global(.vtex__icon-external-link) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
height: 49px;
|
||||
width: 49px;
|
||||
margin-top: auto !important;
|
||||
position: relative;
|
||||
right: 148px;
|
||||
font-size: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 49px !important;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 26px;
|
||||
}
|
||||
&::before {
|
||||
content: "OK";
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-white;
|
||||
}
|
||||
:global(.vtex-button__label) {
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* TRANSPORTADORAS */
|
||||
.shippingTable {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
.shippingTableHead {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 15px;
|
||||
.shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.shippingTableHeadDeliveryName {
|
||||
margin-right: 39px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black2;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black2;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
font-size: 0;
|
||||
margin-right: 30px;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 32px;
|
||||
}
|
||||
&::before {
|
||||
content: "CALCULAR FRETE";
|
||||
content: "Frete";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray-6;
|
||||
color: $color-black2;
|
||||
}
|
||||
}
|
||||
:global(.vtex-input-prefix__group) {
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
@include mq(sm, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
padding: 0;
|
||||
margin-top: 25px;
|
||||
position: relative;
|
||||
left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableBody {
|
||||
.shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.shippingTableCellDeliveryName {
|
||||
width: 82px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: underline;
|
||||
color: $color-gray-10;
|
||||
@include mq(sm, max) {
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
text-align: end;
|
||||
}
|
||||
:last-child {
|
||||
color: $color-black-padrao;
|
||||
}
|
||||
:global(.vtex__icon-external-link) {
|
||||
display: none;
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
height: 49px;
|
||||
width: 49px;
|
||||
margin-top: 27px;
|
||||
position: relative;
|
||||
right: 148px;
|
||||
font-size: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(sm, max) {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
&::before {
|
||||
content: "OK";
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-white;
|
||||
}
|
||||
:global(.vtex-button__label) {
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* TRANSPORTADORAS */
|
||||
.shippingTable {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
.shippingTableHead {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 15px;
|
||||
.shippingTableRow {
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.shippingTableHeadDeliveryName {
|
||||
margin-right: 39px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black2;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black2;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
font-size: 0;
|
||||
margin-right: 30px;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 32px;
|
||||
}
|
||||
&::before {
|
||||
content: "Frete";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black2;
|
||||
}
|
||||
}
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableBody {
|
||||
.shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.shippingTableCellDeliveryName {
|
||||
width: 82px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-10;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-10;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice {
|
||||
width: 50px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-10;
|
||||
}
|
||||
.shippingTableCell {
|
||||
padding: 0 0 15px;
|
||||
.shippingTableLabel {
|
||||
.shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
.shippingTableCellDeliveryPrice {
|
||||
width: 50px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-10;
|
||||
}
|
||||
.shippingTableCell {
|
||||
padding: 0 0 15px;
|
||||
.shippingTableLabel {
|
||||
.shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -411,9 +422,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.productImage {
|
||||
width: max-content;
|
||||
.productImageTag--main {
|
||||
max-height: 664px !important;
|
||||
/* IMAGEM DA DESCRIÇÃO DO PRODUTO */
|
||||
.imageElement {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* DESCRIÇÃO DO PRODUTO */
|
||||
.productDescriptionContainer {
|
||||
margin-left: 16px;
|
||||
.productDescriptionTitle {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
height: 40px;
|
||||
margin-bottom: 8px;
|
||||
color: $color-gray13;
|
||||
}
|
||||
.productDescriptionText {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: $color-gray14;
|
||||
}
|
||||
}
|
||||
|
||||
35
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
35
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,35 @@
|
||||
.container--description {
|
||||
padding: 0 40px;
|
||||
.listContainer {
|
||||
display: flex;
|
||||
padding: 0 80px;
|
||||
border-bottom: 1px solid $color-gray11;
|
||||
justify-content: space-between;
|
||||
.listItem {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 38px;
|
||||
width: 114px;
|
||||
|
||||
:global(.vtex-button) {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: $color-gray12;
|
||||
width: 100%;
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
padding: 0 !important;
|
||||
height: 38px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
text-transform: capitalize;
|
||||
&:hover {
|
||||
color: black;
|
||||
border-bottom: 2px solid $color-black-padrao;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
$color-black: #292929;
|
||||
$color-black-padrao: #000000;
|
||||
$color-black2: #202020;
|
||||
|
||||
$color-white: #fff;
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
@ -13,6 +14,10 @@ $color-gray-7: #575757;
|
||||
$color-gray-8: #989898;
|
||||
$color-gray-9: #868686;
|
||||
$color-gray-10: #afafaf;
|
||||
$color-gray11: #b9b9b9;
|
||||
$color-gray12: #bfbfbf;
|
||||
$color-gray13: #575757;
|
||||
$color-gray14: #929292;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user