SavioCarvalhoMoraes/challenge-vtex-io-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

development #24

Merged
SavioCarvalhoMoraes merged 50 commits from development into master 2023-02-10 18:25:07 +00:00
Conversation 0 Commits 50 Files Changed 39 +462 -11
14 changed files with 462 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ad091a3bb1 - Show all commits

1
react/components/PaymentPix/styles.css
View File

@ -16,7 +16,6 @@
.paymentPixText {
display: flex;
flex-direction: column;
align-items: center;
}
.paymentPixValue {
margin: 0;

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

@ -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",
@ -123,17 +121,22 @@
"flex-layout.row#selling-price",
"product-installments",
"product-paymentPix-component",
"product-separator",
"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
@ -150,9 +153,10 @@
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
"width": "80%",
"blockClass": "buyButton"
},
"children": ["add-to-cart-button"]
},

10
styles/css/vtex.add-to-cart-button.css Normal file
View File

@ -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 */

13
styles/css/vtex.address-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@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.input::placeholder {
content: "Digite seu CEP";
}

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

@ -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 */
/* 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;
}

31
styles/css/vtex.product-identifier.css
View File

@ -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);
}

30
styles/css/vtex.product-quantity.css Normal file
View File

@ -0,0 +1,30 @@
/*
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;
}
.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;
}

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

@ -24,4 +24,137 @@
.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;
}
.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--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;
}
.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;
}
.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";
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) {
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: 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;
}

0
styles/sass/pages/product/vtex.add-to-cart-button.scss Normal file
View File

5
styles/sass/pages/product/vtex.address-form.scss Normal file
View File

@ -0,0 +1,5 @@
.input {
&::placeholder {
content: "Digite seu CEP";
}
}

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

@ -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;
}
}
}
}

19
styles/sass/pages/product/vtex.product-identifier.scss Normal file
View File

@ -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);
}

20
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

@ -0,0 +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;
}

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

@ -15,3 +15,147 @@
.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;
}
.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;
}
.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 {
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;
}
}
}
.shippingContainer {
:global(.vtex-button) {
width: 49px;
height: 49px;
background-color: black;
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "Ok";
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) {
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: 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;
}
}