AdilsonFernandoNevesOrnellas/challenge-vtex-io-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hotfix: revendo parte02 todo css, deixando mais responsivo e proximo ao figma possivel

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-29 22:32:54 -03:00
parent 3003b1e32b
commit c9225bc5dd
9 changed files with 354 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,6 @@
"html#pageProduct",
"newsletter"
]
},
"html#pageProduct": {
"props": {
@ -101,10 +100,11 @@
"product-images": {
"props": {
"testId":"product-images",
"blockClass": "divImagens",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "auto"
},
"thumbnailsOrientation": "horizontal",
"displayThumbnailsArrows": false,
@ -140,6 +140,11 @@
// "share#default"
]
},
"pixCustom":{
"props":{
"testId":"pix-price"
}
},
"shipping-simulator":{
"props":{
"blockClass":"divCep"
@ -160,6 +165,7 @@
},
"product-quantity":{
"props":{
"testId":"product-quantity",
"blockClass":"divQuantidade",
"size":"regular"
}
@ -168,7 +174,7 @@
"props":{
"blockClass":"divParcelamente",
"markers": ["discount"],
"message": " {installmentsNumber}<discount>x</discount> de {installmentValue} <discount> sem juros </discount> ",
"message": "{installmentsNumber} de {installmentValue} sem juros",
"installmentsCriteria":"max-quantity-without-interest"
}
},
@ -189,6 +195,7 @@
"sku-selector": {
"props": {
"testId":"sku-selector",
"blockClass":"divSku",
"variationsSpacing": 3,
"showValueNameForImageVariation": true
@ -203,9 +210,14 @@
},
"children": ["add-to-cart-button"]
},
"add-to-cart-button":{
"props":{
"testId":"add-to-cart-button"
}
},
"flex-layout.row#product-availability": {
"props": {
"blockClass":"divProductIndisponivel",
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
@ -225,16 +237,21 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.col#availability",
"sku-selector"
]
},
"flex-layout.row#availability": {
"flex-layout.col#availability": {
"props": {
"blockClass": "message-availability"
},
"children": ["availability-subscriber"]
},
"availability-subscriber":{
"props":{
"blockClass":"buttonIndisponivel"
}
},
"share#default": {
"props": {
@ -380,15 +397,14 @@
}
},
"list-context.product-list#demo": {
"props":{
// "category":"112901"
// "specificationFilters":"(id:112901)"
},
"blocks": ["product-summary.shelf#demo"],
"children": ["slider-layout#demo-product"]
},
"product-summary.shelf#demo": {
"props":{
"testId":"vtex-product-summary"
},
"children": [
"product-summary-image",
"product-summary-name",
@ -401,6 +417,7 @@
"slider-layout#demo-product": {
"props": {
"testId":"product-summary-list",
"itemsPerPage": {
"desktop": 4,
"tablet": 3,

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

@ -25,16 +25,57 @@
}
.flexRowContent {
padding: 0;
margin: 0;
}
.flexRowContent--divProduct {
margin-top: 16px;
padding: 0px;
padding-left: 40px !important;
margin-bottom: 16px;
.flexRowContent--divProductIndisponivel {
gap: 32px;
}
.flexColChild--info-availability .flexRow--divNomeProduct {
text-align: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
}
@media (max-width: 1024px) {
.flexColChild--info-availability .flexRow--divNomeProduct {
text-align: left;
}
}
.flexColChild--info-availability :global(.vtex-product-identifier-0-x-product-identifier) {
display: flex;
justify-content: flex-end;
align-items: end;
margin: 0;
margin-top: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
margin-bottom: 24px;
}
@media (max-width: 1024px) {
.flexColChild--info-availability :global(.vtex-product-identifier-0-x-product-identifier) {
display: block;
}
}
.flexColChild--info-availability .flexCol--message-availability {
width: 100%;
}
.flexColChild--info-availability .flexCol--message-availability .flexColChild--message-availability {
width: 100%;
}
.flexRowContent--divProduct {
gap: 32px;
padding-right: 40px !important;
}
@media (max-width: 1024px) {
.flexRowContent--divProduct {
@ -54,8 +95,20 @@
line-height: 34px;
color: #575757;
}
@media (max-width: 1024px) {
.flexCol--divInfoProduct .flexRow--divNomeProduct {
text-align: left;
}
}
.flexCol--divInfoProduct .flexRow--divNomeProductModelo {
text-align: end;
}
@media (max-width: 1024px) {
.flexCol--divInfoProduct .flexRow--divNomeProductModelo {
text-align: left;
}
}
.flexCol--divInfoProduct .flexRow--divNomeProductModelo :global(.vtex-product-identifier-0-x-product-identifier) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;

3
styles/css/vtex.product-price.css
View File

@ -27,6 +27,9 @@
.installments--divParcelamente .installmentsNumber--divParcelamente {
font-weight: 700;
}
.installments--divParcelamente .installmentsNumber--divParcelamente::after {
content: "x";
}
.installments--divParcelamente .installments-discount--divParcelamente {
font-weight: 700;
}

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

@ -10,3 +10,16 @@
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}
.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__input) {
border-left: 0px;
border-right: 0px;
}
.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__plus-button) {
color: black;
background-color: white;
}
.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__minus-button) {
color: black;
background-color: white;
}

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

@ -13,7 +13,11 @@
.container {
margin: 0;
padding: 0;
margin-top: 16px !important;
padding: 0px !important;
padding-left: 40px !important;
margin-bottom: 16px !important;
padding-right: 40px !important;
max-width: 100%;
}
.container .productImagesContainer--divImagens {
@ -43,6 +47,11 @@
max-width: 100% !important;
}
}
@media (max-width: 641px) {
.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens {
display: block !important;
}
}
.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
margin-right: 16px;
padding: 0px;
@ -143,6 +152,7 @@
height: 48px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .frameAround--divSku {
border: 1px solid #989898;
border-radius: 50%;
width: 48px;
height: 48px;
@ -190,6 +200,7 @@
height: 40px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku {
border: 1px solid #989898;
border-radius: 50%;
width: 40px;
height: 40px;
@ -205,6 +216,12 @@
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku {
padding: 0 !important;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute {
height: 40px;
@ -399,3 +416,63 @@
border: 0;
border-radius: 0;
}
.subscriberContainer {
width: 100%;
}
.subscriberContainer .title {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .subscribeLabel {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .form .content {
display: grid;
grid-template-areas: "1" "2";
justify-content: inherit;
gap: 10px;
width: 100%;
max-width: 100%;
}
.subscriberContainer .form .content .inputName {
grid-area: 1;
margin-right: 0;
margin-bottom: 0;
}
.subscriberContainer .form .content .inputEmail {
grid-area: 1;
margin-right: 0;
margin-bottom: 0;
}
.subscriberContainer .form .content .submit {
grid-area: 2;
}
.subscriberContainer .form .content .submit :global(.vtex-button) {
width: 100%;
height: 49px;
border: 0;
background-color: #000000;
}
.subscriberContainer .form .content .submit :global(.vtex-button__label) {
font-size: 0;
}
.subscriberContainer .form .content .submit :global(.vtex-button__label)::after {
content: "AVISE-ME";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
color: #ffffff;
}

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

@ -1,30 +1,69 @@
.stretchChildrenWidth{
.stretchChildrenWidth {
width: 100% !important;
padding: 0 ;
padding: 0;
@media (max-width: 1024px) {
padding-right: 0px
}
padding-right: 0px;
}
}
.flexRowContent--divDescription{
.flexRowContent--divDescription {
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
}
.flexRowContent{
.flexRowContent {
padding: 0;
margin: 0;
}
.flexRowContent--divProductIndisponivel {
gap: 32px;
}
.flexColChild--info-availability {
.flexRow--divNomeProduct {
text-align: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
@media (max-width: 1024px) {
text-align: left;
}
}
:global(.vtex-product-identifier-0-x-product-identifier) {
display: flex;
justify-content: flex-end;
align-items: end;
margin: 0;
margin-top: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
margin-bottom: 24px
}
@media (max-width: 1024px) {
:global(.vtex-product-identifier-0-x-product-identifier) {
display: block;
}
};
.flexCol--message-availability{
width: 100%;
.flexColChild--message-availability{
width: 100%;
}
}
}
.flexRowContent--divProduct {
margin-top: 16px;
padding: 0px;
padding-left: 40px !important;
margin-bottom: 16px;
gap: 32px;
padding-right: 40px !important;
@media (max-width:1024px) {
@media (max-width: 1024px) {
flex-direction: column;
}
.stretchChildrenWidth {
@ -40,28 +79,37 @@
font-size: 20px;
line-height: 34px;
color: #575757;
@media (max-width: 1024px) {
text-align: left;
}
}
.flexRow--divNomeProductModelo {
text-align: end;
@media (max-width: 1024px) {
text-align: left;
}
:global(.vtex-product-identifier-0-x-product-identifier){
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
}
}
.flexCol--divImgDescription{
.flexCol--divImgDescription {
margin-right: 22px;
@media (max-width: 1024px) {
margin-right: 0px;
}
}
.flexRow--divButtonBuy{
.flexRow--divButtonBuy {
text-align: center;
width: 100%;
:global(.vtex-button){
:global(.vtex-button) {
background-color: black;
}
}

3
styles/sass/pages/product/vtex.product-price.scss
View File

@ -16,6 +16,9 @@
color: #929292;
.installmentsNumber--divParcelamente{
font-weight: 700;
&::after{
content: "x";
}
}
.installments-discount--divParcelamente{
font-weight: 700;

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

@ -11,3 +11,17 @@
// }
// }
}
.quantitySelectorStepper--divQuantidade{
:global(.vtex-numeric-stepper__input){
border-left: 0px;
border-right: 0px;
}
:global(.vtex-numeric-stepper__plus-button){
color: black;
background-color: white;
}
:global(.vtex-numeric-stepper__minus-button){
color: black;
background-color: white;
}
}

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

@ -3,7 +3,11 @@
}
.container {
margin: 0;
padding: 0;
margin-top: 16px !important;
padding: 0px !important;
padding-left: 40px !important;
margin-bottom: 16px !important;
padding-right: 40px !important;
max-width: 100%;
.productImagesContainer--divImagens {
width: 100%;
@ -28,6 +32,9 @@
}
}
.carouselGaleryThumbs--divImagens {
@media (max-width: 641px) {
display: block !important;
}
.productImagesThumb {
margin-right: 16px;
padding: 0px;
@ -121,6 +128,7 @@
width: 48px;
height: 48px;
.frameAround--divSku {
border: 1px solid #989898;
border-radius: 50%;
width: 48px;
height: 48px;
@ -151,7 +159,6 @@
.skuSelectorSubcontainer--tamanho {
order: 1;
height: 67px;
// margin-bottom: 10px !important;
.skuSelectorName {
font-size: 0;
font-family: "Open Sans";
@ -169,6 +176,7 @@
width: 40px;
height: 40px;
.frameAround--divSku {
border: 1px solid #989898;
border-radius: 50%;
width: 40px;
height: 40px;
@ -183,6 +191,12 @@
height: 40px;
.skuSelectorItemTextValue--divSku {
padding: 0 !important;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.absolute {
height: 40px;
@ -203,7 +217,6 @@
transform: rotate(-90deg);
}
}
.shippingContainer {
display: flex;
position: relative;
@ -291,7 +304,7 @@
line-height: 19px;
color: #202020;
}
.shippingTableHeadDeliveryEstimate{
.shippingTableHeadDeliveryEstimate {
display: flex;
order: 1;
text-transform: uppercase;
@ -305,7 +318,7 @@
color: #202020;
}
.shippingTableHeadDeliveryPrice{
.shippingTableHeadDeliveryPrice {
text-transform: uppercase;
font-size: 0;
width: 62px;
@ -316,7 +329,7 @@
line-height: 19px;
color: #202020;
}
.shippingTableHeadDeliveryPrice::after{
.shippingTableHeadDeliveryPrice::after {
content: "FRETE";
font-size: 14px;
}
@ -373,7 +386,7 @@
}
}
}
.inputGroup--newsletter{
.inputGroup--newsletter {
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid #929292;
@ -384,3 +397,66 @@
}
}
}
.subscriberContainer {
width: 100%;
.title {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscribeLabel {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.form {
.content {
display: grid;
grid-template-areas:
"1"
"2";
justify-content: inherit;
gap: 10px;
width: 100%;
max-width: 100%;
.inputName {
grid-area: 1;
margin-right: 0;
margin-bottom: 0;
}
.inputEmail {
grid-area: 1;
margin-right: 0;
margin-bottom: 0;
}
.submit {
grid-area: 2;
:global(.vtex-button) {
width: 100%;
height: 49px;
border: 0;
background-color: #000000;
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "AVISE-ME";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
color: #ffffff;
}
}
}
}
}
}