diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..db401d3 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -4,38 +4,38 @@ import { useCssHandles } from "vtex.css-handles"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { - children?: ReactNode, - /** - * Qual tag Html que deseja que seja usar - * - * @default div + children?: ReactNode, + /** + * Qual tag Html que deseja que seja usar + * + * @default div + */ + tag?: keyof React.ReactHTML + /** + * Classes CSS extras que deseja adicionar. + * Feito para uso de [classes do tachyons](https://tachyons.io/) + */ + tachyonsClasses?: string + /** + * Se caso quiser usar esse componente + * para adicinar um texto simples + */ + text?: string + /** + * Tag ID para */ - tag?: keyof React.ReactHTML - /** - * Classes CSS extras que deseja adicionar. - * Feito para uso de [classes do tachyons](https://tachyons.io/) - */ - tachyonsClasses?: string - /** - * Se caso quiser usar esse componente - * para adicinar um texto simples - */ - text?: string - /** - * Tag ID para - */ - testId?: string + testId?: string } export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); + const { handles } = useCssHandles(CSS_HANDLES); - const props = { - className: `${handles.html} ${classes}`, - "data-testid": testId - }; - const Children = <>{children}{text}; - const Element = React.createElement(tag, props, Children); + const props = { + className: `${handles.html} ${classes}`, + "data-testid": testId + }; + const Children = <>{children}{text}; + const Element = React.createElement(tag, props, Children); - return <>{Element}; + return <>{Element}; }; diff --git a/store/blocks/pdp/product-specifications-table.jsonc b/store/blocks/pdp/product-specifications-table.jsonc index add3a64..1423a49 100644 --- a/store/blocks/pdp/product-specifications-table.jsonc +++ b/store/blocks/pdp/product-specifications-table.jsonc @@ -1,9 +1,5 @@ { - "product-specification-group#table": { - "children": [ - "flex-layout.row#spec-group" - ] - }, + "flex-layout.row#spec-group": { "props": { "blockClass": "productSpecificationGroup" diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..a1e837d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,8 +4,6 @@ "html#breadcrumb", "condition-layout.product#availability", "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] @@ -18,14 +16,7 @@ }, "children": ["breadcrumb"] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { - "props": { - "text": "##### Product Specifications" - } - }, + "flex-layout.row#description": { "props": { "marginBottom": 7 @@ -34,6 +25,7 @@ }, "condition-layout.product#availability": { "props": { + "blockClass": "availability", "conditions": [ { "subject": "isProductAvailable" @@ -78,7 +70,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, @@ -96,25 +88,25 @@ }, "flex-layout.col#right-col": { "props": { + "blockClass": "right-col", "preventVerticalStretch": true, "rowGap": 0 }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", "product-separator", - "product-identifier.product", + "availability-subscriber", "sku-selector", "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", - "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" ] }, @@ -127,6 +119,9 @@ "sku-selector": { "props": { + "blockClass": "sku-selector", + "imageHeight": 48, + "imageWidth": 48, "variationsSpacing": 3, "showValueNameForImageVariation": true } @@ -161,8 +156,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { @@ -170,16 +165,5 @@ "blockClass": "message-availability" }, "children": ["availability-subscriber"] - }, - - "share#default": { - "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } - } } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..47a79e9 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -1,6 +1,7 @@ { "flex-layout.row#selling-price": { "props": { + "blockClass": "selling-price", "colGap": 2, "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, @@ -13,15 +14,16 @@ "flex-layout.row#list-price-savings": { "props": { + "blockClass": "list-price-savings", "colGap": 2, "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, "marginBottom": 2, "marginTop": 5 - }, - "children": [ - "product-list-price", - "product-price-savings" - ] + } + // "children": [ + // "product-list-price", + // "product-price-savings" + // ] } } diff --git a/styles/configs/font-faces.scss b/styles/configs/font-faces.scss new file mode 100644 index 0000000..6db8519 --- /dev/null +++ b/styles/configs/font-faces.scss @@ -0,0 +1,4 @@ +@font-face { + font-family: "Open Sans", "sans-serif"; + src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..f486303 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -253,84 +253,84 @@ "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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, 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", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..5a011b9 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -7,10 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; +.b--action-primary { + border-color: black; } \ No newline at end of file diff --git a/styles/css/global.css b/styles/css/global.css new file mode 100644 index 0000000..755991f --- /dev/null +++ b/styles/css/global.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 */ +* { + background-color: 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..610bc6f --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,68 @@ +@charset "UTF-8"; +/* +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 { + padding: 16px 40px; +} +.container .homeLink { + display: none; +} +.container .arrow--1 { + padding: 0; + text-align: start; +} +.container .arrow--1 .caretIcon { + display: none; +} +.container .arrow--1 .link--1 { + padding: 0; + font-size: 0; +} +.container .arrow--1 .link--1::before { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .arrow--2 { + padding: 0; + text-align: start; +} +.container .arrow--2 .caretIcon { + margin: 0 8px; +} +.container .arrow--2 .link--2 { + padding: 0; + font-size: 0; +} +.container .arrow--2 .link--2::before { + content: "Sapatos"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .termArrow { + margin: 0 8px; + padding: 0; +} +.container .term { + padding: 0; + text-align: start; + font-size: 0; +} +.container .term::before { + content: "Sandálias"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..7601ecb 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,30 @@ -.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 */ +.flexRowContent { + padding: 0; + margin: 0; + width: 100%; } - -@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 { +.flexRowContent .productNameContainer--quickview { display: flex; - max-height: 100%; + text-align: end; +} +.flexRowContent .flexCol--right-col .flexColChild--right-col .list-price-savings { + display: none; } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; +.flexRowContent--message-availability { + margin-top: 24px; + width: 375px; } -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +.sellingPriceValue { + font-size: 50px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..3466fe3 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,23 @@ +/* +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 { - margin-bottom: 1rem; + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); } +.product-identifier--productReference .product-identifier__label { + display: none; +} +.product-identifier--productReference .product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..b9db5c7 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,32 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; +/* +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 */ +.sellingPrice--hasListPrice { font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; + font-weight: 300; + font-size: 16px; + line-height: 22px; + color: #929292; } - -.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; +.installments .installmentsNumber { + font-weight: 700; + font-size: 16px; + line-height: 22px; } +.installments .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..ec840b8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,102 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.container { + margin: 0; + padding: 0 40px; + max-width: 100%; + /* TITULO, NOME DO PRODUTO */ + /* TAMANHO E CORES DOS PRODUTOS */ +} +.container .productNameContainer--quickview { + text-align: end; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} +.container .skuSelectorContainer--sku-selector { + display: flex; + flex-direction: column-reverse; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector { + height: 40px; + width: 40px; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .frameAround--sku-selector { + height: 40px; + width: 40px; + border-radius: 50%; + top: 0; + bottom: 0; + left: 0; + right: 0; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector { + border-radius: 50%; + border: 1px solid #989898; + height: 40px; + width: 40px; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector:focus { + border-color: black; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector .valueWrapper--sku-selector { + position: absolute; + left: -4px; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorNameSeparator { + color: #929292; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--sku-selector { + height: 48px; + width: 48px; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .frameAround--sku-selector { + border-radius: 50%; +} +.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorInternalBox--sku-selector { + border-radius: 50%; +} +.container .subscriberContainer .form .content { + display: block; + position: relative; +} +.container .subscriberContainer .form .content .inputName { + width: 185px; + height: 40px; +} +.container .subscriberContainer .form .content .inputName .vtex-input .flex-row { + border: none; +} +.container .subscriberContainer .form .content .inputEmail { + width: 185px; + height: 40px; + position: absolute; + top: 0%; + left: 51%; +} +.container .subscriberContainer .form .content .submit { + width: 100%; } \ 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..94f6b35 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,11 @@ -.html { - background-color: red; -} +// .html { +// background-color: red; +// } -.html--pdp-breadcrumb { - background-color: green; -} +// .html--pdp-breadcrumb { +// background-color: green; +// } +.b--action-primary { + border-color: black; +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..c54eb2c --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,63 @@ +.container { + padding: 16px 40px; + + .homeLink { + display: none; + } + .arrow--1 { + padding: 0; + text-align: start; + .caretIcon { + display: none; + } + .link--1 { + padding: 0; + font-size: 0; + &::before { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray-6; + } + } + } + + .arrow--2 { + padding: 0; + text-align: start; + + .caretIcon { + margin: 0 8px; + } + .link--2 { + padding: 0; + font-size: 0; + &::before { + content: "Sapatos"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray-6; + } + } + } + + .termArrow { + margin: 0 8px; + padding: 0; + } + + .term { + padding: 0; + text-align: start; + font-size: 0; + &::before { + content: "Sandálias"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray-6; + } + } +} 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..ca6c566 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,25 @@ +.flexRowContent { + padding: 0; + margin: 0; + width: 100%; + + .productNameContainer--quickview { + display: flex; + text-align: end; + } + .flexCol--right-col { + .flexColChild--right-col { + .list-price-savings { + display: none; + } + } + } +} +.flexRowContent--message-availability { + margin-top: 24px; + width: 375px; +} + +.sellingPriceValue { + font-size: 50px; +} 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..9c71e9d --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,15 @@ +.product-identifier--productReference { + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + + .product-identifier__label { + display: none; + } + .product-identifier__separator { + display: none; + } +} 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..084e5de --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,23 @@ +.sellingPrice--hasListPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $color-black-padrao; +} + +.installments { + font-weight: 300; + font-size: 16px; + line-height: 22px; + color: $color-gray-6; + .installmentsNumber { + font-weight: 700; + font-size: 16px; + line-height: 22px; + } + .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..8304319 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,119 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.container { + margin: 0; + padding: 0 40px; + max-width: 100%; + + /* TITULO, NOME DO PRODUTO */ + .productNameContainer--quickview { + text-align: end; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: $color-gray-7; + } + /* TAMANHO E CORES DOS PRODUTOS */ + .skuSelectorContainer--sku-selector { + display: flex; + flex-direction: column-reverse; + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray-6; + text-transform: uppercase; + } + .skuSelectorItem--sku-selector { + height: 40px; + width: 40px; + .frameAround--sku-selector { + height: 40px; + width: 40px; + border-radius: 50%; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + .skuSelectorInternalBox--sku-selector { + border-radius: 50%; + border: 1px solid $color-gray-8; + height: 40px; + width: 40px; + + &:focus { + border-color: black; + } + .valueWrapper--sku-selector { + position: absolute; + left: -4px; + } + } + } + } + + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray-6; + text-transform: uppercase; + } + .skuSelectorNameSeparator { + color: $color-gray-6; + } + .skuSelectorSelectorImageValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray-6; + text-transform: uppercase; + } + + .skuSelectorOptionsList { + .skuSelectorItem--sku-selector { + height: 48px; + width: 48px; + } + + .frameAround--sku-selector { + border-radius: 50%; + } + .skuSelectorInternalBox--sku-selector { + border-radius: 50%; + } + } + } + } + + .subscriberContainer { + .form { + .content { + display: block; + position: relative; + .inputName { + width: 185px; + height: 40px; + .vtex-input { + .flex-row { + border: none; + } + } + } + + .inputEmail { + width: 185px; + height: 40px; + position: absolute; + top: 0%; + left: 51%; + } + + .submit { + width: 100%; + } + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..68947dc 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,5 +1,5 @@ $color-black: #292929; - +$color-black-padrao: #000000; $color-white: #fff; $color-gray: #6c6c6c; @@ -7,6 +7,9 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray-6: #929292; +$color-gray-7: #575757; +$color-gray-8: #989898; $color-blue: #4267b2; @@ -14,18 +17,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;