diff --git a/assets/font/OpenSans-Bold.ttf b/assets/font/OpenSans-Bold.ttf new file mode 100644 index 0000000..a1398b3 Binary files /dev/null and b/assets/font/OpenSans-Bold.ttf differ diff --git a/assets/font/OpenSans-BoldItalic.ttf b/assets/font/OpenSans-BoldItalic.ttf new file mode 100644 index 0000000..307122c Binary files /dev/null and b/assets/font/OpenSans-BoldItalic.ttf differ diff --git a/assets/font/OpenSans-ExtraBold.ttf b/assets/font/OpenSans-ExtraBold.ttf new file mode 100644 index 0000000..08d7185 Binary files /dev/null and b/assets/font/OpenSans-ExtraBold.ttf differ diff --git a/assets/font/OpenSans-ExtraBoldItalic.ttf b/assets/font/OpenSans-ExtraBoldItalic.ttf new file mode 100644 index 0000000..c35f57f Binary files /dev/null and b/assets/font/OpenSans-ExtraBoldItalic.ttf differ diff --git a/assets/font/OpenSans-Italic.ttf b/assets/font/OpenSans-Italic.ttf new file mode 100644 index 0000000..790286f Binary files /dev/null and b/assets/font/OpenSans-Italic.ttf differ diff --git a/assets/font/OpenSans-Light.ttf b/assets/font/OpenSans-Light.ttf new file mode 100644 index 0000000..d9a9e27 Binary files /dev/null and b/assets/font/OpenSans-Light.ttf differ diff --git a/assets/font/OpenSans-LightItalic.ttf b/assets/font/OpenSans-LightItalic.ttf new file mode 100644 index 0000000..77f2e6c Binary files /dev/null and b/assets/font/OpenSans-LightItalic.ttf differ diff --git a/assets/font/OpenSans-Medium.ttf b/assets/font/OpenSans-Medium.ttf new file mode 100644 index 0000000..ba6db9b Binary files /dev/null and b/assets/font/OpenSans-Medium.ttf differ diff --git a/assets/font/OpenSans-MediumItalic.ttf b/assets/font/OpenSans-MediumItalic.ttf new file mode 100644 index 0000000..980ac25 Binary files /dev/null and b/assets/font/OpenSans-MediumItalic.ttf differ diff --git a/assets/font/OpenSans-Regular.ttf b/assets/font/OpenSans-Regular.ttf new file mode 100644 index 0000000..1dc226d Binary files /dev/null and b/assets/font/OpenSans-Regular.ttf differ diff --git a/assets/font/OpenSans-SemiBold.ttf b/assets/font/OpenSans-SemiBold.ttf new file mode 100644 index 0000000..66acb20 Binary files /dev/null and b/assets/font/OpenSans-SemiBold.ttf differ diff --git a/assets/font/OpenSans-SemiBoldItalic.ttf b/assets/font/OpenSans-SemiBoldItalic.ttf new file mode 100644 index 0000000..f8c39f9 Binary files /dev/null and b/assets/font/OpenSans-SemiBoldItalic.ttf differ diff --git a/assets/font/OpenSans_Condensed-Bold.ttf b/assets/font/OpenSans_Condensed-Bold.ttf new file mode 100644 index 0000000..4916dca Binary files /dev/null and b/assets/font/OpenSans_Condensed-Bold.ttf differ diff --git a/assets/font/OpenSans_Condensed-BoldItalic.ttf b/assets/font/OpenSans_Condensed-BoldItalic.ttf new file mode 100644 index 0000000..7aea819 Binary files /dev/null and b/assets/font/OpenSans_Condensed-BoldItalic.ttf differ diff --git a/assets/font/OpenSans_Condensed-ExtraBold.ttf b/assets/font/OpenSans_Condensed-ExtraBold.ttf new file mode 100644 index 0000000..370d807 Binary files /dev/null and b/assets/font/OpenSans_Condensed-ExtraBold.ttf differ diff --git a/assets/font/OpenSans_Condensed-ExtraBoldItalic.ttf b/assets/font/OpenSans_Condensed-ExtraBoldItalic.ttf new file mode 100644 index 0000000..540cd6f Binary files /dev/null and b/assets/font/OpenSans_Condensed-ExtraBoldItalic.ttf differ diff --git a/assets/font/OpenSans_Condensed-Italic.ttf b/assets/font/OpenSans_Condensed-Italic.ttf new file mode 100644 index 0000000..b5d967d Binary files /dev/null and b/assets/font/OpenSans_Condensed-Italic.ttf differ diff --git a/assets/font/OpenSans_Condensed-Light.ttf b/assets/font/OpenSans_Condensed-Light.ttf new file mode 100644 index 0000000..6c36358 Binary files /dev/null and b/assets/font/OpenSans_Condensed-Light.ttf differ diff --git a/assets/font/OpenSans_Condensed-LightItalic.ttf b/assets/font/OpenSans_Condensed-LightItalic.ttf new file mode 100644 index 0000000..ac38c7b Binary files /dev/null and b/assets/font/OpenSans_Condensed-LightItalic.ttf differ diff --git a/assets/font/OpenSans_Condensed-Medium.ttf b/assets/font/OpenSans_Condensed-Medium.ttf new file mode 100644 index 0000000..4ce16d2 Binary files /dev/null and b/assets/font/OpenSans_Condensed-Medium.ttf differ diff --git a/assets/font/OpenSans_Condensed-MediumItalic.ttf b/assets/font/OpenSans_Condensed-MediumItalic.ttf new file mode 100644 index 0000000..8d05cd2 Binary files /dev/null and b/assets/font/OpenSans_Condensed-MediumItalic.ttf differ diff --git a/assets/font/OpenSans_Condensed-Regular.ttf b/assets/font/OpenSans_Condensed-Regular.ttf new file mode 100644 index 0000000..b830813 Binary files /dev/null and b/assets/font/OpenSans_Condensed-Regular.ttf differ diff --git a/assets/font/OpenSans_Condensed-SemiBold.ttf b/assets/font/OpenSans_Condensed-SemiBold.ttf new file mode 100644 index 0000000..671087e Binary files /dev/null and b/assets/font/OpenSans_Condensed-SemiBold.ttf differ diff --git a/assets/font/OpenSans_Condensed-SemiBoldItalic.ttf b/assets/font/OpenSans_Condensed-SemiBoldItalic.ttf new file mode 100644 index 0000000..a90343c Binary files /dev/null and b/assets/font/OpenSans_Condensed-SemiBoldItalic.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-Bold.ttf b/assets/font/OpenSans_SemiCondensed-Bold.ttf new file mode 100644 index 0000000..66e62d1 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-Bold.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-BoldItalic.ttf b/assets/font/OpenSans_SemiCondensed-BoldItalic.ttf new file mode 100644 index 0000000..4ec5266 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-BoldItalic.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-ExtraBold.ttf b/assets/font/OpenSans_SemiCondensed-ExtraBold.ttf new file mode 100644 index 0000000..443e2ac Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-ExtraBold.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-ExtraBoldItalic.ttf b/assets/font/OpenSans_SemiCondensed-ExtraBoldItalic.ttf new file mode 100644 index 0000000..4516f8e Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-ExtraBoldItalic.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-Italic.ttf b/assets/font/OpenSans_SemiCondensed-Italic.ttf new file mode 100644 index 0000000..57ae9a5 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-Italic.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-Light.ttf b/assets/font/OpenSans_SemiCondensed-Light.ttf new file mode 100644 index 0000000..de77062 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-Light.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-LightItalic.ttf b/assets/font/OpenSans_SemiCondensed-LightItalic.ttf new file mode 100644 index 0000000..a6d3e01 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-LightItalic.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-Medium.ttf b/assets/font/OpenSans_SemiCondensed-Medium.ttf new file mode 100644 index 0000000..4857f61 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-Medium.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-MediumItalic.ttf b/assets/font/OpenSans_SemiCondensed-MediumItalic.ttf new file mode 100644 index 0000000..d80afa0 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-MediumItalic.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-Regular.ttf b/assets/font/OpenSans_SemiCondensed-Regular.ttf new file mode 100644 index 0000000..8f3b2f3 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-Regular.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-SemiBold.ttf b/assets/font/OpenSans_SemiCondensed-SemiBold.ttf new file mode 100644 index 0000000..50b6589 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-SemiBold.ttf differ diff --git a/assets/font/OpenSans_SemiCondensed-SemiBoldItalic.ttf b/assets/font/OpenSans_SemiCondensed-SemiBoldItalic.ttf new file mode 100644 index 0000000..6c68220 Binary files /dev/null and b/assets/font/OpenSans_SemiCondensed-SemiBoldItalic.ttf differ diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index 47dc783..0a215b6 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; -import "./style.css" +import "./styles.css" const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/style.css b/react/components/Html/styles.css similarity index 100% rename from react/components/Html/style.css rename to react/components/Html/styles.css diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 734e8d8..adb1c73 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,139 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + "tab-layout#Descricao", "product-questions-and-answers" ] }, + "tab-layout#Descricao": { + "children": ["tab-list#Descricao", "tab-content#Descricao"], + "props": { + "blockClass": "Descricao", + "defaultActiveTabId": "Descricao1" + } + }, + + "tab-list#Descricao": { + "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": { + "blockClass": "DescricaoTab", + "tabId": "Descricao1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#Descricao2": { + "props": { + "blockClass": "DescricaoTab", + "tabId": "Descricao2", + "label": "Descrição" + } + }, + + "tab-list.item#Descricao3": { + "props": { + "blockClass": "DescricaoTab", + "tabId": "Descricao3", + "label": "Descrição" + } + }, + + "tab-list.item#Descricao4": { + "props": { + "blockClass": "DescricaoTab", + "tabId": "Descricao4", + "label": "Descrição" + } + }, + + "tab-list.item#Descricao5": { + "props": { + "blockClass": "DescricaoTab", + "tabId": "Descricao5", + "label": "Descrição" + } + }, + + "tab-content#Descricao": { + "props": { + "blockClass": "DescricaoCont" + }, + "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": ["flex-layout.row#description"], + "props": { + "tabId": "Descricao1", + "blockClass": "DescricaoCont1" + } + }, + "tab-content.item#Descricao2": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "Descricao2", + "blockClass": "DescricaoCont1" + } + }, + + "tab-content.item#Descricao3": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "Descricao3", + "blockClass": "DescricaoCont1" + } + }, + "tab-content.item#Descricao4": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "Descricao4", + "blockClass": "DescricaoCont1" + } + }, + "tab-content.item#Descricao5": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "Descricao5", + "blockClass": "DescricaoCont1" + } + }, + + "flex-layout.row#description": { + "props": { + "blockClass": "description", + "marginBottom": 7 + }, + "children": ["product-images#imageDescription", "product-description"] + }, + + "flex-layout.row#wrapperImageDescription": { + "props": { + "blockClass": "imageDescription", + "width": "50%" + } + }, + + "product-images#imageDescription": { + "props": { + "blockClass": "imageDescription", + "displayMode": "first-image" + + } + }, + "html#breadcrumb": { @@ -30,12 +156,7 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, + "condition-layout.product#availability": { "props": { "conditions": [ diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css index fd5c390..bab3630 100644 --- a/styles/css/vtex.add-to-cart-button.css +++ b/styles/css/vtex.add-to-cart-button.css @@ -6,7 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ .buttonText { font-family: "Open Sans", sans-serif; diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 95f4420..98712ae 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -6,7 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ .container { width: 100%; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index d091357..d045d44 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -6,14 +6,12 @@ 1800px + : Big desktop */ /* Media Query M3 */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ .flexRowContent--product-main { gap: 32px; padding: 0; margin: 0; - padding-left: 40px; - padding-right: 40px; } .flexRowContent--product-main .stretchChildrenWidth { padding: 0; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index bdeaed3..6d09e11 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -6,7 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ .product-identifier__value { font-size: 14px; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 1d52269..d9acf67 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -6,7 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ .sellingPriceValue { font-weight: 700; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 958da61..2332491 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -6,7 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ .quantitySelectorTitle { display: none; @@ -24,8 +24,9 @@ height: 49px; } .quantitySelectorContainer :global(.vtex-numeric-stepper__input) { - height: 49px !important; width: 48px; + border-left: none; + border-right: none; padding: 0; margin: 0; } diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 682d400..ef1d1eb 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,5 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 96b7fb6..256331c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -6,12 +7,12 @@ 1800px + : Big desktop */ /* Media Query M3 */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ .container { - margin: 0; - padding: 0; max-width: 100%; + padding-left: 40px; + padding-right: 40px; } .container .productImagesGallerySlide { width: 100% !important; @@ -83,6 +84,7 @@ border-radius: 30px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); padding: 0; margin: auto; } @@ -109,6 +111,7 @@ .shippingContainer { display: flex; + padding: 0; } .shippingContainer :global(.vtex-input-prefix__group) { height: 49px; @@ -125,6 +128,7 @@ } .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; + padding: 0; } .shippingContainer :global(.vtex-button) { font-size: 0; @@ -157,4 +161,92 @@ } .shippingContainer :global(.vtex__icon-external-link) { display: none; +} + +.shippingTable { + border: none; + color: #202020; + font-size: 14px; + font-family: "Open Sans", sans-serif; + font-weight: 400 !important; + text-transform: uppercase; +} +.shippingTable .shippingTableLabel { + color: #AFAFAF; + font-weight: 400; + font-style: normal; + font-size: 12px; + line-height: 16px; +} +.shippingTable .shippingTableRadioBtn { + padding: 0; + display: flex; + color: #AFAFAF; + font-weight: 400; + font-style: normal; + font-size: 12px; + line-height: 16px; + min-width: 140px; + padding-top: 15px; + display: none; +} +.shippingTable .shippingTableHead { + display: flex; + padding-bottom: 15px; +} +.shippingTable .shippingTableHead .shippingTableRow { + position: relative; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + position: absolute; + top: 0; + left: 300px; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + position: absolute; + top: 0; + left: 163px; + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { + position: absolute; + content: "FRETE"; + visibility: visible; + display: block; + font-size: 14px; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; + padding-bottom: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + width: 100px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + display: flex; + order: 2; + margin-left: 66px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + margin-left: 58px; +} + +.productDescriptionTitle { + font-size: 24px; + line-height: 32px; + font-family: "Open Sans", sans-serif; + padding-left: 32px; +} + +.productDescriptionText { + font-size: 0; +} +.productDescriptionText::after { + position: absolute; + font-size: 16px; + line-height: 19px; + display: block; + color: #929292; + padding-left: 32px; + content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque."; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..28d0692 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,63 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); +/* Grid breakpoints */ +.listContainer { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-around; +} +@media only screen and (max-width: 1024px) { + .listContainer { + display: flex; + flex-direction: column; + } +} +.listContainer .listItem { + margin: 0; +} + +.listItem--DescricaoTab :global(.vtex-button) { + border: none; + font-size: 18px; + font-weight: 400; + line-height: 38px; + font-family: "Open Sans", sans-serif; + background-color: white; + color: #BFBFBF; +} + +.listItemActive--DescricaoTab { + border-bottom: 1px solid black; + padding: 0; + margin: 0; +} +@media only screen and (max-width: 1024px) { + .listItemActive--DescricaoTab { + border: none; + } +} +.listItemActive--DescricaoTab :global(.vtex-button) { + border: none; + font-size: 18px; + font-weight: 400; + line-height: 38px; + font-family: "Open Sans", sans-serif; + background-color: white; + color: #000000; +} + +.container .contentContainer--DescricaoCont { + padding-top: 32px; +} + +.container--Descricao { + padding-top: 16px; + margin: 0 40px 0 40px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 7b6b64b..1417649 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -3,8 +3,8 @@ gap: 32px; padding: 0; margin: 0; - padding-left: 40px; - padding-right: 40px; + // padding-left: 40px; + // padding-right: 40px; .stretchChildrenWidth { padding: 0; diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 72b6dec..e9320bd 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -9,14 +9,16 @@ .quantitySelectorContainer{ width: 128px; height: 49px; - + :global(.vtex-numeric-stepper-container){ height: 49px; } :global(.vtex-numeric-stepper__input){ - height: 49px !important; + // height: 49px !important; width: 48px; + border-left: none; + border-right: none; padding: 0; margin: 0; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index ececc9f..4111572 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,14 +1,16 @@ -.container{ - margin: 0; - padding: 0; +.container { + // margin: 0; + // padding: 0; max-width: 100%; + padding-left: 40px; + padding-right: 40px; - .productImagesGallerySlide{ + .productImagesGallerySlide { width: 100% !important; } - .productImageTag--main{ + .productImageTag--main { max-height: 100% !important; max-width: 100% !important; } @@ -118,7 +120,7 @@ .skuSelectorItemTextValue { - + color:rgba(185, 185, 185, 0.6); padding: 0; margin: auto; } @@ -150,7 +152,10 @@ color: $color-black2; font-family: $font-open; + } + + } } @@ -162,74 +167,197 @@ .shippingContainer { -display: flex; + display: flex; + padding: 0; -:global(.vtex-input-prefix__group) { + :global(.vtex-input-prefix__group) { - height: 49px; + height: 49px; -} - -:global(.vtex-input__label) { - - font-size: 0; - - &::after { - content: "CALCULAR FRETE:"; - font-size: 14px; - line-height: 19px; - font-weight: 400; - font-family: $font-open; } -} + :global(.vtex-input__label) { -:global(.vtex-address-form__postalCode) { - display: flex; -} + font-size: 0; -:global(.vtex-button) { - font-size: 0; - position: relative; - right: 164px; - width: 49px; - height: 49px; - margin-top: 27px; - background-color: $color-black2; - border: none; + &::after { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + font-family: $font-open; + } + + } + + :global(.vtex-address-form__postalCode) { + display: flex; + padding: 0; + } + + :global(.vtex-button) { + font-size: 0; + position: relative; + right: 164px; + width: 49px; + height: 49px; + margin-top: 27px; + background-color: $color-black2; + border: none; border-radius: 0; + &::after { + + content: "OK"; + color: $color-white; + font-size: 14px; + line-height: 19px; + font-weight: 600; + + } + } + + :global(.vtex-button__label) { + height: fit-content; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 20px; + margin-top: 31px; + + :last-child { + color: $color-black2; + + } + + } + + :global(.vtex__icon-external-link) { + display: none; + } + + + + +} + +.shippingTable { + + border: none; + color: $color-black300; + + font-size: 14px; + font-family: $font-open; + font-weight: 400 !important; + text-transform: uppercase; + + .shippingTableLabel{ + color: $color-gray9; + font-weight: 400 ; + font-style: normal; + font-size: 12px; + line-height: 16px; + } + + .shippingTableRadioBtn { + padding: 0; + display: flex; + color: $color-gray9; + font-weight: 400 ; + font-style: normal; + font-size: 12px; + line-height: 16px; + min-width: 140px; + padding-top: 15px; + display: none; + + } + + .shippingTableHead { + display: flex; +padding-bottom: 15px; + + .shippingTableRow { + position: relative; + + + .shippingTableHeadDeliveryEstimate { + + position: absolute; + top: 0; + left: 300px; + + } + + .shippingTableHeadDeliveryPrice { + position: absolute; + top: 0; + left: 163px; + font-size: 0; + + &::after { + + position: absolute; + content: "FRETE"; + visibility: visible; + display: block; + font-size: 14px; + } + } + } + } + + .shippingTableBody { + + .shippingTableRow { + display: flex; + padding-bottom: 15px; + + .shippingTableCellDeliveryName { + + width: 100px; + } + + .shippingTableCellDeliveryEstimate { + display: flex; + order: 2; + margin-left: 66px; + } + + .shippingTableCellDeliveryPrice{ + margin-left: 58px; + } + } +} +} + +// cep-fim + +// tab-descrição + +.productDescriptionTitle { + font-size: 24px; + line-height: 32px; + font-family: $font-open; + padding-left: 32px; +} + +.productDescriptionText { + + font-size: 0; + &::after { - - content: "OK"; - color: $color-white; - font-size: 14px; + position: absolute; + font-size: 16px; line-height: 19px; - font-weight: 600; + display: block; + color: $color-gray6; + padding-left: 32px; + content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque."; - } -} - -:global(.vtex-button__label) { - height: fit-content; -} - -:global(.vtex-address-form__postalCode-forgottenURL) { - position: relative; - left: 20px; - margin-top: 31px; - - :last-child { - color: $color-black2; } -} -:global(.vtex__icon-external-link) { - display: none; -} - - - } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..5ce5d90 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,61 @@ + +.listContainer { + border-bottom: 1px solid rgb(0, 0, 0, 0.1); + display: flex; + justify-content: space-around; + + @include mq (md, max) { + display: flex; + flex-direction: column; + } + + .listItem{ + margin: 0; + } + + +} + +.listItem--DescricaoTab{ + :global(.vtex-button) { + border: none; + font-size: 18px; + font-weight: 400; + line-height: 38px; + font-family: $font-open; + + background-color: white; + color: $color-gray7; + } + +} + +.listItemActive--DescricaoTab { + border-bottom: 1px solid black; + padding: 0; + margin: 0; + @include mq (md, max) { + border: none; + } + :global(.vtex-button) { + border: none; + font-size: 18px; + font-weight: 400; + line-height: 38px; + font-family: $font-open; + + background-color: white; + color: $color-black2; + } +} + +.container { + .contentContainer--DescricaoCont { + padding-top: 32px; + } +} + +.container--Descricao{ + padding-top: 16px; + margin: 0 40px 0 40px; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 7cb865e..0f27e3e 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); $font-open: 'Open Sans', sans-serif; $color-black2:#000000; $color-black300: #202020; @@ -13,6 +13,7 @@ $color-gray5: #e5e5e5; $color-gray6: #929292; $color-gray7: #BFBFBF; $color-gray8: #868686; +$color-gray9: #AFAFAF; $color-blue: #4267b2; $color-green: #4caf50;