diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..0b77cb8 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -2,7 +2,9 @@ "add-to-cart-button": { "props": { "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "blockClass": "botao", + "text": "ADICIONAR À SACOLA" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..be2df56 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,7 +1,8 @@ { "store.product": { "children": [ - "html#breadcrumb", + /*"html#breadcrumb",*/ + "breadcrumb#teste1", "condition-layout.product#availability", "flex-layout.row#description", "flex-layout.row#specifications-title", @@ -10,6 +11,14 @@ "product-questions-and-answers" ] }, + + "breadcrumb#teste1": { + "props": { + "blockClass": "testebread", + "showOnMobile": true + } + }, + "html#breadcrumb": { "props": { "tag": "section", @@ -34,6 +43,7 @@ }, "condition-layout.product#availability": { "props": { + "blockClass": "testecontainer", "conditions": [ { "subject": "isProductAvailable" @@ -47,9 +57,8 @@ "props": { "colGap": 7, "rowGap": 7, - "marginTop": 4, + "marginTop": 5, "marginBottom": 7, - "paddingTop": 7, "paddingBottom": 7 }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] @@ -78,7 +87,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "46%", "rowGap": 0 } }, @@ -91,7 +100,7 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": false } }, "flex-layout.col#right-col": { @@ -101,17 +110,18 @@ }, "children": [ "flex-layout.row#product-name", + "html#codigo", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", + /*"product-separator",*/ "sku-selector", - "product-quantity", + /*"product-quantity",*/ "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + /*"flex-layout.row#buy-button",*/ + "html#qtd-btn", "availability-subscriber", "shipping-simulator", "share#default" @@ -120,26 +130,51 @@ "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "name" }, "children": ["vtex.store-components:product-name"] }, + "html#codigo": { + "props": { + "blockClass": "codigo" + }, + "children": ["product-identifier.product"] + }, + "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "blockClass": "skus" } }, "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "container-btn" }, "children": ["add-to-cart-button"] }, + "html#qtd-btn": { + "props": { + "tag": "div", + "testId": "qtd-btn", + "blockClass": "qtd-btn" + }, + "children": ["product-quantity", "add-to-cart-button"] + }, + + "product-quantity": { + "props": { + "blockClass": "quantidade" + } + }, + "flex-layout.row#product-availability": { "props": { "colGap": 7, diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..861ad15 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -4,11 +4,10 @@ "colGap": 2, "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, - "marginBottom": 4 + "marginBottom": 4, + "blockClass": "preco" }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +18,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/search.jsonc b/store/blocks/search.jsonc index 22be941..698dccb 100644 --- a/store/blocks/search.jsonc +++ b/store/blocks/search.jsonc @@ -108,7 +108,10 @@ } }, "flex-layout.row#searchinfo": { - "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"] + "children": [ + "flex-layout.col#productCount", + "flex-layout.row#orderByAndSwitcher" + ] }, "flex-layout.row#orderByAndSwitcher": { "children": ["order-by.v2", "gallery-layout-switcher"], @@ -231,7 +234,9 @@ "breadcrumb": { "props": { - "showOnMobile": true + "showOnMobile": true, + "homeIconSize": 1, + "blockClass": "bread" } }, @@ -272,29 +277,19 @@ "props": { "name": "grid" }, - "children": [ - "icon-grid", - "responsive-layout.desktop#textOptionGrid" - ] + "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"] }, "gallery-layout-option#list": { "props": { "name": "list" }, - "children": [ - "icon-inline-grid", - "responsive-layout.desktop#textOptionList" - ] + "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"] }, "responsive-layout.desktop#textOptionGrid": { - "children": [ - "rich-text#option-grid" - ] + "children": ["rich-text#option-grid"] }, "responsive-layout.desktop#textOptionList": { - "children": [ - "rich-text#option-list" - ] + "children": ["rich-text#option-list"] }, "rich-text#option-grid": { "props": { diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..8eeed02 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": "#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" + } + }, + "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, 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" }, - "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, 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" }, - "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, 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" }, - "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, 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": "Open Sans, 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": "Open Sans, 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": "Open Sans, 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": "Open Sans, 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": "Open Sans, 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": "Open Sans, 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": "Open Sans, 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": "Open Sans, 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" + } + } + }, + "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 index 5e37ba5..c50f96d 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -7,10 +7,23 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; +.html--codigo { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: end; } -.html--pdp-breadcrumb { - background-color: green; +.html--qtd-btn { + display: flex; + height: 49px; +} +.html--qtd-btn :global(.vtex-button) { + background-color: #000000; + border: none; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; } \ No newline at end of file diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..34c4328 --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,9 @@ +/* +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 */ \ No newline at end of file diff --git a/styles/css/vtex.bread-crumb.css b/styles/css/vtex.bread-crumb.css new file mode 100644 index 0000000..d44d04c --- /dev/null +++ b/styles/css/vtex.bread-crumb.css @@ -0,0 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.html--pdp-breadcrumb { + border: 1px solid red; +} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..434fe91 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,32 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.container--testebread { + margin-left: 40px; + margin-right: 40px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container--testebread .homeIcon--testebread { + display: none; +} +.container--testebread .homeLink--testebread { + vertical-align: top; +} +.container--testebread .homeLink--testebread::after { + content: "Home"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.condition-layout.css b/styles/css/vtex.condition-layout.css new file mode 100644 index 0000000..2541a87 --- /dev/null +++ b/styles/css/vtex.condition-layout.css @@ -0,0 +1,14 @@ +/* +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 */ +.testecontainer { + margin-left: 50px; + border: 1px solid red; + background-color: yellow; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..5f30663 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,35 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +/*NOME PRODUTO*/ +.flexRowContent--name { + text-align: end; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } +.flexRowContent--testecontainer { + margin-left: 50px; + border: 1px solid red; + background-color: yellow; } -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } +.flexRowContent--preco { + border: 1px solid red; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + /* identical to box height, or 152% */ + color: #000000; } -.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; -} +.flexRowContent--container-btn .stretchChildrenWidth { + background-color: yellow; + width: 90%; + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..bd638c2 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,18 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +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 */ +.product-identifier--productReference .product-identifier__label { + display: none; } +.product-identifier--productReference .product-identifier__separator { + display: none; +} +.product-identifier--productReference .product-identifier__value { + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..201270f 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,12 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; - font-weight: 700; -} - -.installments { - 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: .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; -} +/* +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 */ +.interestRate { + color: red; +} \ 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..e68b426 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,55 @@ +/* +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 { + display: flex; + margin: 0; + padding: 0; +} + +.quantitySelectorTitle { + display: none; +} + +/*.vtex-numeric-stepper__input { + border-left: none; + border-right: none; + height: 50px; +}*/ +/*.hideDecorators { + border: 1px solid red; + border-left: none; + border-right: none; +}*/ +/*.numeric-stepper__plus-button { + border: none; + height: 50px; +}*/ +/*.quantitySelectorInputContainer { + height: 50px; +}*/ +/*.availableQuantityContainer { + border: 1px solid yellow; + margin: 0; + padding: 0; +} +*/ +.quantitySelectorContainer--quantidade { + border: 1px solid green; + margin-right: 5px; + padding: 0; + height: 100%; + /*height: 49px;*/ +} + +/*.summaryContainer { + background-color: blue; + border: 1px solid orange; + height: 49px; +}*/ \ No newline at end of file diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css index 7149eb7..ac39a2e 100644 --- a/styles/css/vtex.stack-layout.css +++ b/styles/css/vtex.stack-layout.css @@ -1,6 +1,6 @@ .stackItem--product { width: 100%; - min-height: 257px + min-height: 257px; } .stackItem--quickview { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..13ffde1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,59 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.skuSelectorContainer--skus { + display: flex; + flex-direction: column-reverse; +} + +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.testecontainer { + margin-left: 50px; + border: 1px solid red; + background-color: yellow; +} + +.frameAround--skus { + border: none; +} + +.skuSelectorItemTextValue--skus { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} + +.skuSelectorInternalBox--skus { + border: 1px solid #989898; + border-radius: 100%; + width: 40px; + height: 40px; + align-items: center; + justify-content: center; + display: flex; +} + +.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus { + border: 2px solid #000000; + border-radius: 100%; + width: 40px; + height: 40px; + align-items: center; + justify-content: center; + display: flex; +} +.skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000000; } \ 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 index ea7d5b9..aa80407 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,21 @@ -.html { - background-color: red; +.html--codigo { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: end; } -.html--pdp-breadcrumb { - background-color: green; -} +.html--qtd-btn { + display: flex; + height: 49px; + :global(.vtex-button) { + background-color: #000000; + border: none; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; + } +} diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1 @@ + diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..81fdbe6 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,25 @@ +.container--testebread { + margin-left: 40px; + margin-right: 40px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + + .homeIcon--testebread { + display: none; + } + + .homeLink--testebread { + vertical-align: top; + &::after { + content: "Home"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } +} diff --git a/styles/sass/pages/product/vtex.condition-layout.scss b/styles/sass/pages/product/vtex.condition-layout.scss new file mode 100644 index 0000000..89a599d --- /dev/null +++ b/styles/sass/pages/product/vtex.condition-layout.scss @@ -0,0 +1,5 @@ +.testecontainer { + margin-left: 50px; + border: 1px solid red; + background-color: yellow; +} 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..a96004d --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,30 @@ +/*NOME PRODUTO*/ +.flexRowContent--name { + text-align: end; +} + +.flexRowContent--testecontainer { + margin-left: 50px; + border: 1px solid red; + background-color: yellow; +} + +.flexRowContent--preco { + border: 1px solid red; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + /* identical to box height, or 152% */ + + color: #000000; +} + +//CONTAINER QUANTIDADE E BOTAO +.flexRowContent--container-btn { + .stretchChildrenWidth { + background-color: yellow; + width: 90%; + padding: 0; + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..e097eef --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,13 @@ +.product-identifier--productReference { + .product-identifier__label { + display: none; + } + + .product-identifier__separator { + display: none; + } + + .product-identifier__value { + color: rgba(146, 146, 146, 0.48); + } +} 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..e98fb4d --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,3 @@ +.interestRate { + color: red; +} 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..a92d5e9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,50 @@ +.quantitySelectorStepper { + display: flex; + margin: 0; + padding: 0; +} + +.quantitySelectorTitle { + display: none; +} + +/*.vtex-numeric-stepper__input { + border-left: none; + border-right: none; + height: 50px; +}*/ + +/*.hideDecorators { + border: 1px solid red; + border-left: none; + border-right: none; +}*/ + +/*.numeric-stepper__plus-button { + border: none; + height: 50px; +}*/ + +/*.quantitySelectorInputContainer { + height: 50px; +}*/ + +/*.availableQuantityContainer { + border: 1px solid yellow; + margin: 0; + padding: 0; +} +*/ +.quantitySelectorContainer--quantidade { + border: 1px solid green; + margin-right: 5px; + padding: 0; + height: 100%; + /*height: 49px;*/ +} + +/*.summaryContainer { + background-color: blue; + border: 1px solid orange; + height: 49px; +}*/ diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..116a28d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,62 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + +.skuSelectorContainer--skus { + display: flex; + flex-direction: column-reverse; +} + +//NOME DO PRODUTO +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.testecontainer { + margin-left: 50px; + border: 1px solid red; + background-color: yellow; +} + +.frameAround--skus { + border: none; +} + +.skuSelectorItemTextValue--skus { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} + +.skuSelectorInternalBox--skus { + border: 1px solid #989898; + border-radius: 100%; + width: 40px; + height: 40px; + align-items: center; + justify-content: center; + display: flex; +} + +.skuSelectorItem--skus--selected { + .skuSelectorInternalBox--skus { + border: 2px solid #000000; + border-radius: 100%; + width: 40px; + height: 40px; + align-items: center; + justify-content: center; + display: flex; + } + + .skuSelectorItemTextValue--skus { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000000; + } +}