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

feat(product): adicionando campo de cep e estilizando-o

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-26 16:17:32 -03:00
parent 03d086ab4f
commit a92e23b101
8 changed files with 244 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -17,7 +17,7 @@
line-height: 19px;
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 {
padding: 16px 40px;
}

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

@ -182,3 +182,17 @@
line-height: 25px;
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;
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 {
justify-content: flex-start;
padding-top: 8px;

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

@ -13,7 +13,7 @@
margin: 0;
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 {
padding: 16px 40px;
}
@ -32,17 +32,17 @@
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;
}
@media (min-width: 1025px) and (max-width: 2499px) {
@media (min-width: 1025px) and (max-width: 2560px) {
.productImageTag--main, .videoContainer {
max-height: 664px !important;
}
}
@media (min-width: 491px) and (max-width: 1024px) {
@media (min-width: 769px) and (max-width: 1024px) {
.productImageTag--main, .videoContainer {
max-height: 944px !important;
}
}
@media (min-width: 280px) and (max-width: 490px) {
@media (min-width: 280px) and (max-width: 768px) {
.productImageTag--main, .videoContainer {
max-height: 296px !important;
}
@ -51,7 +51,7 @@
.carouselGaleryThumbs {
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 {
display: block !important;
}
@ -63,7 +63,7 @@
border-radius: 8px;
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 {
width: 90px !important;
height: 90px !important;
@ -87,7 +87,7 @@
line-height: 34px;
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 {
justify-content: flex-start;
margin-top: 32px;
@ -249,3 +249,94 @@
.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
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;
}
}
}