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 +201 -122
8 changed files with 201 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0abdeaba4f - Show all commits

19
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",
@ -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"]
},

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

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

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

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

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

2
styles/sass/pages/product/vtex.add-to-cart-button.scss
View File

@ -1,2 +0,0 @@
.buttonText {
}

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

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

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

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

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