From f5bdaa9afa660ed61b60a81e35f16661c09c208a Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 6 Feb 2023 16:10:17 -0300 Subject: [PATCH 1/4] feat: Adicionado o estilo do nome do produto --- react/components/PaymentPix/styles.css | 1 - styles/css/vtex.product-identifier.css | 31 ++++++++++++++++++- styles/css/vtex.store-components.css | 10 ++++++ .../product/vtex.product-identifier.scss | 19 ++++++++++++ .../pages/product/vtex.store-components.scss | 9 ++++++ 5 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css index 23a2810..20ec1da 100644 --- a/react/components/PaymentPix/styles.css +++ b/react/components/PaymentPix/styles.css @@ -16,7 +16,6 @@ .paymentPixText { display: flex; flex-direction: column; - align-items: center; } .paymentPixValue { margin: 0; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..128134d 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,32 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: flex-end; + margin-top: 8px; } + +.product-identifier__label { + display: none; +} + +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0d9af06..4eaa102 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -24,4 +24,14 @@ .productImagesThumb { height: auto !important; +} + +.productBrand { + display: flex; + justify-content: flex-end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..fec8794 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,19 @@ +.product-identifier--productReference { + display: flex; + justify-content: flex-end; + margin-top: 8px; +} +.product-identifier__label { + display: none; +} +.product-identifier__separator { + display: none; +} +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5d9d0aa..4e880ed 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -15,3 +15,12 @@ .productImagesThumb { height: auto !important; } +.productBrand { + display: flex; + justify-content: flex-end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; +} -- 2.34.1 From 18cd2fd0759d9c2ba5e3cc8974542a33e3cbbfdc Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 11:51:57 -0300 Subject: [PATCH 2/4] feat: Adicionado o estilo dos tamanhos e cores --- store/blocks/pdp/product.jsonc | 1 - styles/css/vtex.add-to-cart-button.css | 10 ++ styles/css/vtex.product-quantity.css | 13 ++ styles/css/vtex.store-components.css | 113 +++++++++++++++++ .../product/vtex.add-to-cart-button.scss | 2 + .../pages/product/vtex.product-quantity.scss | 3 + .../pages/product/vtex.store-components.scss | 118 ++++++++++++++++++ 7 files changed, 259 insertions(+), 1 deletion(-) create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f73fc24..be7db66 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -123,7 +123,6 @@ "flex-layout.row#selling-price", "product-installments", "product-paymentPix-component", - "product-separator", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..f5ba8ae --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,10 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..2f1d220 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,13 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +.quantitySelectorTitle { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4eaa102..3c8f295 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -34,4 +34,117 @@ font-weight: 300; font-size: 20px; line-height: 34px; +} /* +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + }/* + .frame-around { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frame-around { + border-radius: 30px; + } + + .skuSelectorInternalBox { + border-radius: 30px; + } + } +} +*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 21px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + top: 0; + left: 0; + right: 0; + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 30px; + padding: 0; + margin: auto; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..f627ffe --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,2 @@ +.buttonText { +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..dd527e9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,3 @@ +.quantitySelectorTitle { + display: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4e880ed..8f4ebd4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -23,4 +23,122 @@ font-weight: 300; font-size: 20px; line-height: 34px; +} /* +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + }/* + .frame-around { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frame-around { + border-radius: 30px; + } + + .skuSelectorInternalBox { + border-radius: 30px; + } + } +} +*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; + } + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frameAround { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frameAround { + width: 40px; + height: 40px; + top: 0; + left: 0; + right: 0; + border-radius: 30px; + } + + .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 30px; + padding: 0; + margin: auto; + } + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + } + } } -- 2.34.1 From 0abdeaba4fd9ef1c1744b9ac725ee7460a59d232 Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 17:54:32 -0300 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20Adicionado=20o=20estilo=20do=20adic?= =?UTF-8?q?ionar=20=C3=A0=20sacola?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 19 +-- styles/css/vtex.flex-layout.css | 24 +++- styles/css/vtex.product-quantity.css | 17 +++ styles/css/vtex.store-components.css | 107 ++++++++-------- .../product/vtex.add-to-cart-button.scss | 2 - .../sass/pages/product/vtex.flex-layout.scss | 23 ++++ .../pages/product/vtex.product-quantity.scss | 17 +++ .../pages/product/vtex.store-components.scss | 114 +++++++++--------- 8 files changed, 201 insertions(+), 122 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index be7db66..b41d781 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,9 +2,7 @@ "store.product": { "children": [ "html#breadcrumb", - "condition-layout.product#availability", - "flex-layout.row#description", "flex-layout.row#specifications-title", "tab-layout#product", @@ -124,15 +122,21 @@ "product-installments", "product-paymentPix-component", "sku-selector", - "product-quantity", + + "flex-layout.row#cart", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + "availability-subscriber", "shipping-simulator" ] }, - + "flex-layout.row#cart": { + "props": { + "blockClass": "cart" + }, + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -149,9 +153,10 @@ "flex-layout.row#buy-button": { "props": { - "marginTop": 4, - "marginBottom": 7 + "width": "80%", + "blockClass": "buyButton" }, + "children": ["add-to-cart-button"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f5ba8ae..c807690 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,4 +8,25 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.flexRowContent--cart { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 25px; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) { + background-color: black; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) { + font-size: 0; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after { + content: "adicionar à sacola"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 2f1d220..b5b35cc 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -10,4 +10,21 @@ /* Grid breakpoints */ .quantitySelectorTitle { display: none; +} + +.quantitySelectorStepper { + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +.quantitySelectorStepper { + border: none; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3c8f295..8ea10f1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -34,63 +34,8 @@ font-weight: 300; font-size: 20px; line-height: 34px; -} /* -.skuSelectorContainer { - display: flex; - flex-direction: column-reverse; - .skuSelectorSubcontainer--cor { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTRAS CORES"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .skuSelectorSelectorImageValue { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - text-transform: uppercase; - }/* - .frame-around { - border-radius: 30px; - } - .skuSelectorItemImageValue, - .skuSelectorInternalBox { - border-radius: 21px; - } - } - .skuSelectorSubcontainer--tamanho { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTROS TAMANHOS:"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .frame-around { - border-radius: 30px; - } - - .skuSelectorInternalBox { - border-radius: 30px; - } - } } -*/ + .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -117,6 +62,15 @@ .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { border-radius: 21px; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { font-size: 0; } @@ -147,4 +101,45 @@ .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { padding: 0; margin: auto; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "Ok"; + color: white; + font-size: 10px; +} + +.shippingContainer :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer { + display: flex; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; +} +.shippingContainer :global(.vtex-button) { + position: relative; + right: 49px; + top: 27px; + width: 49px; + height: 49px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss index f627ffe..e69de29 100644 --- a/styles/sass/pages/product/vtex.add-to-cart-button.scss +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -1,2 +0,0 @@ -.buttonText { -} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e69de29..4108e84 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,23 @@ +.flexRowContent--cart { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 25px; + .flexRow--buyButton { + :global(.vtex-button) { + background-color: black; + } + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: "adicionar à sacola"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index dd527e9..3b9d284 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,3 +1,20 @@ .quantitySelectorTitle { display: none; } + +.quantitySelectorStepper { + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +.quantitySelectorStepper { + border: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8f4ebd4..702ed15 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -23,69 +23,15 @@ font-weight: 300; font-size: 20px; line-height: 34px; -} /* -.skuSelectorContainer { - display: flex; - flex-direction: column-reverse; - .skuSelectorSubcontainer--cor { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTRAS CORES"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .skuSelectorSelectorImageValue { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - text-transform: uppercase; - }/* - .frame-around { - border-radius: 30px; - } - .skuSelectorItemImageValue, - .skuSelectorInternalBox { - border-radius: 21px; - } - } - .skuSelectorSubcontainer--tamanho { - .skuSelectorName { - font-size: 0; - &::after { - content: "OUTROS TAMANHOS:"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - } - .frame-around { - border-radius: 30px; - } - - .skuSelectorInternalBox { - border-radius: 30px; - } - } } -*/ + .skuSelectorContainer { display: flex; flex-direction: column-reverse; .valueWrapper .skuSelectorItemTextValue { margin-right: 5px; } + .skuSelectorSubcontainer--cor { .skuSelectorName { font-size: 0; @@ -106,6 +52,15 @@ .skuSelectorInternalBox { border-radius: 21px; } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } } .skuSelectorSubcontainer--tamanho { .skuSelectorName { @@ -142,3 +97,50 @@ } } } + +.shippingContainer { + :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: "Ok"; + color: white; + font-size: 10px; + } + } + } +} + +.shippingContainer { + :global(.vtex-input) { + :global(.vtex-input__label) { + font-size: 0; + &::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } +} +.shippingContainer { + display: flex; + :global(.vtex-input-prefix__group) { + height: 49px; + } + + :global(.vtex-button) { + position: relative; + right: 49px; + top: 27px; + width: 49px; + height: 49px; + } +} -- 2.34.1 From e73bc62040b95022e70d3abf2fc4622ad9d53c0a Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 18:20:58 -0300 Subject: [PATCH 4/4] feat: Adicionando estilo no Cep --- styles/css/vtex.address-form.css | 13 ++++++++++++ styles/css/vtex.store-components.css | 21 ++++++++++++++++--- .../sass/pages/product/vtex.address-form.scss | 5 +++++ .../pages/product/vtex.store-components.scss | 21 ++++++++++++++++--- 4 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 styles/css/vtex.address-form.css create mode 100644 styles/sass/pages/product/vtex.address-form.scss diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..5eb3ef6 --- /dev/null +++ b/styles/css/vtex.address-form.css @@ -0,0 +1,13 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +.input::placeholder { + content: "Digite seu CEP"; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8ea10f1..17fb098 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -113,8 +113,12 @@ } .shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { content: "Ok"; - color: white; - font-size: 10px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; } .shippingContainer :global(.vtex-input) :global(.vtex-input__label) { @@ -138,8 +142,19 @@ } .shippingContainer :global(.vtex-button) { position: relative; - right: 49px; + right: 127px; top: 27px; width: 49px; height: 49px; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 70px; + top: 8px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.address-form.scss b/styles/sass/pages/product/vtex.address-form.scss new file mode 100644 index 0000000..026dcd8 --- /dev/null +++ b/styles/sass/pages/product/vtex.address-form.scss @@ -0,0 +1,5 @@ +.input { + &::placeholder { + content: "Digite seu CEP"; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 702ed15..cd73e7c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -107,8 +107,12 @@ font-size: 0; &::after { content: "Ok"; - color: white; - font-size: 10px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; } } } @@ -138,9 +142,20 @@ :global(.vtex-button) { position: relative; - right: 49px; + right: 127px; top: 27px; width: 49px; height: 49px; } + :global(.vtex-address-form__postalCode) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 70px; + top: 8px; + } } -- 2.34.1