From f3951d62b20871540d5706674483c1a6aaad2952 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 2 Feb 2023 16:04:52 -0300 Subject: [PATCH 01/27] =?UTF-8?q?feat:=20Adicionado=20a=20descri=C3=A7?= =?UTF-8?q?=C3=A3o=20de=20produto=20com=20a=20aba?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - package.json | 19 +- react/ProductDescription.tsx | 3 + .../ProductDescription/ProductDescription.tsx | 7 + store/blocks/pdp/product.jsonc | 66 +++- store/interfaces.json | 3 + styles/css/agenciamagma.store-theme.css | 2 +- styles/css/vtex.breadcrumb.css | 16 + styles/css/vtex.store-components.css | 4 +- styles/css/vtex.tab-layout.css | 4 + .../product/agenciamagma.store-theme.scss | 3 +- .../sass/pages/product/vtex.breadcrumb.scss | 8 + .../pages/product/vtex.store-components.scss | 6 +- yarn.lock | 359 +++++++++++++++++- 14 files changed, 466 insertions(+), 35 deletions(-) create mode 100644 react/ProductDescription.tsx create mode 100644 react/components/ProductDescription/ProductDescription.tsx create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss 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..b5eed60 100644 --- a/package.json +++ b/package.json @@ -16,28 +16,31 @@ "keywords": [], "author": "", "devDependencies": { + "@typescript-eslint/eslint-plugin": "^4.18.0", + "@typescript-eslint/parser": "^4.18.0", + "@vtex/prettier-config": "0.1.4", + "concurrently": "^6.0.0", "eslint": "^7.22.0", "eslint-config-prettier": "^8.1.0", + "eslint-config-vtex": "12.3.2", + "eslint-config-vtex-react": "^6.2.1", "eslint-plugin-prettier": "^3.3.1", + "eslint-plugin-react": "^7.23.1", "glob": "^7.1.6", "gulp": "^4.0.2", "gulp-concat": "^2.6.1", "gulp-sass": "^5.0.0", "gulp-wait": "0.0.2", - "sass": "^1.37.5", - "concurrently": "^6.0.0", - "@typescript-eslint/eslint-plugin": "^4.18.0", - "@typescript-eslint/parser": "^4.18.0", - "@vtex/prettier-config": "0.1.4", - "eslint-config-vtex": "12.3.2", - "eslint-config-vtex-react": "^6.2.1", - "eslint-plugin-react": "^7.23.1", "husky": "^5.2.0", "lint-staged": "10.1.1", "prettier": "2.0.2", + "sass": "^1.37.5", "typescript": "3.8.3" }, "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/material": "^5.11.7", "husky": "^5.2.0", "react": "^17.0.2" } diff --git a/react/ProductDescription.tsx b/react/ProductDescription.tsx new file mode 100644 index 0000000..9a2edfb --- /dev/null +++ b/react/ProductDescription.tsx @@ -0,0 +1,3 @@ +import { ProductDescription } from "./components/ProductDescription/ProductDescription"; + +export default ProductDescription; diff --git a/react/components/ProductDescription/ProductDescription.tsx b/react/components/ProductDescription/ProductDescription.tsx new file mode 100644 index 0000000..ca68644 --- /dev/null +++ b/react/components/ProductDescription/ProductDescription.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const ProductDescription = () => { + return
Oaswq
; +}; + +export { ProductDescription }; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..17b739f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,7 +5,9 @@ "condition-layout.product#availability", "flex-layout.row#description", "flex-layout.row#specifications-title", - "product-specification-group#table", + + "tab-layout#product", + "shelf.relatedProducts", "product-questions-and-answers" ] @@ -19,7 +21,7 @@ "children": ["breadcrumb"] }, "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] + "children": [] }, "rich-text#specifications": { "props": { @@ -30,7 +32,7 @@ "props": { "marginBottom": 7 }, - "children": ["product-description"] + "children": [] }, "condition-layout.product#availability": { "props": { @@ -91,7 +93,18 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": false, + "displayMode": "list" + } + }, + "product-images#descricao": { + "props": { + "aspectRatio": { + "desktop": "auto", + "phone": "16:9" + }, + "displayThumbnailsArrows": false, + "displayMode": "first-image" } }, "flex-layout.col#right-col": { @@ -113,8 +126,7 @@ "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" ] }, @@ -172,14 +184,42 @@ "children": ["availability-subscriber"] }, - "share#default": { + "tab-layout#product": { + "children": ["tab-list#product", "tab-content#product"], "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } + "blockClass": "product", + "defaultActiveTabId": "product1" + } + }, + "tab-list#product": { + "children": ["tab-list.item#product1", "tab-list.item#product2"] + }, + "tab-list.item#product1": { + "props": { + "tabId": "product1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#product2": { + "props": { + "tabId": "product2", + "label": "Descrição" + } + }, + "tab-content#product": { + "children": ["tab-content.item#product1", "tab-content.item#product2"] + }, + "tab-content.item#product1": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product1" + } + }, + "tab-content.item#product2": { + "children": ["product-description"], + "props": { + "tabId": "product2" } } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..f5b5636 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "product-description-component": { + "component": "ProductDescription" } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..1dd7d62 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -12,5 +12,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: blue; } \ 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..58f9518 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,16 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.homeIcon { + display: none; +} + +.homeLink::after { + content: "Home"; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..0972b45 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,6 @@ /* Grid breakpoints */ .newsletter { background: red; -} \ No newline at end of file +} +.productImagesContainer { +} diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..ae31ca0 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,4 @@ +.contentItem { + display: flex; + flex-direction: row; +} diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..2afcc5b 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -3,6 +3,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: blue; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..80c6236 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,8 @@ +.homeIcon { + display: none; +} +.homeLink { + &::after { + content: "Home"; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..b064643 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,3 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.productImageTag--main { + display: none; +} diff --git a/yarn.lock b/yarn.lock index 9ca681c..518ab58 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16,7 +16,24 @@ dependencies: "@babel/highlight" "^7.18.6" -"@babel/helper-validator-identifier@^7.18.6": +"@babel/helper-module-imports@^7.16.7": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" + integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== + dependencies: + "@babel/types" "^7.18.6" + +"@babel/helper-plugin-utils@^7.18.6": + version "7.20.2" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629" + integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ== + +"@babel/helper-string-parser@^7.19.4": + version "7.19.4" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63" + integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw== + +"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1": version "7.19.1" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2" integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w== @@ -30,6 +47,20 @@ chalk "^2.0.0" js-tokens "^4.0.0" +"@babel/plugin-syntax-jsx@^7.17.12": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0" + integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q== + dependencies: + "@babel/helper-plugin-utils" "^7.18.6" + +"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": + version "7.20.13" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b" + integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/runtime@^7.20.7": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd" @@ -37,6 +68,123 @@ dependencies: regenerator-runtime "^0.13.11" +"@babel/types@^7.18.6": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f" + integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg== + dependencies: + "@babel/helper-string-parser" "^7.19.4" + "@babel/helper-validator-identifier" "^7.19.1" + to-fast-properties "^2.0.0" + +"@emotion/babel-plugin@^11.10.5": + version "11.10.5" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c" + integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/plugin-syntax-jsx" "^7.17.12" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/serialize" "^1.1.1" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.1.3" + +"@emotion/cache@^11.10.5": + version "11.10.5" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12" + integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA== + dependencies: + "@emotion/memoize" "^0.8.0" + "@emotion/sheet" "^1.2.1" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + stylis "4.1.3" + +"@emotion/hash@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" + integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== + +"@emotion/is-prop-valid@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" + integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== + dependencies: + "@emotion/memoize" "^0.8.0" + +"@emotion/memoize@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + +"@emotion/react@^11.10.5": + version "11.10.5" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.5.tgz#95fff612a5de1efa9c0d535384d3cfa115fe175d" + integrity sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.5" + "@emotion/cache" "^11.10.5" + "@emotion/serialize" "^1.1.1" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0" + integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA== + dependencies: + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/unitless" "^0.8.0" + "@emotion/utils" "^1.2.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c" + integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA== + +"@emotion/styled@^11.10.5": + version "11.10.5" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.5.tgz#1fe7bf941b0909802cb826457e362444e7e96a79" + integrity sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.5" + "@emotion/is-prop-valid" "^1.2.0" + "@emotion/serialize" "^1.1.1" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + +"@emotion/unitless@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df" + integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A== + +"@emotion/utils@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" + integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== + +"@emotion/weak-memoize@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" + integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== + "@eslint/eslintrc@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c" @@ -66,6 +214,92 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== +"@mui/base@5.0.0-alpha.116": + version "5.0.0-alpha.116" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.116.tgz#c167a66b7232088b4bcd97ba36096a357c6e4fb9" + integrity sha512-VwhifWdrfHc4/ZdqRZ4Gf+7P39sovNN24By1YVZdvJ9fvp0Sr8sNftGUCjYXXz+xCXVBQDXvhfxMwZrj2MvJvA== + dependencies: + "@babel/runtime" "^7.20.7" + "@emotion/is-prop-valid" "^1.2.0" + "@mui/types" "^7.2.3" + "@mui/utils" "^5.11.7" + "@popperjs/core" "^2.11.6" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/core-downloads-tracker@^5.11.7": + version "5.11.7" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.7.tgz#b3a3aad64c6b69f6165d7a00c0d9cfeacbe357a2" + integrity sha512-lZgX7XQTk0zVcpwEa80r+T4y09dosnUxWvFPSikU/2Hh5wnyNOek8WfJwGCNsaRiXJHMi5eHY+z8oku4u5lgNw== + +"@mui/material@^5.11.7": + version "5.11.7" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.11.7.tgz#d460c7239013a57cc2aa3d2bbe14ba875b29d7cb" + integrity sha512-wDv7Pc6kMe9jeWkmCLt4JChd1lPc2u23JQHpB35L2VwQowpNFoDfIwqi0sYCnZTMKlRc7lza8LqwSwHl2G52Rw== + dependencies: + "@babel/runtime" "^7.20.7" + "@mui/base" "5.0.0-alpha.116" + "@mui/core-downloads-tracker" "^5.11.7" + "@mui/system" "^5.11.7" + "@mui/types" "^7.2.3" + "@mui/utils" "^5.11.7" + "@types/react-transition-group" "^4.4.5" + clsx "^1.2.1" + csstype "^3.1.1" + prop-types "^15.8.1" + react-is "^18.2.0" + react-transition-group "^4.4.5" + +"@mui/private-theming@^5.11.7": + version "5.11.7" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.11.7.tgz#e92b87d6ea68ae5a23d0f0d9d248361b889a98db" + integrity sha512-XzRTSZdc8bhuUdjablTNv3kFkZ/XIMlKkOqqJCU0G8W3tWGXpau2DXkafPd1ddjPhF9zF3qLKNGgKCChYItjgA== + dependencies: + "@babel/runtime" "^7.20.7" + "@mui/utils" "^5.11.7" + prop-types "^15.8.1" + +"@mui/styled-engine@^5.11.0": + version "5.11.0" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.11.0.tgz#79afb30c612c7807c4b77602cf258526d3997c7b" + integrity sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ== + dependencies: + "@babel/runtime" "^7.20.6" + "@emotion/cache" "^11.10.5" + csstype "^3.1.1" + prop-types "^15.8.1" + +"@mui/system@^5.11.7": + version "5.11.7" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.11.7.tgz#5e550c621733a18cd437678f11dcd1c3468129d0" + integrity sha512-uGB6hBxGlAdlmbLdTtUZYNPXkgQGGnKxHdkRATqsu7UlCxNsc/yS5NCEWy/3c4pnelD1LDLD39WrntP9mwhfkQ== + dependencies: + "@babel/runtime" "^7.20.7" + "@mui/private-theming" "^5.11.7" + "@mui/styled-engine" "^5.11.0" + "@mui/types" "^7.2.3" + "@mui/utils" "^5.11.7" + clsx "^1.2.1" + csstype "^3.1.1" + prop-types "^15.8.1" + +"@mui/types@^7.2.3": + version "7.2.3" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.3.tgz#06faae1c0e2f3a31c86af6f28b3a4a42143670b9" + integrity sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw== + +"@mui/utils@^5.11.7": + version "5.11.7" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.11.7.tgz#a343a5d375b4140c875bf4c96825c1a148994800" + integrity sha512-8uyNDeVHZA804Ego20Erv8TpxlbqTe/EbhTI2H1UYr4/RiIbBprat8W4Qqr2UQIsC/b3DLz+0RQ6R/E5BxEcLA== + dependencies: + "@babel/runtime" "^7.20.7" + "@types/prop-types" "^15.7.5" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.8.1" + react-is "^18.2.0" + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -87,6 +321,11 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@popperjs/core@^2.11.6": + version "2.11.6" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45" + integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw== + "@samverschueren/stream-to-observable@^0.3.0": version "0.3.1" resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301" @@ -114,6 +353,39 @@ resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== +"@types/prop-types@*", "@types/prop-types@^15.7.5": + version "15.7.5" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" + integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== + +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.3" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a" + integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw== + dependencies: + "@types/react" "*" + +"@types/react-transition-group@^4.4.5": + version "4.4.5" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" + integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA== + dependencies: + "@types/react" "*" + +"@types/react@*": + version "18.0.27" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.27.tgz#d9425abe187a00f8a5ec182b010d4fd9da703b71" + integrity sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + +"@types/scheduler@*": + version "0.16.2" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" + integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== + "@typescript-eslint/eslint-plugin@^2.17.0": version "2.34.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9" @@ -546,6 +818,15 @@ axobject-query@^3.1.1: dependencies: deep-equal "^2.0.5" +babel-plugin-macros@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1" + integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== + dependencies: + "@babel/runtime" "^7.12.5" + cosmiconfig "^7.0.0" + resolve "^1.19.0" + bach@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/bach/-/bach-1.2.0.tgz#4b3ce96bf27134f79a1b414a51c14e34c3bd9880" @@ -807,6 +1088,11 @@ cloneable-readable@^1.0.0: process-nextick-args "^2.0.0" readable-stream "^2.3.5" +clsx@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" @@ -943,6 +1229,17 @@ cosmiconfig@^6.0.0: path-type "^4.0.0" yaml "^1.7.2" +cosmiconfig@^7.0.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6" + integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA== + dependencies: + "@types/parse-json" "^4.0.0" + import-fresh "^3.2.1" + parse-json "^5.0.0" + path-type "^4.0.0" + yaml "^1.10.0" + cross-spawn@^7.0.0, cross-spawn@^7.0.2: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" @@ -952,6 +1249,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2: shebang-command "^2.0.0" which "^2.0.1" +csstype@^3.0.2, csstype@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" + integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== + d@1, d@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a" @@ -1107,6 +1409,14 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + duplexify@^3.6.0: version "3.7.1" resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309" @@ -1757,6 +2067,11 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -2227,6 +2542,13 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +hoist-non-react-statics@^3.3.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + homedir-polyfill@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8" @@ -3526,7 +3848,7 @@ progress@^2.0.0: resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8" integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA== -prop-types@^15.8.1: +prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -3570,11 +3892,26 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + +react-transition-group@^4.4.5: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -3754,7 +4091,7 @@ resolve-url@^0.2.1: resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg== -resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.4.0: +resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.4.0: version "1.22.1" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177" integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw== @@ -3986,7 +4323,7 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56" integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw== -source-map@^0.5.1, source-map@^0.5.6: +source-map@^0.5.1, source-map@^0.5.6, source-map@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== @@ -4189,6 +4526,11 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +stylis@4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7" + integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA== + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" @@ -4278,6 +4620,11 @@ to-absolute-glob@^2.0.0: is-absolute "^1.0.0" is-negated-glob "^1.0.0" +to-fast-properties@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" + integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog== + to-object-path@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af" @@ -4661,7 +5008,7 @@ yallist@^4.0.0: resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== -yaml@^1.7.2: +yaml@^1.10.0, yaml@^1.7.2: version "1.10.2" resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== -- 2.34.1 From f53c8e647441fd8f32cf5d1010981f3ebaaed313 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 3 Feb 2023 16:30:58 -0300 Subject: [PATCH 02/27] =?UTF-8?q?feat:=20Adicionado=20o=20conte=C3=BAdo=20?= =?UTF-8?q?das=20abas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 3 --- styles/css/vtex.store-components.css | 7 +------ styles/sass/pages/product/vtex.store-components.scss | 3 --- 3 files changed, 1 insertion(+), 12 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 17b739f..0f4c222 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,10 +5,7 @@ "condition-layout.product#availability", "flex-layout.row#description", "flex-layout.row#specifications-title", - "tab-layout#product", - - "shelf.relatedProducts", "product-questions-and-answers" ] }, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0972b45..34c4328 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,9 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.newsletter { - background: red; -} -.productImagesContainer { -} +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index b064643..e69de29 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +0,0 @@ -.productImageTag--main { - display: none; -} -- 2.34.1 From 076be6e53385348094a1ba2876c1a6ee7850ae0c Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 3 Feb 2023 18:11:08 -0300 Subject: [PATCH 03/27] feat: Adicionado shelf --- store/blocks/pdp/product.jsonc | 22 ++++++++++++++ .../product-summary-list.jsonc | 30 +++++-------------- .../product-summary/product-summary.jsonc | 4 +-- styles/css/vtex.breadcrumb.css | 5 ++++ styles/css/vtex.store-components.css | 5 +++- .../sass/pages/product/vtex.breadcrumb.scss | 4 +++ .../pages/product/vtex.store-components.scss | 3 ++ 7 files changed, 47 insertions(+), 26 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0f4c222..fa56ba1 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -6,6 +6,8 @@ "flex-layout.row#description", "flex-layout.row#specifications-title", "tab-layout#product", + "list-context.product-list#shelf", + "newsletter", "product-questions-and-answers" ] }, @@ -218,5 +220,25 @@ "props": { "tabId": "product2" } + }, + "list-context.product-list#shelf": { + "blocks": ["product-summary.shelf#shelf"], + "children": ["slider-layout#shelf-products"] + }, + "product-summary.shelf#shelf": { + "children": ["product-summary-image#shelf", "product-summary-price"] + }, + "slider-layout#shelf-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 1, + "phone": 1 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + }, + "children": [] } } diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..971cd70 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -9,14 +9,10 @@ ] }, "responsive-layout.desktop#productSummaryList": { - "children": [ - "flex-layout.row#summaryListDesktop" - ] + "children": ["flex-layout.row#summaryListDesktop"] }, "responsive-layout.mobile#productSummaryList": { - "children": [ - "flex-layout.row#summaryListMobile" - ] + "children": ["flex-layout.row#summaryListMobile"] }, "product-price-savings#summaryPercentage": { "props": { @@ -36,7 +32,7 @@ ] }, "flex-layout.row#summaryListDesktop": { - "props":{ + "props": { "fullWidth": true, "colSizing": "auto", "blockClass": "summaryListDesktop" @@ -69,9 +65,7 @@ ] }, "flex-layout.row#productSpecifications": { - "children": [ - "product-specification-group#summary" - ] + "children": ["product-specification-group#summary"] }, "product-summary-name#summaryListDesktop": { "props": { @@ -100,18 +94,13 @@ "colSizing": "auto", "colGap": 5 }, - "children": [ - "add-to-cart-button", - "flex-layout.row#buyNowButton" - ] + "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"] }, "flex-layout.row#buyNowButton": { "props": { "blockClass": "buyNowButton" }, - "children": [ - "add-to-cart-button#buyNow" - ] + "children": ["add-to-cart-button#buyNow"] }, "add-to-cart-button#buyNow": { @@ -123,10 +112,7 @@ } }, "flex-layout.col#priceSummaryListDesktop": { - "children": [ - "product-selling-price#summary", - "product-list-price#summary" - ] + "children": ["product-selling-price#summary", "product-list-price#summary"] }, "stack-layout#summaryListDesktop": { "children": [ @@ -144,7 +130,7 @@ } }, "flex-layout.row#summaryListMobile": { - "props":{ + "props": { "preserveLayoutOnMobile": true, "colSizing": "auto", "blockClass": "summaryListMobile", 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/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 58f9518..9964bda 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,4 +13,9 @@ .homeLink::after { content: "Home"; +} + +.link--1 { + display: flex; + order: -1; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 34c4328..3533ae1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,4 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.productDescriptionContainer { + background: red; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 80c6236..0dd25c0 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -6,3 +6,7 @@ content: "Home"; } } +.link--1 { + display: flex; + order: -1; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e69de29..926f0da 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -0,0 +1,3 @@ +.productDescriptionContainer { + background: red; +} -- 2.34.1 From e230a4022da7feb5423e3fc649b0885537367552 Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 4 Feb 2023 18:09:48 -0300 Subject: [PATCH 04/27] feat: Adicionado componente custom --- store/interfaces.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/store/interfaces.json b/store/interfaces.json index f5b5636..714e4e6 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -6,7 +6,7 @@ "component": "html", "composition": "children" }, - "product-description-component": { + "product-payment-component": { "component": "ProductDescription" } } -- 2.34.1 From fd8ebcf90a8af35c639234f571d25591c492f8da Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 4 Feb 2023 19:20:18 -0300 Subject: [PATCH 05/27] feat: Adicionado o componente personalizado do pix --- react/PaymentPix.tsx | 3 +++ react/ProductDescription.tsx | 3 --- react/components/PaymentPix/PaymentPix.tsx | 23 +++++++++++++++++++ .../ProductDescription/ProductDescription.tsx | 7 ------ store/blocks/pdp/product.jsonc | 3 +++ store/interfaces.json | 4 ++-- styles/css/vtex.breadcrumb.css | 5 ---- styles/css/vtex.store-components.css | 5 ++-- .../sass/pages/product/vtex.breadcrumb.scss | 4 ---- .../pages/product/vtex.store-components.scss | 3 ++- 10 files changed, 36 insertions(+), 24 deletions(-) create mode 100644 react/PaymentPix.tsx delete mode 100644 react/ProductDescription.tsx create mode 100644 react/components/PaymentPix/PaymentPix.tsx delete mode 100644 react/components/ProductDescription/ProductDescription.tsx diff --git a/react/PaymentPix.tsx b/react/PaymentPix.tsx new file mode 100644 index 0000000..1eb71bb --- /dev/null +++ b/react/PaymentPix.tsx @@ -0,0 +1,3 @@ +import { PaymentPix } from "./components/PaymentPix/PaymentPix"; + +export default PaymentPix; diff --git a/react/ProductDescription.tsx b/react/ProductDescription.tsx deleted file mode 100644 index 9a2edfb..0000000 --- a/react/ProductDescription.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ProductDescription } from "./components/ProductDescription/ProductDescription"; - -export default ProductDescription; diff --git a/react/components/PaymentPix/PaymentPix.tsx b/react/components/PaymentPix/PaymentPix.tsx new file mode 100644 index 0000000..60bf463 --- /dev/null +++ b/react/components/PaymentPix/PaymentPix.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +const PaymentPix = () => { + const product = useProduct(); + const pricePix = ( + (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9 + ).toFixed(2); + { + /*const imagePix =*/ + } + + const convertPrice = pricePix.toString().replace(".", ","); + + return ( +
+

