emmanuelvitor/challenge-vtex-io-emmanuelvitor
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria estilização para area abaico da imagem do indisponivel #12

Merged
emmanuelvitor merged 1 commits from feature/indisponivelAvailability into development 2023-02-09 02:20:18 +00:00
Conversation 0 Commits 1 Files Changed 9 +399 -17
9 changed files with 399 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
store/blocks/pdp/product.jsonc
View File

@ -85,7 +85,8 @@
"desktop": "1:1", "desktop": "1:1",
"phone": "auto" "phone": "auto"
}, },
"maxHeight": 664, // "maxHeight": 664,
"maxHeight": 944,
"showPaginationDots": false, "showPaginationDots": false,
"displayThumbnailsArrows": false, "displayThumbnailsArrows": false,
@ -180,12 +181,17 @@
"blockClass": "info-availability" "blockClass": "info-availability"
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#identifieAndName",
"product-identifier.product", "flex-layout.row#availability",
"sku-selector", "sku-selector"
"flex-layout.row#availability"
] ]
}, },
"flex-layout.row#identifieAndName": {
"props": {
"blockClass": "identifieAndName"
},
"children": ["flex-layout.row#product-name", "product-identifier.product"]
},
"flex-layout.row#availability": { "flex-layout.row#availability": {
"props": { "props": {
"blockClass": "message-availability" "blockClass": "message-availability"

57
styles/css/vtex.flex-layout.css
View File

@ -8,22 +8,36 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.flexRowContent--product-main { .flexRowContent--product-main {
padding: 0; padding: 0 40px;
margin: 0; margin: 0;
border: 1px solid red; border: 1px solid red;
} }
.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
min-width: 296px;
max-width: 664px;
padding: 0;
border-radius: 0;
}
@media (max-width: 1024px) {
.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important;
max-width: 944px;
}
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-productImagesGallerySlide) {
width: 100%;
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) {
padding: 0; padding: 0;
} }
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
padding: 0; padding: 0 40px;
margin: 0; margin: 0;
gap: 32px; gap: 32px;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
padding: 0 40px;
flex-direction: column; flex-direction: column;
} }
} }
@ -35,13 +49,48 @@
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
height: 402px; width: 100% !important;
max-width: 944px;
} }
} }
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
max-width: 90%;
}
@media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) {
max-width: none;
}
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability {
height: 68px;
margin-bottom: 8px;
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
justify-content: initial; justify-content: initial;
} }
.flexRowContent {
margin-bottom: 0;
}
.flexRowContent--identifieAndName {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: center;
}
@media (max-width: 1024px) {
.flexRowContent--identifieAndName {
text-align: start;
align-items: initial;
}
}
.flexRow--description :global(.vtex-store-components17-x-container) { .flexRow--description :global(.vtex-store-components17-x-container) {
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;

33
styles/css/vtex.product-identifier.css
View File

@ -1,3 +1,34 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.product-identifier--productReference { .product-identifier--productReference {
margin-bottom: 1rem; display: flex;
justify-content: flex-end;
padding-right: 40px;
}
@media (max-width: 1024px) {
.product-identifier--productReference {
display: block;
padding-right: 0;
}
}
.product-identifier--productReference .product-identifier__label,
.product-identifier--productReference .product-identifier__separator {
display: none;
}
.product-identifier--productReference .product-identifier__value {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* identical to box height */
text-align: right;
color: rgba(146, 146, 146, 0.4784313725);
} }

90
styles/css/vtex.store-components.css
View File

@ -115,12 +115,15 @@
border-bottom: 3px solid #BFBFBF; border-bottom: 3px solid #BFBFBF;
} }
.subscriberContainer { :global(.vtex-store-components-3-x-container) {
max-width: 399px; padding-left: 0 !important;
padding-right: 0 !important;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.subscriberContainer { .subscriberContainer {
max-width: 765px; max-width: 765px;
margin-top: 24px;
} }
} }
.subscriberContainer :global(.vtex-store-components-3-x-title) { .subscriberContainer :global(.vtex-store-components-3-x-title) {
@ -309,6 +312,89 @@
} }
} }
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
margin-left: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
visibility: visible;
display: block;
content: "OUTRAS CORES:";
font-size: 14px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
border-radius: 30px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
border-radius: 21px;
color: #000000;
}
.skuSelectorContainer .diagonalCross {
top: 0px;
right: 10px;
bottom: 0px;
left: 10px;
transform: rotateY(180deg);
color: black;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
margin-left: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
visibility: visible;
display: block;
content: "OUTROS TAMANHOS:";
font-size: 14px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
width: 40px;
height: 40px;
border-radius: 30px;
top: 0;
left: 0;
right: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
margin: auto;
padding: 0;
width: 40px;
height: 40px;
border-radius: 30px;
color: #000000;
border: 1px solid #989898;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
margin-right: 5px;
}
.skuSelectorContainer .frameAround {
border-color: #000;
z-index: 9;
}
.skuSelectorOptionsList {
margin: 0;
}
.productImageTag--imageDescription--main { .productImageTag--imageDescription--main {
max-height: 632px !important; max-height: 632px !important;
} }

6
styles/css/vtex.tab-layout.css
View File

