From e08a55b38fd2355de839f6553b83c00adb205051 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Thu, 26 Jan 2023 16:58:39 -0300 Subject: [PATCH 01/11] feat(main): substitui o icone de casa pela palavra home no breadcrumb --- store/blocks/home/home.jsonc | 6 +- store/blocks/search.jsonc | 23 ++-- styles/css/agenciamagma.store-theme.css | 9 +- styles/css/vtex.breadcrumb.css | 16 +++ styles/css/vtex.flex-layout.css | 110 ++---------------- styles/css/vtex.flex-layoutbreadcrumb.css | 16 +++ .../product/agenciamagma.store-theme.scss | 8 -- .../sass/pages/product/vtex.breadcrumb.scss | 9 ++ 8 files changed, 65 insertions(+), 132 deletions(-) create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/css/vtex.flex-layoutbreadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..ebacd49 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,9 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ - "flex-layout.row#deals", + "example-component", + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", "flex-layout.row#shelf", diff --git a/store/blocks/search.jsonc b/store/blocks/search.jsonc index 22be941..735db90 100644 --- a/store/blocks/search.jsonc +++ b/store/blocks/search.jsonc @@ -108,7 +108,10 @@ } }, "flex-layout.row#searchinfo": { - "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"] + "children": [ + "flex-layout.col#productCount", + "flex-layout.row#orderByAndSwitcher" + ] }, "flex-layout.row#orderByAndSwitcher": { "children": ["order-by.v2", "gallery-layout-switcher"], @@ -272,29 +275,19 @@ "props": { "name": "grid" }, - "children": [ - "icon-grid", - "responsive-layout.desktop#textOptionGrid" - ] + "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"] }, "gallery-layout-option#list": { "props": { "name": "list" }, - "children": [ - "icon-inline-grid", - "responsive-layout.desktop#textOptionList" - ] + "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"] }, "responsive-layout.desktop#textOptionGrid": { - "children": [ - "rich-text#option-grid" - ] + "children": ["rich-text#option-grid"] }, "responsive-layout.desktop#textOptionList": { - "children": [ - "rich-text#option-list" - ] + "children": ["rich-text#option-list"] }, "rich-text#option-grid": { "props": { diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..8af0e2f --- /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 */ +.homeLink .homeIcon { + display: none; +} + +.homeLink::before { + content: "Home"; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..785c8b9 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,12 @@ -.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 */ +/* Grid breakpoints */ +.vtex-breadcrumb-1-x-container { + background-color: red; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layoutbreadcrumb.css b/styles/css/vtex.flex-layoutbreadcrumb.css new file mode 100644 index 0000000..a5569af --- /dev/null +++ b/styles/css/vtex.flex-layoutbreadcrumb.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 */ +.vtex-breadcrumb-1-x-container { + background-color: red; +} + +.vtex-breadcrumb-1-x-container { + padding: 0 !important; +} \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..e69de29 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..7065031 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,9 @@ +.homeLink { + .homeIcon { + display: none; + } +} + +.homeLink::before { + content: "Home"; +} From b333c8a83158f46729e6fa8083cc06d985c33e3a Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:32:17 -0300 Subject: [PATCH 02/11] feat(pix-bloc): Adiciona o bloco do pix e seu sass --- assets/images/pix-106 1.png | Bin 0 -> 1422 bytes manifest.json | 3 +- react/Prices.tsx | 1 + react/components/Prices/Prices.tsx | 58 ++ react/components/Prices/styles.css | 65 ++ store/blocks/pdp/product.jsonc | 135 +++- store/blocks/product-price.jsonc | 10 +- .../product-summary-list.jsonc | 6 +- .../product-summary/product-summary.jsonc | 4 +- store/blocks/product-summary/quickview.json | 28 +- store/interfaces.json | 3 + styles/configs/font-faces.css | 465 ++++++++++++ styles/configs/style.json | 688 +++++++++--------- styles/css/vtex.product-identifier.css | 8 + styles/css/vtex.shipping-simulator.css | 22 + styles/css/vtex.store-components.css | 160 +++- .../pages/product/vtex.store-components.scss | 183 ++++- 17 files changed, 1438 insertions(+), 401 deletions(-) create mode 100644 assets/images/pix-106 1.png create mode 100644 react/Prices.tsx create mode 100644 react/components/Prices/Prices.tsx create mode 100644 react/components/Prices/styles.css create mode 100644 styles/configs/font-faces.css create mode 100644 styles/css/vtex.shipping-simulator.css diff --git a/assets/images/pix-106 1.png b/assets/images/pix-106 1.png new file mode 100644 index 0000000000000000000000000000000000000000..103bca5e43cb0bfeabe0b798fbb072ff4c4f75f0 GIT binary patch literal 1422 zcmV;91#$X`P)X1^@s6g&p|Z00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPiX`~+SFk zkR%9id=NZc6GpjQwl3baAEOXSf#4fB3a})-(~!93K`HL;<-5;-tP=I{)AiNo{J&5r zTV}kI9c*t(T?v9Ytm5uVYA5=03k1=FQ0s4pFkJ%%4WOzzn9Jp&2g?JM;2y25tu?Ne z@8wk|zMaeYSHDmwCC#`fm=beQFt&F~o4TV9a=8zE`<&(25Li@)>v9_yLpv|_o{a;6 zwXyc|HiD7$z0%dEu{-WeP#f-7b#7&p7UiIA$10Zg^1~2VJ`lXRuOB?Tr?s0w02?Bt z1#IfKXLA!+#Oyc_JfRkc#bRk5CJy=On#)=XAB-*pO>Rv>x$jK-+hn@&{kj^2v9tTK90h?TBYgtH z5NdG{#uW&|qCSLs=aYgVw5X7E*8#q;qv}ejbw1KD4#3c^S_*~WRR=-2$K5P^0xD8; z5C+URZGAMjO@bsTI4_Uvkzp7*OIzjZCofY2DV8d ztiB9$hQrbnK{TR0PJP7d4c^y}z{ie*$1tG=A$Vmy7+YR)HY@^x2P69Z5FscX404{} zn*i*?zZB;I1k|1++_Hioc)H9pbR`IesSTMEuAZk9Ga1zJuyd54wzM|WQbLWU?Avpc zTkJO;Jlck9>M{jyJyTlZ#@dsuiQ2U~SqjmC5Iivq%0Md=P74OAikG>XlngaffBce$ zSiCk2BQQd+zW@b6FlYrEjc*@iV1$Cs2%au3+D$Z!+SApa0#BEwX`HmrjkDo?xSdkB z0#ol07~5dTd9sd$?zFsz1S2V8u_~P(tlp%an~29+$XZ};2sw?iE~H!Twjndd^Yf*~ zQusjFBqv$r|5B#+qw)QZHhs#!KT1vi$2yQ8$K(Tk@~07*qoM6N<$f-{PZumAu6 literal 0 HcmV?d00001 diff --git a/manifest.json b/manifest.json index 9ee3cc5..66bf94e 100644 --- a/manifest.json +++ b/manifest.json @@ -66,7 +66,8 @@ "vtex.tab-layout": "0.x", "vtex.condition-layout": "2.x", "vtex.css-handles": "1.x", - "vtex.product-context": "0.x" + "vtex.product-context": "0.x", + "vtex.store-newsletter": "1.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/react/Prices.tsx b/react/Prices.tsx new file mode 100644 index 0000000..2ce884d --- /dev/null +++ b/react/Prices.tsx @@ -0,0 +1 @@ +export { default } from "./components/Prices/Prices"; diff --git a/react/components/Prices/Prices.tsx b/react/components/Prices/Prices.tsx new file mode 100644 index 0000000..66f084e --- /dev/null +++ b/react/components/Prices/Prices.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import styles from "./styles.css"; +import { useProduct } from "vtex.product-context"; + +export default function Prices() { + const product = useProduct(); + console.log(product); + return ( +
+ + R${" "} + {product?.selectedItem?.sellers[0].commertialOffer.Installments[3].TotalValuePlusInterestRate.toString().replace( + ".", + "," + )}{" "} + +
+ + { + product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .NumberOfInstallments + }{" "} + x + + de + + R${" "} + {product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toString().replace( + ".", + "," + )} + + sem juros +
+
+ pix-image +
+ + R${" "} + {( + Number( + product?.selectedItem?.sellers[0].commertialOffer + .Installments[0].TotalValuePlusInterestRate + ) * 0.9 + ) + .toFixed(2) + .toString() + .replace(".", ",")} + + 10 % de desconto +
+
+
+ ); +} diff --git a/react/components/Prices/styles.css b/react/components/Prices/styles.css new file mode 100644 index 0000000..f45a118 --- /dev/null +++ b/react/components/Prices/styles.css @@ -0,0 +1,65 @@ +.pixWrapper { + display: flex; +} + +.fullPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installmentsNumberText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.BiginstallmentsNumberText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.pixWrapper { + display: flex; + gap: 26px; + margin-top: 8px; +} + +.pixImage { + width: 66px; + height: 24px; + align-self: center; +} + +.PixValues { + display: flex; + flex-direction: column; +} + +.PixValuesPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.PixValuesText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..8643482 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,11 +3,10 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + "tab-layout#descricao", "shelf.relatedProducts", - "product-questions-and-answers" + "product-questions-and-answers", + "newsletter-form#formulario-newsletter" ] }, "html#breadcrumb": { @@ -28,9 +27,91 @@ }, "flex-layout.row#description": { "props": { - "marginBottom": 7 + "blockClass": "description" }, - "children": ["product-description"] + "children": ["product-images", "product-description"] + }, + "tab-layout#descricao": { + "children": ["tab-list#descricao", "tab-content#descricao"] + }, + "tab-list#descricao": { + "children": [ + "tab-list.item#descricao1", + "tab-list.item#descricao2", + "tab-list.item#descricao3", + "tab-list.item#descricao4", + "tab-list.item#descricao5" + ] + }, + "tab-content#descricao": { + "children": [ + "tab-content.item#descricao1", + "tab-content.item#descricao2", + "tab-content.item#descricao3", + "tab-content.item#descricao4", + "tab-content.item#descricao5" + ] + }, + "tab-list.item#descricao1": { + "props": { + "tabId": "descricao1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#descricao2": { + "props": { + "tabId": "descricao2", + "label": "Descrição" + } + }, + "tab-list.item#descricao3": { + "props": { + "tabId": "descricao3", + "label": "Descrição" + } + }, + "tab-list.item#descricao4": { + "props": { + "tabId": "descricao4", + "label": "Descrição" + } + }, + "tab-list.item#descricao5": { + "props": { + "tabId": "descricao5", + "label": "Descrição" + } + }, + "tab-content.item#descricao1": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "descricao1" + } + }, + "tab-content.item#descricao2": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "descricao2" + } + }, + "tab-content.item#descricao3": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "descricao3" + } + }, + "tab-content.item#descricao4": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "descricao4" + } + }, + "tab-content.item#descricao5": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "descricao5" + } }, "condition-layout.product#availability": { "props": { @@ -65,7 +146,6 @@ "product-specification-badges" ] }, - "product-specification-badges": { "props": { "specificationGroupName": "Group", @@ -82,6 +162,32 @@ "rowGap": 0 } }, + "flex-layout.col#newsletter-wrapper": { + "children": ["newsletter-form#formulario-newsletter"] + }, + "newsletter-form#formulario-newsletter": { + "children": [ + "newsletter-input-email#texto-email", + "newsletter-submit#texto-submit" + ], + "props": { + "blockClass": "formulario-newsletter", + "placeholderText": "Digite seu e-mail" + } + }, + "newsletter-input-email#texto-email": { + "props": { + "placeholderText": "Digite seu e-mail", + "blockClass": "texto-email", + "inputLabel": "Assine nossa newsletter" + } + }, + "newsletter-submit#texto-submit": { + "props": { + "blockClass": "texto-submit", + "submitButtonLabel": "ENVIAR" + } + }, "flex-layout.row#product-image": { "children": ["product-images"] }, @@ -91,7 +197,10 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, + "showNavigationArrows": false } }, "flex-layout.col#right-col": { @@ -101,20 +210,16 @@ }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", - "product-separator", "product-identifier.product", + "componente-prices", + "product-separator", "sku-selector", "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" ] }, diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..829b654 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -18,10 +16,6 @@ "preventHorizontalStretch": true, "marginBottom": 2, "marginTop": 5 - }, - "children": [ - "product-list-price", - "product-price-savings" - ] + } } } diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..d15faac 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -29,11 +29,7 @@ "colSizing": "auto", "colGap": 3, "blockClass": "savingsSummaryListDesktop" - }, - "children": [ - "product-price-savings#summaryPercentage", - "product-price-savings#summary" - ] + } }, "flex-layout.row#summaryListDesktop": { "props":{ diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..bb93cc8 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..74e0832 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "componente-prices": { + "component": "Prices" } } diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..05db6ff --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,465 @@ +/* cyrillic-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4taVIGxA.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4kaVIGxA.woff2) + format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4saVIGxA.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4jaVIGxA.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} +/* hebrew */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4iaVIGxA.woff2) + format("woff2"); + unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; +} +/* vietnamese */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4vaVIGxA.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, + U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4uaVIGxA.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVI.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2) + format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} +/* hebrew */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2) + format("woff2"); + unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; +} +/* vietnamese */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, + U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4taVIGxA.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4kaVIGxA.woff2) + format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4saVIGxA.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4jaVIGxA.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} +/* hebrew */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4iaVIGxA.woff2) + format("woff2"); + unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; +} +/* vietnamese */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4vaVIGxA.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, + U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4uaVIGxA.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 500; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0B4gaVI.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4taVIGxA.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4kaVIGxA.woff2) + format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4saVIGxA.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4jaVIGxA.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} +/* hebrew */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4iaVIGxA.woff2) + format("woff2"); + unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; +} +/* vietnamese */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4vaVIGxA.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, + U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4uaVIGxA.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4gaVI.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4taVIGxA.woff2) + format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, + U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4kaVIGxA.woff2) + format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4saVIGxA.woff2) + format("woff2"); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4jaVIGxA.woff2) + format("woff2"); + unicode-range: U+0370-03FF; +} +/* hebrew */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4iaVIGxA.woff2) + format("woff2"); + unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; +} +/* vietnamese */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4vaVIGxA.woff2) + format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, + U+01AF-01B0, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4uaVIGxA.woff2) + format("woff2"); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, + U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-stretch: normal; + font-display: swap; + src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVI.woff2) + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..8eeed02 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,351 @@ { - "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 - ], - "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], - "customMedia": [ - { "s": 20 }, - { "ns": { - "value": 40, - "minWidth": true - } - }, - { "m": { - "value": 40, - "minWidth": true - } - }, - { "l": { - "value": 64, - "minWidth": true - } - }, - { "xl": { - "value": 80, - "minWidth": true - } - } - ], - "colors": { - "black-90": "rgba(0,0,0,.9)", - "black-80": "rgba(0,0,0,.8)", - "black-70": "rgba(0,0,0,.7)", - "black-60": "rgba(0,0,0,.6)", - "black-50": "rgba(0,0,0,.5)", - "black-40": "rgba(0,0,0,.4)", - "black-30": "rgba(0,0,0,.3)", - "black-20": "rgba(0,0,0,.2)", - "black-10": "rgba(0,0,0,.1)", - "black-05": "rgba(0,0,0,.05)", - "black-025": "rgba(0,0,0,.025)", - "black-0125": "rgba(0,0,0,.0125)", + "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75], + "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], + "customMedia": [ + { "s": 20 }, + { + "ns": { + "value": 40, + "minWidth": true + } + }, + { + "m": { + "value": 40, + "minWidth": true + } + }, + { + "l": { + "value": 64, + "minWidth": true + } + }, + { + "xl": { + "value": 80, + "minWidth": true + } + } + ], + "colors": { + "black-90": "rgba(0,0,0,.9)", + "black-80": "rgba(0,0,0,.8)", + "black-70": "rgba(0,0,0,.7)", + "black-60": "rgba(0,0,0,.6)", + "black-50": "rgba(0,0,0,.5)", + "black-40": "rgba(0,0,0,.4)", + "black-30": "rgba(0,0,0,.3)", + "black-20": "rgba(0,0,0,.2)", + "black-10": "rgba(0,0,0,.1)", + "black-05": "rgba(0,0,0,.05)", + "black-025": "rgba(0,0,0,.025)", + "black-0125": "rgba(0,0,0,.0125)", - "white-90": "rgba(255,255,255,.9)", - "white-80": "rgba(255,255,255,.8)", - "white-70": "rgba(255,255,255,.7)", - "white-60": "rgba(255,255,255,.6)", - "white-50": "rgba(255,255,255,.5)", - "white-40": "rgba(255,255,255,.4)", - "white-30": "rgba(255,255,255,.3)", - "white-20": "rgba(255,255,255,.2)", - "white-10": "rgba(255,255,255,.1)", - "white-05": "rgba(255,255,255,.05)", - "white-025": "rgba(255,255,255,.025)", - "white-0125": "rgba(255,255,255,.0125)" + "white-90": "rgba(255,255,255,.9)", + "white-80": "rgba(255,255,255,.8)", + "white-70": "rgba(255,255,255,.7)", + "white-60": "rgba(255,255,255,.6)", + "white-50": "rgba(255,255,255,.5)", + "white-40": "rgba(255,255,255,.4)", + "white-30": "rgba(255,255,255,.3)", + "white-20": "rgba(255,255,255,.2)", + "white-10": "rgba(255,255,255,.1)", + "white-05": "rgba(255,255,255,.05)", + "white-025": "rgba(255,255,255,.025)", + "white-0125": "rgba(255,255,255,.0125)" + }, + "semanticColors": { + "background": { + "base": "#ffffff", + "base--inverted": "#03044e", + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#f2f4f5", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-background": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-background": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "text": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "link": "#0F3E99", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#0c389f" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#e3e4e6", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-border": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-border": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "on": { + "base": "#3f3f40", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "disabled": "#979899", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a", + "muted-1": "#ffffff", + "muted-2": "#ffffff", + "muted-3": "#3f3f40", + "muted-4": "#3f3f40", + "muted-5": "#3f3f40" + }, + "hover-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + }, + "active-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + } + }, + "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], + "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "widths": [1, 2, 4, 8, 16], + "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], + "heights": [1, 2, 4, 8, 16], + "sizes": [ + { "name": "small", "value": 2 }, + { "name": "regular", "value": 2.5 }, + { "name": "large", "value": 3 } + ], + "typography": { + "measure": [30, 34, 20], + "styles": { + "heading-1": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "3rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "2.25rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], - "widths": [1, 2, 4, 8, 16], - "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], - "heights": [1, 2, 4, 8, 16], - "sizes": [ - {"name": "small", "value": 2}, - {"name": "regular", "value": 2.5}, - {"name": "large", "value": 3} - ], - "typography":{ - "measure": [30, 34, 20], - "styles": { - "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "3rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "2.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "1.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.5rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.875rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "0.875rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1.25rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "code": { - "fontFamily": "Consolas, monaco, monospace", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - } - } + "heading-3": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "1.75rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.5rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Consolas, monaco, monospace", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..0b1513a 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,11 @@ .product-identifier--productReference { margin-bottom: 1rem; } + +.product-identifier__label { + display: none; +} + +.product-identifier__separator { + display: none; +} diff --git a/styles/css/vtex.shipping-simulator.css b/styles/css/vtex.shipping-simulator.css new file mode 100644 index 0000000..c360e75 --- /dev/null +++ b/styles/css/vtex.shipping-simulator.css @@ -0,0 +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 */ +/* Grid breakpoints */ +.shippingContainer { + display: none !important; +} +.shippingContainer :global(.vtex-button__label) { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 0px; + width: 49px; + height: 49px; + background: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..5b308b5 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,162 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + line-height: normal; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :first-child { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :first-child :first-child { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + display: flex; + flex-direction: column; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; + bottom: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: #000; +} +.shippingContainer :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #fff; +} + +.shippingTable { + border: 0; + width: auto; +} +.shippingTable .shippingTableHead { + display: block; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: grid; + grid-template-columns: 103px 56px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + text-align: left; + grid-area: A; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + text-align: left; + grid-area: B; + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "Valor"; + font-size: 14px; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: grid; + grid-template-columns: 103px 56px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding: 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + grid-area: B; } \ 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 36d0f22..b0633f0 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,180 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; + + :global(.vtex-address-form__postalCode) { + display: flex; + + :global(.vtex-address-form__postalCode-forgottenURL) { + line-height: normal; + + :first-child { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + :first-child { + display: none; + } + } + } + + :global(.vtex-input) { + display: flex; + flex-direction: column; + + :global(.vtex-input__label) { + font-size: 0; + } + + :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + + border: 1px solid #cccccc; + border-radius: 0; + + :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; + } + } + :global(.vtex-input__error) { + position: absolute; + bottom: 0; + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; + + :last-child { + color: #000; + } + } + } + + :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + + background: #000; + border: 1px solid #000; + border-radius: 0; + + cursor: pointer; + + :global(.vtex-button__label) { + padding: 0; + font-size: 0; + } + + :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #fff; + } + } +} + +.shippingTable { + border: 0; + width: auto; + .shippingTableHead { + display: block; + .shippingTableRow { + display: grid; + grid-template-columns: 103px 56px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; + } + .shippingTableHeadDeliveryName { + text-align: left; + grid-area: A; + } + .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; + } + .shippingTableHeadDeliveryPrice { + text-align: left; + grid-area: B; + font-size: 0; + &::after { + content: "Valor"; + font-size: 14px; + } + } + } + } + .shippingTableBody { + .shippingTableRow { + display: grid; + grid-template-columns: 103px 56px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; + .shippingTableCell { + padding: 0; + } + .shippingTableRadioBtn { + display: none; + } + .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; + } + .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; + } + .shippingTableCellDeliveryPrice { + grid-area: B; + } + } + } +} From f1d02d3776afe86ef241168b978b55877d97f03b Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:36:31 -0300 Subject: [PATCH 03/11] feat(main-product): Adiciona sass do componente --- .../product/agenciamagma.store-theme.scss | 0 .../sass/pages/product/vtex.breadcrumb.scss | 9 - .../product/vtex.product-identifier.scss | 20 ++ styles/sass/pages/product/vtex.rich-text.scss | 0 .../pages/product/vtex.store-components.scss | 180 ------------------ 5 files changed, 20 insertions(+), 189 deletions(-) delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss delete mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss delete mode 100644 styles/sass/pages/product/vtex.rich-text.scss delete mode 100644 styles/sass/pages/product/vtex.store-components.scss diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index e69de29..0000000 diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss deleted file mode 100644 index 7065031..0000000 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ /dev/null @@ -1,9 +0,0 @@ -.homeLink { - .homeIcon { - display: none; - } -} - -.homeLink::before { - content: "Home"; -} 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..358d25a --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,20 @@ +.product-identifier__label, +.product-identifier__separator { + display: none; +} +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + float: right; + margin-bottom: 24px; + color: rgba(146, 146, 146, 0.48); +} + +@media screen and (max-width: 1024px) { + .product-identifier__value { + float: left; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss deleted file mode 100644 index e69de29..0000000 diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss deleted file mode 100644 index b0633f0..0000000 --- a/styles/sass/pages/product/vtex.store-components.scss +++ /dev/null @@ -1,180 +0,0 @@ -.shippingContainer { - display: flex; - margin: 0; - align-items: center; - position: relative; - - :global(.vtex-address-form__postalCode) { - display: flex; - - :global(.vtex-address-form__postalCode-forgottenURL) { - line-height: normal; - - :first-child { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 12px; - :first-child { - display: none; - } - } - } - - :global(.vtex-input) { - display: flex; - flex-direction: column; - - :global(.vtex-input__label) { - font-size: 0; - } - - :global(.vtex-input__label)::before { - content: "CALCULAR FRETE:"; - - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - - :global(.vtex-input-prefix__group) { - width: 231px; - height: 49px; - margin: 0; - padding: 16.5px 0 16.5px 16px; - - border: 1px solid #cccccc; - border-radius: 0; - - :global(.vtex-address-form-4-x-input) { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 16px; - display: flex; - align-items: center; - padding: 8px 0; - } - } - :global(.vtex-input__error) { - position: absolute; - bottom: 0; - } - } - - :global(.vtex-address-form__postalCode-forgottenURL) { - display: flex; - position: absolute; - padding: 0; - left: 312px; - top: 41.5px; - - :last-child { - color: #000; - } - } - } - - :global(.vtex-button) { - display: flex; - width: 49px; - height: 49px; - margin-bottom: 5px; - - background: #000; - border: 1px solid #000; - border-radius: 0; - - cursor: pointer; - - :global(.vtex-button__label) { - padding: 0; - font-size: 0; - } - - :global(.vtex-button__label)::before { - content: "OK"; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 600; - font-size: 14px; - line-height: 19px; - - display: flex; - align-items: center; - - color: #fff; - } - } -} - -.shippingTable { - border: 0; - width: auto; - .shippingTableHead { - display: block; - .shippingTableRow { - display: grid; - grid-template-columns: 103px 56px 136px; - grid-template-areas: "A B C"; - column-gap: 32px; - .shippingTableHeadDeliveryName, - .shippingTableHeadDeliveryEstimate, - .shippingTableHeadDeliveryPrice { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #202020; - text-transform: uppercase; - padding: 0; - } - .shippingTableHeadDeliveryName { - text-align: left; - grid-area: A; - } - .shippingTableHeadDeliveryEstimate { - grid-area: C; - text-align: left; - } - .shippingTableHeadDeliveryPrice { - text-align: left; - grid-area: B; - font-size: 0; - &::after { - content: "Valor"; - font-size: 14px; - } - } - } - } - .shippingTableBody { - .shippingTableRow { - display: grid; - grid-template-columns: 103px 56px 136px; - grid-template-areas: "A B C"; - column-gap: 32px; - margin-top: 15px; - .shippingTableCell { - padding: 0; - } - .shippingTableRadioBtn { - display: none; - } - .shippingTableCellDeliveryName { - grid-area: A; - text-transform: capitalize; - } - .shippingTableCellDeliveryEstimate { - white-space: nowrap; - grid-area: C; - } - .shippingTableCellDeliveryPrice { - grid-area: B; - } - } - } -} From bc2a0b0f6734f524b13ffae57cbba7f80678344e Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:38:52 -0300 Subject: [PATCH 04/11] feat(main-product): Continua a estilizacao do componente --- .../pages/product/vtex.product-price.scss | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 styles/sass/pages/product/vtex.product-price.scss 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..61d80b4 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,69 @@ +.sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + + color: #000000; +} +.flexRowContent { + margin: 0 !important; +} + +.listPriceValue { + text-decoration-line: line-through; + text-decoration-color: #bababa; + &::before { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "de"; + margin-right: 6px; + } + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "por"; + margin-left: 5px; + } + .currencyCode, + .currencyLiteral, + .currencyInteger { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + } +} + +@media screen and (max-width: 1024px) { + .listPrice { + height: 19px; + } + .listPriceValue { + .currencyCode, + .currencyLiteral, + .currencyInteger { + font-size: 12px; + line-height: 16px; + } + } + + .sellingPrice { + font-size: 18px; + line-height: 25px; + } +} + +.currencyGroup { + color: #bababa; +} From 93dbf9084235642ceb408ebaa61ab1a0ceafeb7c Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:39:35 -0300 Subject: [PATCH 05/11] feat(main-product): finaliza a estilizacao do componenta --- .../sass/pages/product/vtex.breadcrumb.scss | 35 ++++++++++++ .../pages/product/vtex.product-quantity.scss | 56 +++++++++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..c178ec3 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,35 @@ +.container { + align-items: center; + + .homeLink { + padding: 0; + + .homeIcon { + display: none; + } + } + .homeLink::before { + content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + + } + .arrow--1 { + .link { + font-size: 0; + } + .link::before { + content: "Sapatos"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } +} 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..88dc6fb --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,56 @@ +.quantitySelectorContainer { + margin: 0; + .quantitySelectorTitle { + display: none; + } + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + :global(.vtex-numeric-stepper__input) { + width: 32px; + height: 49px; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + background-color: #ffffff; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + } + } + // .quantitySelectorStepper { + // } +} From 1a0d3c50b940eca2e3a3fd2233ebc2337f069387 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:41:26 -0300 Subject: [PATCH 06/11] feat(product-description): Adiciona e inia a estilizacao do componento --- styles/sass/pages/product/vtex.rich-text.scss | 22 + .../pages/product/vtex.store-components.scss | 646 ++++++++++++++++++ 2 files changed, 668 insertions(+) create mode 100644 styles/sass/pages/product/vtex.rich-text.scss create mode 100644 styles/sass/pages/product/vtex.store-components.scss diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss new file mode 100644 index 0000000..1cf92b7 --- /dev/null +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,22 @@ +.heading--specifications-texto { + margin: 0 0 16px; + @media (min-width: 2560px) { + font-weight: 400; + font-size: 24px; + line-height: 38px; + } +} + +@media screen and (max-width: 1024px) { + .heading--specifications-texto { + font-size: 24px; + line-height: 38px; + margin: 0; + } +} + +@media screen and (max-width: 376px) { + .heading--specifications-texto { + font-size: 20px; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss new file mode 100644 index 0000000..2c72770 --- /dev/null +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -0,0 +1,646 @@ +.newsletter { + background: black; + .container { + .form { + .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 8px; + &::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 38px; + color: #ffffff; + } + &::after { + content: "Receba ofertas e novidades por e-mail"; + white-space: pre; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + @media (max-width: 350px) { + white-space: unset; + } + } + } + .inputGroup { + display: flex; + justify-content: center; + :global(.vtex-input) { + width: 686px; + @media (max-width: 1024px) { + width: 100%; + } + :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; + :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; + &::before { + content: "Digite seu e-mail"; + font-size: 16px; + color: white; + } + } + } + } + :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; + :global(.vtex-button) { + width: 88px; + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } + } + } + } + } +} +.productBrand { + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + margin-bottom: 8px; + float: right; + color: #575757; +} +.productImageTag { + object-fit: unset !important; + max-height: 100% !important; + width: 100%; +} +:global(.vtex-store-components-3-x-productImageTag--zoom) { + display: none; +} +:global(.vtex-stack-layout-0-x-stackItem) { + min-height: unset; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorNameContainer { + margin: 0; + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; + } + } + } + .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + // border: 1px solid #989898; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: #000000; + } + } + } + } + } +} + +.skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + margin: 0; + .skuSelectorTextContainer { + .skuSelectorName, + .skuSelectorNameSeparator, + .skuSelectorSelectorImageValue { + font-size: 0; + } + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTRAS CORES:"; + + color: #929292; + } + } + .skuSelectorOptionsList { + margin: 0; + .skuSelectorItem--sku-selector { + .frameAround--sku-selector { + border: 2px solid #000000; + border-radius: 24px; + z-index: 5; + } + .skuSelectorInternalBox { + border-radius: 24px; + } + } + } + } +} +.shippingContainer { + position: relative; +} + +:global(.vtex-tab-layout-0-x-contentContainer) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 32px; + gap: 32px; + .productImagesContainer { + width: 50%; + } + .productDescriptionContainer { + width: 50%; + .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + + @media (min-width: 2560px) { + font-size: 32px; + } + } + .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + @media (min-width: 2560px) { + font-size: 18px; + line-height: 25px; + } + + color: #929292; + :first-child { + @media (min-width: 2560px) { + margin: 0; + } + } + } + } +} +// .swiper-container-initialized { +// .swiper-wrapper { +.carouselGaleryThumbs { + margin-top: 16px; + @media (max-width: 639px) { + display: block; + } + :first-child { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; + :first-child { + .productImagesThumb { + height: 90px !important; + width: 90px !important; + margin-bottom: 0; + .figure { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; + .thumbImg { + height: 90px; + width: 90px; + border-radius: 8px; + } + } + } + } + } +} +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; + + :global(.vtex-address-form__postalCode) { + display: flex; + padding-bottom: 0; + + @media (max-width: 540px) { + width: calc(100% - 47px); + flex-direction: column; + } + + :global(.vtex-input) { + display: flex; + flex-direction: column; + + :global(.vtex-input__label) { + font-size: 0; + } + + :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-input-prefix__group) { + @media (max-width: 540px) { + width: 100%; + } + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + + border: 1px solid #cccccc; + border-radius: 0; + + :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; + } + } + :global(.vtex-input__error) { + position: absolute; + bottom: 0; + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; + + @media (max-width: 540px) { + margin-top: 8px; + margin-right: -49px; + justify-content: right; + position: static; + } + + :last-child { + color: #000; + line-height: normal; + :last-child { + display: none; + } + } + } + } + + :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + align-self: end; + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; + + @media (max-width: 540px) { + align-self: center; + bottom: 0; + } + + :global(.vtex-button__label) { + padding: 0; + font-size: 0; + } + + :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #fff; + } + } +} + +.shippingTable { + border: 0; + width: auto; + .shippingTableHead { + display: block; + .shippingTableRow { + display: grid; + grid-template-columns: 103px 56px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; + } + .shippingTableHeadDeliveryName { + text-align: left; + grid-area: A; + } + .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; + } + .shippingTableHeadDeliveryPrice { + text-align: left; + grid-area: B; + font-size: 0; + &::after { + content: "Valor"; + font-size: 14px; + } + } + } + } + .shippingTableBody { + .shippingTableRow { + display: grid; + grid-template-columns: 103px 56px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; + :nth-child(n) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + } + .shippingTableCell { + padding: 0; + } + .shippingTableRadioBtn { + display: none; + } + .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; + } + .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; + } + .shippingTableCellDeliveryPrice { + grid-area: B; + } + } + } +} + +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100% !important; + } + + .productBrand { + float: left; + } + + .productDescriptionTitle { + font-size: 20px !important; + line-height: 32px !important; + } + + .productDescriptionText { + font-size: 14px !important; + line-height: 19px !important; + } + + .container { + .form { + margin: 0 16px; + max-width: 992px; + .label { + width: 100%; + + &::after { + font-size: 16px !important; + line-height: 22px !important; + } + } + + .inputGroup { + width: 100%; + + :global(.vtex-styleguide-9-x-input) { + font-size: 12px !important; + line-height: 16px !important; + width: 100% !important; + } + } + } + } +} + +:global(.vtex-store-components-3-x-subscriberContainer) { + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; + &::after { + content: "Produto indisponível"; + font-family: "Open Sans", "sans-serif"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } + } + :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin: 0; + &::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } + } + :global(.vtex-store-components-3-x-form) { + margin: 0; + :global(.vtex-store-components-3-x-content) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 8px; + grid-row-gap: 13px; + @media (min-width: 2560px) { + min-width: 765px; + } + :global(.vtex-store-components-3-x-inputName) { + grid-area: 1 / 1 / 2 / 2; + margin: 0 !important; + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + :global(.vtex-styleguide-9-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #989898; + } + } + } + } + :global(.vtex-store-components-3-x-inputEmail) { + grid-area: 1 / 2 / 2 / 3; + margin: 0 !important; + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + :global(.vtex-styleguide-9-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #989898; + } + } + } + } + :global(.vtex-store-components-3-x-submit) { + grid-area: 2 / 1 / 3 / 3; + :global(.vtex-button) { + font-size: 0; + width: 100%; + } + :global(.vtex-button)::before { + content: "AVISE-ME"; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + height: 49px; + background: #000000; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; + } + } + } + } +} From d7a1c992b40f08c483e20e01831e7fd7fe28ba66 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:42:12 -0300 Subject: [PATCH 07/11] feat(product-description): Finaliza a estilizacao do componento --- .../sass/pages/product/vtex.tab-layout.scss | 110 ++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss 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..ccdcd21 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,110 @@ +.listContainer--listaDescricao { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + padding: 0px 64px; + gap: 99px; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; + .listItem { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding: 0; + margin: 0; + color: #bfbfbf; + :global(.vtex-button) { + border-radius: 0; + border: none; + background-color: white; + padding: 0px 16px; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + text-transform: capitalize; + @media (min-width: 2560px) { + font-size: 24px; + } + } + } + } + .listItemActive { + :global(.vtex-button) { + border-radius: 0; + border: none; + border-bottom: 2px solid #000000; + background-color: white; + padding: 0px 16px; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + text-transform: capitalize; + @media (min-width: 2560px) { + font-size: 24px; + } + } + } + } +} + +@media screen and (max-width: 1024px) { + .listContainer--listaDescricao { + flex-direction: column; + gap: 16px; + padding: 16px 0; + border-top: 1px solid #b9b9b9; + margin-top: 16px; + } + .listItem { + :global(.vtex-button) { + padding: 0 !important; + } + } + .listItemActive { + :global(.vtex-button) { + padding: 0 !important; + border: none !important; + } + } + .contentContainer { + flex-direction: column; + padding: 0; + padding-bottom: 16px; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 16px; + } + :global(.vtex-store-components-3-x-productImagesContainer) { + width: 100% !important; + } + :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 100% !important; + } +} + +@media screen and (max-width: 376px) { + .listContainer--listaDescricao { + margin-bottom: 16px; + } + .contentContainer { + gap: 16px; + } +} From 20548485976ab92f351370a2a1f4647c8138f470 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:42:56 -0300 Subject: [PATCH 08/11] feat(body): Adiciona estilizacao em comentes agencia magma --- .../product/agenciamagma.store-theme.scss | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss new file mode 100644 index 0000000..4ca21bb --- /dev/null +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -0,0 +1,42 @@ +.html { + background-color: red; +} + +.html--pdp-breadcrumb { + background-color: transparent; +} + +.html--addButton { + width: 100%; +} + +:global(.vtex-store-components-3-x-discountInsideContainer) { + display: none !important; +} + +.html--prateleira-flexcol { + display: flex; + flex-direction: column; + align-items: center; + + @media screen and (max-width: 1024px) { + gap: 8px; + } + + @media (min-width: 2560px) { + min-width: 434.4px; + min-height: 568.4px; + } +} + +.html--slider-layout-wrapper { + @media (min-width: 2560px) { + margin: 0 350px; + } +} + +.html--cart-content { + flex-direction: column; +} + + From f525bd7d94e5eb62af66f58345538a1746abde19 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:44:04 -0300 Subject: [PATCH 09/11] feat(product-slider): Adiciona o componente e estilizacao do slider --- .../sass/pages/product/vtex.flex-layout.scss | 122 ++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss 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..e28ea8f --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,122 @@ +// .flexRow { +// width: auto; +// padding: 0 40px; +// } +:global(.vtex-breadcrumb-1-x-container) { + padding: 0 40px; + + :nth-child(n) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-breadcrumb-1-x-term) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } +} + +:global(.vtex-telemarketing-2-x-wrapper) { + :global(.vtex-store-components-3-x-container) { + margin: auto; + } +} + +:global(.vtex-store-components-3-x-container) { + padding-left: 0px; + padding-right: 0px; + @media (min-width: 2560px) { + max-width: 100%; + margin: 0 320px; + } + :global(.vtex-flex-layout-0-x-flexRowContent) { + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding-right: 0 !important; + overflow: hidden; + } + } + + :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 40px; + gap: 32px; + margin-top: 16px; + margin-bottom: 16px; + + @media (max-width: 1024px) { + flex-direction: column; + } + :global(.vtex-flex-layout-0-x-flexRow) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + display: block; + padding: 0; + margin-top: 0; + margin-bottom: 0; + } + } + } +} + +.addButton { + width: 100%; +} + +.flexRow--buyButton { + width: 100%; + .flexRowContent--buyButton { + margin: 0; + :global(.vtex-button) { + background-color: black; + height: 49px; + border: none; + border-radius: unset; + } + :global(.vtex-add-to-cart-button-0-x-buttonText) { + 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; + } + } + } +} + +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .flexColChild { + width: 100%; + } +} + +@media screen and (max-width: 376px) { + :global(.vtex-add-to-cart-button-0-x-buttonText) { + max-width: 168px; + } + + .flexRow--buyButton { + .flexRowContent--buyButton { + :global(.vtex-button) { + height: 74px !important; + } + } + } +} From dc54581ab33b24cefe41c4dc1525c0464b670a9a Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:44:38 -0300 Subject: [PATCH 10/11] feat(product-slider): finaliza a estilizacao do slider --- .../pages/product/vtex.slider-layout.scss | 262 ++++++++++++++++++ 1 file changed, 262 insertions(+) create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss 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..3495eca --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,262 @@ +.sliderLayoutContainer { + padding: 16px 40px 113px; + margin-bottom: -49px; + + .sliderTrackContainer { + padding: 0 24px 36px; + + .sliderTrack { + gap: 16px; + + .slide { + .slideChildrenContainer { + :global(.vtex-product-summary-2-x-container) { + margin: 0; + width: 100%; + @media (min-width: 2560px) { + align-items: center; + max-width: 434.4px !important; + min-height: 543.4px !important; + } + + :global(.vtex-product-summary-2-x-element) { + :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + width: 100%; + + :global(.vtex-product-summary-2-x-imageNormal) { + height: 314px; + background-color: #ededed; + + @media (min-width: 2560px) { + min-width: 434.4px; + min-height: 434.4px; + } + } + } + :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + padding: 0; + justify-content: center; + + :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: auto; + align-items: center; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; + } + } + :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + order: 3; + padding: 0; + + :global(.vtex-store-components-3-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; + + :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; + } + :global(.vtex-store-components-3-x-listPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; + } + } + :global(.vtex-store-components-3-x-listPrice)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + } + + :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + + :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + :nth-child(n) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + } + } + + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + } + + :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; + } + } + + :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-description) { + display: none; + } + :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; + } + } + } + } + } + } + } + .paginationDotsContainer { + bottom: 113px; + align-items: center; + + .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + border: 0.5px solid #000; + } + + .paginationDot--isActive { + background-color: #fff; + height: 17px !important; + width: 17px !important; + } + } +} + +.slide { + .slideChildrenContainer { + :global(.vtex-product-summary-2-x-clearLink) { + :global(.vtex-product-summary-2-x-container) { + :global(.vtex-product-summary-2-x-element) { + .html--prateleira-flexcol { + display: flex; + } + } + } + } + } +} + +@media screen and (max-width: 1024px) { + :global(.vtex-product-summary-2-x-productBrand) { + font-size: 14px !important; + line-height: 19px !important; + height: auto !important; + } + :global(.vtex-product-summary-2-x-imageContainer) { + margin-bottom: 4px; + } + .sliderTrackContainer { + padding: 0 24px 24px !important; + } + .sliderTrack { + gap: 12px !important; + } + .sliderLayoutContainer { + margin-bottom: -49px; + } +} + +@media screen and (max-width: 376px) { + .sliderLayoutContainer { + margin-bottom: -81px; + } + .sliderTrack { + gap: 8px !important; + } + :global(.vtex-product-summary-2-x-imageContainer) { + :global(.vtex-product-summary-2-x-imageNormal) { + height: 124.8px !important; + } + } + .sliderTrackContainer { + padding-bottom: 16px !important; + } +} + +:global(.vtex-product-price-1-x-interestRate) { + &::after { + content: "sem juros"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + } +} + +:global(.vtex-product-price-1-x-installments) { + font-size: 0; +} + +:global(.vtex-product-price-1-x-installmentValue) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + &::before { + content: " de "; + } + &::after { + content: " "; + } +} + +:global(.vtex-product-price-1-x-installmentsNumber) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + &::after { + content: " x "; + } +} From 939fac1880979feb291f6435f2de988ea911ecae Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 15:12:41 -0300 Subject: [PATCH 11/11] feat(body): exporta o projeto finalizado --- react/Example.tsx | 2 +- react/Pix.tsx | 3 + react/Placeholder.tsx | 3 + react/components/Html/index.tsx | 80 +-- react/components/Html/styles.css | 6 + react/components/Pix/Pix.tsx | 52 ++ react/components/Pix/styles.css | 50 ++ react/components/Placeholder/Placeholder.tsx | 8 + react/custom.d.ts | 0 react/index.d.ts | 11 + store/blocks/home/home.jsonc | 2 +- store/blocks/pdp/product.jsonc | 328 ++++++++---- store/blocks/product-price.jsonc | 5 +- .../product-summary-list.jsonc | 6 +- .../product-summary/product-summary.jsonc | 4 +- store/blocks/product-summary/quickview.json | 6 +- store/blocks/search.jsonc | 23 +- store/interfaces.json | 7 +- styles/configs/style.json | 26 +- styles/css/agenciamagma.store-theme.css | 44 +- styles/css/store-components.css | 75 +++ styles/css/vtex.breadcrumb.css | 29 +- styles/css/vtex.flex-layout.css | 107 +++- styles/css/vtex.product-identifier.css | 35 +- styles/css/vtex.product-price.css | 135 +++-- styles/css/vtex.product-quantity.css | 59 +++ styles/css/vtex.rich-text.css | 25 +- styles/css/vtex.slider-layout.css | 243 ++++++++- styles/css/vtex.store-components.css | 474 +++++++++++++++++- styles/css/vtex.tab-layout.css | 116 +++++ 30 files changed, 1669 insertions(+), 295 deletions(-) create mode 100644 react/Pix.tsx create mode 100644 react/Placeholder.tsx create mode 100644 react/components/Html/styles.css create mode 100644 react/components/Pix/Pix.tsx create mode 100644 react/components/Pix/styles.css create mode 100644 react/components/Placeholder/Placeholder.tsx create mode 100644 react/custom.d.ts create mode 100644 react/index.d.ts create mode 100644 styles/css/store-components.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/css/vtex.tab-layout.css diff --git a/react/Example.tsx b/react/Example.tsx index 7d550e5..fe63560 100644 --- a/react/Example.tsx +++ b/react/Example.tsx @@ -1,3 +1,3 @@ import Example from "./components/Example/Example"; -export default Example; \ No newline at end of file +export default Example; diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..52ecbb2 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +import Pix from "./components/Pix/Pix"; + +export default Pix; diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..29393ed --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from "./components/Placeholder/Placeholder"; + +export default Placeholder; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..082c0f0 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,53 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { - children?: ReactNode, - /** - * Qual tag Html que deseja que seja usar - * - * @default div - */ - tag?: keyof React.ReactHTML - /** - * Classes CSS extras que deseja adicionar. - * Feito para uso de [classes do tachyons](https://tachyons.io/) - */ - tachyonsClasses?: string - /** - * Se caso quiser usar esse componente - * para adicinar um texto simples - */ - text?: string - /** - * Tag ID para - */ - testId?: string -} - -export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); - - const props = { - className: `${handles.html} ${classes}`, - "data-testid": testId - }; - const Children = <>{children}{text}; - const Element = React.createElement(tag, props, Children); - - return <>{Element}; + children?: ReactNode; + /** + * Qual tag Html que deseja que seja usar + * + * @default div + */ + tag?: keyof React.ReactHTML; + /** + * Classes CSS extras que deseja adicionar. + * Feito para uso de [classes do tachyons](https://tachyons.io/) + */ + tachyonsClasses?: string; + /** + * Se caso quiser usar esse componente + * para adicinar um texto simples + */ + text?: string; + /** + * Tag ID para + */ + testId?: string; +}; + +export const Html = ({ + children = null, + tag = "div", + text = "", + tachyonsClasses: classes = "", + testId, +}: HtmlProps) => { + const { handles } = useCssHandles(CSS_HANDLES); + + const props = { + className: `${handles.html} ${classes}`, + "data-testid": testId, + }; + const Children = ( + <> + {children} + {text} + + ); + const Element = React.createElement(tag, props, Children); + + return <>{Element}; }; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..c2b8bc9 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,6 @@ +[class*="html--cart-content"] { + display: flex; + gap: 10px; + margin-top: 8px; + margin-bottom: 16px; +} diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..fdbe05d --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./styles.css"; + +const Pix = () => { + const product = useProduct(); + + const pix = { + pixValue: Number( + product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .TotalValuePlusInterestRate + ), + }; + + // const priceTimes = + // product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + // .NumberOfInstallments; + // const valueTotal = product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toFixed( + // 2 + // ) + // .toString() + // .replace(".", ","); + + const pixPrice = (pix.pixValue = pix.pixValue * 0.9) + .toFixed(2) + .toString() + .replace(".", ","); + /* + {priceTimes} x de + R$ {valueTotal} sem juros + */ + return ( + <> +
+
+ Imagem Pix +
+

