layout mobile e ultrawide
This commit is contained in:
parent
92ded99fdd
commit
4f76bd79e3
@ -1,7 +1,30 @@
|
||||
.html--pdp-breadcrumb {
|
||||
margin: 0 40px;
|
||||
|
||||
}
|
||||
|
||||
.html--product-summary-container {
|
||||
margin: 0 40px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.html--pdp-breadcrumb {
|
||||
margin: 0 360px;
|
||||
|
||||
}
|
||||
|
||||
.html--product-summary-container {
|
||||
margin: 0 360px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.html--quantity-and-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*buy-button*/
|
||||
/* [class*="flexRowContent--btn-product"] button {
|
||||
|
@ -32,17 +32,13 @@
|
||||
"props": {
|
||||
"verticalAlign": "middle"
|
||||
},
|
||||
"children": [
|
||||
"assembly-option-item-quantity-selector"
|
||||
]
|
||||
"children": ["assembly-option-item-quantity-selector"]
|
||||
},
|
||||
"flex-layout.col#product-assembly-image": {
|
||||
"props": {
|
||||
"marginRight": 4
|
||||
},
|
||||
"children": [
|
||||
"assembly-option-item-image"
|
||||
]
|
||||
"children": ["assembly-option-item-image"]
|
||||
},
|
||||
"flex-layout.col#product-assembly-middle": {
|
||||
"props": {
|
||||
@ -96,9 +92,7 @@
|
||||
"horizontalAlign": "right",
|
||||
"verticalAlign": "middle"
|
||||
},
|
||||
"children": [
|
||||
"assembly-option-item-quantity-selector"
|
||||
]
|
||||
"children": ["assembly-option-item-quantity-selector"]
|
||||
},
|
||||
"assembly-option-item-customize#sec-level": {
|
||||
"props": {
|
||||
|
@ -125,14 +125,20 @@
|
||||
"html#product-installments",
|
||||
"html#Pix",
|
||||
"html#sku-selector",
|
||||
"html#product-quantity",
|
||||
"html#buy-container",
|
||||
"product-assembly-options",
|
||||
"flex-layout.row#buy-button",
|
||||
"availability-subscriber",
|
||||
"html#shipping-simulator"
|
||||
]
|
||||
},
|
||||
|
||||
"html#buy-container": {
|
||||
"props": {
|
||||
"blockClass": "quantity-and-button"
|
||||
},
|
||||
"children": ["html#product-quantity", "flex-layout.row#buy-button"]
|
||||
},
|
||||
|
||||
"html#product-installments": {
|
||||
"props": {
|
||||
"testId": "product-installments"
|
||||
@ -287,7 +293,8 @@
|
||||
|
||||
"html#slider": {
|
||||
"props": {
|
||||
"testId": "product-summary-list"
|
||||
"testId": "product-summary-list",
|
||||
"blockClass": "product-summary-container"
|
||||
},
|
||||
"children": ["slider-layout#carrosselatualizado"]
|
||||
},
|
||||
@ -297,7 +304,7 @@
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
"tablet": 3,
|
||||
"phone": 1
|
||||
"phone": 2
|
||||
},
|
||||
"infinite": true,
|
||||
"showNavigationArrows": "desktopOnly",
|
||||
|
@ -32,15 +32,15 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.flexRow--btn-product {
|
||||
width: 100%;
|
||||
max-width: 526px;
|
||||
position: absolute;
|
||||
top: 374px;
|
||||
left: 158px;
|
||||
@media screen and (min-width: 768px) {
|
||||
.flexRowContent--btn-product {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRow--btn-product {
|
||||
width: 100%;
|
||||
}
|
||||
.flexRow--btn-product :global(.vtex-button) {
|
||||
background-color: black;
|
||||
border: 1px solid black;
|
||||
|
@ -27,7 +27,7 @@
|
||||
|
||||
/* carouselThumbs*/
|
||||
.carouselGaleryThumbs {
|
||||
height: 200px;
|
||||
height: 140px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.carouselGaleryThumbs .productImagesThumb {
|
||||
@ -267,6 +267,12 @@
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer .productDescriptionText {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
@ -275,6 +281,12 @@
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.productDescriptionContainer .productDescriptionText {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.productDescriptionContainer {
|
||||
margin-top: 16px;
|
||||
@ -322,7 +334,12 @@
|
||||
margin: 16px;
|
||||
}
|
||||
.newsletter .inputGroup {
|
||||
width: 774px;
|
||||
display: flex;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.newsletter .inputGroup {
|
||||
width: 774px;
|
||||
}
|
||||
}
|
||||
.newsletter .inputGroup :global(.vtex-input-prefix__group) {
|
||||
border: none;
|
||||
|
@ -15,6 +15,11 @@
|
||||
margin: auto;
|
||||
width: 95%;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.listContainer {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.listContainer {
|
||||
flex-direction: column;
|
||||
@ -26,6 +31,11 @@
|
||||
display: flex;
|
||||
padding: 62px 52px;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.contentItem {
|
||||
padding: 62px 360px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.contentItem {
|
||||
flex-direction: column;
|
||||
|
@ -27,14 +27,13 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flexRow--btn-product {
|
||||
@media screen and (min-width: 769px) {
|
||||
width: 100%;
|
||||
max-width: 526px;
|
||||
position: absolute;
|
||||
top: 374px;
|
||||
left: 158px;
|
||||
.flexRowContent--btn-product {
|
||||
@media screen and (min-width: 768px) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
.flexRow--btn-product {
|
||||
width: 100%;
|
||||
|
||||
:global(.vtex-button) {
|
||||
background-color: black;
|
||||
|
@ -15,7 +15,7 @@
|
||||
|
||||
/* carouselThumbs*/
|
||||
.carouselGaleryThumbs {
|
||||
height: 200px;
|
||||
height: 140px;
|
||||
margin-top: 16px;
|
||||
|
||||
.productImagesThumb {
|
||||
@ -296,6 +296,11 @@
|
||||
line-height: 32px;
|
||||
|
||||
color: $color-gray6;
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.productDescriptionText {
|
||||
@ -306,6 +311,11 @@
|
||||
line-height: 19px;
|
||||
|
||||
color: $color-gray8;
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@ -361,7 +371,10 @@
|
||||
}
|
||||
|
||||
.inputGroup {
|
||||
width: 774px;
|
||||
display: flex;
|
||||
@media screen and (min-width: 768px) {
|
||||
width: 774px;
|
||||
}
|
||||
:global(.vtex-input-prefix__group) {
|
||||
border: none;
|
||||
border-bottom: 1px solid gray;
|
||||
|
@ -5,6 +5,9 @@
|
||||
margin: auto;
|
||||
width: 95%;
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
width: 75%;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
border-top: 1px solid #b9b9b9;
|
||||
@ -15,6 +18,10 @@
|
||||
display: flex;
|
||||
padding: 62px 52px;
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
padding: 62px 360px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
padding: 16px 40px;
|
||||
|
Loading…
Reference in New Issue
Block a user