diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..f3dbc7f --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +node_modules/ +coverage/ +*.snap.ts \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..9713dfd --- /dev/null +++ b/.eslintrc @@ -0,0 +1,7 @@ +{ + "extends": "vtex", + "root": true, + "env": { + "node": true + } +} \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..320bc0c --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +"@vtex/prettier-config" \ No newline at end of file diff --git a/assets/LogoM3Academy.png b/assets/LogoM3Academy.png new file mode 100644 index 0000000..7f904e8 Binary files /dev/null and b/assets/LogoM3Academy.png differ diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 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", diff --git a/package.json b/package.json index 4b65062..e87e00e 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,27 @@ { + "name": "store-theme", + "private": true, "license": "UNLICENSED", - "main": "gulpfile.js", - "directories": { - "doc": "docs" - }, "scripts": { - "dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"", "lint": "eslint ./ --fix", + "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"", + "dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"", "scss": "gulp storefront" }, - "repository": { - "type": "git", - "url": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git" + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "*.{ts,js,tsx,jsx}": [ + "eslint --fix", + "prettier --write" + ], + "*.{json,graphql,gql}": [ + "prettier --write" + ] }, - "keywords": [], - "author": "", "devDependencies": { "eslint": "^7.22.0", "eslint-config-prettier": "^8.1.0", @@ -37,8 +44,18 @@ "prettier": "2.0.2", "typescript": "3.8.3" }, + "main": "gulpfile.js", + "directories": { + "doc": "docs" + }, + "repository": { + "type": "git", + "url": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git" + }, + "keywords": [], + "author": "", "dependencies": { "husky": "^5.2.0", "react": "^17.0.2" } -} +} \ No newline at end of file diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..5276001 --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from './components/Placeholder/Placeholder' + +export default Placeholder diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx index d195271..934f878 100644 --- a/react/components/Example/Example.tsx +++ b/react/components/Example/Example.tsx @@ -1,9 +1,7 @@ -import React from 'react' +import React from "react"; const Example = () => { - return ( -
Example
- ) -} + return
Example
; +}; -export default Example \ No newline at end of file +export default Example; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..594f6ca 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,54 @@ -import React, { ReactNode } from "react"; -import { useCssHandles } from "vtex.css-handles"; +import React, { ReactNode } from 'react' +import { useCssHandles } from 'vtex.css-handles' -const CSS_HANDLES = ["html"] as const; +const CSS_HANDLES = ['html'] as const + +import './style.css' type HtmlProps = { - 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 - */ - testId?: string + 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 + */ + testId?: string } -export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); +export const Html = ({ + children = null, + tag = 'div', + text = '', + tachyonsClasses: classes = '', + testId, +}: HtmlProps) => { + 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/react/components/Html/style.css b/react/components/Html/style.css new file mode 100644 index 0000000..9827e81 --- /dev/null +++ b/react/components/Html/style.css @@ -0,0 +1,64 @@ +[class*='html--Quantity-Button'] { + display: flex; + gap: 10px; + margin-bottom: 16px; +} + +[class*='html--Quantity-Button'] > [class*='html--addButton'] { + width: 100%; +} + +[class*='html--Quantity-Button'] + > [class*='html--addButton'] + > [class*='button'] { + height: 49px; + background: #000; + border: #000; + border-radius: 0; + font-size: 0; +} + +[class*='html--Quantity-Button'] + > [class*='html--addButton'] + > [class*='button'] + > [class*='vtex-button__label'] { + width: 100%; + padding: 0; +} + +[class*='html--Quantity-Button'] + > [class*='html--addButton'] + > [class*='button'] + > [class*='vtex-button__label']::before { + content: 'ADICIONAR À SACOLA'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} + +[class*='html--Prateleira'] { + display: flex; + flex-direction: column; +} + +[class*='html--codigo'] { + margin-bottom: 16px; +} + +[class*='html--product-installments'] { + margin-bottom: 8px; +} + +@media (max-width: 576px) { + [class*='html--Quantity-Button'] { + flex-direction: column; + } +} + +@media (min-width: 577px) { + [class*='html--Quantity-Button'] { + align-items: center; + } +} diff --git a/react/components/Placeholder/Placeholder.tsx b/react/components/Placeholder/Placeholder.tsx new file mode 100644 index 0000000..8fc6add --- /dev/null +++ b/react/components/Placeholder/Placeholder.tsx @@ -0,0 +1,9 @@ +const Placeholder = () => { + if (typeof document !== 'undefined') { + const InputCep = document.querySelector('.vtex-address-form-4-x-input') + InputCep?.setAttribute('placeholder', 'Digite seu CEP') + } + + return null +} +export default Placeholder diff --git a/react/components/pix/pix.css b/react/components/pix/pix.css new file mode 100644 index 0000000..7281087 --- /dev/null +++ b/react/components/pix/pix.css @@ -0,0 +1,23 @@ +.pixwrapper { + display: flex; + flex-direction: row; + align-items: center; +} +.pixPrice { + margin-left: 26px; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} +.pixPrice > p { + margin: 0; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/components/pix/pix.svg b/react/components/pix/pix.svg new file mode 100644 index 0000000..06a7b0c --- /dev/null +++ b/react/components/pix/pix.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/components/pix/pix.tsx b/react/components/pix/pix.tsx new file mode 100644 index 0000000..4025ca4 --- /dev/null +++ b/react/components/pix/pix.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +import { useProduct } from 'vtex.product-context' +import { useCssHandles } from 'vtex.css-handles' + +import './pix.css' + +const Pix = () => { + const CSS_HANDLES = ['pixwrapper', 'pixPrice'] + + const handles = useCssHandles(CSS_HANDLES) + const product = useProduct() + const productPrice = product?.selectedItem?.sellers[0].commertialOffer.Price + + let descontoPixValue = 0 + if (productPrice) descontoPixValue = productPrice * 0.9 + + return ( + <> +
+ image-pix +
+ R$ {descontoPixValue.toFixed(2).toString().replace('.', ',')} +

10 % de desconto

+
+
+ + ) +} + +export default Pix diff --git a/react/package.json b/react/package.json index aa90575..76bee3b 100644 --- a/react/package.json +++ b/react/package.json @@ -24,11 +24,35 @@ "@vtex/tsconfig": "^0.4.4", "graphql": "^14.6.0", "typescript": "3.9.7", - "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime", - "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout", - "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text", - "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide", + "vtex.add-to-cart-button": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.29.0/public/@types/vtex.add-to-cart-button", + "vtex.breadcrumb": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.breadcrumb@1.9.4/public/@types/vtex.breadcrumb", + "vtex.checkout-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-summary@0.22.0/public/@types/vtex.checkout-summary", + "vtex.condition-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.condition-layout@2.6.0/public/@types/vtex.condition-layout", + "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles", + "vtex.login": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.login@2.56.1/public/@types/vtex.login", + "vtex.menu": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.34.25/public/@types/vtex.menu", + "vtex.minicart": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.minicart@2.65.0/public/@types/vtex.minicart", + "vtex.modal-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.modal-layout@0.14.0/public/@types/vtex.modal-layout", + "vtex.my-account": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.25.0/public/@types/vtex.my-account", "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context", - "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles" + "vtex.product-list": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list@0.36.0/public/@types/vtex.product-list", + "vtex.product-quantity": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-quantity@1.9.0/public/@types/vtex.product-quantity", + "vtex.product-review-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-review-interfaces@1.0.2/public/_types/react", + "vtex.product-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.81.0/public/@types/vtex.product-summary", + "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime", + "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.15.0/public/@types/vtex.rich-text", + "vtex.search-result": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-result@3.119.0/public/@types/vtex.search-result", + "vtex.shelf": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shelf@1.47.3/public/@types/vtex.shelf", + "vtex.slider": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider@0.8.3/public/@types/vtex.slider", + "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.23.0/public/@types/vtex.slider-layout", + "vtex.store": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.129.0/public/@types/vtex.store", + "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.164.0/public/@types/vtex.store-components", + "vtex.store-footer": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-footer@2.26.0/public/@types/vtex.store-footer", + "vtex.store-header": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-header@2.29.0/public/@types/vtex.store-header", + "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons", + "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.15.0/public/@types/vtex.store-image", + "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide", + "vtex.tab-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.tab-layout@0.4.3/public/@types/vtex.tab-layout", + "vtex.telemarketing": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.telemarketing@2.12.0/public/@types/vtex.telemarketing" } } diff --git a/react/pix.tsx b/react/pix.tsx new file mode 100644 index 0000000..bb33125 --- /dev/null +++ b/react/pix.tsx @@ -0,0 +1,3 @@ +import pix from "./components/pix/pix"; + +export default pix; diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..9ac901b 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -2,10 +2,16 @@ "extends": "@vtex/tsconfig", "compilerOptions": { "noEmitOnError": false, - "lib": ["dom"], + "lib": [ + "dom" + ], "module": "esnext", "moduleResolution": "node", "target": "es2017" }, - "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] + "include": [ + "./typings/*.d.ts", + "./**/*.tsx", + "./**/*.ts" + ] } \ No newline at end of file diff --git a/react/yarn.lock b/react/yarn.lock index d4b6c43..4b9cbbb 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -774,29 +774,125 @@ use-isomorphic-layout-effect@^1.1.2: resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== +"vtex.add-to-cart-button@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.29.0/public/@types/vtex.add-to-cart-button": + version "0.29.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.29.0/public/@types/vtex.add-to-cart-button#0f09b88092945ba4968bbcad12d0372fb9612953" + +"vtex.breadcrumb@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.breadcrumb@1.9.4/public/@types/vtex.breadcrumb": + version "1.9.4" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.breadcrumb@1.9.4/public/@types/vtex.breadcrumb#624d6ddbd839bccd2b08e10f0f5f4a0509de834b" + +"vtex.checkout-summary@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-summary@0.22.0/public/@types/vtex.checkout-summary": + version "0.22.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-summary@0.22.0/public/@types/vtex.checkout-summary#c6d3dbd76be90cd18c4a6e03a00284dc4f12f352" + +"vtex.condition-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.condition-layout@2.6.0/public/@types/vtex.condition-layout": + version "2.6.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.condition-layout@2.6.0/public/@types/vtex.condition-layout#499861a211a200da6174e2355de934358f3f8339" + "vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles": version "1.0.0" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081" +"vtex.login@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.login@2.56.1/public/@types/vtex.login": + version "2.56.1" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.login@2.56.1/public/@types/vtex.login#7513b3d0a7e51c9440144ff0072709854eb13ee2" + +"vtex.menu@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.34.25/public/@types/vtex.menu": + version "2.34.25" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.34.25/public/@types/vtex.menu#3f4c3aa3b5f8c396d1a630703862d354681ae5a2" + +"vtex.minicart@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.minicart@2.65.0/public/@types/vtex.minicart": + version "2.65.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.minicart@2.65.0/public/@types/vtex.minicart#fa4250a0cfa4628a59a1868dbfc5f735eecd01fb" + +"vtex.modal-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.modal-layout@0.14.0/public/@types/vtex.modal-layout": + version "0.14.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.modal-layout@0.14.0/public/@types/vtex.modal-layout#d5787b816241602f87aa7b57c30f300dd4367105" + +"vtex.my-account@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.25.0/public/@types/vtex.my-account": + version "1.25.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.25.0/public/@types/vtex.my-account#3bc46389c0aa28f4e3e2e008fe3690f5901b1f2a" + "vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context": version "0.10.0" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc" -"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime": - version "8.130.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime#6958e1017c423c0906eae3500bad70d3fb353a98" +"vtex.product-list@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list@0.36.0/public/@types/vtex.product-list": + version "0.36.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list@0.36.0/public/@types/vtex.product-list#9bfd1dffd6a098490cd8b4cd1633979436723e1a" -"vtex.responsive-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout": - version "0.1.2" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout#e33f23a78afb3ffb8ff8aedc77b1ca6728583e72" +"vtex.product-quantity@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-quantity@1.9.0/public/@types/vtex.product-quantity": + version "1.9.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-quantity@1.9.0/public/@types/vtex.product-quantity#686536c85e0bf7af98f803dc4385f959c181bb07" -"vtex.rich-text@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text": - version "0.14.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text#fd31249116da1e0f1caeaa00a44035afa9c91703" +"vtex.product-review-interfaces@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-review-interfaces@1.0.2/public/_types/react": + version "1.0.2" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-review-interfaces@1.0.2/public/_types/react#84d1997cdae079d1401611f3d4a4619ed914673f" -"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide": - version "9.145.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide#41dfb32af8756eb5528dbd452e47003a8f67fe8c" +"vtex.product-summary@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.81.0/public/@types/vtex.product-summary": + version "2.81.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.81.0/public/@types/vtex.product-summary#bbb90d650c759e09c71cce140f1cb4e062d17af5" + +"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime": + version "8.132.4" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime#66bb41bd4d342e37c9d85172aad5f7eefebfb6dc" + +"vtex.rich-text@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.15.0/public/@types/vtex.rich-text": + version "0.15.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.15.0/public/@types/vtex.rich-text#f23416cea64e72531069e58f1b137dfdb5b4b510" + +"vtex.search-result@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-result@3.119.0/public/@types/vtex.search-result": + version "3.119.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-result@3.119.0/public/@types/vtex.search-result#d6d22cc5245d16e24d6e2f2af92ce5b67679e91c" + +"vtex.shelf@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shelf@1.47.3/public/@types/vtex.shelf": + version "1.47.3" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shelf@1.47.3/public/@types/vtex.shelf#afccd7cc6bf2c23d007306062b7413f46b25cbc8" + +"vtex.slider-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.23.0/public/@types/vtex.slider-layout": + version "0.23.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.23.0/public/@types/vtex.slider-layout#cfb7246c982a5133f75a78bba92e3c1b64cae4c4" + +"vtex.slider@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider@0.8.3/public/@types/vtex.slider": + version "0.8.3" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider@0.8.3/public/@types/vtex.slider#9b7be08012a5d3ec41fdc651235a964cb5f7db85" + +"vtex.store-components@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.164.0/public/@types/vtex.store-components": + version "3.164.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.164.0/public/@types/vtex.store-components#ab70608373379c9a405b787c090f93fb42a10011" + +"vtex.store-footer@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-footer@2.26.0/public/@types/vtex.store-footer": + version "2.26.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-footer@2.26.0/public/@types/vtex.store-footer#434f87c10fafb4d145dea1c95906a650d9fab04a" + +"vtex.store-header@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-header@2.29.0/public/@types/vtex.store-header": + version "2.29.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-header@2.29.0/public/@types/vtex.store-header#702033f782c6c25ae2fed42b5a3703db5fd1ac87" + +"vtex.store-icons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons": + version "0.18.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons#0ee94d549aa283ce3a13ab987c13eac4fdfd1bba" + +"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.15.0/public/@types/vtex.store-image": + version "0.15.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.15.0/public/@types/vtex.store-image#5f96a89b8eccce7ac86e487d4c61d96f770bf785" + +"vtex.store@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.129.0/public/@types/vtex.store": + version "2.129.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.129.0/public/@types/vtex.store#09a441473682d1e3ba2459af793e6e99c284d5fa" + +"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide": + version "9.146.3" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide#05558160f29cd8f4aefe419844a4bd66e2b3fdbb" + +"vtex.tab-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.tab-layout@0.4.3/public/@types/vtex.tab-layout": + version "0.4.3" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.tab-layout@0.4.3/public/@types/vtex.tab-layout#579ee7ffabb55ce7ed271b0af1015f41c49b7f30" + +"vtex.telemarketing@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.telemarketing@2.12.0/public/@types/vtex.telemarketing": + version "2.12.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.telemarketing@2.12.0/public/@types/vtex.telemarketing#beda975262b873b778bf5c56b9ff4c2b785f3453" yaml@^1.10.0: version "1.10.2" diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..ec4a516 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,9 +2,9 @@ "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", + "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", "flex-layout.row#shelf", @@ -40,7 +40,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "never", "blockClass": "carousel" } }, diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..34f4233 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -1,10 +1,10 @@ { - "sticky-layout#buy-button": { - "props": { - "position": "bottom" - }, - "children": ["flex-layout.row#buy-button"] - }, + // "sticky-layout#buy-button": { + // "props": { + // "position": "bottom" + // }, + // "children": ["flex-layout.row#buy-button"] + // }, "product-assembly-options": { "children": [ "flex-layout.row#product-assembly-options", @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..667708b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,10 +3,9 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", + "html#tab-layout#desc", "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + "list-context.product-list#demo1", "product-questions-and-answers" ] }, @@ -47,9 +46,7 @@ "props": { "colGap": 7, "rowGap": 7, - "marginTop": 4, "marginBottom": 7, - "paddingTop": 7, "paddingBottom": 7 }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] @@ -60,7 +57,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#product-images", "product-bookmark", "product-specification-badges" ] @@ -78,20 +75,28 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "51%", "rowGap": 0 } }, - "flex-layout.row#product-image": { + + "html#product-images": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "1:1" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, + "showNavigationArrows": false, + "showPaginationDots": false } }, "flex-layout.col#right-col": { @@ -100,46 +105,105 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", + "html#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", - "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "html#selling-price", + "html#product-installments", + "html#pix", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#sku-selector", + "html#quantityAndButton", + "product-gifts", + "html#shipping-simulator", + "Placeholder" ] }, - - "flex-layout.row#product-name": { + "html#selling-price": { "props": { - "marginBottom": 3 + "testId": "product-price" + }, + "children": ["product-selling-price"] + }, + + "html#product-installments": { + "props": { + "testId": "product-installments", + "blockClass": "product-installments" + }, + "children": ["product-installments"] + }, + "html#pix": { + "props": { + "testId": "pix-price", + "blockClass": "pix" + }, + "children": ["pix"] + }, + + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator", + "blockClass": "shippingSimulator" + }, + "children": ["shipping-simulator"] + }, + + "html#product-name": { + "props": { + "marginBottom": 3, + "testId": "product-name", + "blockClass": "productName" }, "children": ["vtex.store-components:product-name"] }, + "pix": { + "props": { + "marginBottom": 16, + "marginTop": 8 + } + }, + + "Parcelamento": { + "props": { + "marginBottom": 8 + } + }, + "sku-selector": { "props": { "variationsSpacing": 3, "showValueNameForImageVariation": true } }, - - "flex-layout.row#buy-button": { + "html#sku-selector": { "props": { - "marginTop": 4, - "marginBottom": 7 + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "html#quantityAndButton": { + "props": { + "blockClass": "Quantity-Button" + }, + "children": ["html#product-quantity", "html#add-to-cart-button"] + }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "addButton" }, "children": ["add-to-cart-button"] }, + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + "flex-layout.row#product-availability": { "props": { "colGap": 7, @@ -159,12 +223,19 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "html#product-name", + "html#codigo", + "flex-layout.row#availability", + "html#sku-selector" ] }, + "html#codigo": { + "props": { + "blockClass": "codigo", + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, "flex-layout.row#availability": { "props": { "blockClass": "message-availability" @@ -172,6 +243,133 @@ "children": ["availability-subscriber"] }, + "flex-layout.col#image-description": { + "props": { + "blockClass": "image-description" + }, + "children": ["image#img-descricao"] + }, + "image#img-descricao": { + "props": { + "blockClass": "img-descricao", + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" + } + }, + + "flex-layout.col#description": { + "props": { "blockClass": "description" }, + "children": ["product-description"] + }, + "product-description": { + "props": { + "collapseContent": false + } + }, + "html#tab-layout#desc": { + "props": { + "testId": "product-description", + "blockClass": "tabDescription" + }, + "children": ["tab-layout#desc"] + }, + + "tab-layout#desc": { + "children": ["tab-list#home", "tab-content#desc"], + "props": { + "blockClass": "desc", + "defaultActiveTabId": "desc1" + } + }, + "tab-list#home": { + "children": [ + "tab-list.item#desc1", + "tab-list.item#desc2", + "tab-list.item#desc3", + "tab-list.item#desc4", + "tab-list.item#desc5" + ] + }, + "tab-list.item#desc1": { + "props": { + "tabId": "desc1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#desc2": { + "props": { + "tabId": "desc2", + "label": "Descrição" + } + }, + "tab-list.item#desc3": { + "props": { + "tabId": "desc3", + "label": "Descrição" + } + }, + "tab-list.item#desc4": { + "props": { + "tabId": "desc4", + "label": "Descrição" + } + }, + "tab-list.item#desc5": { + "props": { + "tabId": "desc5", + "label": "Descrição" + } + }, + "tab-content#desc": { + "children": [ + "tab-content.item#desc1", + "tab-content.item#desc2", + "tab-content.item#desc3", + "tab-content.item#desc4", + "tab-content.item#desc5" + ] + }, + "tab-content.item#desc1": { + "children": ["flex-layout.row#description-row"], + "props": { + "tabId": "desc1" + } + }, + "tab-content.item#desc2": { + "children": ["flex-layout.row#description-row"], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc3": { + "children": ["flex-layout.row#description-row"], + "props": { + "tabId": "desc3" + } + }, + "tab-content.item#desc4": { + "children": ["flex-layout.row#description-row"], + "props": { + "tabId": "desc4" + } + }, + "tab-content.item#desc5": { + "children": ["flex-layout.row#description-row"], + "props": { + "tabId": "desc5" + } + }, + + "flex-layout.row#description-row": { + "props": { + "blockClass": "description-row" + }, + "children": [ + "flex-layout.col#image-description", + "flex-layout.col#description" + ] + }, + "share#default": { "props": { "social": { @@ -181,5 +379,59 @@ "Pinterest": true } } + }, + + "list-context.product-list#demo1": { + "blocks": ["product-summary.shelf#demo1"], + "children": ["html#slider-layout"] + }, + + "product-summary.shelf#demo1": { + "children": ["html#sliderPrateleira"] + }, + + "product-summary-image": { + "props": { + "aspectRatio": { + "desktop": "1:1" + } + } + }, + + "html#sliderPrateleira": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "Prateleira" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-list-price", + "product-selling-price" + ] + }, + "product-list-price": { + "props": { + "markers": ["discount"] + } + }, + "html#slider-layout": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#demo-products"] + }, + + "slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel" + } } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..bb528e8 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -3,12 +3,9 @@ "props": { "colGap": 2, "preserveLayoutOnMobile": true, - "preventHorizontalStretch": true, - "marginBottom": 4 + "preventHorizontalStretch": true }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +16,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..bb93cc8 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..7cab0ea 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,10 +120,10 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", - "showNavigationArrows": true + "showNavigationArrows": "never" } } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..a40473f 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,15 @@ "html": { "component": "html", "composition": "children" + }, + "pix": { + "component": "pix" + }, + + "Parcelamento": { + "component": "Parcelamento" + }, + "Placeholder": { + "component": "Placeholder" } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex-numeric-stepper.css b/styles/css/vtex-numeric-stepper.css new file mode 100644 index 0000000..8a4fd1b --- /dev/null +++ b/styles/css/vtex-numeric-stepper.css @@ -0,0 +1,13 @@ +/* +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 { + background: red; + padding: 8.5px 0; +} \ No newline at end of file diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..089b934 --- /dev/null +++ b/styles/css/vtex.address-form.css @@ -0,0 +1,13 @@ +/* +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 */ +.__postalCode { + display: flex; + width: 100%; +} \ No newline at end of file diff --git a/styles/css/vtex.address.css b/styles/css/vtex.address.css new file mode 100644 index 0000000..34c4328 --- /dev/null +++ b/styles/css/vtex.address.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.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..dd3cefe --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,39 @@ +/* +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: 0 40px; + margin: 0 auto; + max-width: 96rem; +} +.container .homeLink .homeIcon { + display: none; +} +.container .homeLink::before { + content: "Home"; + font-size: 16px; + color: #929292; +} +.container .homeLink:hover::before { + color: #0f3e99; +} +.container .arrow--1 .link { + font-size: 0; +} +.container .arrow--1 .link::before { + content: "Sapatos"; + font-size: 16px; + color: #929292; +} +.container .arrow--1 .link:hover::before { + color: #0f3e99; +} +.container .term { + padding-right: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..f3c7cb1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,78 @@ -.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 { +/* +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 */ +.flexRow--message-availability { display: flex; - max-height: 100%; + order: 0; } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; +:global(.vtex-store-components-3-x-container) { + padding: 0 40px; +} +@media (max-width: 1024px) { + :global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: column; + } +} +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselContainer) { + margin-bottom: 32px; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { + max-height: none; } -.flexColChild--quickviewDetails:last-child { - height: 34% !important; +.flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { + margin-left: 32px; +} +@media (min-width: 1920px) { + .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } +} +.flexColChild :global(.vtex-store-components-3-x-productDescriptionText) { + margin-left: 32px; +} +@media (min-width: 1920px) { + .flexColChild :global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } +} +.flexColChild :global(.vtex-store-components-3-x-container) { + padding: 0 32px; +} +.flexColChild .agenciamagma-store-theme-5-x-html--Quantity-Button { + display: flex; } -.flexRow--addToCartRow { - padding-bottom: 1rem; +@media (max-width: 1024px) { + .flexColChild--image-description :global(.vtex-store-components-3-x-imageElement) { + width: 100%; + } } + +.flexRowContent { + margin: 0 auto; + padding: 16px 0 0; +} + +@media (max-width: 1024px) { + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } +} \ No newline at end of file diff --git a/styles/css/vtex.numeric-stepper.css b/styles/css/vtex.numeric-stepper.css new file mode 100644 index 0000000..a15666e --- /dev/null +++ b/styles/css/vtex.numeric-stepper.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 */ +.wrapper { + height: 80px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..7adbacc 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,29 @@ -.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 { + display: flex; + justify-content: flex-start; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); } +@media (min-width: 1025px) { + .product-identifier { + justify-content: flex-end; + } +} +.product-identifier .product-identifier__label, +.product-identifier .product-identifier__separator { + display: none; +} \ 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..4bfb790 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,45 @@ +/* +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 */ +.quantitySelectorContainer { + margin: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..c665577 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -6,4 +7,22 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + justify-content: center; + padding: 16px 0; +} +.container .heading { + font-size: 0; + text-align: center; +} +.container .heading::before { + content: "Você também pode gostar:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ 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..34c4328 --- /dev/null +++ b/styles/css/vtex.shelf.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.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..82dbcde 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,210 @@ +/* +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 { + padding: 0 40px 32px; + margin: 0 auto 32px; + max-width: 96rem; +} +.sliderLayoutContainer .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; +} +@media (max-width: 500px) { + .sliderLayoutContainer .sliderLeftArrow { + left: 33px; + } +} +@media (max-width: 374px) { + .sliderLayoutContainer .sliderLeftArrow { + left: 24px; + } +} +.sliderLayoutContainer .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; +} +@media (max-width: 500px) { + .sliderLayoutContainer .sliderRightArrow { + right: 33px; + } +} +@media (max-width: 374px) { + .sliderLayoutContainer .sliderRightArrow { + right: 24px; + } +} +.sliderLayoutContainer .sliderTrackContainer { + margin: 0 auto; + width: 94%; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 2px; +} +@media (min-width: 300px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 8px; + } +} +@media (min-width: 500px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 16px; + } +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { + margin: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) { + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + width: 100%; + min-height: 94px; + height: 100%; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + padding: 0; justify-content: center; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 132px; + align-items: center; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; } - -.sliderTrackContainer { - max-width: 100%; +@media (min-width: 500px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + height: 50px; + } } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +@media (max-width: 300px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 16px; + } } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + margin: 0; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +@media (max-width: 374px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) { + height: 38px; + } } +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer) { + position: relative; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer)::before { + content: ""; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; + left: -8px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer)::after { + content: ""; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPriceValue)::before { + content: "de"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-right: 8px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPriceValue)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-left: 8px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) { + display: flex; + padding: 0; + justify-content: center; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; +} +@media (max-width: 349px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) { + font-size: 18px; + } +} +.sliderLayoutContainer .paginationDotsContainer { + align-items: center; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: #000; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { + background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..74c82ce 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,6 +8,474 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.productImagesGallerySlide { + width: 100%; + height: 100%; +} +.productImagesGallerySlide .productImage { + width: 100%; + height: 100%; +} +.productImagesGallerySlide .productImage .productImageTag { + max-height: none !important; +} +@media (min-width: 1025px) { + .productImagesGallerySlide .productImage .productImageTag { + width: 100% !important; + height: fit-content; + } +} + +.carouselGaleryThumbs { + display: flex !important; + margin-top: 16px; +} +.carouselGaleryThumbs :first-child { + display: flex !important; + justify-content: flex-start; + margin: 0; +} +.carouselGaleryThumbs :first-child :first-child { + gap: 16px !important; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb { + width: fit-content; + height: fit-content; + margin: 0; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure { + height: fit-content; + margin: 0; + padding: 0; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg, +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg--video { + border-radius: 8px; + width: 100%; + min-width: 90px; + height: 100%; + max-height: 90px; + padding: 0; + margin: 0; +} + +.productBrand { + display: flex; + justify-content: flex-start; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} +@media (min-width: 1025px) { + .productBrand { + justify-content: flex-end; + } +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin: 16px 0; +} +.skuSelectorContainer .frameAround { + width: 43px; + height: 43px; + border-radius: 1.5rem; + z-index: 3; + padding: 0; + border-color: #000; + top: -3%; + left: -1px; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + gap: 16px; + margin-left: 0 !important; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTRAS CORES"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + gap: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; +} + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + padding-bottom: 16px; + max-width: 280px; + width: 100%; +} +@media (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + margin-bottom: 16px; + } +} +@media (max-width: 500px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + flex-direction: column; + padding-bottom: 24px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + display: flex; + flex-direction: column; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 100%; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; + bottom: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; +} +@media (min-width: 501px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + left: 361px; + top: 41.5px; + } +} +@media (max-width: 500px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + width: inherit; + height: fit-content; + bottom: 16px; + top: none; + left: none; + justify-content: end; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: #000; + text-decoration: underline; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child { + display: none; +} +.shippingContainer :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-top: 11px; + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; +} +@media (max-width: 1024px) { + .shippingContainer :global(.vtex-button) { + margin-top: 0; + margin-bottom: 5px; + } +} +@media (max-width: 500px) { + .shippingContainer :global(.vtex-button) { + margin-bottom: 13px; + } +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #fff; +} + +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; +} +.shippingTable .shippingTableHead { + display: flex; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + font-weight: 400 !important; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + order: 2; + font-weight: 400 !important; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { + content: "FRETE"; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; +} +.shippingTable .shippingTableBody { + display: flex; + flex-direction: column; + gap: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + order: 2; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + width: 108px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { + display: none; +} + +.subscriberContainer { + padding-bottom: 56px; +} +.subscriberContainer .title { + font-size: 0; + margin-bottom: 0; + border: none; +} +.subscriberContainer .title::before { + content: "Produto indisponível"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .form .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; +} +.subscriberContainer .form .content .input { + margin: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + border-radius: 0; +} +.subscriberContainer .form .content .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) { + padding: 12px; + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::before { + content: "avise-me"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; +} + +@media (max-width: 1024px) { + .productDescriptionContainer { + position: relative; + padding: 16px 0; + } + .productDescriptionContainer::before { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + } } \ 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..90a380d --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,100 @@ +/* +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 */ +.listContainer { + margin: 0 auto 32px; + max-width: 96rem; + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 0 40px; +} +.listContainer::after { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + bottom: 9px; +} +@media (max-width: 1024px) { + .listContainer { + flex-direction: column; + padding: 0 40px 16px; + margin-bottom: 0px; + } + .listContainer::before { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + } + .listContainer::after { + bottom: 0px; + } +} + +.listItem :global(.vtex-button) { + background-color: white; + color: #bfbfbf; + border: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; +} +@media (min-width: 1920px) { + .listItem :global(.vtex-button) { + font-size: 24px; + line-height: 38px; + } +} + +@media (max-width: 1024px) { + .listItem { + margin: 0; + padding: 8px 0; + } + .listItem :global(.vtex-button) { + margin: 0; + padding: 0 !important; + } + .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0 !important; + } +} + +.listItemActive :global(.vtex-button) { + background-color: white; + color: black; + border: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} +@media (min-width: 1025px) { + .listItemActive :global(.vtex-button) { + border-bottom: 3px black solid; + } +} +@media (min-width: 1920px) { + .listItemActive :global(.vtex-button) { + font-size: 24px; + line-height: 38px; + } +} \ 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..8b13789 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..6bd8a23 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,35 @@ +.container { + padding: 0 40px; + margin: 0 auto; + max-width: 96rem; + + .homeLink { + .homeIcon { + display: none; + } + } + .homeLink::before { + content: 'Home'; + font-size: 16px; + color: #929292; + } + .homeLink:hover::before { + color: #0f3e99; + } + .arrow--1 { + .link { + font-size: 0; + } + .link::before { + content: 'Sapatos'; + font-size: 16px; + color: #929292; + } + .link:hover::before { + color: #0f3e99; + } + } + .term { + padding-right: 0; + } +} 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..7d82dbb --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,67 @@ +.flexRow--message-availability { + display: flex; + order: 0; +} + +:global(.vtex-store-components-3-x-container) { + padding: 0 40px; + :global(.vtex-flex-layout-0-x-flexRowContent) { + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } + } + :global(.vtex-store-components-3-x-carouselContainer) { + margin-bottom: 32px; + } + + :global(.vtex-store-components-3-x-productImageTag) { + max-height: none; + } +} +.flexColChild { + :global(.vtex-store-components-3-x-productDescriptionTitle) { + margin-left: 32px; + @media (min-width: 1920px) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } + } + + :global(.vtex-store-components-3-x-productDescriptionText) { + margin-left: 32px; + @media (min-width: 1920px) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + } + :global(.vtex-store-components-3-x-container) { + padding: 0 32px; + } + .agenciamagma-store-theme-5-x-html--Quantity-Button { + display: flex; + } +} +.flexColChild--image-description { + :global(.vtex-store-components-3-x-imageElement) { + @media (max-width: 1024px) { + width: 100%; + } + } +} +.flexRowContent { + margin: 0 auto; + padding: 16px 0 0; +} +.stretchChildrenWidth { + @media (max-width: 1024px) { + width: 100% !important; + padding: 0; + } +} diff --git a/styles/sass/pages/product/vtex.numeric-stepper.scss b/styles/sass/pages/product/vtex.numeric-stepper.scss new file mode 100644 index 0000000..db39b3b --- /dev/null +++ b/styles/sass/pages/product/vtex.numeric-stepper.scss @@ -0,0 +1,3 @@ +.wrapper { + height: 80px; +} 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..301439e --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,22 @@ +.product-identifier { + display: flex; + justify-content: flex-start; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + + color: rgba(146, 146, 146, 0.48); + + @media (min-width: 1025px) { + justify-content: flex-end; + } + + .product-identifier__label, + .product-identifier__separator { + display: none; + } +} 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..90370b1 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,41 @@ +.quantitySelectorContainer { + margin: 0; + .quantitySelectorTitle { + display: none; + } + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; + + :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; + } + :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..a2e1c4a 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,22 @@ +.container { + justify-content: center; + padding: 16px 0; + + .heading { + font-size: 0; + text-align: center; + } + + .heading::before { + content: 'Você também pode gostar:'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + text-align: center; + + color: #575757; + } +} 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..2d91b18 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,192 @@ +.sliderLayoutContainer { + padding: 0 40px 32px; + margin: 0 auto 32px; + max-width: 96rem; + .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; + @media (max-width: 500px) { + left: 33px; + } + @media (max-width: 374px) { + left: 24px; + } + } + .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; + @media (max-width: 500px) { + right: 33px; + } + @media (max-width: 374px) { + right: 24px; + } + } + .sliderTrackContainer { + margin: 0 auto; + width: 94%; + .sliderTrack { + gap: 2px; + @media (min-width: 300px) { + gap: 8px; + } + @media (min-width: 500px) { + gap: 16px; + } + .slide { + .slideChildrenContainer { + :global(.vtex-product-summary-2-x-container) { + margin: 0; + :global(.vtex-product-summary-2-x-element) { + padding: 0; + :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + :global(.vtex-store-components-3-x-discountContainer) { + :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-imageContainer) { + :global(.vtex-product-summary-2-x-imageNormal) { + width: 100%; + min-height: 94px; + height: 100%; + } + } + } + } + :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + padding: 0; + justify-content: center; + :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 132px; + align-items: center; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; + @media (min-width: 500px) { + height: 50px; + } + @media (max-width: 300px) { + font-size: 16px; + } + } + } + :global(.vtex-product-price-1-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + margin: 0; + + @media (max-width: 374px) { + height: 38px; + } + + :global(.vtex-product-price-1-x-listPriceValue) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding: 0; + } + :global(.vtex-product-price-1-x-currencyContainer) { + position: relative; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding: 0; + &::before { + content: ''; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; + left: -8px; + } + &::after { + content: ''; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; + } + } + } + :global(.vtex-product-price-1-x-listPriceValue)::before { + content: 'de'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-right: 8px; + } + :global(.vtex-product-price-1-x-listPriceValue)::after { + content: 'por'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-left: 8px; + } + :global(.vtex-product-price-1-x-sellingPrice) { + display: flex; + padding: 0; + justify-content: center; + :global(.vtex-product-price-1-x-sellingPriceValue) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + + @media (max-width: 349px) { + font-size: 18px; + } + } + } + } + } + } + } + } + } + .paginationDotsContainer { + align-items: center; + .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + } + .paginationDot--isActive { + background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..3bf3522 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,464 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.productImagesGallerySlide { + width: 100%; + height: 100%; + .productImage { + width: 100%; + height: 100%; + .productImageTag { + @media (min-width: 1025px) { + width: 100% !important; + height: fit-content; + } + max-height: none !important; + } + } +} +.carouselGaleryThumbs { + display: flex !important; + margin-top: 16px; + :first-child { + display: flex !important; + justify-content: flex-start; + margin: 0; + :first-child { + gap: 16px !important; + .productImagesThumb { + width: fit-content; + height: fit-content; + margin: 0; + .figure { + height: fit-content; + margin: 0; + padding: 0; + .thumbImg, + .thumbImg--video { + border-radius: 8px; + width: 100%; + min-width: 90px; + height: 100%; + max-height: 90px; + padding: 0; + margin: 0; + } + } + } + } + } +} +.productBrand { + display: flex; + justify-content: flex-start; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; + @media (min-width: 1025px) { + justify-content: flex-end; + } +} +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin: 16px 0; + .frameAround { + width: 43px; + height: 43px; + border-radius: 1.5rem; + z-index: 3; + padding: 0; + border-color: #000; + top: -3%; + left: -1px; + } + .skuSelectorInternalBox { + border-radius: 50%; + } + .skuSelectorSubcontainer--cor { + margin: 0; + .skuSelectorNameContainer { + margin: 0; + .skuSelectorOptionsList { + gap: 16px; + margin-left: 0 !important; + .skuSelectorItem { + margin: 0; + } + } + .skuSelectorTextContainer { + .skuSelectorName, + .skuSelectorSelectorImageValue { + font-size: 0; + } + .skuSelectorName::before { + content: 'OUTRAS CORES'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } + } + .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorNameContainer { + margin: 0; + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + &::after { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: 'OUTROS TAMANHOS: '; + color: #929292; + } + } + } + .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + gap: 16px; + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: #000000; + } + } + } + } + } + } +} +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; + :global(.vtex-address-form__postalCode) { + display: flex; + padding-bottom: 16px; + max-width: 280px; + width: 100%; + @media (max-width: 1024px) { + margin-bottom: 16px; + } + @media (max-width: 500px) { + flex-direction: column; + padding-bottom: 24px; + } + :global(.vtex-input) { + display: flex; + flex-direction: column; + :global(.vtex-input__label) { + font-size: 0; + } + :global(.vtex-input__label)::before { + content: 'CALCULAR FRETE:'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + :global(.vtex-input-prefix__group) { + width: 100%; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + border: 1px solid #cccccc; + border-radius: 0; + :global(.vtex-address-form-4-x-input) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; + } + } + :global(.vtex-input__error) { + position: absolute; + bottom: 0; + } + } + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + @media (min-width: 501px) { + left: 361px; + top: 41.5px; + } + @media (max-width: 500px) { + width: inherit; + height: fit-content; + bottom: 16px; + top: none; + left: none; + justify-content: end; + } + :last-child { + color: #000; + text-decoration: underline; + :last-child { + display: none; + } + } + } + } + :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-top: 11px; + @media (max-width: 1024px) { + margin-top: 0; + margin-bottom: 5px; + } + @media (max-width: 500px) { + margin-bottom: 13px; + } + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; + :global(.vtex-button__label) { + padding: 0; + font-size: 0; + } + :global(.vtex-button__label)::before { + content: 'OK'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #fff; + } + } +} +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; + .shippingTableHead { + display: flex; + .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + .shippingTableHeadDeliveryName { + font-weight: 400 !important; + } + .shippingTableHeadDeliveryEstimate { + order: 2; + font-weight: 400 !important; + } + .shippingTableHeadDeliveryPrice { + font-size: 0; + } + .shippingTableHeadDeliveryPrice::before { + content: 'FRETE'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; + } + } + } + .shippingTableBody { + display: flex; + flex-direction: column; + gap: 15px; + .shippingTableRow { + display: flex; + .shippingTableCell { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; + } + .shippingTableCellDeliveryEstimate { + order: 2; + } + .shippingTableCellDeliveryPrice { + width: 108px; + } + .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } + } +} +.subscriberContainer { + padding-bottom: 56px; + + .title { + font-size: 0; + margin-bottom: 0; + border: none; + } + .title::before { + content: 'Produto indisponível'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + + color: #868686; + } + .subscribeLabel { + font-size: 0; + } + .subscribeLabel::before { + content: 'Deseja saber quando estiver disponível?'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } + .form { + .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; + .input { + margin: 0; + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; + :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + } + } + } + } + .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; + :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; + :global(.vtex-button__label) { + padding: 12px; + font-size: 0; + } + :global(.vtex-button__label)::before { + content: 'avise-me'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; + } + } + } + } + } +} +.productDescriptionContainer { + @media (max-width: 1024px) { + position: relative; + padding: 16px 0; + &::before { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + } + } +} 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..851d7a4 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,82 @@ +.listContainer { + margin: 0 auto 32px; + max-width: 96rem; + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 0 40px; + + &::after { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + bottom: 9px; + } + @media (max-width: 1024px) { + flex-direction: column; + padding: 0 40px 16px; + margin-bottom: 0px; + + &::before { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + } + &::after { + bottom: 0px; + } + } +} +.listItem :global(.vtex-button) { + background-color: white; + color: #bfbfbf; + border: 0; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; + @media (min-width: 1920px) { + font-size: 24px; + line-height: 38px; + } +} +.listItem { + @media (max-width: 1024px) { + margin: 0; + padding: 8px 0; + :global(.vtex-button) { + margin: 0; + padding: 0 !important; + :global(.vtex-button__label) { + padding: 0 !important; + } + } + } +} +.listItemActive :global(.vtex-button) { + background-color: white; + color: black; + border: 0; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + @media (min-width: 1025px) { + border-bottom: 3px black solid; + } + @media (min-width: 1920px) { + font-size: 24px; + line-height: 38px; + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..e0173bb 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -7,6 +7,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #929292; $color-blue: #4267b2; @@ -14,18 +15,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;