diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf new file mode 100644 index 0000000..a1398b3 Binary files /dev/null and b/assets/fonts/OpenSans-Bold.ttf differ diff --git a/assets/fonts/OpenSans-BoldItalic.ttf b/assets/fonts/OpenSans-BoldItalic.ttf new file mode 100644 index 0000000..307122c Binary files /dev/null and b/assets/fonts/OpenSans-BoldItalic.ttf differ diff --git a/assets/fonts/OpenSans-ExtraBold.ttf b/assets/fonts/OpenSans-ExtraBold.ttf new file mode 100644 index 0000000..08d7185 Binary files /dev/null and b/assets/fonts/OpenSans-ExtraBold.ttf differ diff --git a/assets/fonts/OpenSans-ExtraBoldItalic.ttf b/assets/fonts/OpenSans-ExtraBoldItalic.ttf new file mode 100644 index 0000000..c35f57f Binary files /dev/null and b/assets/fonts/OpenSans-ExtraBoldItalic.ttf differ diff --git a/assets/fonts/OpenSans-Italic.ttf b/assets/fonts/OpenSans-Italic.ttf new file mode 100644 index 0000000..790286f Binary files /dev/null and b/assets/fonts/OpenSans-Italic.ttf differ diff --git a/assets/fonts/OpenSans-Light.ttf b/assets/fonts/OpenSans-Light.ttf new file mode 100644 index 0000000..d9a9e27 Binary files /dev/null and b/assets/fonts/OpenSans-Light.ttf differ diff --git a/assets/fonts/OpenSans-LightItalic.ttf b/assets/fonts/OpenSans-LightItalic.ttf new file mode 100644 index 0000000..77f2e6c Binary files /dev/null and b/assets/fonts/OpenSans-LightItalic.ttf differ diff --git a/assets/fonts/OpenSans-Medium.ttf b/assets/fonts/OpenSans-Medium.ttf new file mode 100644 index 0000000..ba6db9b Binary files /dev/null and b/assets/fonts/OpenSans-Medium.ttf differ diff --git a/assets/fonts/OpenSans-MediumItalic.ttf b/assets/fonts/OpenSans-MediumItalic.ttf new file mode 100644 index 0000000..980ac25 Binary files /dev/null and b/assets/fonts/OpenSans-MediumItalic.ttf differ diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 0000000..1dc226d Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ diff --git a/assets/fonts/OpenSans-SemiBold.ttf b/assets/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 0000000..66acb20 Binary files /dev/null and b/assets/fonts/OpenSans-SemiBold.ttf differ diff --git a/assets/fonts/OpenSans-SemiBoldItalic.ttf b/assets/fonts/OpenSans-SemiBoldItalic.ttf new file mode 100644 index 0000000..f8c39f9 Binary files /dev/null and b/assets/fonts/OpenSans-SemiBoldItalic.ttf differ diff --git a/assets/fonts/Roboto-Black.ttf b/assets/fonts/Roboto-Black.ttf new file mode 100644 index 0000000..0112e7d Binary files /dev/null and b/assets/fonts/Roboto-Black.ttf differ diff --git a/assets/fonts/Roboto-BlackItalic.ttf b/assets/fonts/Roboto-BlackItalic.ttf new file mode 100644 index 0000000..b2c6aca Binary files /dev/null and b/assets/fonts/Roboto-BlackItalic.ttf differ diff --git a/assets/fonts/Roboto-Bold.ttf b/assets/fonts/Roboto-Bold.ttf new file mode 100644 index 0000000..43da14d Binary files /dev/null and b/assets/fonts/Roboto-Bold.ttf differ diff --git a/assets/fonts/Roboto-BoldItalic.ttf b/assets/fonts/Roboto-BoldItalic.ttf new file mode 100644 index 0000000..bcfdab4 Binary files /dev/null and b/assets/fonts/Roboto-BoldItalic.ttf differ diff --git a/assets/fonts/Roboto-Italic.ttf b/assets/fonts/Roboto-Italic.ttf new file mode 100644 index 0000000..1b5eaa3 Binary files /dev/null and b/assets/fonts/Roboto-Italic.ttf differ diff --git a/assets/fonts/Roboto-Light.ttf b/assets/fonts/Roboto-Light.ttf new file mode 100644 index 0000000..e7307e7 Binary files /dev/null and b/assets/fonts/Roboto-Light.ttf differ diff --git a/assets/fonts/Roboto-LightItalic.ttf b/assets/fonts/Roboto-LightItalic.ttf new file mode 100644 index 0000000..2d277af Binary files /dev/null and b/assets/fonts/Roboto-LightItalic.ttf differ diff --git a/assets/fonts/Roboto-Medium.ttf b/assets/fonts/Roboto-Medium.ttf new file mode 100644 index 0000000..ac0f908 Binary files /dev/null and b/assets/fonts/Roboto-Medium.ttf differ diff --git a/assets/fonts/Roboto-MediumItalic.ttf b/assets/fonts/Roboto-MediumItalic.ttf new file mode 100644 index 0000000..fc36a47 Binary files /dev/null and b/assets/fonts/Roboto-MediumItalic.ttf differ diff --git a/assets/fonts/Roboto-Regular.ttf b/assets/fonts/Roboto-Regular.ttf new file mode 100644 index 0000000..ddf4bfa Binary files /dev/null and b/assets/fonts/Roboto-Regular.ttf differ diff --git a/assets/fonts/Roboto-Thin.ttf b/assets/fonts/Roboto-Thin.ttf new file mode 100644 index 0000000..2e0dee6 Binary files /dev/null and b/assets/fonts/Roboto-Thin.ttf differ diff --git a/assets/fonts/Roboto-ThinItalic.ttf b/assets/fonts/Roboto-ThinItalic.ttf new file mode 100644 index 0000000..084f9c0 Binary files /dev/null and b/assets/fonts/Roboto-ThinItalic.ttf differ diff --git a/manifest.json b/manifest.json index 9ee3cc5..8782b94 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", @@ -49,6 +48,7 @@ "vtex.checkout-summary": "0.x", "vtex.product-list": "0.x", "vtex.add-to-cart-button": "0.x", + "vtex.responsive-values": "0.x", "vtex.product-bookmark-interfaces": "1.x", "vtex.responsive-layout": "0.x", "vtex.slider-layout": "0.x", diff --git a/react/Example.tsx b/react/Example.tsx deleted file mode 100644 index 7d550e5..0000000 --- a/react/Example.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Example from "./components/Example/Example"; - -export default Example; \ No newline at end of file diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx deleted file mode 100644 index d195271..0000000 --- a/react/components/Example/Example.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const Example = () => { - return ( -
Example
- ) -} - -export default Example \ No newline at end of file diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..df8c1f3 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,6 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", diff --git a/store/blocks/pdp/product-shelf.jsonc b/store/blocks/pdp/product-shelf.jsonc new file mode 100644 index 0000000..d164dd4 --- /dev/null +++ b/store/blocks/pdp/product-shelf.jsonc @@ -0,0 +1,62 @@ +{ + "list-context.product-list#pdp-shelf": { + "blocks": ["product-summary.shelf#pdp-shelf"], + "children": ["html#pdp-slider-shelf"] + }, + + "html#pdp-slider-shelf-title": { + "children": ["rich-text#pdp-shelf-title"] + }, + + "html#pdp-slider-shelf": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#pdp-shelf"] + }, + + "html#list-context-pdp-shelf": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#pdp-shelf"] + }, + + "rich-text#pdp-shelf-title": { + "props": { + "text": "## Você também pode gostar:", + "textPosition": "CENTER", + "textAlignment": "CENTER" + } + }, + + "slider-layout#pdp-shelf": { + "props": { + "blockClass": "productShelf", + "infinite": true + } + }, + + "product-summary.shelf#pdp-shelf": { + "children": [ + "product-summary-image#pdp-shelf", + "product-summary-name", + "product-summary-price#pdp-shelf" + ] + }, + + "product-summary-image#pdp-shelf": { + "props": { + "showBadge": false, + "alabelSellingPricespectRatio": "1:1" + } + }, + + "product-summary-price#pdp-shelf": { + "props": { + "showInstallments": false, + "labelListPrice": "de", + "labelSellingPrice": "por" + } + } +} diff --git a/store/blocks/pdp/product-specifications-table.jsonc b/store/blocks/pdp/product-specifications-table.jsonc index add3a64..783a69f 100644 --- a/store/blocks/pdp/product-specifications-table.jsonc +++ b/store/blocks/pdp/product-specifications-table.jsonc @@ -1,83 +1,146 @@ { - "product-specification-group#table": { + "tab-layout#product-specification": { "children": [ - "flex-layout.row#spec-group" + "tab-list#product-specification", + "tab-content#product-specification" ] }, - "flex-layout.row#spec-group": { + + "tab-list#product-specification": { "props": { - "blockClass": "productSpecificationGroup" + "blockClass": "ProductSpecificationTabList" }, + "children": [ - "flex-layout.col#spec-group" + "tab-list.item#specification-1", + "tab-list.item#specification-2", + "tab-list.item#specification-3", + "tab-list.item#specification-4" ] }, - "flex-layout.col#spec-group": { - "children": [ - "flex-layout.row#spec-group-name", - "product-specification" - ] - }, - "flex-layout.row#spec-group-name": { + + "tab-list.item#specification-1": { "props": { - "blockClass": "productSpecificationGroupName" - }, - "children": [ - "product-specification-text#group" - ] - }, - "product-specification": { - "children": [ - "flex-layout.row#spec-item" - ] - }, - "flex-layout.row#spec-item": { - "props": { - "blockClass": "productSpecification" - }, - "children": [ - "flex-layout.col#spec-name", - "flex-layout.col#spec-value" - ] - }, - "flex-layout.col#spec-name": { - "props": { - "blockClass": "productSpecificationName", - "width": { - "mobile": "50%", - "desktop": "25%" - } - }, - "children": [ - "product-specification-text#specification" - ] - }, - "flex-layout.col#spec-value": { - "props": { - "blockClass": "productSpecificationValue" - }, - "children": [ - "product-specification-values" - ] - }, - "product-specification-values": { - "children": [ - "product-specification-text#value" - ] - }, - "product-specification-text#group": { - "props": { - "message": "{groupName}" + "tabId": "descriptionSpecificationsId", + "label": "Descrição", + "defaultActiveTab": true } }, - "product-specification-text#specification": { + "tab-list.item#specification-2": { "props": { - "message": "{specificationName}" + "tabId": "productTableSpecificationsId", + "label": "Especificações" } }, - "product-specification-text#value": { + + "tab-list.item#specification-3": { "props": { - "message": "{specificationValue}" + "tabId": "productVendorId", + "label": "Vendedor" + } + }, + + "tab-list.item#specification-4": { + "props": { + "tabId": "productLocationId", + "label": "Localização" + } + }, + + "tab-content#product-specification": { + "children": [ + "tab-content.item#specification-1", + "tab-content.item#specification-2", + "tab-content.item#specification-3", + "tab-content.item#specification-4" + ] + }, + "tab-content.item#specification-1": { + "children": ["flex-layout.row#product-specification-1"], + "props": { + "tabId": "descriptionSpecificationsId" + } + }, + "tab-content.item#specification-2": { + "children": ["flex-layout.row#product-specification-2"], + "props": { + "tabId": "productTableSpecificationsId" + } + }, + + "tab-content.item#specification-3": { + "children": ["flex-layout.row#product-specification-1"], + "props": { + "tabId": "productVendorId" + } + }, + + "tab-content.item#specification-4": { + "children": ["flex-layout.row#product-specification-2"], + "props": { + "tabId": "productLocationId" + } + }, + + "flex-layout.row#product-specification-1": { + "props": { + "blockClass": "productSpecificationItemContainer", + "colGap": 7, + "marginTop": 7, + "rowGap": 5 + }, + + "children": [ + "product-images#product-specification", + "flex-layout.row#description-1" + ] + }, + + "flex-layout.row#product-specification-2": { + "props": { + "blockClass": "productSpecificationItemContainer", + "colGap": 7, + "marginTop": 7, + "rowGap": 5 + }, + + "children": [ + "product-images#product-specification", + "flex-layout.row#description-2" + ] + }, + + "product-images#product-specification": { + "props": { + "aspectRatio": "1:1", + "displayMode": "first-image" + } + }, + + "flex-layout.row#description-1": { + "props": { + "marginBottom": 7 + }, + "children": ["product-description#product-specification-1"] + }, + + "flex-layout.row#description-2": { + "props": { + "marginBottom": 7 + }, + "children": ["product-description#product-specification-2"] + }, + + "product-description#product-specification-1": { + "props": { + "collapseContent": false + } + }, + + "product-description#product-specification-2": { + "props": { + "collapseContent": false, + "title": "Descrição" } } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ebb3d11..b2c8fa7 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,14 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + "tab-layout#product-specification", + "html#pdp-slider-shelf-title", + "html#list-context-pdp-shelf", + "newsletter", "product-questions-and-answers" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -18,20 +19,64 @@ }, "children": ["breadcrumb#pdp-breadcrumb"] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { + + "breadcrumb#pdp-breadcrumb": { "props": { - "text": "##### Product Specifications" + "homeIconSize": 0, + "showOnMobile": true } }, - "flex-layout.row#description": { + + "html#product-images": { "props": { - "marginBottom": 7 + "blockClass": "productImages", + "testId": "product-images" }, - "children": ["product-description"] + "children": ["flex-layout.row#product-image"] }, + + "flex-layout.row#product-image": { + "title": "LAYOUT: exibição do carossel de images do produto", + "children": ["product-images"] + }, + + "product-images": { + "title": "BLOCO: exibição do carossel de imagens do produto", + "props": { + "aspectRatio": "1:1", + "thumbnailAspectRatio": "1:1", + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, + "thumbnailVisibility": "visible", + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailMaxHeight": 90 + } + }, + + "flex-layout.row#product-main": { + "props": { + "colGap": 7, + "rowGap": 7, + "marginTop": 5, + "marginBottom": 7, + "paddingBottom": 7, + "blockClass": "productMain" + }, + "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + }, + + "stack-layout": { + "props": { + "blockClass": "product" + }, + "children": [ + "html#product-images", + "product-bookmark", + "product-specification-badges" + ] + }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -43,28 +88,6 @@ "Else": "flex-layout.row#product-availability" } }, - "flex-layout.row#product-main": { - "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 - }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] - }, - - "stack-layout": { - "props": { - "blockClass": "product" - }, - "children": [ - "flex-layout.row#product-image", - "product-bookmark", - "product-specification-badges" - ] - }, "product-specification-badges": { "props": { @@ -82,47 +105,60 @@ "rowGap": 0 } }, - "flex-layout.row#product-image": { - "children": ["product-images"] - }, - "product-images": { - "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true - } - }, + "flex-layout.col#right-col": { "props": { + "blockClass": "productInformations", "preventVerticalStretch": true, "rowGap": 0 }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", - "sku-selector", - "product-quantity", - "product-assembly-options", + "html#sku-selector", + "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#pdp-buy-actions", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" ] }, + "product-installments": { + "props": { + "markers": ["discount"], + "message": "{installmentsNumber}x {installmentValue}{hasInterest, select, true { {interestRate} de juros} false { sem juros}}" + } + }, + "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 5, + "preserveLayoutOnMobile": true }, - "children": ["vtex.store-components:product-name"] + + "children": ["flex-layout.col#product-name"] + }, + + "flex-layout.col#product-name": { + "props": { + "blockClass": "productName", + "rowGap": 3 + }, + + "children": [ + "vtex.store-components:product-name", + "product-identifier.product" + ] + }, + + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + + "children": ["sku-selector"] }, "sku-selector": { @@ -132,12 +168,44 @@ } }, + "flex-layout.row#pdp-buy-actions": { + "children": ["html#pdp-product-quantity", "html#add-to-cart-button"] + }, + "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "productAddToCart" }, - "children": ["add-to-cart-button"] + "children": ["html#add-to-cart-button"] + }, + + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button#pdp-add-to-cart-button"] + }, + + "html#pdp-product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + + "product-quantity": { + "props": { + "showLabel": false + } + }, + + "add-to-cart-button#pdp-add-to-cart-button": { + "props": { + "text": "Adicionar à sacola", + "blockClass": "productAddToCartButton" + } }, "flex-layout.row#product-availability": { @@ -159,7 +227,7 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", + "vtex.store-components:product-name", "product-identifier.product", "sku-selector", "flex-layout.row#availability" @@ -170,23 +238,5 @@ "blockClass": "message-availability" }, "children": ["availability-subscriber"] - }, - - "share#default": { - "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } - } - }, - - "breadcrumb#pdp-breadcrumb": { - "props": { - "homeIconSize": 0, - "showOnMobile": true - } } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..779175f 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +17,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..5b440b6 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -1,14 +1,11 @@ { - "product-summary.shelf": { + "product-summary.shelf#pdp-product-summary": { "children": [ "stack-layout#prodsum", "product-summary-name", - "flex-layout.col#productRating", - "product-summary-space", "product-list-price#summary", "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "product-installments#summary" ] }, "flex-layout.col#productRating": { @@ -19,11 +16,7 @@ }, "stack-layout#prodsum": { - "children": [ - "product-summary-image#shelf", - "vtex.product-highlights@2.x:product-highlights#collection", - "modal-trigger#quickview" // Check quickview.jsonc - ] + "children": ["product-summary-image#shelf"] }, "product-summary-image#shelf": { @@ -64,10 +57,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price#summary", - "product-price-savings#summary" - ] + "children": ["product-selling-price#summary"] }, "product-installments#summary": { "props": { @@ -81,9 +71,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..01705ab 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -1,7 +1,4 @@ { - "example-component": { - "component": "Example" - }, "html": { "component": "html", "composition": "children" diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..a7eb941 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,17 @@ +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Regular.ttf); + font-weight: 400; +} + +@font-face { + font-family: "Open Sans"; + src: url(assets/fonts/OpenSans-Light.ttf); + font-weight: 300; +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..63b6e82 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,351 @@ { - "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 - ], - "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], - "customMedia": [ - { "s": 20 }, - { "ns": { - "value": 40, - "minWidth": true - } - }, - { "m": { - "value": 40, - "minWidth": true - } - }, - { "l": { - "value": 64, - "minWidth": true - } - }, - { "xl": { - "value": 80, - "minWidth": true - } - } - ], - "colors": { - "black-90": "rgba(0,0,0,.9)", - "black-80": "rgba(0,0,0,.8)", - "black-70": "rgba(0,0,0,.7)", - "black-60": "rgba(0,0,0,.6)", - "black-50": "rgba(0,0,0,.5)", - "black-40": "rgba(0,0,0,.4)", - "black-30": "rgba(0,0,0,.3)", - "black-20": "rgba(0,0,0,.2)", - "black-10": "rgba(0,0,0,.1)", - "black-05": "rgba(0,0,0,.05)", - "black-025": "rgba(0,0,0,.025)", - "black-0125": "rgba(0,0,0,.0125)", + "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75], + "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], + "customMedia": [ + { "s": 20 }, + { + "ns": { + "value": 40, + "minWidth": true + } + }, + { + "m": { + "value": 40, + "minWidth": true + } + }, + { + "l": { + "value": 64, + "minWidth": true + } + }, + { + "xl": { + "value": 80, + "minWidth": true + } + } + ], + "colors": { + "black-90": "rgba(0,0,0,.9)", + "black-80": "rgba(0,0,0,.8)", + "black-70": "rgba(0,0,0,.7)", + "black-60": "rgba(0,0,0,.6)", + "black-50": "rgba(0,0,0,.5)", + "black-40": "rgba(0,0,0,.4)", + "black-30": "rgba(0,0,0,.3)", + "black-20": "rgba(0,0,0,.2)", + "black-10": "rgba(0,0,0,.1)", + "black-05": "rgba(0,0,0,.05)", + "black-025": "rgba(0,0,0,.025)", + "black-0125": "rgba(0,0,0,.0125)", - "white-90": "rgba(255,255,255,.9)", - "white-80": "rgba(255,255,255,.8)", - "white-70": "rgba(255,255,255,.7)", - "white-60": "rgba(255,255,255,.6)", - "white-50": "rgba(255,255,255,.5)", - "white-40": "rgba(255,255,255,.4)", - "white-30": "rgba(255,255,255,.3)", - "white-20": "rgba(255,255,255,.2)", - "white-10": "rgba(255,255,255,.1)", - "white-05": "rgba(255,255,255,.05)", - "white-025": "rgba(255,255,255,.025)", - "white-0125": "rgba(255,255,255,.0125)" + "white-90": "rgba(255,255,255,.9)", + "white-80": "rgba(255,255,255,.8)", + "white-70": "rgba(255,255,255,.7)", + "white-60": "rgba(255,255,255,.6)", + "white-50": "rgba(255,255,255,.5)", + "white-40": "rgba(255,255,255,.4)", + "white-30": "rgba(255,255,255,.3)", + "white-20": "rgba(255,255,255,.2)", + "white-10": "rgba(255,255,255,.1)", + "white-05": "rgba(255,255,255,.05)", + "white-025": "rgba(255,255,255,.025)", + "white-0125": "rgba(255,255,255,.0125)" + }, + "semanticColors": { + "background": { + "base": "#ffffff", + "base--inverted": "#03044e", + "action-primary": "#000000", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#f2f4f5", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-background": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-background": { + "action-primary": "#000000", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "text": { + "action-primary": "#000000", + "action-secondary": "#eef3f7", + "link": "#000000", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#9292927a", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#000000" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#000000", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#000000", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#000000", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#e3e4e6", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-border": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-border": { + "action-primary": "#000000", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "on": { + "base": "#3f3f40", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#000000", + "emphasis": "#ffffff", + "disabled": "#979899", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a", + "muted-1": "#ffffff", + "muted-2": "#ffffff", + "muted-3": "#3f3f40", + "muted-4": "#3f3f40", + "muted-5": "#3f3f40" + }, + "hover-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + }, + "active-on": { + "action-primary": "#ffffff", + "action-secondary": "#000000", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + } + }, + "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], + "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "widths": [1, 2, 4, 8, 16], + "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], + "heights": [1, 2, 4, 8, 16], + "sizes": [ + { "name": "small", "value": 2 }, + { "name": "regular", "value": 2.5 }, + { "name": "large", "value": 3 } + ], + "typography": { + "measure": [30, 34, 20], + "styles": { + "heading-1": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "700", + "fontSize": "3rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "700", + "fontSize": "2.25rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], - "widths": [1, 2, 4, 8, 16], - "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], - "heights": [1, 2, 4, 8, 16], - "sizes": [ - {"name": "small", "value": 2}, - {"name": "regular", "value": 2.5}, - {"name": "large", "value": 3} - ], - "typography":{ - "measure": [30, 34, 20], - "styles": { - "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "3rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "2.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "1.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.5rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.875rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "0.875rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1.25rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "code": { - "fontFamily": "Consolas, monaco, monospace", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - } - } + "heading-3": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "400", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "300", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Consolas, monaco, monospace", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css deleted file mode 100644 index 7dfa27b..0000000 --- a/styles/css/agenciamagma.store-theme.css +++ /dev/null @@ -1,25 +0,0 @@ -/* -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 */ -.html--pdp-breadcrumb { - width: 100%; - padding: 0 40px; -} -@media screen and (min-width: 1025px) { - .html--pdp-breadcrumb { - width: 94.4444444444%; - padding: 0; - margin: 0 auto; - } -} -@media screen and (min-width: 1921px) { - .html--pdp-breadcrumb { - width: 68.75%; - } -} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 39c43f9..f117bbe 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,11 +9,18 @@ /* Grid breakpoints */ .container { width: 100%; - display: inline-flex; + display: flex; + padding: 0 40px; flex-wrap: wrap; flex-basis: 100%; align-items: baseline; } +@media screen and (min-width: 1921px) { + .container { + width: 68.75%; + margin: 0 auto; + } +} .termArrow { padding: 0; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..064c332 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +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 */ .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -9,14 +18,12 @@ padding: 0 1rem; } } - @media screen and (min-width: 80rem) { .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.25rem; } } - .flexRowContent--menu-link { background-color: #03044e; color: #fff; @@ -43,7 +50,7 @@ } .flexRow--deals { - background-color: #0F3E99; + background-color: #0f3e99; padding: 14px 0px; } @@ -96,3 +103,45 @@ .flexRow--addToCartRow { padding-bottom: 1rem; } + +.flexRow--productMain { + padding: 0 40px; +} + +.flexColChild--productInformations :global(.vtex-product-identifier-0-x-product-identifier__label), +.flexColChild--productInformations :global(.vtex-product-identifier-0-x-product-identifier__separator) { + font-size: 0; + width: 0; + height: 0; +} + +@media screen and (min-width: 1025px) { + .flexCol--productName { + align-items: flex-end; + } +} + +.flexRowContent--productAddToCart :global(.vtex-button) { + height: 72px; + line-height: 24.51px; +} +@media screen and (min-width: 1025px) { + .flexRowContent--productAddToCart :global(.vtex-button) { + height: 49px; + } +} +.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-button__label) { + justify-content: stretch; + padding: 12px 64px; +} +.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + flex-grow: 1; + width: 100%; +} +.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) { + width: 99%; +} + +.flexRow--productSpecificationItemContainer { + padding: 0 40px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..ee7a284 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,61 +1,71 @@ +/* +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 */ .listPrice { color: #727273; - margin-bottom: .25rem; + margin-bottom: 0.25rem; font-size: 1rem; } .sellingPrice { - color: #3f3f40; + color: #000000; font-size: 1.25rem; } .sellingPriceValue { - font-size: 2.25rem; + font-size: 1.5625rem; + line-height: 38px; font-weight: 700; } .installments { + display: inline-block; color: #727273; margin-bottom: 1rem; } .savings { font-weight: 500; - color: #79B03A; + color: #79b03a; } .sellingPriceValue--summary { font-size: 1.25rem; font-weight: 600; - color: #2E2E2E; + color: #2e2e2e; } .savings--summary { - background: #8BC34A; + background: #8bc34a; border-radius: 1000px; align-items: center; display: flex; - padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; } .savings-discount--summary { font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding-left: 0.5rem; padding-right: 0.5rem; } .listPrice--summary { margin-bottom: 0.25rem; - font-size: .875rem; + font-size: 0.875rem; } .installments--summary { @@ -74,6 +84,6 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..b8c8b00 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,21 @@ +/* +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 */ +.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) { + width: 128px; + min-height: 49px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 100%; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button-container), +.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button-container) { + height: 100%; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..ff5bfe8 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,4 +1,14 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { +/* +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 */ +.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, +.skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { border-radius: 50%; } @@ -16,21 +26,21 @@ display: none; } } - .nameContainer { - justify-content: start; padding-top: 1rem; padding-bottom: 1rem; } .brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; + color: #2e2e2e; } .container { - text-align: start; + text-align: center; +} + +.priceContainer { + padding-top: 0; } .imageContainer { @@ -39,4 +49,4 @@ .image { border-radius: 0.25rem; -} +} \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css new file mode 100644 index 0000000..24736ea --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,16 @@ +/* +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 */ +.relatedProducts { + padding: 0 40px; +} + +.shelfContentContainer :global(.vtex-slider-0-x-sliderFrame) { + gap: 12px; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..3774535 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,9 +1,18 @@ +/* +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 */ .sliderLayoutContainer { justify-content: center; } .sliderLayoutContainer--carousel { - background-color: #F0F0F0; + background-color: #f0f0f0; min-height: 450px; } @@ -12,8 +21,8 @@ } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; } .layoutContainer--shelf { @@ -25,7 +34,12 @@ .slide--shelf { margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; + padding-left: 0.5rem; + padding-right: 0.5rem; min-height: 550px; } + +.sliderLayoutContainer--productShelf { + width: 100%; + padding: 0 40px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..6c65dc9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,128 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.container { + padding: 0; +} + +.productImageTag { + object-fit: fill !important; +} + +.carouselGaleryThumbs { + display: block !important; + margin-top: 16px; +} + +.productImagesThumb { + width: 90px !important; + margin-left: 16px; + margin-bottom: 0; +} +.productImagesThumb .thumbImg { + border-radius: 8px; +} +.productImagesThumb:first-child { + margin-left: 0; +} + +.productNameContainer { + line-height: 34px; +} +@media screen and (max-width: 768px) and (min-width: 375px) { + .productNameContainer { + width: 70.9459459459%; + margin-right: auto; + } +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorSubcontainer--cor .skuSelectorName, +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorName::before, +.skuSelectorSubcontainer--tamanho .skuSelectorName::before { + font-size: 14px; + text-transform: uppercase; +} + +.skuSelectorSubcontainer--cor { + order: 1; +} +.skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + font-size: 0; + width: 0; + height: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorName::before { + content: "Outros Cores"; +} + +.skuSelectorSubcontainer--tamanho { + order: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::before { + content: "Outros Tamanhos"; +} + +.skuSelectorOptionsList, +.skuSelectorOptionsList .skuSelectorItem, +.skuSelectorNameContainer { + margin: 0; +} + +.skuSelectorOptionsList { + gap: 16px; +} + +.skuSelectorItem { + width: 40px; + height: 40px; +} +.skuSelectorItem .frameAround, +.skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; +} +.skuSelectorItem .skuSelectorInternalBox { + z-index: unset; +} +.skuSelectorItem .frameAround { + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.diagonalCross { + width: 100%; + background: transparent; +} +.diagonalCross::before { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 100%; + height: 1px; + border-top: 1px solid #d5d5d5; + transform: translate(-50%, -50%) rotateZ(-45deg); + z-index: 2; +} + +.skuSelectorItemTextValue { + width: 100%; + padding: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.skuSelectorSubcontainer--cor .skuSelectorItem { + width: 48px; + height: 48px; } \ 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..55a55ef --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,26 @@ +/* +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 */ +@media screen and (max-width: 1024px) { + .listContainer--ProductSpecificationTabList { + width: 100%; + padding: 0 40px; + flex-direction: column; + flex-wrap: nowrap; + } + .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) { + width: 100%; + } + .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) { + justify-content: start; + } +} +.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) { + text-transform: capitalize !important; +} \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index 2c3b088..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,14 +0,0 @@ -.html--pdp-breadcrumb { - width: 100%; - padding: 0 40px; - - @media screen and (min-width: 1025px) { - width: 94.44444444444444%; - padding: 0; - margin: 0 auto; - } - - @media screen and (min-width: 1921px) { - width: 68.75%; - } -} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 948bc25..26ba8ee 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,9 +1,15 @@ .container { width: 100%; - display: inline-flex; + display: flex; + padding: 0 40px; flex-wrap: wrap; flex-basis: 100%; align-items: baseline; + + @media screen and (min-width: 1921px) { + width: 68.75%; + margin: 0 auto; + } } .termArrow { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..8bf7a3b --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,146 @@ +.flexRowContent--menu-link, +.flexRowContent--main-header { + padding: 0 0.5rem; +} + +@media screen and (min-width: 40em) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 1rem; + } +} + +@media screen and (min-width: 80rem) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 0.25rem; + } +} + +.flexRowContent--menu-link { + background-color: #03044e; + color: #fff; +} + +.flexRowContent--main-header { + background-color: #f0f0f0; +} + +.flexRowContent--main-header-mobile { + align-items: center; + padding: 0.625rem 0.5rem; + background-color: #f0f0f0; +} + +.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { + color: #ffffff; + font-size: 14px; +} + +.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { + color: #727273; + font-size: 14px; +} + +.flexRow--deals { + background-color: #0f3e99; + padding: 14px 0px; +} + +.flexRow--deals .stretchChildrenWidth { + align-items: center; +} + +.flexRow--deals .flexCol { + align-items: center; + margin-bottom: 5px; + padding-top: 5px; +} + +.flexCol--filterCol { + max-width: 500px; + min-width: 230px; +} + +.flexCol--productCountCol { + align-items: flex-start; +} + +.flexCol--orderByCol { + align-items: flex-end; +} + +.flexCol--orderByMobileCol { + width: 42%; +} + +.flexCol--filterMobileCol { + width: 38%; +} + +.flexRow--quickviewMainRow { + display: flex; + max-height: 100%; +} + +.flexColChild--quickviewDetails:first-child { + overflow-y: auto; + height: 66% !important; + overflow-x: hidden; +} + +.flexColChild--quickviewDetails:last-child { + height: 34% !important; +} + +.flexRow--addToCartRow { + padding-bottom: 1rem; +} + +.flexRow--productMain { + padding: 0 40px; +} + +.flexColChild--productInformations { + :global(.vtex-product-identifier-0-x-product-identifier__label), + :global(.vtex-product-identifier-0-x-product-identifier__separator) { + font-size: 0; + width: 0; + height: 0; + } +} + +.flexCol--productName { + @media screen and (min-width: 1025px) { + align-items: flex-end; + } +} + +.flexRowContent--productAddToCart { + :global(.vtex-button) { + height: 72px; + line-height: 24.51px; + + @media screen and (min-width: 1025px) { + height: 49px; + } + + :global(.vtex-button__label) { + justify-content: stretch; + padding: 12px 64px; + } + + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + flex-grow: 1; + width: 100%; + } + + :global(.vtex-add-to-cart-button-0-x-buttonText) { + width: 99%; + } + } +} + +.flexRow--productSpecificationItemContainer { + padding: 0 40px; +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..9e940ac --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,81 @@ +.listPrice { + color: #727273; + margin-bottom: 0.25rem; + font-size: 1rem; +} + +.sellingPrice { + color: #000000; + font-size: 1.25rem; +} + +.sellingPriceValue { + font-size: 1.5625rem; + line-height: 38px; + font-weight: 700; +} + +.installments { + display: inline-block; + color: #727273; + margin-bottom: 1rem; +} + +.savings { + font-weight: 500; + color: #79b03a; +} + +.sellingPriceValue--summary { + font-size: 1.25rem; + font-weight: 600; + color: #2e2e2e; +} + +.savings--summary { + background: #8bc34a; + border-radius: 1000px; + align-items: center; + display: flex; + + padding-left: 0.5rem; + padding-right: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; +} + +.savings-discount--summary { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.listPrice--summary { + margin-bottom: 0.25rem; + font-size: 0.875rem; +} + +.installments--summary { + margin-bottom: 2rem; + font-size: 0.875rem; +} + +.savings--summaryPercentage { + background: #0f3e99; + border-radius: 1000px; + align-items: center; + display: flex; +} + +.savingsPercentage--summaryPercentage { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #ffffff; + padding: 0.25rem 0.5rem 0.25rem 0.5rem; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..6626ee4 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,16 @@ +.quantitySelectorStepper { + :global(.vtex-numeric-stepper-wrapper) { + width: 128px; + min-height: 49px; + } + + :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 100%; + } + + :global(.vtex-numeric-stepper__plus-button-container), + :global(.vtex-numeric-stepper__minus-button-container) { + height: 100%; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..a44c3bf --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,44 @@ +.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, +.skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { + border-radius: 50%; +} + +.container :global(.vtex-modal-layout-0-x-triggerContainer) { + opacity: 0; + transition: opacity 200ms ease-in-out; +} + +.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { + opacity: 1; +} + +@media screen and (max-width: 40em) { + .container :global(.vtex-modal-layout-0-x-triggerContainer) { + display: none; + } +} + +.nameContainer { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.brandName { + color: #2e2e2e; +} + +.container { + text-align: center; +} + +.priceContainer { + padding-top: 0; +} + +.imageContainer { + text-align: center; +} + +.image { + border-radius: 0.25rem; +} diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..d5a39b4 --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,9 @@ +.relatedProducts { + padding: 0 40px; +} + +.shelfContentContainer { + :global(.vtex-slider-0-x-sliderFrame) { + gap: 12px; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..7334989 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,36 @@ +.sliderLayoutContainer { + justify-content: center; +} + +.sliderLayoutContainer--carousel { + background-color: #f0f0f0; + min-height: 450px; +} + +.sliderTrackContainer { + max-width: 100%; +} + +.paginationDotsContainer { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.layoutContainer--shelf { + margin-top: 20px; + margin-bottom: 20px; + max-width: 96rem; + min-height: 550px; +} + +.slide--shelf { + margin-bottom: 25px; + padding-left: 0.5rem; + padding-right: 0.5rem; + min-height: 550px; +} + +.sliderLayoutContainer--productShelf { + width: 100%; + padding: 0 40px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..24c6354 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,144 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.container { + padding: 0; +} + +.productImageTag { + object-fit: fill !important; +} + +.carouselGaleryThumbs { + display: block !important; + margin-top: 16px; +} + +.productImagesThumb { + width: 90px !important; + margin-left: 16px; + margin-bottom: 0; + + .thumbImg { + border-radius: 8px; + } + + &:first-child { + margin-left: 0; + } +} + +.productNameContainer { + line-height: 34px; + + @media screen and (max-width: 768px) and (min-width: 375px) { + width: 70.94594594594594%; + margin-right: auto; + } +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorSubcontainer--cor, +.skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + + &::before { + font-size: 14px; + text-transform: uppercase; + } + } +} + +.skuSelectorSubcontainer--cor { + order: 1; + + .skuSelectorSelectorImageValue { + font-size: 0; + width: 0; + height: 0; + } + + .skuSelectorName { + &::before { + content: "Outros Cores"; + } + } +} + +.skuSelectorSubcontainer--tamanho { + order: 0; + + .skuSelectorName { + &::before { + content: "Outros Tamanhos"; + } + } +} + +.skuSelectorOptionsList, +.skuSelectorOptionsList .skuSelectorItem, +.skuSelectorNameContainer { + margin: 0; +} + +.skuSelectorOptionsList { + gap: 16px; +} + +.skuSelectorItem { + width: 40px; + height: 40px; + + .frameAround, + .skuSelectorInternalBox { + border-radius: 100%; + } + + .skuSelectorInternalBox { + z-index: unset; + } + + .frameAround { + top: 0; + left: 0; + right: 0; + bottom: 0; + } +} + +.diagonalCross { + width: 100%; + background: transparent; + + &::before { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 100%; + height: 1px; + border-top: 1px solid #d5d5d5; + transform: translate(-50%, -50%) rotateZ(-45deg); + z-index: 2; + } +} + +.skuSelectorItemTextValue { + width: 100%; + padding: 0; + + display: flex; + justify-content: center; + align-items: center; +} + +.skuSelectorSubcontainer--cor { + .skuSelectorItem { + width: 48px; + height: 48px; + } +} + + 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..bc98f15 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,24 @@ +.listContainer--ProductSpecificationTabList { + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 40px; + flex-direction: column; + flex-wrap: nowrap; + + .listItem { + :global(.vtex-button) { + width: 100%; + + :global(.vtex-button__label) { + justify-content: start; + } + } + } + } + + .listItem { + :global(.vtex-button) { + text-transform: capitalize !important; + } + } +}