naianfelix/challenge-vtex-io-naian-felix
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: modifica container do cep

Browse Source
This commit is contained in:
Naian Felix dos Santos 2023-02-02 09:42:45 -03:00
parent 41964c97ff
commit e685cdb742
10 changed files with 210 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
store/blocks/pdp/product.jsonc
View File

@ -110,7 +110,7 @@
"sku-selector",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"flex-layout.row#buy-box",
"availability-subscriber",
"shipping-simulator",
"share#default"
@ -131,14 +131,35 @@
}
},
"flex-layout.row#buy-box": {
"children": [
"flex-layout.row#product-quantity",
"flex-layout.row#buy-button"
],
"props": {
"colGap": 0,
"blockClass": "buy-box",
"colSizing": "auto"
}
},
"flex-layout.row#product-quantity": {
"props": {
"preventHorizontalStretch": true
},
"children": ["product-quantity"]
},
"flex-layout.row#buy-button": {
"props": {
"blockClass": "button-container",
"marginTop": 4,
"preventHorizontalStretch": true,
"preventHorizontalStretch": false,
"fullWidth": true,
"marginBottom": 7
},
"children": ["product-quantity", "add-to-cart-button"]
"children": ["add-to-cart-button"]
},
"flex-layout.row#product-availability": {

20
styles/css/vtex.address-form.css Normal file
View File

@ -0,0 +1,20 @@
/*
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@400;500;600;700&display=swap");
/* Grid breakpoints */
:global(.vtex-input__label) {
margin-top: 16px;
font-size: 0;
}
:global(.vtex-input__label)::before {
content: "CALCULAR FRETE:";
font-size: 14px;
line-height: 19px;
color: #929292;
}

13
styles/css/vtex.adress-form.css Normal file
View File

@ -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@400;500;600;700&display=swap");
/* Grid breakpoints */
.vtex-address-form__postalCode {
padding: 0;
}

8
styles/css/vtex.flex-layout.css
View File

@ -24,8 +24,16 @@
display: none;
}
.flexRowContent--button-container {
margin-bottom: 10px;
}
.flexRowContent--button-container :global(.vtex-button) {
background-color: #000;
border: 0;
height: 50px;
margin-left: 10px;
}
.flexRow--buy-box .stretchChildrenWidth:nth-child(2n) {
width: 100% !important;
}

2
styles/css/vtex.product-quantity.css
View File

@ -33,7 +33,7 @@
font-size: 0;
}
:global(.vtex-add-to-cart-button-0-x-buttonText)::before {
content: "ADICIONAR Á SACOLA";
content: "ADICIONAR À SACOLA";
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 25px;

66
styles/css/vtex.store-components.css
View File

@ -54,7 +54,8 @@
font-size: 14px;
line-height: 19px;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator,
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
display: none;
}
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
@ -89,6 +90,69 @@
display: none;
}
.shippingContainer {
display: flex;
}
.shippingContainer :global(.vtex-button) {
width: 50px;
height: 50px;
font-size: 0;
background-color: #000;
border: 0;
margin-top: 27px;
right: 9%;
}
.shippingContainer :global(.vtex-button)::before {
text-align: center;
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
height: 0;
width: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
right: 15%;
bottom: 33%;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) #text {
color: #000;
text-decoration: underline;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}
.newsletter {
background: red;
}
:global(.vtex-input__label) {
font-size: 0;
}
:global(.vtex-input__label)::before {
content: "CALCULAR FRETE:";
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shareContainer {
display: none;
}
:global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
}
:global(.vtex-address-form__postalCode) .pointer {
position: absolute;
}
:global(.vtex-input-prefix__group) {
height: 50px;
}

3
styles/sass/pages/product/vtex.adress-form.scss Normal file
View File

@ -0,0 +1,3 @@
.vtex-address-form__postalCode {
padding: 0;
}

8
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -16,9 +16,17 @@
}
.flexRowContent--button-container {
margin-bottom: 10px;
:global(.vtex-button) {
background-color: #000;
border: 0;
height: 50px;
margin-left: 10px;
}
}
.flexRow--buy-box {
.stretchChildrenWidth:nth-child(2n) {
width: 100% !important;
}
}

2
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -21,7 +21,7 @@
:global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
&::before {
content: "ADICIONAR Á SACOLA";
content: "ADICIONAR À SACOLA";
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 25px;

68
styles/sass/pages/product/vtex.store-components.scss
View File

@ -49,7 +49,8 @@
line-height: 19px;
}
.skuSelectorNameSeparator {
.skuSelectorNameSeparator,
.skuSelectorSelectorImageValue {
display: none;
}
@ -89,6 +90,71 @@
}
}
.shippingContainer {
display: flex;
:global(.vtex-button) {
width: 50px;
height: 50px;
font-size: 0;
background-color: #000;
border: 0;
margin-top: 27px;
right: 9%;
&::before {
text-align: center;
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
}
:global(.vtex-button__label) {
height: 0;
width: 0;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
right: 15%;
bottom: 33%;
#text {
color: #000;
text-decoration: underline;
}
:global(.vtex__icon-external-link) {
display: none;
}
}
}
.newsletter {
background: red;
}
:global(.vtex-input__label) {
font-size: 0;
&::before {
content: "CALCULAR FRETE:";
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
.shareContainer {
display: none;
}
:global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
.pointer {
position: absolute;
}
}
:global(.vtex-input-prefix__group) {
height: 50px;
}