R$ {convertPrice}

+

10% de desconto

+
+ ); +}; + +export { PaymentPix }; diff --git a/react/components/ProductDescription/ProductDescription.tsx b/react/components/ProductDescription/ProductDescription.tsx deleted file mode 100644 index ca68644..0000000 --- a/react/components/ProductDescription/ProductDescription.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const ProductDescription = () => { - return
Oaswq
; -}; - -export { ProductDescription }; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fa56ba1..fc0558e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,7 +2,9 @@ "store.product": { "children": [ "html#breadcrumb", + "condition-layout.product#availability", + "flex-layout.row#description", "flex-layout.row#specifications-title", "tab-layout#product", @@ -117,6 +119,7 @@ "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", + "product-paymentPix-component", "product-separator", "product-identifier.product", "sku-selector", diff --git a/store/interfaces.json b/store/interfaces.json index 714e4e6..1e7bec4 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -6,7 +6,7 @@ "component": "html", "composition": "children" }, - "product-payment-component": { - "component": "ProductDescription" + "product-paymentPix-component": { + "component": "PaymentPix" } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 9964bda..58f9518 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,9 +13,4 @@ .homeLink::after { content: "Home"; -} - -.link--1 { - display: flex; - order: -1; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3533ae1..b00a4d4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.productDescriptionContainer { +/*.productDescriptionContainer { background: red; -} \ No newline at end of file +} +*/ \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 0dd25c0..80c6236 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -6,7 +6,3 @@ content: "Home"; } } -.link--1 { - display: flex; - order: -1; -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 926f0da..4f63d46 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,4 @@ -.productDescriptionContainer { +/*.productDescriptionContainer { background: red; } +*/ -- 2.34.1 From f07d5fa515ce18dc63c06fba76eaac1ce88c5618 Mon Sep 17 00:00:00 2001 From: Savio Date: Sun, 5 Feb 2023 15:30:39 -0300 Subject: [PATCH 06/27] feat: Adicionado fonte das letras --- styles/sass/utils/_vars.scss | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..4c6da1c 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); + $color-black: #292929; $color-white: #fff; @@ -14,18 +16,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; -- 2.34.1 From 3341a993328273a5f493a53ca11db0492dc04418 Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 6 Feb 2023 11:50:38 -0300 Subject: [PATCH 07/27] feat: Adicionado o estilo das imagens do display principal --- store/blocks/pdp/product.jsonc | 14 ++- styles/configs/font-faces.css | 0 styles/css/agenciamagma.store-theme.css | 1 + styles/css/vtex.breadcrumb.css | 1 + styles/css/vtex.flex-layout.css | 108 ++---------------- styles/css/vtex.rich-text.css | 1 + styles/css/vtex.store-components.css | 20 +++- .../sass/pages/product/vtex.flex-layout.scss | 0 .../pages/product/vtex.store-components.scss | 19 ++- 9 files changed, 54 insertions(+), 110 deletions(-) create mode 100644 styles/configs/font-faces.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fc0558e..f73fc24 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -81,7 +81,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, @@ -90,12 +90,15 @@ }, "product-images": { "props": { + "thumbnailsOrientation": "horizontal", + "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, - "displayThumbnailsArrows": false, - "displayMode": "list" + + "showPaginationDots": false, + "showNavigationArrows": false } }, "product-images#descricao": { @@ -115,13 +118,12 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", "product-paymentPix-component", "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 1dd7d62..689e9c1 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ .html { background-color: red; diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 58f9518..dc77e8c 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..f5ba8ae 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,10 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..f5ba8ae 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b00a4d4..0d9af06 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,8 +6,22 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ -/*.productDescriptionContainer { - background: red; +.container { + max-width: 100%; + margin: 0 0 0 0 !important; } -*/ \ No newline at end of file + +.productImageTag { + max-height: none !important; +} + +.thumbImg { + width: 86%; + margin: 0; +} + +.productImagesThumb { + height: auto !important; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4f63d46..5d9d0aa 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,4 +1,17 @@ -/*.productDescriptionContainer { - background: red; +.container { + max-width: 100%; + margin: 0 0 0 0 !important; +} + +.productImageTag { + max-height: none !important; +} + +.thumbImg { + width: 86%; + margin: 0; +} + +.productImagesThumb { + height: auto !important; } -*/ -- 2.34.1 From 5c9b7826b05c5010d8a84b53bbcd8a0db936cc9b Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 6 Feb 2023 14:41:25 -0300 Subject: [PATCH 08/27] feat: Adicionado os estilos do pagamento pix --- .vscode/settings.json | 11 +++++- react/components/PaymentPix/PaymentPix.tsx | 21 ++++++++---- react/components/PaymentPix/styles.css | 39 ++++++++++++++++++++++ 3 files changed, 64 insertions(+), 7 deletions(-) create mode 100644 react/components/PaymentPix/styles.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 04540ca..bac992e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -164,5 +164,14 @@ } } } - ] + ], + "files.exclude": { + "**/.git": true, + "**/.svn": true, + "**/.hg": true, + "**/CVS": true, + "**/.DS_Store": true, + "**/Thumbs.db": false + }, + "explorerExclude.backup": {} } diff --git a/react/components/PaymentPix/PaymentPix.tsx b/react/components/PaymentPix/PaymentPix.tsx index 60bf463..fe6c855 100644 --- a/react/components/PaymentPix/PaymentPix.tsx +++ b/react/components/PaymentPix/PaymentPix.tsx @@ -1,21 +1,30 @@ import React from "react"; import { useProduct } from "vtex.product-context"; +import styles from "./styles.css"; + const PaymentPix = () => { const product = useProduct(); const pricePix = ( (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9 ).toFixed(2); - { - /*const imagePix =*/ - } + + const imagePix = + "https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png"; const convertPrice = pricePix.toString().replace(".", ","); return ( -
-

R$ {convertPrice}

-

10% de desconto

+
+ Imagem do Pix +
+

R$ {convertPrice}

+

10% de desconto

+
); }; diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css new file mode 100644 index 0000000..23a2810 --- /dev/null +++ b/react/components/PaymentPix/styles.css @@ -0,0 +1,39 @@ +.paymentPixWrapper { + display: flex; + flex-direction: row; + margin-top: 8px; + margin-bottom: 16px; + height: 39px; + gap: 26px; + align-items: center; +} +.paymentPixImg { + display: flex; + width: 66px; + height: 24px; + align-items: center; +} +.paymentPixText { + display: flex; + flex-direction: column; + align-items: center; +} +.paymentPixValue { + margin: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + + color: rgba(0, 0, 0, 0.58); +} +.paymentPixDiscount { + margin: 0; + color: #929292; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; +} -- 2.34.1 From f5bdaa9afa660ed61b60a81e35f16661c09c208a Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 6 Feb 2023 16:10:17 -0300 Subject: [PATCH 09/27] feat: Adicionado o estilo do nome do produto --- react/components/PaymentPix/styles.css | 1 - styles/css/vtex.product-identifier.css | 31 ++++++++++++++++++- styles/css/vtex.store-components.css | 10 ++++++ .../product/vtex.product-identifier.scss | 19 ++++++++++++ .../pages/product/vtex.store-components.scss | 9 ++++++ 5 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css index 23a2810..20ec1da 100644 --- a/react/components/PaymentPix/styles.css +++ b/react/components/PaymentPix/styles.css @@ -16,7 +16,6 @@ .paymentPixText { display: flex; flex-direction: column; - align-items: center; } .paymentPixValue { margin: 0; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..128134d 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,32 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: flex-end; + margin-top: 8px; } + +.product-identifier__label { + display: none; +} + +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0d9af06..4eaa102 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -24,4 +24,14 @@ .productImagesThumb { height: auto !important; +} + +.productBrand { + display: flex; + justify-content: flex-end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; } \ No newline at end of file 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..fec8794 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,19 @@ +.product-identifier--productReference { + display: flex; + justify-content: flex-end; + margin-top: 8px; +} +.product-identifier__label { + display: none; +} +.product-identifier__separator { + display: none; +} +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5d9d0aa..4e880ed 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -15,3 +15,12 @@ .productImagesThumb { height: auto !important; } +.productBrand { + display: flex; + justify-content: flex-end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; +} -- 2.34.1 From 18cd2fd0759d9c2ba5e3cc8974542a33e3cbbfdc Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 11:51:57 -0300 Subject: [PATCH 10/27] feat: Adicionado o estilo dos tamanhos e cores --- store/blocks/pdp/product.jsonc | 1 - styles/css/vtex.add-to-cart-button.css | 10 ++ styles/css/vtex.product-quantity.css | 13 ++ styles/css/vtex.store-components.css | 113 +++++++++++++++++ .../product/vtex.add-to-cart-button.scss | 2 + .../pages/product/vtex.product-quantity.scss | 3 + .../pages/product/vtex.store-components.scss | 118 ++++++++++++++++++ 7 files changed, 259 insertions(+), 1 deletion(-) create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f73fc24..be7db66 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -123,7 +123,6 @@ "flex-layout.row#selling-price", "product-installments", "product-paymentPix-component", - "product-separator", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..f5ba8ae --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,10 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ \ 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..2f1d220 --- /dev/null +++ b/styles/css/vtex.product-quantity.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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +.quantitySelectorTitle { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4eaa102..3c8f295 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -34,4 +34,117 @@ font-weight: 300; font-size: 20px; line-height: 34px; +} /* +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + }/* + .frame-around { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frame-around { + border-radius: 30px; + } + + .skuSelectorInternalBox { + border-radius: 30px; + } + } +} +*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 21px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + top: 0; + left: 0; + right: 0; + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 30px; + padding: 0; + margin: auto; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..f627ffe --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,2 @@ +.buttonText { +} 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..dd527e9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,3 @@ +.quantitySelectorTitle { + display: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4e880ed..8f4ebd4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -23,4 +23,122 @@ font-weight: 300; font-size: 20px; line-height: 34px; +} /* +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + }/* + .frame-around { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frame-around { + border-radius: 30px; + } + + .skuSelectorInternalBox { + border-radius: 30px; + } + } +} +*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; + } + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frameAround { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frameAround { + width: 40px; + height: 40px; + top: 0; + left: 0; + right: 0; + border-radius: 30px; + } + + .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 30px; + padding: 0; + margin: auto; + } + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + } + } } -- 2.34.1 From 0abdeaba4fd9ef1c1744b9ac725ee7460a59d232 Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 17:54:32 -0300 Subject: [PATCH 11/27] =?UTF-8?q?feat:=20Adicionado=20o=20estilo=20do=20ad?= =?UTF-8?q?icionar=20=C3=A0=20sacola?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 19 +-- styles/css/vtex.flex-layout.css | 24 +++- styles/css/vtex.product-quantity.css | 17 +++ styles/css/vtex.store-components.css | 107 ++++++++-------- .../product/vtex.add-to-cart-button.scss | 2 - .../sass/pages/product/vtex.flex-layout.scss | 23 ++++ .../pages/product/vtex.product-quantity.scss | 17 +++ .../pages/product/vtex.store-components.scss | 114 +++++++++--------- 8 files changed, 201 insertions(+), 122 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index be7db66..b41d781 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,9 +2,7 @@ "store.product": { "children": [ "html#breadcrumb", - "condition-layout.product#availability", - "flex-layout.row#description", "flex-layout.row#specifications-title", "tab-layout#product", @@ -124,15 +122,21 @@ "product-installments", "product-paymentPix-component", "sku-selector", - "product-quantity", + + "flex-layout.row#cart", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + "availability-subscriber", "shipping-simulator" ] }, - + "flex-layout.row#cart": { + "props": { + "blockClass": "cart" + }, + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -149,9 +153,10 @@ "flex-layout.row#buy-button": { "props": { - "marginTop": 4, - "marginBottom": 7 + "width": "80%", + "blockClass": "buyButton" }, + "children": ["add-to-cart-button"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f5ba8ae..c807690 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,4 +8,25 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.flexRowContent--cart { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 25px; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) { + background-color: black; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) { + font-size: 0; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after { + content: "adicionar à sacola"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 2f1d220..b5b35cc 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -10,4 +10,21 @@ /* Grid breakpoints */ .quantitySelectorTitle { display: none; +} + +.quantitySelectorStepper { + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +.quantitySelectorStepper { + border: none; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3c8f295..8ea10f1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -34,63 +34,8 @@ font-weight: 300; font-size: 20px; line-height: 34px; -} /* -.skuSelectorContainer { - display: flex; - flex-direction: column-reverse; - .skuSelectorSubcontainer--cor { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTRAS CORES"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .skuSelectorSelectorImageValue { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - text-transform: uppercase; - }/* - .frame-around { - border-radius: 30px; - } - .skuSelectorItemImageValue, - .skuSelectorInternalBox { - border-radius: 21px; - } - } - .skuSelectorSubcontainer--tamanho { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTROS TAMANHOS:"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .frame-around { - border-radius: 30px; - } - - .skuSelectorInternalBox { - border-radius: 30px; - } - } } -*/ + .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -117,6 +62,15 @@ .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { border-radius: 21px; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { font-size: 0; } @@ -147,4 +101,45 @@ .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { padding: 0; margin: auto; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "Ok"; + color: white; + font-size: 10px; +} + +.shippingContainer :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer { + display: flex; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; +} +.shippingContainer :global(.vtex-button) { + position: relative; + right: 49px; + top: 27px; + width: 49px; + height: 49px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss index f627ffe..e69de29 100644 --- a/styles/sass/pages/product/vtex.add-to-cart-button.scss +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -1,2 +0,0 @@ -.buttonText { -} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e69de29..4108e84 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,23 @@ +.flexRowContent--cart { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 25px; + .flexRow--buyButton { + :global(.vtex-button) { + background-color: black; + } + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: "adicionar à sacola"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index dd527e9..3b9d284 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,3 +1,20 @@ .quantitySelectorTitle { display: none; } + +.quantitySelectorStepper { + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +.quantitySelectorStepper { + border: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8f4ebd4..702ed15 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -23,69 +23,15 @@ font-weight: 300; font-size: 20px; line-height: 34px; -} /* -.skuSelectorContainer { - display: flex; - flex-direction: column-reverse; - .skuSelectorSubcontainer--cor { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTRAS CORES"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .skuSelectorSelectorImageValue { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - text-transform: uppercase; - }/* - .frame-around { - border-radius: 30px; - } - .skuSelectorItemImageValue, - .skuSelectorInternalBox { - border-radius: 21px; - } - } - .skuSelectorSubcontainer--tamanho { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTROS TAMANHOS:"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .frame-around { - border-radius: 30px; - } - - .skuSelectorInternalBox { - border-radius: 30px; - } - } } -*/ + .skuSelectorContainer { display: flex; flex-direction: column-reverse; .valueWrapper .skuSelectorItemTextValue { margin-right: 5px; } + .skuSelectorSubcontainer--cor { .skuSelectorName { font-size: 0; @@ -106,6 +52,15 @@ .skuSelectorInternalBox { border-radius: 21px; } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } } .skuSelectorSubcontainer--tamanho { .skuSelectorName { @@ -142,3 +97,50 @@ } } } + +.shippingContainer { + :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: "Ok"; + color: white; + font-size: 10px; + } + } + } +} + +.shippingContainer { + :global(.vtex-input) { + :global(.vtex-input__label) { + font-size: 0; + &::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } +} +.shippingContainer { + display: flex; + :global(.vtex-input-prefix__group) { + height: 49px; + } + + :global(.vtex-button) { + position: relative; + right: 49px; + top: 27px; + width: 49px; + height: 49px; + } +} -- 2.34.1 From e73bc62040b95022e70d3abf2fc4622ad9d53c0a Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 18:20:58 -0300 Subject: [PATCH 12/27] feat: Adicionando estilo no Cep --- styles/css/vtex.address-form.css | 13 ++++++++++++ styles/css/vtex.store-components.css | 21 ++++++++++++++++--- .../sass/pages/product/vtex.address-form.scss | 5 +++++ .../pages/product/vtex.store-components.scss | 21 ++++++++++++++++--- 4 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 styles/css/vtex.address-form.css create mode 100644 styles/sass/pages/product/vtex.address-form.scss diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..5eb3ef6 --- /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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +.input::placeholder { + content: "Digite seu CEP"; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8ea10f1..17fb098 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -113,8 +113,12 @@ } .shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { content: "Ok"; - color: white; - font-size: 10px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; } .shippingContainer :global(.vtex-input) :global(.vtex-input__label) { @@ -138,8 +142,19 @@ } .shippingContainer :global(.vtex-button) { position: relative; - right: 49px; + right: 127px; top: 27px; width: 49px; height: 49px; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 70px; + top: 8px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.address-form.scss b/styles/sass/pages/product/vtex.address-form.scss new file mode 100644 index 0000000..026dcd8 --- /dev/null +++ b/styles/sass/pages/product/vtex.address-form.scss @@ -0,0 +1,5 @@ +.input { + &::placeholder { + content: "Digite seu CEP"; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 702ed15..cd73e7c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -107,8 +107,12 @@ font-size: 0; &::after { content: "Ok"; - color: white; - font-size: 10px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; } } } @@ -138,9 +142,20 @@ :global(.vtex-button) { position: relative; - right: 49px; + right: 127px; top: 27px; width: 49px; height: 49px; } + :global(.vtex-address-form__postalCode) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 70px; + top: 8px; + } } -- 2.34.1 From 1d972c38f2919a1c5b272e0b39a54fecee29ff0d Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 10:45:27 -0300 Subject: [PATCH 13/27] =?UTF-8?q?feat:=20Adicionado=20o=20estilo=20da=20de?= =?UTF-8?q?scri=C3=A7=C3=A3o=20do=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 55 ++++++++++++++-- styles/css/vtex.store-components.css | 17 +++++ styles/css/vtex.tab-layout.css | 62 ++++++++++++++++++- .../pages/product/vtex.store-components.scss | 20 ++++++ .../sass/pages/product/vtex.tab-layout.scss | 54 ++++++++++++++++ 5 files changed, 203 insertions(+), 5 deletions(-) create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b41d781..59b8a51 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -126,7 +126,6 @@ "flex-layout.row#cart", "product-assembly-options", "product-gifts", - "availability-subscriber", "shipping-simulator" ] @@ -200,7 +199,13 @@ } }, "tab-list#product": { - "children": ["tab-list.item#product1", "tab-list.item#product2"] + "children": [ + "tab-list.item#product1", + "tab-list.item#product2", + "tab-list.item#product3", + "tab-list.item#product4", + "tab-list.item#product5" + ] }, "tab-list.item#product1": { "props": { @@ -215,8 +220,32 @@ "label": "Descrição" } }, + "tab-list.item#product3": { + "props": { + "tabId": "product3", + "label": "Descrição" + } + }, + "tab-list.item#product4": { + "props": { + "tabId": "product4", + "label": "Descrição" + } + }, + "tab-list.item#product5": { + "props": { + "tabId": "product5", + "label": "Descrição" + } + }, "tab-content#product": { - "children": ["tab-content.item#product1", "tab-content.item#product2"] + "children": [ + "tab-content.item#product1", + "tab-content.item#product2", + "tab-content.item#product3", + "tab-content.item#product4", + "tab-content.item#product5" + ] }, "tab-content.item#product1": { "children": ["product-images#descricao", "product-description"], @@ -225,11 +254,29 @@ } }, "tab-content.item#product2": { - "children": ["product-description"], + "children": ["product-images#descricao", "product-description"], "props": { "tabId": "product2" } }, + "tab-content.item#product3": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product3" + } + }, + "tab-content.item#product4": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product4" + } + }, + "tab-content.item#product5": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product5" + } + }, "list-context.product-list#shelf": { "blocks": ["product-summary.shelf#shelf"], "children": ["slider-layout#shelf-products"] diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 17fb098..4945797 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -157,4 +157,21 @@ position: relative; left: 70px; top: 8px; +} + +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +.productDescriptionContainer .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index ae31ca0..d63cf56 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -1,4 +1,64 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +.container { + margin-bottom: 16px; +} + +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; +} +.listContainer .listItem { + padding: 0; + margin: 0; +} +.listContainer .listItem :global(.vtex-button) { + background: white; + border: none; + border-radius: 0; +} +.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #bfbfbf; + text-transform: initial; +} +.listContainer .listItemActive :global(.vtex-button) { + background: white; + border-bottom: 2px solid #000000; + border-radius: 0; +} +.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #000000; + text-transform: initial; +} + .contentItem { display: flex; flex-direction: row; -} + gap: 32px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index cd73e7c..f66a67b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -159,3 +159,23 @@ top: 8px; } } + +//Estilização da descrição do produto +.productDescriptionContainer { + .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + } + .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + } +} 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..e91615b --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,54 @@ +.container { + margin-bottom: 16px; +} +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; + .listItem { + padding: 0; + margin: 0; + :global(.vtex-button) { + background: white; + border: none; + border-radius: 0; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #bfbfbf; + text-transform: initial; + } + } + } + .listItemActive { + :global(.vtex-button) { + background: white; + border-bottom: 2px solid #000000; + border-radius: 0; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #000000; + text-transform: initial; + } + } + } +} +.contentItem { + display: flex; + flex-direction: row; + gap: 32px; +} -- 2.34.1 From aeea58a8c67e29f9f9b36f9cb57b20a9133109d6 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 12:07:19 -0300 Subject: [PATCH 14/27] feat: Adicionando os estilos do shelf --- store/blocks/pdp/product.jsonc | 21 ++++++-- styles/css/vtex.rich-text.css | 10 +++- styles/css/vtex.slider-layout.css | 49 ++++++++----------- styles/sass/pages/product/vtex.rich-text.scss | 9 ++++ .../pages/product/vtex.slider-layout.scss | 12 +++++ 5 files changed, 68 insertions(+), 33 deletions(-) create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 59b8a51..dbdd649 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -9,7 +9,10 @@ "list-context.product-list#shelf", "newsletter", "product-questions-and-answers" - ] + ], + "props": { + "blockClass": "productAll" + } }, "html#breadcrumb": { "props": { @@ -279,10 +282,22 @@ }, "list-context.product-list#shelf": { "blocks": ["product-summary.shelf#shelf"], - "children": ["slider-layout#shelf-products"] + "children": ["rich-text#shelf", "slider-layout#shelf-products"] + }, + "rich-text#shelf": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar: ", + "blockClass": "shelfTitle" + } }, "product-summary.shelf#shelf": { - "children": ["product-summary-image#shelf", "product-summary-price"] + "children": [ + "product-summary-image#shelf", + "product-summary-name", + "product-summary-price" + ] }, "slider-layout#shelf-products": { "props": { diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index f5ba8ae..f03cef1 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,4 +7,12 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--shelfTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..72afeb0 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,22 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +/*.sliderLayoutContainer { + margin: 0 40px 0 40px; + .sliderRightArrow { + right: 100px; + } +}*/ .sliderLayoutContainer { + width: 95%; + padding: 0 16px 0 16px; + display: flex; justify-content: center; -} - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; -} - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..91c03e5 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,9 @@ +.container--shelfTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + 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..8052275 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,12 @@ +/*.sliderLayoutContainer { + margin: 0 40px 0 40px; + .sliderRightArrow { + right: 100px; + } +}*/ +.sliderLayoutContainer { + width: 95%; + padding: 0 16px 0 16px; + display: flex; + justify-content: center; +} -- 2.34.1 From 1c414418014ead382b2204a942d5226f47ec23b5 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 13:33:02 -0300 Subject: [PATCH 15/27] feat: Adicionado o estilo do newsletter --- store/blocks/pdp/product.jsonc | 17 +++++-- styles/css/vtex.store-components.css | 50 +++++++++++++++++++ .../pages/product/vtex.store-components.scss | 50 +++++++++++++++++++ 3 files changed, 113 insertions(+), 4 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dbdd649..c85f564 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -137,7 +137,7 @@ "props": { "blockClass": "cart" }, - "children": ["product-quantity", "flex-layout.row#buy-button"] + "children": ["product-quantity#qtd", "flex-layout.row#buy-button"] }, "flex-layout.row#product-name": { "props": { @@ -152,11 +152,20 @@ "showValueNameForImageVariation": true } }, - + "product-quantity#qtd": { + "props": { + "width": "25%", + "size": "regular", + "blockClass": "buyQtd" + } + //"children": ["product-quantity"] + }, "flex-layout.row#buy-button": { "props": { - "width": "80%", - "blockClass": "buyButton" + "blockClass": "buyButton", + "marginTop": "4", + "marginBottom": "7", + "paddingRight": "0" }, "children": ["add-to-cart-button"] diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4945797..b40abe3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -174,4 +174,54 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.newsletter { + margin-top: 64px; +} +.newsletter .container { + display: flex; + height: 175px; + padding: 0 0 0 0; + background: black; + align-items: center; + justify-content: center; +} +.newsletter .container .label { + display: flex; + flex-direction: column; + font-size: 0; +} +.newsletter .container .label::before { + content: "Assine nossa Newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; +} +.newsletter .container .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; +} +.newsletter .container :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + width: 774px; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; +} +.newsletter .container :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f66a67b..9f70129 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -179,3 +179,53 @@ color: #929292; } } + +.newsletter { + margin-top: 64px; + .container { + display: flex; + height: 175px; + padding: 0 0 0 0; + background: black; + align-items: center; + justify-content: center; + .label { + display: flex; + flex-direction: column; + font-size: 0; + &::before { + content: "Assine nossa Newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + } + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + } + } + :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + width: 774px; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + } + :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + } + } +} -- 2.34.1 From 557d8de30af30c08ec5ce05507b590d62a411145 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 16:33:22 -0300 Subject: [PATCH 16/27] feat: Adicionado os estilos do breadcrumb --- styles/css/vtex.breadcrumb.css | 23 ++++++++++++-- .../sass/pages/product/vtex.breadcrumb.scss | 30 +++++++++++++++---- 2 files changed, 44 insertions(+), 9 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index dc77e8c..aaf448f 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,10 +8,27 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ -.homeIcon { +.container { + margin-left: 40px; +} +.container .homeIcon { display: none; } - -.homeLink::after { +.container .Link, +.container .term { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .homeLink::after { content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 80c6236..5452501 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,8 +1,26 @@ -.homeIcon { - display: none; -} -.homeLink { - &::after { - content: "Home"; +.container { + margin-left: 40px; + .homeIcon { + display: none; + } + .Link, + .term { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + .homeLink { + &::after { + content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } } } -- 2.34.1 From 3ffb27280c2b2910a8de1ad57e3bf4e453f4ed58 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 16:51:24 -0300 Subject: [PATCH 17/27] =?UTF-8?q?feat:=20Adicionado=20estilo=20do=20bot?= =?UTF-8?q?=C3=A3o=20do=20newsletter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 22 ++++++++++++++++++ .../pages/product/vtex.store-components.scss | 23 +++++++++++++++++++ 2 files changed, 45 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b40abe3..55f8050 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -224,4 +224,26 @@ .newsletter .container :global(.vtex-styleguide-9-x-input) { background: transparent; padding: 0 0 0 0; +} +.newsletter .container :global(.vtex-button) { + position: relative; + left: 145px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; +} +.newsletter .container :global(.vtex-button):hover { + border-bottom: 5px solid #bfbfbf; +} +.newsletter .container :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + border: 1px solid #000000; + text-transform: uppercase; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9f70129..756b124 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -227,5 +227,28 @@ background: transparent; padding: 0 0 0 0; } + :global(.vtex-button) { + position: relative; + left: 145px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; + &:hover { + border-bottom: 5px solid #bfbfbf; + } + + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + border: 1px solid #000000; + text-transform: uppercase; + } + } } } -- 2.34.1 From a3392fd35d3b5e2f1c2774da28dc48e319830ce5 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 18:09:03 -0300 Subject: [PATCH 18/27] fix: Consertado as margens principais do produto --- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.flex-layout.css | 13 +++++++++++++ styles/css/vtex.store-components.css | 11 +---------- styles/css/vtex.tab-layout.css | 2 +- styles/sass/pages/product/vtex.flex-layout.scss | 12 ++++++++++++ .../sass/pages/product/vtex.store-components.scss | 14 ++++---------- styles/sass/pages/product/vtex.tab-layout.scss | 2 +- 7 files changed, 33 insertions(+), 23 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c85f564..1706b60 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -312,7 +312,7 @@ "props": { "itemsPerPage": { "desktop": 4, - "tablet": 1, + "tablet": 3, "phone": 1 }, "infinite": true, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c807690..c59897a 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,6 +9,19 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ +.flexRow { + margin: 0 40px; +} + +:global(.vtex-stack-layout-0-x-stackItem) .flexRow { + margin: 0; +} + +.flexRowContent { + margin: 8px 0 0 0; + padding: 0; +} + .flexRowContent--cart { display: flex; align-items: center; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 55f8050..ff19d1c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,19 +13,10 @@ margin: 0 0 0 0 !important; } -.productImageTag { +.carouselContainer .productImageTag { max-height: none !important; } -.thumbImg { - width: 86%; - margin: 0; -} - -.productImagesThumb { - height: auto !important; -} - .productBrand { display: flex; justify-content: flex-end; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index d63cf56..79c6c7f 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,7 +9,7 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ .container { - margin-bottom: 16px; + padding: 0 40px 16px 40px; } .listContainer { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 4108e84..3d2f750 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,3 +1,15 @@ +.flexRow { + margin: 0 40px; +} +:global(.vtex-stack-layout-0-x-stackItem) { + .flexRow { + margin: 0; + } +} +.flexRowContent { + margin: 8px 0 0 0; + padding: 0; +} .flexRowContent--cart { display: flex; align-items: center; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 756b124..828efdc 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -3,18 +3,12 @@ margin: 0 0 0 0 !important; } -.productImageTag { - max-height: none !important; +.carouselContainer { + .productImageTag { + max-height: none !important; + } } -.thumbImg { - width: 86%; - margin: 0; -} - -.productImagesThumb { - height: auto !important; -} .productBrand { display: flex; justify-content: flex-end; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e91615b..d7ad334 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,5 @@ .container { - margin-bottom: 16px; + padding: 0 40px 16px 40px; } .listContainer { display: flex; -- 2.34.1 From 02fa36c2261d0640ac06ea8567dce97c47ec0cbb Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 20:14:30 -0300 Subject: [PATCH 19/27] fix: Consertado o tamanho da imagem --- styles/css/vtex.store-components.css | 13 ++++++++++++- .../pages/product/vtex.store-components.scss | 17 ++++++++++++++--- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index ff19d1c..d66941f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,10 +13,21 @@ margin: 0 0 0 0 !important; } -.carouselContainer .productImageTag { +.productImageTag { max-height: none !important; } +/* +.productImagesGallerySlide { + .productImageTag { + width: 800px; + } +} +*/ +.productImagesThumb { + margin-right: 16px; +} + .productBrand { display: flex; justify-content: flex-end; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 828efdc..0dd1aef 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,12 +2,20 @@ max-width: 100%; margin: 0 0 0 0 !important; } - -.carouselContainer { +.productImageTag { + max-height: none !important; +} +/* +.productImagesGallerySlide { .productImageTag { - max-height: none !important; + width: 800px; } } +*/ + +.productImagesThumb { + margin-right: 16px; +} .productBrand { display: flex; @@ -246,3 +254,6 @@ } } } + +@media screen and (max-width: 1024px) { +} -- 2.34.1 From 8a5c9887e49f6aa05b6c43341bce9fcef763d5c1 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 21:34:14 -0300 Subject: [PATCH 20/27] feat: Adicionado estilo tablet do produto --- styles/css/vtex.flex-layout.css | 7 + styles/css/vtex.product-summary.css | 52 ++---- styles/css/vtex.store-components.css | 159 ++++++++++++------ styles/css/vtex.tab-layout.css | 16 ++ .../sass/pages/product/vtex.flex-layout.scss | 6 + .../pages/product/vtex.product-summary.scss | 2 + .../pages/product/vtex.slider-layout.scss | 2 + .../pages/product/vtex.store-components.scss | 71 +++++++- .../sass/pages/product/vtex.tab-layout.scss | 15 ++ 9 files changed, 234 insertions(+), 96 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-summary.scss diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c59897a..79d4bec 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -42,4 +42,11 @@ font-size: 18px; line-height: 25px; color: #ffffff; +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .flexRowContent { + display: flex; + flex-direction: column; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..f5ba8ae 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,10 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d66941f..75263f1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -178,24 +178,97 @@ color: #929292; } +/* .newsletter { - margin-top: 64px; -} -.newsletter .container { - display: flex; - height: 175px; - padding: 0 0 0 0; background: black; - align-items: center; - justify-content: center; -} -.newsletter .container .label { + border-bottom: 1px solid #ffffff; + margin: 0; display: flex; flex-direction: column; - font-size: 0; + justify-content: center; + align-items: center; + .container { + display: flex; + //height: 175px; + //padding: 0 0 0 0; + //background: black; + align-items: center; + justify-content: center; + .label { + display: flex; + flex-direction: column; + font-size: 0; + &::before { + content: "Assine nossa Newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + } + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + } + } + :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + width: 774px; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + } + :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + } + :global(.vtex-button) { + position: relative; + left: 145px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; + &:hover { + border-bottom: 5px solid #bfbfbf; + } + + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + border: 1px solid #000000; + text-transform: uppercase; + } + } + } } -.newsletter .container .label::before { - content: "Assine nossa Newsletter"; +*/ +.newsletter { + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.label { font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -203,49 +276,41 @@ line-height: 38px; text-align: center; color: #ffffff; + border: none; } -.newsletter .container .label::after { + +.label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: "Open Sans"; + font-family: sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; text-align: center; color: #929292; -} -.newsletter .container :global(.vtex-input-prefix__group) { display: flex; - justify-content: center; - width: 774px; - border-top: none; - border-right: none; - border-left: none; - border-bottom: 1px solid #929292; + flex-direction: column; + gap: 16px; + margin-top: 16px; } -.newsletter .container :global(.vtex-styleguide-9-x-input) { - background: transparent; - padding: 0 0 0 0; -} -.newsletter .container :global(.vtex-button) { - position: relative; - left: 145px; - background: transparent; - border: none; - border-radius: 0; - border-bottom: 3px solid #bfbfbf; -} -.newsletter .container :global(.vtex-button):hover { - border-bottom: 5px solid #bfbfbf; -} -.newsletter .container :global(.vtex-button) :global(.vtex-button__label) { - font-family: "Open Sans"; + +.productDescriptionTitle { + font-family: sans-serif; font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #ffffff; - border: 1px solid #000000; - text-transform: uppercase; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + text-align: left; +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .container { + display: flex; + flex-direction: column; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 79c6c7f..2150530 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -61,4 +61,20 @@ display: flex; flex-direction: row; gap: 32px; +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .listContainer { + display: flex; + flex-direction: column; + } + .contentItem { + display: flex; + flex-direction: column; + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } + .productDescriptionText { + text-align: justify; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 3d2f750..e52a860 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -33,3 +33,9 @@ } } } +@media screen and (max-width: 1024px) and (min-width: 768px) { + .flexRowContent { + display: flex; + flex-direction: column; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..595f5d8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,2 @@ +@media screen and (max-width: 1024px) and (min-width: 768px) { +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 8052275..a233b64 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -10,3 +10,5 @@ display: flex; justify-content: center; } +@media screen and (max-width: 1024px) and (min-width: 768px) { +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 0dd1aef..3a94064 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -181,14 +181,20 @@ color: #929292; } } - +/* .newsletter { - margin-top: 64px; + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; .container { display: flex; - height: 175px; - padding: 0 0 0 0; - background: black; + //height: 175px; + //padding: 0 0 0 0; + //background: black; align-items: center; justify-content: center; .label { @@ -254,6 +260,57 @@ } } } - -@media screen and (max-width: 1024px) { +*/ +.newsletter { + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.label { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + border: none; +} +.label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 16px; +} + +.productDescriptionTitle { + font-family: sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + text-align: left; +} +@media screen and (max-width: 1024px) and (min-width: 768px) { + .container { + display: flex; + flex-direction: column; + } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index d7ad334..6678e7d 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -52,3 +52,18 @@ flex-direction: row; gap: 32px; } +@media screen and (max-width: 1024px) and (min-width: 768px) { + .listContainer { + display: flex; + flex-direction: column; + } + .contentItem { + display: flex; + flex-direction: column; + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } + .productDescriptionText { + text-align: justify; + } +} -- 2.34.1 From 92789c1daa54f3720e2d6d9451da34dbface444e Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 10:13:51 -0300 Subject: [PATCH 21/27] feat: Adicionado o estilo do frete --- styles/css/vtex.flex-layout.css | 6 +- styles/css/vtex.store-components.css | 95 ++++++++++++++++++- .../sass/pages/product/vtex.flex-layout.scss | 4 +- .../pages/product/vtex.store-components.scss | 87 ++++++++++++++++- 4 files changed, 183 insertions(+), 9 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 79d4bec..065f1ad 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,16 +9,12 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ -.flexRow { - margin: 0 40px; -} - :global(.vtex-stack-layout-0-x-stackItem) .flexRow { margin: 0; } .flexRowContent { - margin: 8px 0 0 0; + margin: 8px 0 0 0px; padding: 0; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 75263f1..d86410a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -10,7 +10,7 @@ /* Grid breakpoints */ .container { max-width: 100%; - margin: 0 0 0 0 !important; + margin: 0 40px 0 40px !important; } .productImageTag { @@ -161,6 +161,99 @@ top: 8px; } +.shippingTableRadioBtn { + display: none; +} + +.shippingTableHead { + display: grid; + position: relative; + right: 60px; +} + +.shippingTable { + border: none; + grid-template-columns: none !important; +} + +.shippingTableRow { + display: grid; + grid-template-columns: 200px 200px 200px; +} + +.shippingTableCellDeliveryName { + order: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableCellDeliveryPrice { + order: 1; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableCellDeliveryEstimate { + order: 2; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableHeadDeliveryName { + order: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} + +.shippingTableHeadDeliveryPrice { + order: 1; + font-size: 0; +} +.shippingTableHeadDeliveryPrice::before { + content: "FRETE"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} + +.shippingTableHeadDeliveryEstimate { + order: 2; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} + .productDescriptionContainer .productDescriptionTitle { font-family: "Open Sans"; font-style: normal; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e52a860..7db885a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,13 +1,13 @@ .flexRow { - margin: 0 40px; } + :global(.vtex-stack-layout-0-x-stackItem) { .flexRow { margin: 0; } } .flexRowContent { - margin: 8px 0 0 0; + margin: 8px 0 0 0px; padding: 0; } .flexRowContent--cart { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3a94064..286cbfb 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,6 @@ .container { max-width: 100%; - margin: 0 0 0 0 !important; + margin: 0 40px 0 40px !important; } .productImageTag { max-height: none !important; @@ -161,7 +161,92 @@ top: 8px; } } +.shippingTableRadioBtn { + display: none; +} +.shippingTableHead { + display: grid; + position: relative; + right: 60px; +} +.shippingTable { + //display: grid; + border: none; + //flex-direction: column; + grid-template-columns: none !important; +} +.shippingTableRow { + display: grid; + grid-template-columns: 200px 200px 200px; +} +.shippingTableCellDeliveryName { + order: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingTableCellDeliveryPrice { + order: 1; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingTableCellDeliveryEstimate { + order: 2; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingTableHeadDeliveryName { + order: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} +.shippingTableHeadDeliveryPrice { + order: 1; + font-size: 0; + &::before { + content: "FRETE"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + } +} +.shippingTableHeadDeliveryEstimate { + order: 2; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} //Estilização da descrição do produto .productDescriptionContainer { .productDescriptionTitle { -- 2.34.1 From eb6440c499663c296e58f587217055757524daa6 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 11:00:00 -0300 Subject: [PATCH 22/27] =?UTF-8?q?feat:=20Adicionado=20os=20estilos=20dos?= =?UTF-8?q?=20pre=C3=A7os=20e=20parcelados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 14 ++- styles/css/vtex.product-price.css | 96 +++++-------------- .../sass/pages/product/vtex.flex-layout.scss | 20 ++-- .../pages/product/vtex.product-price.scss | 17 ++++ 4 files changed, 61 insertions(+), 86 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 065f1ad..c2619c5 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,18 +9,22 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ -:global(.vtex-stack-layout-0-x-stackItem) .flexRow { - margin: 0; -} - .flexRowContent { margin: 8px 0 0 0px; padding: 0; } +:global(.vtex-stack-layout-0-x-stackItem) .flexRow { + margin: 0; +} + +.flexRow--buyButton .flexRowContent { + margin: 0 0 0 0 !important; + padding: 0; +} + .flexRowContent--cart { display: flex; - align-items: center; justify-content: center; margin-bottom: 25px; } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..b8cd188 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,27 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; + font-family: "Open Sans"; + font-style: normal; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 7db885a..8a1039d 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,18 +1,24 @@ .flexRow { } - -:global(.vtex-stack-layout-0-x-stackItem) { - .flexRow { - margin: 0; - } -} .flexRowContent { margin: 8px 0 0 0px; padding: 0; } +:global(.vtex-stack-layout-0-x-stackItem) { + .flexRow { + margin: 0; + } +} +.flexRow--buyButton { + .flexRowContent { + margin: 0 0 0 0 !important; + padding: 0; + } +} + .flexRowContent--cart { display: flex; - align-items: center; + justify-content: center; margin-bottom: 25px; .flexRow--buyButton { diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..0d16003 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,17 @@ +.sellingPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installments { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} -- 2.34.1 From c7689808107b941944e8e3a3a1167f648ab4869c Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 11:31:20 -0300 Subject: [PATCH 23/27] =?UTF-8?q?feat:=20Adicionado=20os=20estilo=20dos=20?= =?UTF-8?q?bot=C3=B5es=20do=20newsletter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 3 +- styles/css/vtex.store-components.css | 130 +++++++---------- .../sass/pages/product/vtex.flex-layout.scss | 4 +- .../pages/product/vtex.store-components.scss | 133 +++++++----------- 4 files changed, 104 insertions(+), 166 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c2619c5..fd74ea1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -25,8 +25,7 @@ .flexRowContent--cart { display: flex; - justify-content: center; - margin-bottom: 25px; + gap: 10px; } .flexRowContent--cart .flexRow--buyButton :global(.vtex-button) { background-color: black; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d86410a..f9bd86b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -271,94 +271,64 @@ color: #929292; } -/* .newsletter { background: black; border-bottom: 1px solid #ffffff; - margin: 0; + margin: 64px 0 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; - .container { - display: flex; - //height: 175px; - //padding: 0 0 0 0; - //background: black; - align-items: center; - justify-content: center; - .label { - display: flex; - flex-direction: column; - font-size: 0; - &::before { - content: "Assine nossa Newsletter"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - text-align: center; - color: #ffffff; - } - &::after { - content: "Receba ofertas e novidades por e-mail"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - text-align: center; - color: #929292; - } - } - :global(.vtex-input-prefix__group) { - display: flex; - justify-content: center; - width: 774px; - border-top: none; - border-right: none; - border-left: none; - border-bottom: 1px solid #929292; - } - :global(.vtex-styleguide-9-x-input) { - background: transparent; - padding: 0 0 0 0; - } - :global(.vtex-button) { - position: relative; - left: 145px; - background: transparent; - border: none; - border-radius: 0; - border-bottom: 3px solid #bfbfbf; - &:hover { - border-bottom: 5px solid #bfbfbf; - } - - :global(.vtex-button__label) { - font-family: "Open Sans"; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #ffffff; - border: 1px solid #000000; - text-transform: uppercase; - } - } - } } -*/ -.newsletter { - background: black; - border-bottom: 1px solid #ffffff; - margin: 0; +.newsletter .container { + padding: 32px 0 16px 0; +} +.newsletter .label { + font-size: 0; +} +.newsletter .label::before { + content: "Assine nossa newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #ffffff; +} +.newsletter .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; +} +.newsletter :global(.vtex-input-prefix__group) { display: flex; - flex-direction: column; justify-content: center; - align-items: center; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + border-radius: 0; +} +.newsletter :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + width: 774px; +} +.newsletter :global(.vtex-button) { + position: relative; + right: 40px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; +} +.newsletter :global(.vtex-button):hover { + border-bottom: 5px solid #bfbfbf; } .label { @@ -374,7 +344,7 @@ .label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 18px; @@ -388,7 +358,7 @@ } .productDescriptionTitle { - font-family: sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 24px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 8a1039d..cf13ac1 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -18,9 +18,7 @@ .flexRowContent--cart { display: flex; - - justify-content: center; - margin-bottom: 25px; + gap: 10px; .flexRow--buyButton { :global(.vtex-button) { background-color: black; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 286cbfb..ddb4e2b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -170,9 +170,8 @@ right: 60px; } .shippingTable { - //display: grid; border: none; - //flex-direction: column; + grid-template-columns: none !important; } .shippingTableRow { @@ -266,94 +265,66 @@ color: #929292; } } -/* + .newsletter { background: black; border-bottom: 1px solid #ffffff; - margin: 0; + margin: 64px 0 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; .container { - display: flex; - //height: 175px; - //padding: 0 0 0 0; - //background: black; - align-items: center; - justify-content: center; - .label { - display: flex; - flex-direction: column; - font-size: 0; - &::before { - content: "Assine nossa Newsletter"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - text-align: center; - color: #ffffff; - } - &::after { - content: "Receba ofertas e novidades por e-mail"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - text-align: center; - color: #929292; - } - } - :global(.vtex-input-prefix__group) { - display: flex; - justify-content: center; - width: 774px; - border-top: none; - border-right: none; - border-left: none; - border-bottom: 1px solid #929292; - } - :global(.vtex-styleguide-9-x-input) { - background: transparent; - padding: 0 0 0 0; - } - :global(.vtex-button) { - position: relative; - left: 145px; - background: transparent; - border: none; - border-radius: 0; - border-bottom: 3px solid #bfbfbf; - &:hover { - border-bottom: 5px solid #bfbfbf; - } + padding: 32px 0 16px 0; + } + .label { + font-size: 0; + &::before { + content: "Assine nossa newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; - :global(.vtex-button__label) { - font-family: "Open Sans"; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #ffffff; - border: 1px solid #000000; - text-transform: uppercase; - } + color: #ffffff; + } + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + } + } + :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + border-radius: 0; + } + :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + width: 774px; + } + :global(.vtex-button) { + position: relative; + right: 40px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; + &:hover { + border-bottom: 5px solid #bfbfbf; } } -} -*/ -.newsletter { - background: black; - border-bottom: 1px solid #ffffff; - margin: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; } .label { font-family: "Open Sans"; @@ -367,7 +338,7 @@ } .label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 18px; @@ -381,7 +352,7 @@ } .productDescriptionTitle { - font-family: sans-serif; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 24px; -- 2.34.1 From c97a1031228745153a607bb056becc68fc6fe39b Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 12:06:26 -0300 Subject: [PATCH 24/27] feat: Adicionado os estilo dos pontos do carroussel --- styles/css/vtex.slider-layout.css | 10 +++++++++- styles/sass/pages/product/vtex.slider-layout.scss | 10 +++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 72afeb0..ba43044 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -15,8 +15,16 @@ } }*/ .sliderLayoutContainer { - width: 95%; + width: 100%; padding: 0 16px 0 16px; display: flex; justify-content: center; +} +.sliderLayoutContainer .paginationDot { + background: black; +} +.sliderLayoutContainer .paginationDot--isActive { + background: white; + border: 0.5px solid black; + font-size: large; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index a233b64..36042b3 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -5,10 +5,18 @@ } }*/ .sliderLayoutContainer { - width: 95%; + width: 100%; padding: 0 16px 0 16px; display: flex; justify-content: center; + .paginationDot { + background: black; + } + .paginationDot--isActive { + background: white; + border: 0.5px solid black; + font-size: large; + } } @media screen and (max-width: 1024px) and (min-width: 768px) { } -- 2.34.1 From d1984b5b3c0da2b7ef075e331a2bd5c3038a1015 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 12:15:24 -0300 Subject: [PATCH 25/27] fix: Consertado margem errado --- styles/css/vtex.store-components.css | 3 +++ styles/sass/pages/product/vtex.store-components.scss | 3 +++ 2 files changed, 6 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f9bd86b..f0c04ee 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -270,6 +270,9 @@ line-height: 22px; color: #929292; } +.productDescriptionContainer .productDescriptionText .container { + margin: 0 0 0 0 !important; +} .newsletter { background: black; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index ddb4e2b..175d514 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -257,6 +257,9 @@ color: #575757; } .productDescriptionText { + .container { + margin: 0 0 0 0 !important; + } font-family: "Open Sans"; font-style: normal; font-weight: 400; -- 2.34.1 From 6260212e86363c56fb1eb239f7ef135de13fd3a9 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 14:53:14 -0300 Subject: [PATCH 26/27] fix: Consertado o tamanho do slider do carroussel --- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.slider-layout.css | 7 ++++++- styles/css/vtex.store-components.css | 9 ++++++++- styles/sass/pages/product/vtex.slider-layout.scss | 7 ++++++- styles/sass/pages/product/vtex.store-components.scss | 9 ++++++++- 5 files changed, 29 insertions(+), 5 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1706b60..ca093e9 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -316,7 +316,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "always", "blockClass": "carousel" }, "children": [] diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index ba43044..20531bb 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -24,7 +24,12 @@ background: black; } .sliderLayoutContainer .paginationDot--isActive { + width: 17px !important; + height: 17px !important; background: white; border: 0.5px solid black; - font-size: large; +} +.sliderLayoutContainer .paginationDotsContainer { + display: flex; + align-items: center; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f0c04ee..15d38b6 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -10,7 +10,7 @@ /* Grid breakpoints */ .container { max-width: 100%; - margin: 0 40px 0 40px !important; + padding: 0 40px 0 40px; } .productImageTag { @@ -25,9 +25,15 @@ } */ .productImagesThumb { + width: 100%; + max-width: 90px; margin-right: 16px; } +.thumbImg { + height: 90px; +} + .productBrand { display: flex; justify-content: flex-end; @@ -272,6 +278,7 @@ } .productDescriptionContainer .productDescriptionText .container { margin: 0 0 0 0 !important; + padding: 0 0 0 0 !important; } .newsletter { diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 36042b3..565499c 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -13,9 +13,14 @@ background: black; } .paginationDot--isActive { + width: 17px !important; + height: 17px !important; background: white; border: 0.5px solid black; - font-size: large; + } + .paginationDotsContainer { + display: flex; + align-items: center; } } @media screen and (max-width: 1024px) and (min-width: 768px) { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 175d514..737b135 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,7 @@ .container { max-width: 100%; - margin: 0 40px 0 40px !important; + //margin: 0 40px 0 40px !important; + padding: 0 40px 0 40px; } .productImageTag { max-height: none !important; @@ -14,8 +15,13 @@ */ .productImagesThumb { + width: 100%; + max-width: 90px; margin-right: 16px; } +.thumbImg { + height: 90px; +} .productBrand { display: flex; @@ -259,6 +265,7 @@ .productDescriptionText { .container { margin: 0 0 0 0 !important; + padding: 0 0 0 0 !important; } font-family: "Open Sans"; font-style: normal; -- 2.34.1 From e6c7d5004fd32a3bdfd280ea7f6e0b9b960e6b79 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 15:22:02 -0300 Subject: [PATCH 27/27] feat: Adicionado estilos mobile do carroussel --- styles/css/vtex.flex-layout.css | 4 ++++ styles/css/vtex.product-identifier.css | 6 ++++++ styles/css/vtex.store-components.css | 13 ++++++------- styles/sass/pages/product/vtex.flex-layout.scss | 4 ++++ .../pages/product/vtex.product-identifier.scss | 5 +++++ .../sass/pages/product/vtex.store-components.scss | 14 ++++++-------- 6 files changed, 31 insertions(+), 15 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index fd74ea1..6ca4d50 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -48,4 +48,8 @@ display: flex; flex-direction: column; } + .flexRowContent .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 128134d..0b08252 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -29,4 +29,10 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .product-identifier--productReference { + justify-content: flex-start; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 15d38b6..3141e90 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -17,13 +17,6 @@ max-height: none !important; } -/* -.productImagesGallerySlide { - .productImageTag { - width: 800px; - } -} -*/ .productImagesThumb { width: 100%; max-width: 90px; @@ -386,4 +379,10 @@ display: flex; flex-direction: column; } + .productBrand { + justify-content: flex-start; + } + .product-identifier--productReference { + justify-content: none; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index cf13ac1..9bb0e4a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -41,5 +41,9 @@ .flexRowContent { display: flex; flex-direction: column; + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index fec8794..619122b 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -17,3 +17,8 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); } +@media screen and (max-width: 1024px) and (min-width: 768px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 737b135..25c7ca1 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,18 +1,10 @@ .container { max-width: 100%; - //margin: 0 40px 0 40px !important; padding: 0 40px 0 40px; } .productImageTag { max-height: none !important; } -/* -.productImagesGallerySlide { - .productImageTag { - width: 800px; - } -} -*/ .productImagesThumb { width: 100%; @@ -379,4 +371,10 @@ display: flex; flex-direction: column; } + .productBrand { + justify-content: flex-start; + } + .product-identifier--productReference { + justify-content: none; + } } -- 2.34.1