forked from M3-Academy/challenge-vtex-io
feat: adiciona os testIds e faz a responsividade para mobile
This commit is contained in:
parent
8c81925dca
commit
42da3494c4
@ -5,6 +5,10 @@
|
|||||||
max-height: 664px !important;
|
max-height: 664px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class*="vtex-store-components-3-x-caretIcon"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
[class*="flexRow--button-cart"] :global(.vtex-button) {
|
[class*="flexRow--button-cart"] :global(.vtex-button) {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
border-color: black;
|
border-color: black;
|
||||||
@ -533,6 +537,12 @@
|
|||||||
margin: 0 40px;
|
margin: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class="vtex-store-components-3-x-newsletter"] :global(.vtex-input) {
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid white !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
[class*="listContainer"] {
|
[class*="listContainer"] {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -620,3 +630,107 @@
|
|||||||
gap: 0px;
|
gap: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 2500px) {
|
||||||
|
[class*="vtex-store-components-3-x-container"] {
|
||||||
|
width: 75%;
|
||||||
|
margin: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class="vtex-product-price-1-x-sellingPrice"] {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #000000;
|
||||||
|
width: 116px;
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class="installments--m3-custom-installments"] {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="skuSelectorSubcontainer--tamanho"]
|
||||||
|
:global(.vtex-store-components-3-x-skuSelectorName)::after {
|
||||||
|
width: 904px;
|
||||||
|
height: 19px;
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="skuSelectorSubcontainer--cor"]
|
||||||
|
:global(.vtex-store-components-3-x-skuSelectorName)::after {
|
||||||
|
width: 904px;
|
||||||
|
height: 19px;
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="vtex-address-form__postalCode"] :global(.vtex-input__label)::after {
|
||||||
|
width: 116px;
|
||||||
|
height: 19px;
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="flexRow--button-cart"] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 639px) {
|
||||||
|
[class*="imageNormal"] {
|
||||||
|
width: 124.8px;
|
||||||
|
height: 124.8px;
|
||||||
|
}
|
||||||
|
[class*="shippingTable"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[class*="vtex-store-components-3-x-carouselContainer"] :global(.dn) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="vtex-store-components-3-x-caretIcon"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
[class*="flexRow--button-cart"] {
|
||||||
|
background-color: black;
|
||||||
|
border-color: black;
|
||||||
|
width: 73.464%;
|
||||||
|
height: 49px;
|
||||||
|
position: relative;
|
||||||
|
bottom: 14px;
|
||||||
|
left: -4px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
[class*="agenciamagma-store-theme-5-x-html--shipping"] {
|
||||||
|
position: relative !important;
|
||||||
|
bottom: 18.5px !important;
|
||||||
|
margin-top: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 425px) {
|
||||||
|
}
|
||||||
|
@ -40,13 +40,20 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"product-summary.shelf#demo1": {
|
"html#prateleira": {
|
||||||
|
"props": { "testId": "vtex-product-summary" },
|
||||||
"children": [
|
"children": [
|
||||||
"product-summary-image",
|
"product-summary-image#shelf",
|
||||||
"product-summary-name",
|
"product-summary-name",
|
||||||
"product-summary-price"
|
"product-list-price",
|
||||||
|
"product-selling-price#summary"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"product-summary.shelf#demo1": {
|
||||||
|
"props": {},
|
||||||
|
"children": ["html#prateleira"]
|
||||||
|
},
|
||||||
"list-context.product-list#produtos": {
|
"list-context.product-list#produtos": {
|
||||||
"blocks": ["product-summary.shelf#demo1"],
|
"blocks": ["product-summary.shelf#demo1"],
|
||||||
"children": ["html#slider"]
|
"children": ["html#slider"]
|
||||||
@ -176,7 +183,7 @@
|
|||||||
"html#codigo",
|
"html#codigo",
|
||||||
"product-rating-summary",
|
"product-rating-summary",
|
||||||
"flex-layout.row#list-price-savings",
|
"flex-layout.row#list-price-savings",
|
||||||
"flex-layout.row#selling-price",
|
"html#selling-price",
|
||||||
"html#product-installments",
|
"html#product-installments",
|
||||||
"html#pix",
|
"html#pix",
|
||||||
"html#sku-selector",
|
"html#sku-selector",
|
||||||
@ -188,6 +195,11 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"html#selling-price": {
|
||||||
|
"props": { "testId": "product-price" },
|
||||||
|
"children": ["flex-layout.row#selling-price"]
|
||||||
|
},
|
||||||
|
|
||||||
"html#sku-selector": {
|
"html#sku-selector": {
|
||||||
"props": { "testId": "sku-selector" },
|
"props": { "testId": "sku-selector" },
|
||||||
"children": ["sku-selector"]
|
"children": ["sku-selector"]
|
||||||
|
@ -6,3 +6,14 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
bottom: 2px;
|
bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 2500px) {
|
||||||
|
.container {
|
||||||
|
width: 75%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user