Thiago.bronisio/challenge-vtex-io-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat: adiciona descricao de produtos e correção em imagens e espaçamentos' (#5) from feature/pagina-product into master

Browse Source 
Reviewed-on: #5
This commit is contained in:
Thiago Bronisio Damascena 2023-01-27 05:58:19 +00:00
commit 50cf4afa8b
20 changed files with 901 additions and 580 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
react/components/Html/styles.css
View File

@ -8,3 +8,13 @@
display: block; display: block;
} }
} }
[class*="html--image-description"] {
margin-right: 16px;
width: 100%;
}
[class*="html--container-description"] {
margin: 32px 32px 16px 32px;
}

191
store/blocks/pdp/product.jsonc
View File

@ -3,26 +3,14 @@
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
"flex-layout.row#description", "tab-layout#description",
"list-context.product-list#prateleira", "list-context.product-list#prateleira"
//"shelf.relatedProducts",
"product-questions-and-answers"
] ]
}, },
"product-summary.shelf#prateleira": { /*
"children": [ BREADCRUMB
"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"]
},
"html#breadcrumb": { "html#breadcrumb": {
"props": { "props": {
"tag": "section", "tag": "section",
@ -32,12 +20,150 @@
"children": ["breadcrumb"] "children": ["breadcrumb"]
}, },
"flex-layout.row#description": { /*
DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#description)
*/
"html#container-description": {
"props": { "props": {
"marginBottom": 7 "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": {
"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"] "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": { "condition-layout.product#availability": {
"props": { "props": {
"blockClass": "availability", "blockClass": "availability",
@ -52,6 +178,7 @@
}, },
"flex-layout.row#product-main": { "flex-layout.row#product-main": {
"props": { "props": {
"blockClass":"main",
"colGap": 7, "colGap": 7,
"rowGap": 7, "rowGap": 7,
"marginTop": 4, "marginTop": 4,
@ -85,6 +212,7 @@
"flex-layout.col#stack": { "flex-layout.col#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"blockClass": "stack",
"width": "50%", "width": "50%",
"rowGap": 0 "rowGap": 0
} }
@ -104,6 +232,10 @@
"displayThumbnailsArrows": true "displayThumbnailsArrows": true
} }
}, },
/*
INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..)
*/
"flex-layout.col#right-col": { "flex-layout.col#right-col": {
"props": { "props": {
"blockClass": "right-col", "blockClass": "right-col",
@ -113,13 +245,10 @@
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product", "product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments", "product-installments#parcelaProduct",
"availability-subscriber", "availability-subscriber",
"sku-selector", "sku-selector",
"product-gifts",
"html#buy-button", "html#buy-button",
"shipping-simulator" "shipping-simulator"
] ]
@ -132,11 +261,19 @@
"children": ["vtex.store-components:product-name"] "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": { "sku-selector": {
"props": { "props": {
"blockClass": "sku-selector", "blockClass": "sku-selector",
"imageHeight": 48, "imageHeight": 40,
"imageWidth": 48, "imageWidth": 40,
"variationsSpacing": 3, "variationsSpacing": 3,
"showValueNameForImageVariation": true "showValueNameForImageVariation": true
} }
@ -146,9 +283,7 @@
"props": { "props": {
"tag": "div", "tag": "div",
"testId": "buy-button", "testId": "buy-button",
"blockClass": "buy-button", "blockClass": "buy-button"
"marginTop": 4,
"marginBottom": 7
}, },
"children": ["product-quantity","add-to-cart-button"] "children": ["product-quantity","add-to-cart-button"]
}, },

15
store/blocks/product-price.jsonc
View File

@ -10,20 +10,5 @@
"children": [ "children": [
"product-selling-price" "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"
// ]
} }
} }

3
store/blocks/product-summary/product-summary.jsonc
View File

@ -7,8 +7,7 @@
"product-summary-space", "product-summary-space",
"product-list-price#summary", "product-list-price#summary",
"flex-layout.row#selling-price-savings", "flex-layout.row#selling-price-savings",
"product-installments#summary", "product-installments#summary"
"add-to-cart-button"
] ]
}, },
"flex-layout.col#productRating": { "flex-layout.col#productRating": {

2
store/blocks/product-summary/quickview.json
View File

@ -36,7 +36,7 @@
}, },
"flex-layout.col#quickviewPrice": { "flex-layout.col#quickviewPrice": {
"children": [ "children": [
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments" "product-installments"
] ]

3
styles/css/agenciamagma.store-theme.css
View File

@ -7,6 +7,3 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.b--action-primary {
border-color: black;
}

42
styles/css/vtex.flex-layout.css
View File

@ -8,17 +8,34 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.flexRowContent { /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
padding: 0; @media only screen and (max-width: 1023px) {
margin: 0; .flexRowContent--main {
width: 100%; display: block;
}
} }
.flexRowContent .flexCol--right-col .flexColChild--right-col .list-price-savings { .flexRowContent--main .flexCol--stack {
display: none; 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 { .flexRowContent--message-availability {
margin-top: 24px;
width: 375px; width: 375px;
} }
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
@ -27,20 +44,19 @@
} }
} }
.sellingPriceValue { /* BOTAO DE ADICIONAR A SACOLA */
font-size: 50px;
}
.flexRowContent { .flexRowContent {
padding: 0; padding: 0;
margin-top: 0; margin: 0;
} }
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
padding: 0; padding: 0;
display: flex; display: flex;
} }
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth):nth-child(even) { @media only screen and (max-width: 1023px) {
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important; width: 100% !important;
}
} }
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) { .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
background-color: black; background-color: black;

1
styles/css/vtex.product-identifier.css
View File

@ -7,6 +7,7 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
/* REFERENCIA DO PRODUTO */
.product-identifier--productReference { .product-identifier--productReference {
display: flex; display: flex;
justify-content: end; justify-content: end;

53
styles/css/vtex.product-price.css
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -7,6 +8,7 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
/* VALOR PRINCIPAL DO PRODUTO */
.sellingPrice--hasListPrice { .sellingPrice--hasListPrice {
font-weight: 700; font-weight: 700;
font-size: 25px; font-size: 25px;
@ -14,35 +16,48 @@
color: #000000; color: #000000;
} }
.installments { /* VALORES DE PARCELAMENTOS E JUROS */
display: flex; .installments--divider {
font-size: 0;
color: #929292;
margin-bottom: 8px; margin-bottom: 8px;
} }
.installments .installmentsNumber { .installments--divider .installmentsNumber {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: #929292;
} }
.installments .installmentsNumber::after { .installments--divider .installments-x--divider {
content: "x ";
}
.installments .installmentValue {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; 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 "; content: "de ";
margin-left: 5px; font-size: 14px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
} }
.installments .installmentValue::after { .listPrice .listPriceValue::after {
content: " sem juros"; content: " por";
font-weight: 400; font-size: 14px;
font-size: 16px;
line-height: 22px;
} }

1
styles/css/vtex.product-quantity.css
View File

@ -7,6 +7,7 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
/* INPUT CONTADOR DE PRODUTO */
.quantitySelectorContainer { .quantitySelectorContainer {
height: 49px; height: 49px;
margin-top: 8px; margin-top: 8px;

236
styles/css/vtex.store-components.css
View File

@ -9,17 +9,40 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.container { .container {
margin: 0; padding: 0;
padding: 0 40px;
max-width: 100%; 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; text-align: end;
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
@ -27,21 +50,23 @@
color: #575757; color: #575757;
} }
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
.container .productNameContainer--quickview { .productNameContainer--quickview {
text-align: start; text-align: start;
} }
} }
.container .skuSelectorContainer {
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
.skuSelectorContainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.container .skuSelectorContainer .skuSelectorName { .skuSelectorContainer .skuSelectorName {
font-size: 0; font-size: 0;
} }
.container .skuSelectorContainer .skuSelectorNameSeparator { .skuSelectorContainer .skuSelectorNameSeparator {
font-size: 0; font-size: 0;
} }
.container .skuSelectorContainer .skuSelectorSubcontainer--cor::before { .skuSelectorContainer .skuSelectorSubcontainer--cor::before {
content: "OUTRAS CORES:"; content: "OUTRAS CORES:";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-weight: 400; font-weight: 400;
@ -49,7 +74,7 @@
font-size: 14px; font-size: 14px;
color: #929292; color: #929292;
} }
.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before { .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-weight: 400; font-weight: 400;
@ -57,119 +82,107 @@
font-size: 14px; font-size: 14px;
color: #929292; color: #929292;
} }
.container .skuSelectorContainer .skuSelectorTextContainer { .skuSelectorContainer .skuSelectorTextContainer {
display: none; display: none;
} }
.container .skuSelectorContainer .skuSelectorOptionsList { .skuSelectorContainer .skuSelectorOptionsList {
margin-top: 8px; margin-top: 8px;
margin-left: 0; margin-left: 0;
} }
.container .skuSelectorContainer .skuSelectorSelectorImageValue { .skuSelectorContainer .skuSelectorSelectorImageValue {
font-size: 0; font-size: 0;
} }
.container .skuSelectorOptionsList .skuSelectorItem {
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
.skuSelectorOptionsList .skuSelectorItem {
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
.container .skuSelectorOptionsList .skuSelectorItem:first-child { .skuSelectorOptionsList .skuSelectorItem:first-child {
margin-left: 0; margin-left: 0;
} }
.container .skuSelectorOptionsList .skuSelectorItem .frameAround { .skuSelectorOptionsList .skuSelectorItem .frameAround {
border-radius: 50%; border-radius: 50%;
border-color: #000000; border-color: #000000;
color: #000000; color: #000000;
} }
.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue { .skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue {
max-width: 100%; max-width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: #000000; color: #000000;
} }
.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
border-radius: 50%; border-radius: 50%;
} }
.container .skuSelectorOptionsList .diagonalCross { .skuSelectorOptionsList .diagonalCross {
margin: 5px; margin: 5px;
background-image: linear-gradient(to top right, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 0, transparent 0%); 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); transform: rotate(90deg);
} }
.container .carouselGaleryThumbs {
margin: 16px 0; /*PRODUTO INDISPONIVEL &&
} FORMULARIO DE PRODUTO INDISPONIVEL */
.container .carouselGaleryThumbs .thumbImg { .subscriberContainer {
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 {
width: 100%; width: 100%;
margin-top: 24px; margin-top: 24px;
/* FORMULARIO DE PRODUTO INDISPONIVEL */
} }
.container .subscriberContainer .title { .subscriberContainer .title {
font-size: 0; font-size: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.container .subscriberContainer .title::before { .subscriberContainer .title::before {
content: "Produto indisponível"; content: "Produto indisponível";
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #868686; color: #868686;
} }
.container .subscriberContainer .subscribeLabel { .subscriberContainer .subscribeLabel {
font-size: 0; font-size: 0;
} }
.container .subscriberContainer .subscribeLabel::before { .subscriberContainer .subscribeLabel::before {
content: "Deseja saber quando estiver disponível?"; content: "Deseja saber quando estiver disponível?";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #868686; color: #868686;
} }
.container .subscriberContainer .form { .subscriberContainer .form {
position: relative; position: relative;
} }
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) { .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
width: 374.65px;
display: block; display: block;
width: 374.65px;
margin-top: 16px; margin-top: 16px;
} }
@media only screen and (max-width: 1023px) { @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%; width: 100%;
max-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; width: 182.46px;
margin-right: 10.08px; margin-right: 10.08px;
margin-bottom: 15px; margin-bottom: 15px;
} }
@media only screen and (max-width: 1023px) { @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%; 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: 0.6px solid #929292;
border-radius: 0; 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; padding: 0 14px;
font-size: 12px; font-size: 12px;
line-height: 28px; line-height: 28px;
color: #929292; 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; position: absolute;
left: 51%; left: 51%;
top: 0%; top: 0%;
@ -179,27 +192,27 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
@media only screen and (max-width: 1023px) { @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; width: -webkit-fill-available;
margin: 0 0 0 8px; margin: 0 0 0 8px;
left: 49%; 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: 0.6px solid #929292;
border-radius: 0; 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; padding: 0 14px;
font-size: 12px; font-size: 12px;
line-height: 28px; line-height: 28px;
color: #929292; 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%; width: 100%;
margin-bottom: 16px; 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%; width: 100%;
height: 49px; height: 49px;
background-color: #000000; background-color: #000000;
@ -210,7 +223,7 @@
align-items: center; align-items: center;
justify-content: 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"; content: "AVISE-ME";
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
@ -218,49 +231,51 @@
line-height: 25px; line-height: 25px;
font-family: "Open sans", sans-serif; 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; padding: 0;
} }
.container .shippingContainer {
/* BUSCA DE CEP */
.shippingContainer {
display: flex; display: flex;
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container .shippingContainer { .shippingContainer {
display: block; display: block;
position: relative; position: relative;
} }
} }
.container .shippingContainer :global(.vtex-address-form__postalCode) { .shippingContainer :global(.vtex-address-form__postalCode) {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0; padding: 0;
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-address-form__postalCode) { .shippingContainer :global(.vtex-address-form__postalCode) {
display: block; 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; 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"; content: "CALCULAR FRETE";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #929292; 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; width: 280px;
height: 49px; height: 49px;
border-radius: 0; border-radius: 0;
} }
@media only screen and (max-width: 767px) { @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%; 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; padding: 0;
margin-top: 25px; margin-top: 25px;
position: relative; position: relative;
@ -271,22 +286,22 @@
text-decoration: underline; text-decoration: underline;
} }
@media only screen and (max-width: 767px) { @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; left: 0;
margin-top: 8px; margin-top: 8px;
text-align: end; 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; 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; display: none;
} }
.container .shippingContainer :global(.vtex-button) { .shippingContainer :global(.vtex-button) {
height: 49px; height: 49px;
width: 49px; width: 49px;
margin-top: 27px; margin-top: auto !important;
position: relative; position: relative;
right: 148px; right: 148px;
font-size: 0; font-size: 0;
@ -294,37 +309,41 @@
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-button) { .shippingContainer :global(.vtex-button) {
height: 49px !important;
margin: 0 !important;
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 0px; top: 26px;
} }
} }
.container .shippingContainer :global(.vtex-button)::before { .shippingContainer :global(.vtex-button)::before {
content: "OK"; content: "OK";
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #fff; color: #fff;
} }
.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
height: fit-content; height: fit-content;
} }
.container .shippingTable {
/* TRANSPORTADORAS */
.shippingTable {
border: none; border: none;
padding: 0; padding: 0;
margin: 15px 0; margin: 15px 0;
} }
.container .shippingTable .shippingTableHead { .shippingTable .shippingTableHead {
display: block; display: block;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 15px; margin-bottom: 15px;
} }
.container .shippingTable .shippingTableHead .shippingTableRow { .shippingTable .shippingTableHead .shippingTableRow {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
margin-right: 39px; margin-right: 39px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@ -332,11 +351,11 @@
color: #202020; color: #202020;
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
margin-right: 32px; margin-right: 32px;
} }
} }
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
display: flex; display: flex;
order: 1; order: 1;
font-weight: 400; font-weight: 400;
@ -344,27 +363,27 @@
line-height: 19px; line-height: 19px;
color: #202020; color: #202020;
} }
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
font-size: 0; font-size: 0;
margin-right: 30px; margin-right: 30px;
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
margin-right: 32px; margin-right: 32px;
} }
} }
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
content: "Frete"; content: "Frete";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #202020; color: #202020;
} }
.container .shippingTable .shippingTableBody .shippingTableRow { .shippingTable .shippingTableBody .shippingTableRow {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
width: 82px; width: 82px;
margin-right: 28px; margin-right: 28px;
font-weight: 400; font-weight: 400;
@ -373,11 +392,11 @@
color: #afafaf; color: #afafaf;
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
margin-right: 22px; margin-right: 22px;
} }
} }
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
display: flex; display: flex;
order: 1; order: 1;
font-weight: 400; font-weight: 400;
@ -385,7 +404,7 @@
line-height: 16px; line-height: 16px;
color: #afafaf; color: #afafaf;
} }
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
width: 50px; width: 50px;
margin-right: 28px; margin-right: 28px;
font-weight: 400; font-weight: 400;
@ -393,16 +412,33 @@
line-height: 16px; line-height: 16px;
color: #afafaf; color: #afafaf;
} }
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
padding: 0 0 15px; padding: 0 0 15px;
} }
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
display: none; display: none;
} }
.productImage { /* IMAGEM DA DESCRIÇÃO DO PRODUTO */
width: max-content; .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
View 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;
}

