forked from M3-Academy/challenge-vtex-io
feat(availability):estruturando container responsivo
This commit is contained in:
parent
084642170d
commit
589fcce599
@ -38,12 +38,12 @@
|
||||
color: #929292;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.html--pdp-productMain{
|
||||
.html--pdp-productMain,.html--availability{
|
||||
padding-right: 2.778%;
|
||||
padding-left: 2.778%;
|
||||
display: flex;
|
||||
}
|
||||
.html--StackLayout,.html--pdp-InfoBuy{
|
||||
.html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@ -54,8 +54,8 @@
|
||||
margin-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.html--pdp-productMain :global(.vtex-button){
|
||||
display: none;
|
||||
.html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){
|
||||
display: block;
|
||||
}
|
||||
.html--buy-button :global(.vtex-button){
|
||||
display: block;
|
||||
@ -75,7 +75,7 @@
|
||||
max-width: 766px;
|
||||
width: 80.126%;
|
||||
}
|
||||
.html--pdp-productMain{
|
||||
.html--pdp-productMain,.html--availability{
|
||||
padding-right: 12.5393%;
|
||||
padding-left: 12.5393%;
|
||||
margin: 0;
|
||||
@ -123,7 +123,7 @@
|
||||
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.html--pdp-productMain :global(.vtex-store-components-3-x-container){
|
||||
.html--pdp-productMain :global(.vtex-store-components-3-x-container),.html--availability :global(.vtex-store-components-3-x-container){
|
||||
max-width: 100%;
|
||||
}
|
||||
:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){
|
||||
@ -160,11 +160,11 @@
|
||||
padding-top: 12px !important;
|
||||
padding-bottom: 12px !important;
|
||||
}
|
||||
.html--pdp-productMain{
|
||||
.html--pdp-productMain,.html--availability{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.html--StackLayout,.html--pdp-InfoBuy{
|
||||
.html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
|
||||
width: 89.23%;
|
||||
}
|
||||
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
|
||||
|
@ -239,7 +239,7 @@
|
||||
}
|
||||
],
|
||||
"Then": "html#product-main",
|
||||
"Else": "flex-layout.row#product-availability"
|
||||
"Else": "html#product-availability"
|
||||
}
|
||||
},
|
||||
|
||||
@ -428,28 +428,23 @@
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#product-availability": {
|
||||
"html#product-availability": {
|
||||
"props": {
|
||||
"colGap": 7,
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7,
|
||||
"paddingTop": 7
|
||||
"blockClass": "availability"
|
||||
},
|
||||
"children": [
|
||||
"html#stack",
|
||||
"flex-layout.col#right-col-availability"
|
||||
"html#right-col-availability"
|
||||
]
|
||||
},
|
||||
"flex-layout.col#right-col-availability": {
|
||||
"html#right-col-availability": {
|
||||
"props": {
|
||||
"preventVerticalStretch": true,
|
||||
"rowGap": 0,
|
||||
"blockClass": "info-availability"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"sku-selector",
|
||||
"flex-layout.row#availability"
|
||||
"flex-layout.row#availability",
|
||||
"sku-selector"
|
||||
]
|
||||
},
|
||||
"flex-layout.row#availability": {
|
||||
|
Loading…
Reference in New Issue
Block a user