@ -78,3 +78,9 @@
line-height: 38px; line-height: 38px;
color: #000000; color: #000000;
} }
@media (max-width: 1024px) {
.container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button) :global(.vtex-button__label),
.container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
padding-left: 0;
}
}

61
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -1,25 +1,40 @@
// INICIO PRODUCT // INICIO PRODUCT
.flexRowContent--product-main { .flexRowContent--product-main {
padding: 0; padding: 0 40px;
margin: 0; margin: 0;
border: 1px solid red; border: 1px solid red;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
min-width: 296px;
max-width: 664px;
padding: 0;
border-radius: 0;
@media (max-width:1024px) {
width: 100% !important;
max-width: 944px;
}
}
} }
// FIM PRODUCT // FIM PRODUCT
// INICIO INDISPONIVEL // INICIO INDISPONIVEL
.flexRow--indisponivel { .flexRow--indisponivel {
:global(.vtex-store-components-3-x-productImagesGallerySlide) {
width: 100%;
}
:global(.vtex-store-components-3-x-container) { :global(.vtex-store-components-3-x-container) {
padding: 0; padding: 0;
.flexRowContent--indisponivel { .flexRowContent--indisponivel {
padding: 0; padding: 0 40px;
margin: 0; margin: 0;
gap: 32px; gap: 32px;
@media (max-width:1024px) { @media (max-width:1024px) {
padding: 0 40px; // padding: 0 40px;
flex-direction: column; flex-direction: column;
} }
@ -30,22 +45,60 @@
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
@media (max-width:1024px) {
width: 100% !important;
max-width: 944px;
}
:global(.vtex-store-components-3-x-productNameContainer--quickview) {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
max-width: 90%;
@media (max-width:1024px) {
max-width: none;
}
}
@media (max-width:1024px) { @media (max-width:1024px) {
// width: 100% !important; // width: 100% !important;
// max-width: none; // max-width: none;
height: 402px;
} }
.flexColChild--info-availability { .flexColChild--info-availability {
height: 68px;
margin-bottom: 8px;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) { :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
justify-content: initial; justify-content: initial;
} }
} }
} }
} }
} }
} }
.flexRowContent {
margin-bottom: 0;
}
.flexRowContent--identifieAndName {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: center;
@media (max-width:1024px) {
text-align: start;
align-items: initial;
}
}
// FIM INDISPONIVEL // FIM INDISPONIVEL

30
styles/sass/pages/product/vtex.product-identifier.scss Normal file
View File

@ -0,0 +1,30 @@
.product-identifier--productReference {
display: flex;
justify-content: flex-end;
padding-right: 40px;
@media (max-width:1024px) {
display: block;
padding-right: 0;
}
.product-identifier__label,
.product-identifier__separator {
display: none;
}
.product-identifier__value {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* identical to box height */
text-align: right;
color: #9292927a;
}
}
.product-identifier__value {}

119
styles/sass/pages/product/vtex.store-components.scss
View File

@ -118,13 +118,23 @@
} }
// FIM NEWSLETTER // FIM NEWSLETTER
// INICIO MAIN
:global(.vtex-store-components-3-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
}
// FIM MAIN
// INICIO INDISPONIVEL // INICIO INDISPONIVEL
.subscriberContainer { .subscriberContainer {
max-width: 399px; // max-width: 399px;
@media (max-width:1024px) { @media (max-width:1024px) {
max-width: 765px; max-width: 765px;
margin-top: 24px;
} }
@ -351,6 +361,113 @@
} }
} }
// SKU E TAMANHOS
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
.skuSelectorSubcontainer--cor {
.skuSelectorName {
font-size: 0;
margin-left: 16px;
&::after {
visibility: visible;
display: block;
content: "OUTRAS CORES:";
font-size: 14px;
}
}
.skuSelectorSelectorImageValue,
.skuSelectorNameSeparator {
display: none;
}
.frameAround {
border-radius: 30px;
}
.skuSelectorItemImageValue,
.skuSelectorInternalBox {
border-radius: 21px;
color: $color-black;
}
}
.diagonalCross {
top: 0px;
right: 10px;
bottom: 0px;
left: 10px;
transform: rotateY(180deg);
color: black;
}
.skuSelectorSubcontainer--tamanho {
.skuSelectorName {
font-size: 0;
margin-left: 16px;
&::after {
visibility: visible;
display: block;
content: "OUTROS TAMANHOS:";
font-size: 14px;
}
}
.frameAround {
// border: 1px solid #989898;
width: 40px;
height: 40px;
border-radius: 30px;
top: 0;
left: 0;
right: 0;
}
.skuSelectorInternalBox {
margin: auto;
padding: 0;
width: 40px;
height: 40px;
border-radius: 30px;
color: $color-black;
border: 1px solid #989898;
}
.skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
}
.valueWrapper .skuSelectorItemTextValue {
margin-right: 5px;
}
.frameAround {
border-color: #000;
z-index: 9;
}
}
.skuSelectorOptionsList {
margin: 0;
}
.productImageTag--imageDescription--main { .productImageTag--imageDescription--main {
max-height: 632px !important; max-height: 632px !important;

4
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -80,6 +80,10 @@
color: #000000; color: #000000;
@media (max-width:1024px) {
padding-left: 0;
}
} }
} }