BernardoWaldhelm/challenge-vtex-io-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/challenge #1

Merged
BernardoWaldhelm merged 22 commits from feature/challenge into master 2023-02-03 18:00:41 +00:00
Conversation 0 Commits 22 Files Changed 49 +244 -11
8 changed files with 244 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a92e23b101 - Show all commits

4
react/components/Html/style.css
View File

@ -6,3 +6,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
[class*="html--cep"] {
margin: 16px 0;
}

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

@ -121,7 +121,7 @@
// "product-gifts", // "product-gifts",
// "flex-layout.row#buy-button", // "flex-layout.row#buy-button",
"availability-subscriber", "availability-subscriber",
"shipping-simulator", "html#shipping-simulator",
"share#default" "share#default"
] ]
}, },
@ -190,6 +190,13 @@
"children": ["html#product-quantity","html#button-addCart"] "children": ["html#product-quantity","html#button-addCart"]
}, },
"html#shipping-simulator": {
"props":{
"blockClass": "cep"
},
"children": ["shipping-simulator"]
},
"flex-layout.row#product-availability": { "flex-layout.row#product-availability": {
"props": { "props": {
"colGap": 7, "colGap": 7,

2
styles/css/vtex.breadcrumb.css
View File

@ -17,7 +17,7 @@
line-height: 19px; line-height: 19px;
color: #929292; color: #929292;
} }
@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { @media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.container { .container {
padding: 16px 40px; padding: 16px 40px;
} }

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

@ -182,3 +182,17 @@
line-height: 25px; line-height: 25px;
color: #fff; color: #fff;
} }
.flexRow--cep {
margin: 16px 0;
width: 409px;
}
@media (min-width: 280px) and (max-width: 768px) {
.flexRow--cep {
width: 100%;
}
}
.flexRow--cep .flexRowContent--cep .stretchChildrenWidth {
padding: 0;
margin: 0;
}

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

@ -14,7 +14,7 @@
justify-content: end; justify-content: end;
margin-bottom: 24px; margin-bottom: 24px;
} }
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.product-identifier--productReference { .product-identifier--productReference {
justify-content: flex-start; justify-content: flex-start;
padding-top: 8px; padding-top: 8px;

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

@ -13,7 +13,7 @@
margin: 0; margin: 0;
max-width: 100%; max-width: 100%;
} }
@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { @media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.container { .container {
padding: 16px 40px; padding: 16px 40px;
} }
@ -32,17 +32,17 @@
max-height: 904px !important; max-height: 904px !important;
cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default; cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
} }
@media (min-width: 1025px) and (max-width: 2499px) { @media (min-width: 1025px) and (max-width: 2560px) {
.productImageTag--main, .videoContainer { .productImageTag--main, .videoContainer {
max-height: 664px !important; max-height: 664px !important;
} }
} }
@media (min-width: 491px) and (max-width: 1024px) { @media (min-width: 769px) and (max-width: 1024px) {
.productImageTag--main, .videoContainer { .productImageTag--main, .videoContainer {
max-height: 944px !important; max-height: 944px !important;
} }
} }
@media (min-width: 280px) and (max-width: 490px) { @media (min-width: 280px) and (max-width: 768px) {
.productImageTag--main, .videoContainer { .productImageTag--main, .videoContainer {
max-height: 296px !important; max-height: 296px !important;
} }
@ -51,7 +51,7 @@
.carouselGaleryThumbs { .carouselGaleryThumbs {
margin-top: 0; margin-top: 0;
} }
@media (min-width: 280px) and (max-width: 490px), (min-width: 491px) and (max-width: 1024px) { @media (min-width: 280px) and (max-width: 768px), (min-width: 769px) and (max-width: 1024px) {
.carouselGaleryThumbs { .carouselGaleryThumbs {
display: block !important; display: block !important;
} }
@ -63,7 +63,7 @@
border-radius: 8px; border-radius: 8px;
max-width: calc(100% - 16px); max-width: calc(100% - 16px);
} }
@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { @media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.carouselGaleryThumbs .productImagesThumb { .carouselGaleryThumbs .productImagesThumb {
width: 90px !important; width: 90px !important;
height: 90px !important; height: 90px !important;
@ -87,7 +87,7 @@
line-height: 34px; line-height: 34px;
color: #575757; color: #575757;
} }
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.productNameContainer--quickview { .productNameContainer--quickview {
justify-content: flex-start; justify-content: flex-start;
margin-top: 32px; margin-top: 32px;
@ -249,3 +249,94 @@
.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue { .skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
color: #000; color: #000;
} }
.shippingContainer {
display: flex;
align-items: flex-end;
width: 409px;
position: relative;
}
@media (min-width: 280px) and (max-width: 768px) {
.shippingContainer {
width: 296px;
}
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
margin-bottom: 8px;
}
.shippingContainer :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
padding: 0;
}
.shippingContainer :global(.vtex-input-prefix__group) {
width: 250px;
height: 49px;
border: none;
border-radius: 0;
}
.shippingContainer :global(.vtex-address-form-4-x-input) {
width: 250px;
height: 49px;
padding: 16px;
border: 1px solid #CCC;
border-radius: 0;
}
.shippingContainer :global(.vtex-input__suffix) {
display: none;
}
.shippingContainer :global(.vtex-button) {
background-color: #000;
border: none;
border-radius: 0;
width: 49px;
height: 49px;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {
content: "OK";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #fff;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
left: 312px;
bottom: 18px;
padding: 0;
}
@media (min-width: 280px) and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: 200px;
bottom: -24px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000;
padding: 0;
margin: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}

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

@ -180,5 +180,20 @@
} }
} }
} }
}
.flexRow--cep {
margin: 16px 0;
width: 409px;
@media #{$mq-mobile} {
width: 100%;
}
.flexRowContent--cep {
.stretchChildrenWidth {
padding: 0;
margin: 0;
}
}
} }

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

@ -272,3 +272,105 @@
} }
} }
.shippingContainer {
display: flex;
align-items: flex-end;
width: 409px;
position: relative;
@media #{$mq-mobile}{
width: 296px;
}
:global(.vtex-input__label) {
font-size: 0;
margin-bottom: 8px;
&::after {
content: "CALCULAR FRETE:";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray6;
}
}
:global(.vtex-address-form__postalCode){
padding: 0;
}
:global(.vtex-input-prefix__group) {
width: 250px;
height: 49px;
border: none;
border-radius: 0;
}
:global(.vtex-address-form-4-x-input){
width: 250px;
height: 49px;
padding: 16px;
border: 1px solid #CCC;
border-radius: 0;
}
:global(.vtex-input__suffix) {
display: none;
}
:global(.vtex-button) {
background-color: $color-black0;
border: none;
border-radius: 0;
width: 49px;
height: 49px;
}
:global(.vtex-button__label){
font-size: 0;
&::after{
content: ("OK");
font-family: $font-family;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: $color-white;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
// width: 100%;
left: 312px;
bottom: 18px;
// transform: translate(0, -50%);
padding: 0;
@media #{$mq-mobile}{
left: 200px;
bottom: -24px;
}
:last-child{
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: $color-black0;
padding: 0;
margin: 0;
}
:global(.vtex__icon-external-link) {
display: none;
}
}
}