11
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -1,11 +0,0 @@
// .html {
// background-color: red;
// }
// .html--pdp-breadcrumb {
// background-color: green;
// }
.b--action-primary {
border-color: black;
}

38
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -1,35 +1,41 @@
.flexRowContent { /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
padding: 0; .flexRowContent--main {
margin: 0; @include mq(md, max) {
width: 100%; display: block;
.flexCol--right-col {
.flexColChild--right-col {
.list-price-savings {
display: none;
} }
.flexCol--stack {
padding-left: 40px;
@include mq(md, max) {
padding: 0 40px;
width: 100%;
}
}
.flexCol--right-col {
padding-right: 40px;
margin-left: 16px;
@include mq(md, max) {
padding: 0 40px;
margin-left: 0;
} }
} }
} }
/* ASSINANTE DE PRODUTO INDISPONIVEL */
.flexRowContent--message-availability { .flexRowContent--message-availability {
margin-top: 24px;
width: 375px; width: 375px;
@include mq(md, max) { @include mq(md, max) {
width: 100%; width: 100%;
} }
} }
.sellingPriceValue { /* BOTAO DE ADICIONAR A SACOLA */
font-size: 50px;
}
.flexRowContent { .flexRowContent {
padding: 0; padding: 0;
margin-top: 0; margin: 0;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) { :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
padding: 0; padding: 0;
display: flex; display: flex;
&:nth-child(even) { @include mq(md, max) {
width: 100% !important; width: 100% !important;
} }
:global(.vtex-button) { :global(.vtex-button) {

1
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -1,3 +1,4 @@
/* REFERENCIA DO PRODUTO */
.product-identifier--productReference { .product-identifier--productReference {
display: flex; display: flex;
justify-content: end; justify-content: end;

53
styles/sass/pages/product/vtex.product-price.scss
View File

@ -1,3 +1,4 @@
/* VALOR PRINCIPAL DO PRODUTO */
.sellingPrice--hasListPrice { .sellingPrice--hasListPrice {
font-weight: 700; font-weight: 700;
font-size: 25px; font-size: 25px;
@ -5,36 +6,54 @@
color: $color-black-padrao; color: $color-black-padrao;
} }
.installments { /* VALORES DE PARCELAMENTOS E JUROS */
display: flex; .installments--divider {
font-size: 0;
color: $color-gray-6;
margin-bottom: 8px; margin-bottom: 8px;
.installmentsNumber { .installmentsNumber {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: $color-gray14;
}
&::after { .installments-x--divider {
content: "x ";
}
}
.installmentValue {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; 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 { &::before {
content: "de "; content: "de ";
margin-left: 5px; font-size: 14px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
} }
&::after { &::after {
content: " sem juros"; content: " por";
font-weight: 400; font-size: 14px;
font-size: 16px;
line-height: 22px;
} }
} }
} }

1
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -1,3 +1,4 @@
/* INPUT CONTADOR DE PRODUTO */
.quantitySelectorContainer { .quantitySelectorContainer {
height: 49px; height: 49px;
margin-top: 8px; margin-top: 8px;

126
styles/sass/pages/product/vtex.store-components.scss
View File

@ -1,10 +1,40 @@
.container { .container {
margin: 0; padding: 0;
padding: 0 40px;
max-width: 100%; max-width: 100%;
}
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/ /*IMAGEM PRINCIPAL DO PRODUTO */
.productNameContainer--quickview { .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; text-align: end;
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
@ -13,10 +43,10 @@
@include mq(md, max) { @include mq(md, max) {
text-align: start; text-align: start;
} }
} }
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
.skuSelectorContainer { .skuSelectorContainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
@ -62,9 +92,9 @@
.skuSelectorSelectorImageValue { .skuSelectorSelectorImageValue {
font-size: 0; font-size: 0;
} }
} }
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
.skuSelectorOptionsList { .skuSelectorOptionsList {
.skuSelectorItem { .skuSelectorItem {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -100,29 +130,11 @@
); );
transform: rotate(90deg); transform: rotate(90deg);
} }
} }
.carouselGaleryThumbs { /*PRODUTO INDISPONIVEL &&
margin: 16px 0; FORMULARIO DE PRODUTO INDISPONIVEL */
.subscriberContainer {
.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%; width: 100%;
margin-top: 24px; margin-top: 24px;
.title { .title {
@ -148,12 +160,12 @@
color: $color-gray-9; color: $color-gray-9;
} }
} }
/* FORMULARIO DE PRODUTO INDISPONIVEL */
.form { .form {
position: relative; position: relative;
:global(.vtex-store-components-3-x-content) { :global(.vtex-store-components-3-x-content) {
width: 374.65px;
display: block; display: block;
width: 374.65px;
margin-top: 16px; margin-top: 16px;
@include mq(md, max) { @include mq(md, max) {
width: 100%; width: 100%;
@ -224,7 +236,6 @@
line-height: 25px; line-height: 25px;
font-family: "Open sans", sans-serif; font-family: "Open sans", sans-serif;
} }
:global(.vtex-button__label) { :global(.vtex-button__label) {
padding: 0; padding: 0;
} }
@ -232,10 +243,10 @@
} }
} }
} }
} }
/* BUSCA DE CEP */ /* BUSCA DE CEP */
.shippingContainer { .shippingContainer {
display: flex; display: flex;
@include mq(sm, max) { @include mq(sm, max) {
display: block; display: block;
@ -291,7 +302,7 @@
:global(.vtex-button) { :global(.vtex-button) {
height: 49px; height: 49px;
width: 49px; width: 49px;
margin-top: 27px; margin-top: auto !important;
position: relative; position: relative;
right: 148px; right: 148px;
font-size: 0; font-size: 0;
@ -299,9 +310,11 @@
cursor: pointer; cursor: pointer;
@include mq(sm, max) { @include mq(sm, max) {
height: 49px !important;
margin: 0 !important;
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 0px; top: 26px;
} }
&::before { &::before {
content: "OK"; content: "OK";
@ -314,10 +327,10 @@
height: fit-content; height: fit-content;
} }
} }
} }
/* TRANSPORTADORAS */ /* TRANSPORTADORAS */
.shippingTable { .shippingTable {
border: none; border: none;
padding: 0; padding: 0;
margin: 15px 0; margin: 15px 0;
@ -338,7 +351,6 @@
margin-right: 32px; margin-right: 32px;
} }
} }
.shippingTableHeadDeliveryEstimate { .shippingTableHeadDeliveryEstimate {
display: flex; display: flex;
order: 1; order: 1;
@ -408,12 +420,28 @@
} }
} }
} }
}
} }
.productImage { /* IMAGEM DA DESCRIÇÃO DO PRODUTO */
width: max-content; .imageElement {
.productImageTag--main { width: 100%;
max-height: 664px !important; }
/* 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
View 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;
}
}
}
}
}
}

5
styles/sass/utils/_vars.scss
View File

@ -1,6 +1,7 @@
$color-black: #292929; $color-black: #292929;
$color-black-padrao: #000000; $color-black-padrao: #000000;
$color-black2: #202020; $color-black2: #202020;
$color-white: #fff; $color-white: #fff;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
@ -13,6 +14,10 @@ $color-gray-7: #575757;
$color-gray-8: #989898; $color-gray-8: #989898;
$color-gray-9: #868686; $color-gray-9: #868686;
$color-gray-10: #afafaf; $color-gray-10: #afafaf;
$color-gray11: #b9b9b9;
$color-gray12: #bfbfbf;
$color-gray13: #575757;
$color-gray14: #929292;
$color-blue: #4267b2; $color-blue: #4267b2;