diff --git a/docs/Todo.md b/docs/Todo.md index b4876cf..0fc80a1 100644 --- a/docs/Todo.md +++ b/docs/Todo.md @@ -5,13 +5,13 @@ - [x] (a) inciando projeto {cm:2023-01-25} -os Requisitos cobrados serão: +os Requisitos cobrados serão: {cm:2023-02-07} # Dev -- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p +- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p {cm:2023-02-07} -- FIXME [Blocos que devem ser ajustado e desenvolvidos](tabLayout_com_descrição_até_troca_e_devolução_e_seu_conteúdo){ +- FIXME [Blocos que devem ser ajustado e desenvolvidos](6){ - [x] 1. BreadCrumb; {cm:2023-01-31} @@ -19,15 +19,13 @@ os Requisitos cobrados serão: - HACK 3. dados_do_produto_e_de_compra-ao_lado_das_imagens {cm:2023-02-03} - - HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo, + - HACK 4. tabLayout com descrição até troca e devolução e seu conteúdo, {cm:2023-02-07} - - HACK 5. prateleira de produtos, - - - HACK 6. Newsletter. + - HACK 5. prateleira de produtos, {cm:2023-02-07} - - HACK 7. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc) + - HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc) - - HACK 8.Fazer o cep + - HACK 7.Fazer o cep - FIXME COLOCAR OS TESTESID!!!!! diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 6eccf6d..acc6381 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,11 +1,52 @@ /* [class*=html--pdp-breadcrumb]{ } */ +.html--pdp-productMain{ + padding-right: 2.778%; + padding-left: 2.778%; + display: flex; +} +.html--StackLayout,.html--pdp-InfoBuy{ + width: 50%; +} + +.html--buy-button{ + display: flex; + gap: 10px; + align-items: center; + margin-bottom: 16px; + margin-top: 16px; +} +.html--pdp-productMain :global(.vtex-button){ + display: none; +} +.html--buy-button :global(.vtex-button){ + display: block; + background: black; + height: 49px; + max-width: 77.354%; +} .html--pdp-section_descriptions{ display: flex; flex-direction: column; gap: 32px; padding: 0px 40px 0px 40px; } + @media screen and (min-width: 1920px){ + .html--buy-button :global(.vtex-button){ + max-width: 766px; + width: 80.126%; + } + .html--pdp-productMain{ + padding-right: 12.5393%; + padding-left: 12.5393%; + margin: 0; + gap: 32px; + max-height: 100%; + } + .html--pdp-section_descriptions{ + padding: 0px 12.5393% 0px 12.5393%; + } + } .html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){ gap: 32px; } @@ -65,6 +106,28 @@ } } @media screen and (max-width: 1024px) { + .html--buy-button{ + align-items: normal; + flex-direction: column; + } + .html--buy-button :global(.vtex-button){ + max-width: 93.662%; + width: 100%; + height: 74px; + } + .html--buy-button :global(.vtex-button) :global(.vtex-button__label){ + padding-left: 21.92%; + padding-right: 21.92%; + padding-top: 12px !important; + padding-bottom: 12px !important; + } + .html--pdp-productMain{ + flex-direction: column; + align-items: center; + } + .html--StackLayout,.html--pdp-InfoBuy{ + width: 89.23%; + } .html--pdp-descriptions :global(.vtex-store-components-3-x-container){ border-bottom: 1px solid rgba(185, 185, 185, 1); padding-bottom: 16px; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 53f28ec..7cd91e4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,13 +2,14 @@ "store.product": { "children": [ "html#breadcrumb", + "condition-layout.product#availability", "html#departaments", "flex-layout.row#specifications-title", "html#carousel" ] }, "tab-layout#pdp": { - "children":[ + "children": [ "tab-list#pdp", "tab-content#pdp", "tab-content#pdp2", @@ -17,11 +18,11 @@ "tab-content#pdp5" ], "props": { - "blockClass": "pdp-tabLayout", + "blockClass": "pdp-tabLayout", "defaultActiveTabId": "descrição1" } }, - "tab-list#pdp":{ + "tab-list#pdp": { "children": [ "tab-list.item#pdpsection1", "tab-list.item#pdpsection2", @@ -64,70 +65,50 @@ "label": "Descrição" } }, - "tab-content.item#descriptionpdp":{ - "children":[ - "html#description" - ], + "tab-content.item#descriptionpdp": { + "children": ["html#description"], "props": { "tabId": "descrição1" } }, - "tab-content#pdp":{ - "children":[ - "tab-content.item#descriptionpdp" - ] + "tab-content#pdp": { + "children": ["tab-content.item#descriptionpdp"] }, - "tab-content.item#descriptionpdp2":{ - "children":[ - "html#description" - ], + "tab-content.item#descriptionpdp2": { + "children": ["html#description"], "props": { "tabId": "descrição2" } }, - "tab-content#pdp2":{ - "children":[ - "tab-content.item#descriptionpdp2" - ] + "tab-content#pdp2": { + "children": ["tab-content.item#descriptionpdp2"] }, - "tab-content.item#descriptionpdp3":{ - "children":[ - "html#description" - ], + "tab-content.item#descriptionpdp3": { + "children": ["html#description"], "props": { "tabId": "descrição3" } }, - "tab-content#pdp3":{ - "children":[ - "tab-content.item#descriptionpdp3" - ] + "tab-content#pdp3": { + "children": ["tab-content.item#descriptionpdp3"] }, - "tab-content.item#descriptionpdp4":{ - "children":[ - "html#description" - ], + "tab-content.item#descriptionpdp4": { + "children": ["html#description"], "props": { "tabId": "descrição4" } }, - "tab-content#pdp4":{ - "children":[ - "tab-content.item#descriptionpdp4" - ] + "tab-content#pdp4": { + "children": ["tab-content.item#descriptionpdp4"] }, - "tab-content.item#descriptionpdp5":{ - "children":[ - "html#description" - ], + "tab-content.item#descriptionpdp5": { + "children": ["html#description"], "props": { "tabId": "descrição5" } }, - "tab-content#pdp5":{ - "children":[ - "tab-content.item#descriptionpdp5" - ] + "tab-content#pdp5": { + "children": ["tab-content.item#descriptionpdp5"] }, "html#prateleira": { "props": { @@ -269,18 +250,20 @@ "testId": "Product-Images", "blockClass": "pdp-productMain" }, - "children": ["flex-layout.row#product-main"] + "children": ["html#stack", "html#right-col"] }, "flex-layout.row#product-main": { "props": { + "blockClass": "pdp-flexProduct", "colGap": 7, "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 - }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "marginTop": 0, + "marginBottom": 0, + "paddingTop": 0, + "paddingBottom": 0, + "paddingright":0, + "paddingleft":0 + } }, "stack-layout": { @@ -321,17 +304,18 @@ "children": ["flex-layout.row#description"] }, - "flex-layout.col#stack": { + "html#stack": { "children": ["stack-layout"], "props": { - "rowGap": 10, "width": "50%", - "blockClass": "StackLayout", - "htmlId": "teste" + "blockClass": "StackLayout" } }, "flex-layout.row#product-image": { + "props":{ + "blockClass": "product-image" + }, "children": ["product-images"] }, "product-images": { @@ -349,6 +333,7 @@ }, "product-images#description": { "props": { + "blockClass": "img-description", "maxHeight": 872, "testid": "product-images", "aspectRatio": { @@ -362,10 +347,9 @@ "zoomMode": "disabled" } }, - "flex-layout.col#right-col": { + "html#right-col": { "props": { - "preventVerticalStretch": true, - "rowGap": 0 + "blockClass": "pdp-InfoBuy" }, "children": [ "flex-layout.row#product-name", @@ -376,7 +360,7 @@ "sku-selector", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + "html#buy-button", "availability-subscriber", "shipping-simulator", "share#default" @@ -421,6 +405,9 @@ }, "flex-layout.row#buy-button": { + "children": ["product-quantity", "add-to-cart-button"] + }, + "html#buy-button": { "props": { "marginTop": 4, "marginBottom": 7, @@ -449,7 +436,7 @@ "paddingTop": 7 }, "children": [ - "flex-layout.col#stack", + "html#stack", "flex-layout.col#right-col-availability" ] }, @@ -461,7 +448,6 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", "sku-selector", "flex-layout.row#availability" ] diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 0168755..8b74142 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,14 +8,20 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding: 0 40px 16px; - margin-left: auto; - margin-right: auto; - max-width: 96rem; + padding-top: 16px; + padding-right: 4%; + padding-left: 4%; +} +@media screen and (min-width: 1920px) { + .container { + padding-right: 14.063%; + padding-left: 14.063%; + } } @media screen and (max-width: 1024px) { .container { - padding: 0 0 0 10.67%; + text-align: center; + padding: 0; } } .container .term, .container .termArrow { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 93ce670..80f6258 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -12,21 +12,17 @@ padding: 0 0.5rem; } -.flexRowContent { - padding: 0; - margin: 0; +.flexRowContent--title .stretchChildrenWidth { + width: 100% !important; } -.flexRowContent--buy-button { - gap: 10px; + +.flexRowContent--product-image { + justify-content: flex-end; } -.flexRowContent--buy-button .stretchChildrenWidth { - padding: 0; - justify-content: flex-start; -} -.flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) { - background: black; - height: 49px; - max-width: 526px; +@media screen and (min-width: 1920px) { + .flexRowContent--product-image .stretchChildrenWidth { + max-width: max-content; + } } @media screen and (min-width: 1024px) { @@ -141,6 +137,11 @@ align-items: end; flex-direction: column-reverse; } +@media screen and (max-width: 1024px) { + .flexRowContent--title { + display: flex; + } +} .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) { top: 33%; @@ -169,6 +170,7 @@ height: max-content; min-height: max-content; max-width: 274px; + max-height: 100%; } } @media screen and (max-width: 1024px) { @@ -181,6 +183,11 @@ .flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) { max-width: 100%; } +@media screen and (min-width: 1920px) { + .flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) { + max-width: 96rem; + } +} .flexRow--pdp-price .flexRowContent--pdp-price { justify-content: center; diff --git a/styles/css/vtex.product-customizer.css b/styles/css/vtex.product-customizer.css new file mode 100644 index 0000000..d35601d --- /dev/null +++ b/styles/css/vtex.product-customizer.css @@ -0,0 +1,12 @@ +/* +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 */ +.textInputValue, .productAssemblyGroupNameRow { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index af7ca9b..1fbd6d5 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -10,6 +10,12 @@ .product-identifier--productReference { display: block; text-align: end; - margin-top: 8px; - padding-right: 8px; + padding-right: 40px; + font-size: 14px; + line-height: 19px; +} +@media screen and (max-width: 1024px) { + .product-identifier--productReference { + text-align: start; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 5ccb422..1b597fe 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -23,11 +23,6 @@ font-weight: 700; } -.installments { - color: #727273; - margin-bottom: 1rem; -} - .savings { font-weight: 500; color: #79B03A; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 6ef4e94..05432e0 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -10,7 +10,7 @@ .quantitySelectorStepper { border: 1px solid #CCCCCC; width: max-content; - min-width: 83.86%; + min-width: 100%; padding: 3.5px 0; } .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { @@ -34,4 +34,6 @@ .quantitySelectorContainer { justify-content: center; align-items: center; + width: 128px; + margin-bottom: 0; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 2484b75..68ae727 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -57,7 +57,7 @@ } @media screen and (max-width: 1024px) { .nameContainer .productNameContainer--pdp-name { - max-height: 80px; + max-height: 50px; } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d3dd458..aba5c15 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,21 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.shareLabel, .skuSelectorNameSeparator, .skuSelectorSelectorImageValue { + display: none; +} + +@media screen and (max-width: 1024px) { + .productImagesContainer--carousel .productImagesGallerySlide { + width: 100% !important; + } +} +@media screen and (min-width: 1920px) { + .productImagesContainer--carousel .carouselGaleryCursor { + max-height: 100%; + } +} + .productNameContainer--quickview { padding-right: 40px !important; } @@ -15,10 +30,26 @@ display: flex; flex-direction: column-reverse; } +.skuSelectorContainer .skuSelectorSubcontainer { + max-width: 93.663%; +} +@media screen and (max-width: 1024px) { + .skuSelectorContainer .skuSelectorSubcontainer { + height: max-content; + } +} +.skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList { + height: 40.61px; +} .skuSelectorContainer .skuSelectorItemImage { width: 48px; height: 48px; } +@media screen and (max-width: 1024px) { + .skuSelectorContainer .skuSelectorItemImage { + margin: 0; + } +} .skuSelectorContainer .skuSelectorItem--selected .frameAround { border-radius: 24px; border: 2px solid #000000; @@ -32,8 +63,15 @@ left: 0; right: 0; } +.skuSelectorContainer .skuSelectorSubcontainer--cor { + height: 75px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList { + height: 48px; +} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { text-transform: uppercase; + font-family: "Open Sans", sans-serif; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { content: "ES:"; @@ -55,6 +93,7 @@ } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { text-transform: uppercase; + font-family: "Open Sans", sans-serif; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { content: "S:"; @@ -83,16 +122,20 @@ line-height: 34px; color: #575757; } +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + text-align: start; + } +} .carouselContainer { - padding: 0 40px 0; + max-width: 906px; } .carouselContainer .productImage { max-width: 85.238%; } @media screen and (min-width: 1920px) { .carouselContainer .productImage { - min-width: 904px; max-width: 100%; } } @@ -117,14 +160,23 @@ border-radius: 8px; max-height: 100% !important; } +@media screen and (max-width: 1024px) { + .carouselContainer .productImage .productImageTag--main { + max-height: 100% !important; + max-width: 98.657%; + } +} + +.productImageTag--img-description { + max-width: 872px; +} .carouselGaleryThumbs { display: block; height: max-content; } .carouselGaleryThumbs .productImagesThumb { - width: max-content !important; - background: white; + height: 100% !important; margin-right: 1em; } @media screen and (max-width: 1024px) { @@ -144,12 +196,12 @@ } @media screen and (max-width: 1024px) { .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { - min-height: 4.9em; + min-height: 100%; } } .carouselGaleryThumbs .productImagesThumb .figure .thumbImg { border-radius: 8px; - width: 90px; + min-height: 90px; } .productDescriptionContainer .productDescriptionTitle { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index f42a4d8..5ad1b49 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,10 +1,14 @@ .container{ - padding: 0 40px 16px; - margin-left: auto; - margin-right: auto; - max-width: 96rem; + padding-top:16px; + padding-right: 4%; + padding-left: 4%; + @media screen and (min-width: 1920px){ + padding-right: 14.063%; + padding-left: 14.063%; + } @media screen and (max-width: 1024px){ - padding: 0 0 0 10.67%; + text-align: center; + padding: 0; } .term,.termArrow{ display: none; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 8c41429..f023b36 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,22 +2,20 @@ .flexRowContent--main-header { padding: 0 0.5rem; } -.flexRowContent{ - padding: 0; - margin: 0; - &--buy-button{ - gap: 10px; +.flexRowContent--title{ + .stretchChildrenWidth{ + width: 100% !important; + } +} +.flexRowContent--product-image{ + justify-content: flex-end; + @media screen and (min-width: 1920px){ .stretchChildrenWidth{ - padding: 0; - justify-content: flex-start; - :global(.vtex-button){ - background: black; - height: 49px; - max-width: 526px; - } + max-width: max-content; } } } + @media screen and (min-width: 1024px) { .flexRowContent--menu-link, .flexRowContent--main-header { @@ -132,6 +130,10 @@ .flexRowContent--title{ align-items: end; flex-direction: column-reverse; + @media screen and (max-width: 1024px){ + display: flex; + } + } .flexRowContent--pdp-carrousel{ :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){ @@ -159,6 +161,7 @@ height: max-content; min-height: max-content; max-width: 274px; + max-height: 100%; } } :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){ @@ -171,6 +174,9 @@ .flexRow--pdp-carrousel{ :global(.vtex-store-components-3-x-container){ max-width: 100%; + @media screen and (min-width: 1920px){ + max-width: 96rem; + } } } .flexRow--pdp-price{ diff --git a/styles/sass/pages/product/vtex.product-customizer.scss b/styles/sass/pages/product/vtex.product-customizer.scss new file mode 100644 index 0000000..7026ebe --- /dev/null +++ b/styles/sass/pages/product/vtex.product-customizer.scss @@ -0,0 +1,3 @@ +.textInputValue,.productAssemblyGroupNameRow{ + display: none; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 5d3ae98..a915e62 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -2,7 +2,11 @@ &--productReference{ display: block; text-align: end; - margin-top: 8px; - padding-right: 8px; + padding-right: 40px; + font-size: 14px; + line-height: 19px; + @media screen and (max-width: 1024px){ + text-align: start; + } } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 6dbb2a0..8b3a78c 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,7 +1,7 @@ .quantitySelectorStepper{ border: 1px solid #CCCCCC; width: max-content; - min-width: 83.86%; + min-width: 100%; padding: 3.5px 0; :global(.vtex-numeric-stepper-wrapper){ :global(.vtex-numeric-stepper-container){ @@ -28,4 +28,6 @@ .quantitySelectorContainer{ justify-content: center; align-items: center; + width: 128px; + margin-bottom: 0; } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index defe4de..4923369 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -49,7 +49,7 @@ .productNameContainer--pdp-name{ @media screen and (max-width: 1024px){ - max-height: 80px; + max-height: 50px; } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8765e56..3d1bab5 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,12 +1,39 @@ +.shareLabel,.skuSelectorNameSeparator,.skuSelectorSelectorImageValue{ + display: none; +} +.productImagesContainer--carousel{ + .productImagesGallerySlide{ + @media screen and (max-width: 1024px){ + width: 100% !important; + } + } + .carouselGaleryCursor{ + @media screen and (min-width: 1920px){ + max-height: 100%; + } + } +} .productNameContainer--quickview{ padding-right: 40px !important; } .skuSelectorContainer{ display: flex; flex-direction: column-reverse; + .skuSelectorSubcontainer{ + max-width: 93.663%; + @media screen and (max-width: 1024px){ + height: max-content; + } + .skuSelectorOptionsList{ + height: 40.61px; + } + } .skuSelectorItemImage{ width: 48px; height: 48px; + @media screen and (max-width: 1024px){ + margin: 0; + } } .skuSelectorItem--selected{ .frameAround{ @@ -25,9 +52,14 @@ } .skuSelectorSubcontainer-{ &-cor{ + height: 75px; + .skuSelectorOptionsList{ + height: 48px; + } .skuSelectorTextContainer{ .skuSelectorName{ text-transform: uppercase; + font-family: 'Open Sans',sans-serif; &::after{ content: "ES:"; } @@ -53,6 +85,7 @@ .skuSelectorTextContainer{ .skuSelectorName{ text-transform: uppercase; + font-family: 'Open Sans',sans-serif; &::after{ content: "S:"; } @@ -85,13 +118,15 @@ font-size: 20px; line-height: 34px; color: #575757; + @media screen and (max-width: 1024px){ + text-align: start; + } } .carouselContainer{ - padding: 0 40px 0; + max-width: 906px; .productImage{ max-width:85.238%; @media screen and (min-width: 1920px){ - min-width: 904px; max-width:100%; } @media screen and (max-width: 1024px){ @@ -109,16 +144,22 @@ &-main{ border-radius: 8px; max-height: 100% !important; + @media screen and (max-width: 1024px){ + max-height: 100% !important; + max-width: 98.657%; + } } } } } +.productImageTag--img-description{ + max-width: 872px; +} .carouselGaleryThumbs{ display: block; height: max-content; .productImagesThumb{ - width: max-content !important; - background:white; + height: 100% !important; margin-right: 1em; @media screen and (max-width: 1024px){ width: 30% !important; @@ -131,13 +172,13 @@ border-radius: 8px; min-height: 5.54em; @media screen and (max-width: 1024px){ - min-height: 4.9em; + min-height: 100%; } } } .thumbImg{ border-radius: 8px; - width: 90px; + min-height: 90px; } } } diff --git a/styles/sass/pages/vtex.product-price.scss b/styles/sass/pages/vtex.product-price.scss index 907ecbd..4aa9ede 100644 --- a/styles/sass/pages/vtex.product-price.scss +++ b/styles/sass/pages/vtex.product-price.scss @@ -14,10 +14,6 @@ font-weight: 700; } -.installments { - color: #727273; - margin-bottom: 1rem; -} .savings { font-weight: 500;