feat: responsividade feita

This commit is contained in:
Ramon Dias Ferreira 2023-02-10 22:23:54 -03:00
parent e897a62fed
commit c117e3be4c
9 changed files with 199 additions and 22 deletions

View File

@ -52,12 +52,6 @@
},
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7,
"blockClass": "product-main"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
@ -86,7 +80,6 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "45%",
"rowGap": 0
}
},
@ -104,13 +97,10 @@
"product-images": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"desktop": "auto"
},
"thumbnailsOrientation": "horizontal",
"showNavigationArrows": false,
"showPaginationDots": false,
"displayThumbnailsArrows": false,
"blockClass": "produto-carrossel"
}
},
@ -224,12 +214,6 @@
},
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7
},
"children": [
"flex-layout.col#stack",
"flex-layout.col#right-col-availability"

View File

@ -19,6 +19,17 @@
margin: 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
.flexRowContent .stretchChildrenWidth {
width: initial;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--product-main {
flex-direction: column;
}
}
.flexRowContent--identifier {
text-align: end;
@ -26,10 +37,21 @@
flex-direction: column;
align-items: end;
}
@media screen and (max-width: 1024px) {
.flexRowContent--identifier {
text-align: start;
}
}
.flexRow--product-main {
padding: 0 40px;
}
@media screen and (max-width: 1024px) {
.flexRow--product-main .stretchChildrenWidth {
width: 100% !important;
padding-bottom: 24px;
}
}
.flexColChild--infos :global(.vtex-button) {
background-color: black !important;

View File

@ -9,4 +9,9 @@
/* Grid breakpoints */
.listPrice {
display: block;
}
.sellingPriceValue {
font-weight: bold;
font-size: 25px;
}

View File

@ -7,6 +7,10 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.container {
display: contents;
}
.productImagesGallerySlide--produto-carrossel {
width: 100% !important;
}
@ -30,6 +34,12 @@
text-align: right;
color: #575757;
}
@media screen and (max-width: 1024px) {
.productNameContainer--quickview {
text-align: left;
padding-bottom: 8px;
}
}
.skuSelectorContainer {
display: flex;
@ -89,11 +99,30 @@
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
color: #000;
position: absolute;
right: 32px;
right: 0px;
top: 25px;
}
@media screen and (max-width: 1120px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
right: -20px;
}
}
@media screen and (max-width: 1100px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
right: -30px;
}
}
@media screen and (max-width: 1035px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
right: -35px;
}
}
@media screen and (max-width: 1024px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
right: 0px;
}
}
.shareContainer {
display: none;
@ -143,10 +172,20 @@
width: 50%;
margin-left: 16px;
}
@media screen and (max-width: 1024px) {
.productDescriptionContainer {
width: 100%;
}
}
.carouselGaleryThumbs {
height: 200px;
}
@media screen and (max-width: 1024px) {
.carouselGaleryThumbs {
display: block;
}
}
.carouselGaleryThumbs .productImagesThumb {
margin: 0px 10px;
@ -238,6 +277,11 @@
.content--description-imagem {
width: 45%;
}
@media screen and (max-width: 1024px) {
.content--description-imagem {
width: 100%;
}
}
.newsletter {
background: #000;
@ -285,6 +329,12 @@
.newsletter .inputGroup {
width: 774px;
}
@media screen and (max-width: 1024px) {
.newsletter .inputGroup {
display: flex;
width: 100%;
}
}
.newsletter .inputGroup :global(.vtex-input-prefix__group) {
border: none;

View File

@ -17,23 +17,51 @@
justify-content: space-around;
border-bottom: 1px solid #BFBFBF;
}
@media screen and (max-width: 1024px) {
.listContainer {
flex-direction: column;
align-content: baseline;
border-bottom: none;
}
}
.listItem {
margin: 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
.listItem {
width: 100%;
}
}
.listItem :global(.vtex-button) {
border-radius: 0;
background-color: #FFFFFF;
color: #BFBFBF;
}
@media screen and (max-width: 1024px) {
.listItem :global(.vtex-button) {
display: flex;
width: 100%;
}
}
.listItemActive :global(.vtex-button) {
border: 0;
border-bottom: 1px solid #000000 !important;
}
@media screen and (max-width: 1024px) {
.listItemActive :global(.vtex-button) {
border-bottom: none !important;
}
}
.contentItem {
display: flex;
margin-bottom: 16px;
}
@media screen and (max-width: 1024px) {
.contentItem {
flex-direction: column;
}
}

View File

@ -10,18 +10,42 @@
.flexRowContent{
margin: 0;
padding: 0;
.stretchChildrenWidth{
@media screen and (max-width: 1024px) {
width: initial;
}
}
}
.flexRowContent--product-main{
@media screen and (max-width: 1024px) {
flex-direction: column;
}
}
.flexRowContent--identifier{
text-align: end;
display: flex;
flex-direction: column;
align-items: end;
@media screen and (max-width: 1024px) {
text-align: start;
}
}
.flexRow--product-main{
padding: 0 40px;
.stretchChildrenWidth{
@media screen and (max-width: 1024px) {
width: 100% !important;
padding-bottom: 24px;
}
}
}
.flexColChild--infos :global(.vtex-button){

View File

@ -1,3 +1,10 @@
.listPrice {
display: block;
}
.sellingPriceValue{
font-weight: bold;
font-size: 25px;
}

View File

@ -1,3 +1,7 @@
.container{
display: contents;
}
.productImagesGallerySlide--produto-carrossel{
width: 100% !important;
}
@ -20,6 +24,12 @@
line-height: 34px;
text-align: right;
color: #575757;
@media screen and (max-width: 1024px) {
text-align: left;
padding-bottom: 8px;
}
}
.skuSelectorContainer {
@ -73,10 +83,21 @@
width: 280px;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
color: #000;
position: absolute;
right: 32px;
right: 0px;
top: 25px;
@media screen and (max-width: 1120px) {
right: -20px;
}
@media screen and (max-width: 1100px) {
right: -30px;
}
@media screen and (max-width: 1035px) {
right: -35px;
}
@media screen and (max-width: 1024px) {
right: 0px;
}
}
.shareContainer {
@ -120,10 +141,18 @@
.productDescriptionContainer {
width: 50%;
margin-left: 16px;
@media screen and (max-width: 1024px) {
width: 100%;
}
}
.carouselGaleryThumbs {
height: 200px;
@media screen and (max-width: 1024px) {
display: block;
}
}
.carouselGaleryThumbs .productImagesThumb {
margin: 0px 10px;
@ -210,6 +239,10 @@
.content--description-imagem{
width: 45%;
@media screen and (max-width: 1024px) {
width: 100%;
}
}
.newsletter {
@ -252,6 +285,10 @@
}
.newsletter .inputGroup {
width: 774px;
@media screen and (max-width: 1024px) {
display: flex;
width: 100%;
}
}
.newsletter .inputGroup :global(.vtex-input-prefix__group) {
border: none;

View File

@ -9,28 +9,48 @@
margin-bottom: 32px;
justify-content: space-around;
border-bottom: 1px solid #BFBFBF;
@media screen and (max-width: 1024px) {
flex-direction: column;
align-content: baseline;
border-bottom: none;
}
}
.listItem{
margin: 0;
padding: 0;
@media screen and (max-width: 1024px) {
width: 100%;
}
:global(.vtex-button){
border-radius: 0;
background-color: #FFFFFF;
color: #BFBFBF;
@media screen and (max-width: 1024px) {
display: flex;
width: 100%;
}
}
}
.listItemActive :global(.vtex-button) {
border: 0;
border-bottom: 1px solid #000000 !important;
@media screen and (max-width: 1024px) {
border-bottom: none !important;
}
}
.contentItem{
display: flex;
margin-bottom: 16px;
@media screen and (max-width: 1024px) {
flex-direction: column;
}
}