+ R${pixPrice} + 10% de desconto +

+
+ + ); + + // return ; +}; + +export default Pix; diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..ef27097 --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,50 @@ +.html { + background-color: transparent !important; +} +.AllPriceTimesText { + font-style: normal; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.PriceTimes { + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.PixButton { + width: 40px; + height: 40px; + background: black; +} +.PricesWrapperRow { + margin-top: 8px; + display: flex; + gap: 26px; +} +figure { + margin: 0; + display: flex; + justify-content: center; + align-items: center; +} +.PricesCol { + display: flex; + flex-direction: column; +} +.PixFullValue { + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} +.PixPercent { + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/components/Placeholder/Placeholder.tsx b/react/components/Placeholder/Placeholder.tsx new file mode 100644 index 0000000..fa66632 --- /dev/null +++ b/react/components/Placeholder/Placeholder.tsx @@ -0,0 +1,8 @@ +const Placeholder = () => { + if (typeof document !== "undefined") { + const m3Input = document.querySelector(".vtex-address-form-4-x-input"); + m3Input?.setAttribute("placeholder", "Digite seu CEP"); + } + return null; +}; +export default Placeholder; diff --git a/react/custom.d.ts b/react/custom.d.ts new file mode 100644 index 0000000..e69de29 diff --git a/react/index.d.ts b/react/index.d.ts new file mode 100644 index 0000000..5b93fa5 --- /dev/null +++ b/react/index.d.ts @@ -0,0 +1,11 @@ +declare module "*.css" { + interface IClassNames { + [className: string]: string; + } + const classNames: IClassNames; + export = classNames; +} +declare module "*.svg" { + const content: React.FunctionComponent>; + export default content; +} diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index ebacd49..ec4a516 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -40,7 +40,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "never", "blockClass": "carousel" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 8643482..c0ee556 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,12 +3,65 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#descricao", - "shelf.relatedProducts", + "flex-layout.row#description", + "flex-layout.row#specifications-title", + // "product-specification-group#table", + // "shelf.relatedProducts", "product-questions-and-answers", - "newsletter-form#formulario-newsletter" + "list-context.product-list#demo1", + "product-questions-and-answers", + "newsletter" ] }, + "list-context.product-list#demo1": { + "blocks": ["product-summary.shelf#demo1"], + "children": ["html#slider-layout"] + }, + + "product-summary.shelf#demo1": { + "children": [ + "html#sliderPrateleira" + // "product-summary-name", + // "product-summary-description", + // "product-summary-image", + // "product-summary-price", + // "product-summary-sku-selector", + // "product-summary-buy-button" + ] + }, + "html#sliderPrateleira": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "prateleira-flexcol" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-list-price", + "product-selling-price" + ] + }, + "html#slider-layout": { + "props": { + "testId": "product-summary-list", + "blockClass": "slider-layout-wrapper" + }, + "children": ["slider-layout#demo-products"] + }, + + "slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel" + } + }, + "html#breadcrumb": { "props": { "tag": "section", @@ -18,101 +71,95 @@ "children": ["breadcrumb"] }, "flex-layout.row#specifications-title": { + "props": { + "props": { + "marginBottom": 7, + "marginTop": 7 + } + }, "children": ["rich-text#specifications"] }, "rich-text#specifications": { "props": { - "text": "##### Product Specifications" + "text": "##### Você também pode gostar:", + "textPosition": "CENTER", + "textAlignment": "CENTER", + "blockClass": "specifications-texto" } }, "flex-layout.row#description": { "props": { - "blockClass": "description" + "marginBottom": 7 }, - "children": ["product-images", "product-description"] + "children": ["html#product-description"] }, - "tab-layout#descricao": { - "children": ["tab-list#descricao", "tab-content#descricao"] - }, - "tab-list#descricao": { - "children": [ - "tab-list.item#descricao1", - "tab-list.item#descricao2", - "tab-list.item#descricao3", - "tab-list.item#descricao4", - "tab-list.item#descricao5" - ] - }, - "tab-content#descricao": { - "children": [ - "tab-content.item#descricao1", - "tab-content.item#descricao2", - "tab-content.item#descricao3", - "tab-content.item#descricao4", - "tab-content.item#descricao5" - ] - }, - "tab-list.item#descricao1": { + "html#product-description": { "props": { - "tabId": "descricao1", + "testId": "product-description" + }, + "children": ["tab-layout#description"] + }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + + "tab-content#description": { + "children": ["product-images#description", "product-description"] + }, + "product-images#description": { + "props": { + "displayMode": "first-image", + "zoomMode": "disable", + "blockClass": "imageDescricao" + } + }, + "tab-list#description": { + "props": { + "blockClass": "listaDescricao" + }, + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + "tab-list.item#description1": { + "props": { + "tabId": "description1", "label": "Descrição", "defaultActiveTab": true } }, - "tab-list.item#descricao2": { + "tab-list.item#description2": { "props": { - "tabId": "descricao2", + "tabId": "description2", "label": "Descrição" } }, - "tab-list.item#descricao3": { + "tab-list.item#description3": { "props": { - "tabId": "descricao3", + "tabId": "description3", "label": "Descrição" } }, - "tab-list.item#descricao4": { + "tab-list.item#description4": { "props": { - "tabId": "descricao4", + "tabId": "description4", "label": "Descrição" } }, - "tab-list.item#descricao5": { + "tab-list.item#description5": { "props": { - "tabId": "descricao5", + "tabId": "description5", "label": "Descrição" } }, - "tab-content.item#descricao1": { - "children": ["flex-layout.row#description"], - "props": { - "tabId": "descricao1" - } - }, - "tab-content.item#descricao2": { - "children": ["flex-layout.row#description"], - "props": { - "tabId": "descricao2" - } - }, - "tab-content.item#descricao3": { - "children": ["flex-layout.row#description"], - "props": { - "tabId": "descricao3" - } - }, - "tab-content.item#descricao4": { - "children": ["flex-layout.row#description"], - "props": { - "tabId": "descricao4" - } - }, - "tab-content.item#descricao5": { - "children": ["flex-layout.row#description"], - "props": { - "tabId": "descricao5" - } - }, "condition-layout.product#availability": { "props": { "conditions": [ @@ -146,6 +193,7 @@ "product-specification-badges" ] }, + "product-specification-badges": { "props": { "specificationGroupName": "Group", @@ -158,49 +206,30 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, - "flex-layout.col#newsletter-wrapper": { - "children": ["newsletter-form#formulario-newsletter"] - }, - "newsletter-form#formulario-newsletter": { - "children": [ - "newsletter-input-email#texto-email", - "newsletter-submit#texto-submit" - ], - "props": { - "blockClass": "formulario-newsletter", - "placeholderText": "Digite seu e-mail" - } - }, - "newsletter-input-email#texto-email": { - "props": { - "placeholderText": "Digite seu e-mail", - "blockClass": "texto-email", - "inputLabel": "Assine nossa newsletter" - } - }, - "newsletter-submit#texto-submit": { - "props": { - "blockClass": "texto-submit", - "submitButtonLabel": "ENVIAR" - } - }, "flex-layout.row#product-image": { + "children": ["html#product-images"] + }, + "html#product-images": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, "product-images": { "props": { "aspectRatio": { "desktop": "auto", + "testId": "", "phone": "16:9" }, - "showPaginationDots": false, - "thumbnailsOrientation": "horizontal", "displayThumbnailsArrows": false, - "showNavigationArrows": false + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal" } }, "flex-layout.col#right-col": { @@ -209,19 +238,94 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "componente-prices", - "product-separator", - "sku-selector", - "product-quantity", + "html#product-name", + "html#codigo", + "product-rating-summary", + "html#selling-price", + // "flex-layout.row#selling-price", + "html#product-installments", + "html#pix-component", + "html#sku-selector", + // "html#product-quantity", + // "html#add-to-cart-button", + "html#cart-content", + "Placeholder", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator" + "html#shipping-simulator" ] }, + "html#product-name": { + "props": { + "marginBottom": 3, + "testId": "product-name", + "blockClass": "productName" + }, + "children": ["vtex.store-components:product-name"] + }, + "html#codigo": { + "props": { + "blockClass": "codigo", + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["flex-layout.row#selling-price"] + }, + + "html#pix-component": { + "props": { + "testId": "pix-price", + "blockClass": "pix" + }, + "children": ["pix-component"] + }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "addButton" + }, + "children": ["flex-layout.row#buy-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + "html#cart-content": { + "props": { + "blockClass": "cart-content" + }, + "children": ["html#product-quantity", "html#add-to-cart-button"] + }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator", + "blockClass": "shippingSimulator" + }, + "children": ["shipping-simulator"] + }, "flex-layout.row#product-name": { "props": { @@ -233,14 +337,16 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "blockClass": "sku-selector" } }, "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "buyButton" }, "children": ["add-to-cart-button"] }, @@ -264,10 +370,10 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "html#product-name", + "html#codigo", + "flex-layout.row#availability", + "html#sku-selector" ] }, "flex-layout.row#availability": { diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 829b654..80fb029 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -4,7 +4,7 @@ "colGap": 2, "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, - "marginBottom": 4 + "marginBottom": 0 }, "children": ["product-selling-price"] }, @@ -16,6 +16,7 @@ "preventHorizontalStretch": true, "marginBottom": 2, "marginTop": 5 - } + }, + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index d15faac..cfc3226 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -29,7 +29,11 @@ "colSizing": "auto", "colGap": 3, "blockClass": "savingsSummaryListDesktop" - } + }, + "children": [ + "product-price-savings#summaryPercentage", + "product-price-savings#summary" + ] }, "flex-layout.row#summaryListDesktop": { "props":{ diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index bb93cc8..afabee3 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -81,7 +81,9 @@ }, "product-price-savings#summary": { "props": { - "markers": ["discount"], + "markers": [ + "discount" + ], "blockClass": "summary" } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 2224337..372c1ef 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -32,11 +32,7 @@ } }, "flex-layout.col#quickviewPrice": { - "children": [ - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments" - ] + "children": ["flex-layout.row#selling-price", "product-installments"] }, "modal-actions#quickview": { "props": { diff --git a/store/blocks/search.jsonc b/store/blocks/search.jsonc index 735db90..22be941 100644 --- a/store/blocks/search.jsonc +++ b/store/blocks/search.jsonc @@ -108,10 +108,7 @@ } }, "flex-layout.row#searchinfo": { - "children": [ - "flex-layout.col#productCount", - "flex-layout.row#orderByAndSwitcher" - ] + "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"] }, "flex-layout.row#orderByAndSwitcher": { "children": ["order-by.v2", "gallery-layout-switcher"], @@ -275,19 +272,29 @@ "props": { "name": "grid" }, - "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"] + "children": [ + "icon-grid", + "responsive-layout.desktop#textOptionGrid" + ] }, "gallery-layout-option#list": { "props": { "name": "list" }, - "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"] + "children": [ + "icon-inline-grid", + "responsive-layout.desktop#textOptionList" + ] }, "responsive-layout.desktop#textOptionGrid": { - "children": ["rich-text#option-grid"] + "children": [ + "rich-text#option-grid" + ] }, "responsive-layout.desktop#textOptionList": { - "children": ["rich-text#option-list"] + "children": [ + "rich-text#option-list" + ] }, "rich-text#option-grid": { "props": { diff --git a/store/interfaces.json b/store/interfaces.json index 74e0832..9f8761b 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -2,11 +2,14 @@ "example-component": { "component": "Example" }, + "pix-component": { + "component": "Pix" + }, "html": { "component": "html", "composition": "children" }, - "componente-prices": { - "component": "Prices" + "Placeholder": { + "component": "Placeholder" } } diff --git a/styles/configs/style.json b/styles/configs/style.json index 8eeed02..64c4329 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -255,91 +255,91 @@ "measure": [30, 34, 20], "styles": { "heading-1": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "3rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-2": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "2.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-3": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "1.75rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-4": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-5": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-6": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "body": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", "letterSpacing": "0" }, "small": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, "mini": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.75rem", "textTransform": "initial", "letterSpacing": "0" }, "action": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--small": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "0.875rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--large": { - "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", "letterSpacing": "0" }, "code": { - "fontFamily": "Consolas, monaco, monospace", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 34c4328..c7cd5bf 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,4 +6,46 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.html { + background-color: red; +} + +.html--pdp-breadcrumb { + background-color: transparent; +} + +.html--addButton { + width: 100%; +} + +:global(.vtex-store-components-3-x-discountInsideContainer) { + display: none !important; +} + +.html--prateleira-flexcol { + display: flex; + flex-direction: column; + align-items: center; +} +@media screen and (max-width: 1024px) { + .html--prateleira-flexcol { + gap: 8px; + } +} +@media (min-width: 2560px) { + .html--prateleira-flexcol { + min-width: 434.4px; + min-height: 568.4px; + } +} + +@media (min-width: 2560px) { + .html--slider-layout-wrapper { + margin: 0 350px; + } +} + +.html--cart-content { + flex-direction: column; +} \ No newline at end of file diff --git a/styles/css/store-components.css b/styles/css/store-components.css new file mode 100644 index 0000000..e31a7db --- /dev/null +++ b/styles/css/store-components.css @@ -0,0 +1,75 @@ +/* +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 */ +.newsletter { + background: black; +} +.newsletter .container .form .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; +} +.newsletter .container .form .label::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 38px; + color: #ffffff; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + white-space: pre; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.newsletter .container .form .inputGroup { + display: flex; + justify-content: center; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before { + content: "Digite seu e-mail"; + font-size: 16px; + color: white; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; +} diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 8af0e2f..6ed9999 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -7,10 +7,33 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.homeLink .homeIcon { +.container { + align-items: center; +} +.container .homeLink { + padding: 0; +} +.container .homeLink .homeIcon { display: none; } - -.homeLink::before { +.container .homeLink::before { content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .arrow--1 .link { + font-size: 0; +} +.container .arrow--1 .link::before { + content: "Sapatos"; + 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/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 785c8b9..d5fdff1 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,6 +8,108 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.vtex-breadcrumb-1-x-container { - background-color: red; +:global(.vtex-breadcrumb-1-x-container) { + padding: 0 40px; +} +:global(.vtex-breadcrumb-1-x-container) :nth-child(n) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +:global(.vtex-breadcrumb-1-x-container) :global(.vtex-breadcrumb-1-x-term) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +:global(.vtex-telemarketing-2-x-wrapper) :global(.vtex-store-components-3-x-container) { + margin: auto; +} + +:global(.vtex-store-components-3-x-container) { + padding-left: 0px; + padding-right: 0px; +} +@media (min-width: 2560px) { + :global(.vtex-store-components-3-x-container) { + max-width: 100%; + margin: 0 320px; + } +} +:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding-right: 0 !important; + overflow: hidden; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 40px; + gap: 32px; + margin-top: 16px; + margin-bottom: 16px; +} +@media (max-width: 1024px) { + :global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + flex-direction: column; + } +} +:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-flexRow) :global(.vtex-flex-layout-0-x-flexRowContent) { + display: block; + padding: 0; + margin-top: 0; + margin-bottom: 0; +} + +.addButton { + width: 100%; +} + +.flexRow--buyButton { + width: 100%; +} +.flexRow--buyButton .flexRowContent--buyButton { + margin: 0; +} +.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) { + background-color: black; + height: 49px; + border: none; + border-radius: unset; +} +.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; +} +.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-add-to-cart-button-0-x-buttonText)::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} + +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .flexColChild { + width: 100%; + } +} +@media screen and (max-width: 376px) { + :global(.vtex-add-to-cart-button-0-x-buttonText) { + max-width: 168px; + } + .flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) { + height: 74px !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 0b1513a..0feb2a3 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,11 +1,30 @@ -.product-identifier--productReference { - margin-bottom: 1rem; -} - -.product-identifier__label { - display: none; -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.product-identifier__label, .product-identifier__separator { display: none; } + +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + float: right; + margin-bottom: 24px; + color: rgba(146, 146, 146, 0.48); +} + +@media screen and (max-width: 1024px) { + .product-identifier__value { + float: left; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..57faf03 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,74 @@ -.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 */ +/* Grid breakpoints */ .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; + font-style: normal; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } -.installments { - color: #727273; - margin-bottom: 1rem; +.flexRowContent { + margin: 0 !important; } -.savings { - font-weight: 500; - color: #79B03A; +.listPriceValue { + text-decoration-line: line-through; + text-decoration-color: #bababa; +} +.listPriceValue::before { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "de"; + margin-right: 6px; +} +.listPriceValue::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "por"; + margin-left: 5px; +} +.listPriceValue .currencyCode, +.listPriceValue .currencyLiteral, +.listPriceValue .currencyInteger { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; } -.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; +@media screen and (max-width: 1024px) { + .listPrice { + height: 19px; + } + .listPriceValue .currencyCode, + .listPriceValue .currencyLiteral, + .listPriceValue .currencyInteger { + font-size: 12px; + line-height: 16px; + } + .sellingPrice { + font-size: 18px; + line-height: 25px; + } } +.currencyGroup { + color: #bababa; +} \ 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..69464e1 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,59 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.quantitySelectorContainer { + margin: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 32px; + height: 49px; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; + height: 49px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #000000; + border-radius: 0; + background-color: #ffffff; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..cad7f7f 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,27 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.heading--specifications-texto { + margin: 0 0 16px; +} +@media (min-width: 2560px) { + .heading--specifications-texto { + font-weight: 400; + font-size: 24px; + line-height: 38px; + } +} + +@media screen and (max-width: 1024px) { + .heading--specifications-texto { + font-size: 24px; + line-height: 38px; + margin: 0; + } +} +@media screen and (max-width: 376px) { + .heading--specifications-texto { + font-size: 20px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..a5c1dd6 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,236 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .sliderLayoutContainer { + padding: 16px 40px 113px; + margin-bottom: -49px; +} +.sliderLayoutContainer .sliderTrackContainer { + padding: 0 24px 36px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 16px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { + margin: 0; + width: 100%; +} +@media (min-width: 2560px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { + align-items: center; + max-width: 434.4px !important; + min-height: 543.4px !important; + } +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + width: 100%; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + height: 314px; + background-color: #ededed; +} +@media (min-width: 2560px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + min-width: 434.4px; + min-height: 434.4px; + } +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + padding: 0; justify-content: center; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: auto; + align-items: center; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + order: 3; + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) :nth-child(n) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-description) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; +} +.sliderLayoutContainer .paginationDotsContainer { + bottom: 113px; + align-items: center; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + border: 0.5px solid #000; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { + background-color: #fff; + height: 17px !important; + width: 17px !important; } -.sliderTrackContainer { - max-width: 100%; +.slide .slideChildrenContainer :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) .html--prateleira-flexcol { + display: flex; } -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +@media screen and (max-width: 1024px) { + :global(.vtex-product-summary-2-x-productBrand) { + font-size: 14px !important; + line-height: 19px !important; + height: auto !important; + } + :global(.vtex-product-summary-2-x-imageContainer) { + margin-bottom: 4px; + } + .sliderTrackContainer { + padding: 0 24px 24px !important; + } + .sliderTrack { + gap: 12px !important; + } + .sliderLayoutContainer { + margin-bottom: -49px; + } +} +@media screen and (max-width: 376px) { + .sliderLayoutContainer { + margin-bottom: -81px; + } + .sliderTrack { + gap: 8px !important; + } + :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + height: 124.8px !important; + } + .sliderTrackContainer { + padding-bottom: 16px !important; + } +} +:global(.vtex-product-price-1-x-interestRate)::after { + content: "sem juros"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +:global(.vtex-product-price-1-x-installments) { + font-size: 0; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +:global(.vtex-product-price-1-x-installmentValue) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } +:global(.vtex-product-price-1-x-installmentValue)::before { + content: " de "; +} +:global(.vtex-product-price-1-x-installmentValue)::after { + content: " "; +} + +:global(.vtex-product-price-1-x-installmentsNumber) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +:global(.vtex-product-price-1-x-installmentsNumber)::after { + content: " x "; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5b308b5..c81ff86 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,6 +8,301 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.newsletter { + background: black; +} +.newsletter .container .form .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 8px; +} +.newsletter .container .form .label::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 38px; + color: #ffffff; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + white-space: pre; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media (max-width: 350px) { + .newsletter .container .form .label::after { + white-space: unset; + } +} +.newsletter .container .form .inputGroup { + display: flex; + justify-content: center; +} +.newsletter .container .form .inputGroup :global(.vtex-input) { + width: 686px; +} +@media (max-width: 1024px) { + .newsletter .container .form .inputGroup :global(.vtex-input) { + width: 100%; + } +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before { + content: "Digite seu e-mail"; + font-size: 16px; + color: white; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { + width: 88px; + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; +} + +.productBrand { + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + margin-bottom: 8px; + float: right; + color: #575757; +} + +.productImageTag { + object-fit: unset !important; + max-height: 100% !important; + width: 100%; +} + +:global(.vtex-store-components-3-x-productImageTag--zoom) { + display: none; +} + +:global(.vtex-stack-layout-0-x-stackItem) { + min-height: unset; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; +} + +.skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTRAS CORES:"; + color: #929292; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .frameAround--sku-selector { + border: 2px solid #000000; + border-radius: 24px; + z-index: 5; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector .skuSelectorInternalBox { + border-radius: 24px; +} + +.shippingContainer { + position: relative; +} + +:global(.vtex-tab-layout-0-x-contentContainer) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 32px; + gap: 32px; +} +:global(.vtex-tab-layout-0-x-contentContainer) .productImagesContainer { + width: 50%; +} +:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer { + width: 50%; +} +:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +@media (min-width: 2560px) { + :global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionTitle { + font-size: 32px; + } +} +:global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media (min-width: 2560px) { + :global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText { + font-size: 18px; + line-height: 25px; + } +} +@media (min-width: 2560px) { + :global(.vtex-tab-layout-0-x-contentContainer) .productDescriptionContainer .productDescriptionText :first-child { + margin: 0; + } +} + +.carouselGaleryThumbs { + margin-top: 16px; +} +@media (max-width: 639px) { + .carouselGaleryThumbs { + display: block; + } +} +.carouselGaleryThumbs :first-child { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb { + height: 90px !important; + width: 90px !important; + margin-bottom: 0; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { + height: 90px; + width: 90px; + border-radius: 8px; +} + .shippingContainer { display: flex; margin: 0; @@ -15,18 +311,13 @@ } .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; + padding-bottom: 0; } -.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { - line-height: normal; -} -.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :first-child { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 12px; -} -.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :first-child :first-child { - display: none; +@media (max-width: 540px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + width: calc(100% - 47px); + flex-direction: column; + } } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { display: flex; @@ -52,6 +343,11 @@ border: 1px solid #cccccc; border-radius: 0; } +@media (max-width: 540px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 100%; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { font-family: "Open Sans"; font-style: normal; @@ -73,19 +369,37 @@ left: 312px; top: 41.5px; } +@media (max-width: 540px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + margin-top: 8px; + margin-right: -49px; + justify-content: right; + position: static; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: #000; + line-height: normal; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child { + display: none; } .shippingContainer :global(.vtex-button) { display: flex; width: 49px; height: 49px; - margin-bottom: 5px; + align-self: end; background: #000; border: 1px solid #000; border-radius: 0; cursor: pointer; } +@media (max-width: 540px) { + .shippingContainer :global(.vtex-button) { + align-self: center; + bottom: 0; + } +} .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { padding: 0; font-size: 0; @@ -149,6 +463,12 @@ column-gap: 32px; margin-top: 15px; } +.shippingTable .shippingTableBody .shippingTableRow :nth-child(n) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { padding: 0; } @@ -165,4 +485,134 @@ } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { grid-area: B; +} + +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100% !important; + } + .productBrand { + float: left; + } + .productDescriptionTitle { + font-size: 20px !important; + line-height: 32px !important; + } + .productDescriptionText { + font-size: 14px !important; + line-height: 19px !important; + } + .container .form { + margin: 0 16px; + max-width: 992px; + } + .container .form .label { + width: 100%; + } + .container .form .label::after { + font-size: 16px !important; + line-height: 22px !important; + } + .container .form .inputGroup { + width: 100%; + } + .container .form .inputGroup :global(.vtex-styleguide-9-x-input) { + font-size: 12px !important; + line-height: 16px !important; + width: 100% !important; + } +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-family: "Open Sans", "sans-serif"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) { + margin: 0; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 8px; + grid-row-gap: 13px; +} +@media (min-width: 2560px) { + :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + min-width: 765px; + } +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + grid-area: 1/1/2/2; + margin: 0 !important; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #989898; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + grid-area: 1/2/2/3; + margin: 0 !important; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #989898; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) { + grid-area: 2/1/3/3; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { + font-size: 0; + width: 100%; +} +:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button)::before { + content: "AVISE-ME"; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + height: 49px; + background: #000000; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..ce029c9 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,116 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.listContainer--listaDescricao { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + padding: 0px 64px; + gap: 99px; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; +} +.listContainer--listaDescricao .listItem { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding: 0; + margin: 0; + color: #bfbfbf; +} +.listContainer--listaDescricao .listItem :global(.vtex-button) { + border-radius: 0; + border: none; + background-color: white; + padding: 0px 16px; +} +.listContainer--listaDescricao .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + text-transform: capitalize; +} +@media (min-width: 2560px) { + .listContainer--listaDescricao .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-size: 24px; + } +} +.listContainer--listaDescricao .listItemActive :global(.vtex-button) { + border-radius: 0; + border: none; + border-bottom: 2px solid #000000; + background-color: white; + padding: 0px 16px; +} +.listContainer--listaDescricao .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #000000; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + text-transform: capitalize; +} +@media (min-width: 2560px) { + .listContainer--listaDescricao .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + font-size: 24px; + } +} + +@media screen and (max-width: 1024px) { + .listContainer--listaDescricao { + flex-direction: column; + gap: 16px; + padding: 16px 0; + border-top: 1px solid #b9b9b9; + margin-top: 16px; + } + .listItem :global(.vtex-button) { + padding: 0 !important; + } + .listItemActive :global(.vtex-button) { + padding: 0 !important; + border: none !important; + } + .contentContainer { + flex-direction: column; + padding: 0; + padding-bottom: 16px; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 16px; + } + :global(.vtex-store-components-3-x-productImagesContainer) { + width: 100% !important; + } + :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 100% !important; + } +} +@media screen and (max-width: 376px) { + .listContainer--listaDescricao { + margin-bottom: 16px; + } + .contentContainer { + gap: 16px; + } +} \ No newline at end of file