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

feat: adiciona css para layout mobile

Browse Source
This commit is contained in:
SamuelCondack 2023-02-08 13:33:21 -03:00
parent 7e3f872d05
commit 456d617a98
6 changed files with 58 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
react/Placeholder.css Normal file
View File

9
react/Placeholder.tsx Normal file
View File

@ -0,0 +1,9 @@
const Placeholder = () => {
if (typeof document !== 'undefined') {
const InputCep = document.querySelector('.vtex-address-form-4-x-input')
InputCep?.setAttribute('placeholder', 'Digite seu CEP')
}
return null
}
export default Placeholder

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

@ -349,6 +349,7 @@
"html#pixacademy",
"html#sku-selector",
"html#quantityAndButton",
"Placeholder",
"product-assembly-options",
"product-gifts",
"availability-subscriber",
@ -482,4 +483,4 @@
}
}
}
}
}

3
store/interfaces.json
View File

@ -11,5 +11,8 @@
},
"Pix-academy": {
"component": "imagempix"
},
"Placeholder": {
"component": "Placeholder"
}
}

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

@ -56,7 +56,6 @@
}
.newsletter .container .form .label::after {
content: "Receba ofertas e novidades por e-mail";
white-space: pre;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
@ -110,9 +109,9 @@
.carouselGaleryThumbs {
width: 70%;
}
@media (max-width: 1024px) {
@media (max-width: 639px) {
.carouselGaleryThumbs {
width: 95%;
display: flex;
}
}
@ -400,13 +399,27 @@
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
width: 231px;
width: 100%;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
border: 1px solid #cccccc;
border-radius: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
padding: 8px 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__error) {
position: absolute;
bottom: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: absolute;
@ -414,10 +427,10 @@
left: 312px;
top: 41.5px;
}
@media (max-width: 376px) {
@media (max-width: 476px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
position: unset;
justify-content: right;
left: 120px;
top: 85px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
@ -432,6 +445,7 @@
width: 49px;
height: 49px;
margin-bottom: 5px;
padding: 0 14.5px;
background: #000;
border: 1px solid #000;
border-radius: 0;
@ -523,16 +537,11 @@
gap: 16px !important;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb {
width: 19%;
max-width: 90px;
height: fit-content !important;
max-height: 90px;
margin: 0;
}
@media (max-width: 1024px) {
.carouselGaleryThumbs :first-child :first-child .productImagesThumb {
width: 10%;
}
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg {
border-radius: 8px;
}

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

@ -47,7 +47,6 @@
}
&::after{
content: 'Receba ofertas e novidades por e-mail';
white-space: pre;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
@ -104,8 +103,8 @@
}
.carouselGaleryThumbs {
width: 70%;
@media (max-width: 1024px){
width: 95%;
@media (max-width: 639px){
display: flex;
}
}
// .productImageTag{
@ -413,7 +412,7 @@
}
:global(.vtex-input-prefix__group) {
width: 231px;
width: 100%;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
@ -422,16 +421,29 @@
border-radius: 0;
}
}
:global(.vtex-address-form-4-x-input) {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
padding: 8px 0;
}
:global(.vtex-input__error) {
position: absolute;
bottom: 0;
}
:global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: absolute;
padding: 0;
left: 312px;
top: 41.5px;
@media (max-width: 376px){
position: unset;
justify-content: right;
@media (max-width: 476px){
left: 120px;
top: 85px;
}
:last-child{
@ -449,6 +461,7 @@
width: 49px;
height: 49px;
margin-bottom: 5px;
padding: 0 14.5px;
background: #000;
border: 1px solid #000;
@ -557,14 +570,10 @@
gap: 16px !important;
.productImagesThumb {
width: 19%;
max-width: 90px;
height: fit-content !important;
max-height: 90px;
margin: 0;
@media (max-width: 1024px){
width: 10%;
}
.figure {
.thumbImg {
border-radius: 8px;