feat(Informações do produto e Descrição do produto): Ajusta para telas menores que 1024px
This commit is contained in:
parent
c09ff0ca2f
commit
91632df73c
@ -1,29 +1,29 @@
|
||||
[class*="html--quantity-wrapper"] {
|
||||
[class*='html--quantity-wrapper'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
[class*="vtex-product-quantity-1-x-quantitySelectorContainer"] {
|
||||
[class*='vtex-product-quantity-1-x-quantitySelectorContainer'] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[class*="quantitySelectorTitle"] {
|
||||
[class*='quantitySelectorTitle'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class*="vtex-numeric-stepper-container"] {
|
||||
[class*='vtex-numeric-stepper-container'] {
|
||||
margin-right: 10px;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
[class*="vtex-numeric-stepper__input"],
|
||||
[class*="vtex-numeric-stepper__plus-button"],
|
||||
[class*="vtex-numeric-stepper__minus-button"] {
|
||||
[class*='vtex-numeric-stepper__input'],
|
||||
[class*='vtex-numeric-stepper__plus-button'],
|
||||
[class*='vtex-numeric-stepper__minus-button'] {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
[class*="vtex-numeric-stepper__input"] {
|
||||
[class*='vtex-numeric-stepper__input'] {
|
||||
border: 1px solid #afafaf;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
@ -31,37 +31,38 @@
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
[class*="vtex-numeric-stepper__minus-button"] {
|
||||
[class*='vtex-numeric-stepper__minus-button'] {
|
||||
border: none;
|
||||
border: 1px solid #afafaf;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[class*="vtex-numeric-stepper__minus-button-container"],
|
||||
[class*="vtex-numeric-stepper__minus-button__text"] {
|
||||
[class*='vtex-numeric-stepper__minus-button-container'],
|
||||
[class*='vtex-numeric-stepper__minus-button__text'] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
[class*="vtex-numeric-stepper__plus-button"] {
|
||||
[class*='vtex-numeric-stepper__plus-button'] {
|
||||
border: none;
|
||||
border: 1px solid #afafaf;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[class*="vtex-numeric-stepper__plus-button-container"],
|
||||
[class*="vtex-numeric-stepper__plus-button__text"] {
|
||||
[class*='vtex-numeric-stepper__plus-button-container'],
|
||||
[class*='vtex-numeric-stepper__plus-button__text'] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
[class*="vtex-numeric-stepper__plus-button__text"],
|
||||
[class*="vtex-numeric-stepper__minus-button__text"] {
|
||||
[class*='vtex-numeric-stepper__plus-button__text'],
|
||||
[class*='vtex-numeric-stepper__minus-button__text'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
[class*="html--buy-button"] {
|
||||
[class*='html--buy-button'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -154,7 +154,8 @@
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7,
|
||||
"paddingTop": 7,
|
||||
"paddingBottom": 7
|
||||
"paddingBottom": 7,
|
||||
"blockClass": "conteudo-principal"
|
||||
},
|
||||
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
|
||||
},
|
||||
@ -182,8 +183,9 @@
|
||||
"flex-layout.col#stack": {
|
||||
"children": ["stack-layout"],
|
||||
"props": {
|
||||
"width": "51%",
|
||||
"rowGap": 0
|
||||
// "width": "52%",
|
||||
"rowGap": 0,
|
||||
"blockClass": "conteudo-imagens"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-image": {
|
||||
|
@ -12,6 +12,7 @@
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.flexRowContent--container-compra {
|
||||
@ -24,3 +25,20 @@
|
||||
.flexRowContent--preco {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stretchChildrenWidth {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.flexRowContent--conteudo-principal {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flexRowContent--conteudo-principal .stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
}
|
||||
.flexCol {
|
||||
position: relative;
|
||||
}
|
||||
}
|
@ -20,3 +20,10 @@
|
||||
.product-identifier__label, .product-identifier__separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.product-identifier {
|
||||
left: 0;
|
||||
top: 42px;
|
||||
}
|
||||
}
|
@ -153,7 +153,7 @@
|
||||
|
||||
.shippingContainer :global(.vtex-input-prefix__group) {
|
||||
height: 49px;
|
||||
padding-right: 21px;
|
||||
padding-right: 23px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -330,6 +330,29 @@
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.productImageTag {
|
||||
max-height: 994px !important;
|
||||
}
|
||||
.productImagesThumb {
|
||||
height: auto !important;
|
||||
width: 90px !important;
|
||||
margin-right: 16px;
|
||||
padding-right: 0 !important;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.figure {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.productNameContainer {
|
||||
text-align: left !important;
|
||||
margin-bottom: 51px !important;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
left: 312px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.container {
|
||||
padding: 0 360px;
|
||||
|
@ -43,3 +43,33 @@
|
||||
gap: 32px;
|
||||
padding: 32px 32px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container {
|
||||
padding-top: 0;
|
||||
}
|
||||
.container .listContainer {
|
||||
flex-direction: column;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #b9b9b9;
|
||||
gap: 16px;
|
||||
}
|
||||
.container .listItem :global(.vtex-button) {
|
||||
width: 100%;
|
||||
}
|
||||
.container .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.container .listItemActive :global(.vtex-button) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.container {
|
||||
padding: 16px 360px 0;
|
||||
}
|
||||
}
|
@ -2,6 +2,7 @@
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.flexRowContent--container-compra {
|
||||
@ -14,3 +15,26 @@
|
||||
.flexRowContent--preco {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stretchChildrenWidth {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// .flexCol--conteudo-imagens {
|
||||
// width: 98.35% !important;
|
||||
// }
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.flexRowContent--conteudo-principal {
|
||||
flex-direction: column;
|
||||
|
||||
.stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flexCol {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
@ -12,3 +12,10 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.product-identifier {
|
||||
left: 0;
|
||||
top: 42px;
|
||||
}
|
||||
}
|
||||
|
@ -177,7 +177,7 @@
|
||||
.shippingContainer {
|
||||
:global(.vtex-input-prefix__group) {
|
||||
height: 49px;
|
||||
padding-right: 21px;
|
||||
padding-right: 23px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
:global(.vtex-input__suffix) {
|
||||
@ -386,6 +386,38 @@
|
||||
color: $color-gray7;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.productImageTag {
|
||||
max-height: 994px !important;
|
||||
}
|
||||
|
||||
.productImagesThumb {
|
||||
height: auto !important;
|
||||
width: 90px !important;
|
||||
margin-right: 16px;
|
||||
padding-right: 0 !important;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.figure {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.productNameContainer {
|
||||
text-align: left !important;
|
||||
margin-bottom: 51px !important;
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
left: 312px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.container {
|
||||
padding: 0 360px;
|
||||
|
@ -44,3 +44,39 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container {
|
||||
padding-top: 0;
|
||||
.listContainer {
|
||||
flex-direction: column;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid $color-gray11;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
:global(.vtex-button) {
|
||||
width: 100%;
|
||||
:global(.vtex-button__label) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listItemActive {
|
||||
:global(.vtex-button) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.container {
|
||||
padding: 16px 360px 0;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user