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

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-02-07 20:43:28 -03:00
parent e02c544935
commit e12747a531
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",
"phone": "auto"
},
"maxHeight": 664,
// "maxHeight": 664,
"maxHeight": 944,
"showPaginationDots": false,
"displayThumbnailsArrows": false,
@ -180,12 +181,17 @@
"blockClass": "info-availability"
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.row#identifieAndName",
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#identifieAndName": {
"props": {
"blockClass": "identifieAndName"
},
"children": ["flex-layout.row#product-name", "product-identifier.product"]
},
"flex-layout.row#availability": {
"props": {
"blockClass": "message-availability"

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

@ -8,22 +8,36 @@
/* Media Query M3 */
/* Grid breakpoints */
.flexRowContent--product-main {
padding: 0;
padding: 0 40px;
margin: 0;
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) {
padding: 0;
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
padding: 0;
padding: 0 40px;
margin: 0;
gap: 32px;
}
@media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
padding: 0 40px;
flex-direction: column;
}
}
@ -35,13 +49,48 @@
}
@media (max-width: 1024px) {
.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) {
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) {
padding-left: 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 {
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;
}
.subscriberContainer {
max-width: 399px;
:global(.vtex-store-components-3-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
}
@media (max-width: 1024px) {
.subscriberContainer {
max-width: 765px;
margin-top: 24px;
}
}
.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 {
max-height: 632px !important;
}

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

@ -78,3 +78,9 @@
line-height: 38px;
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
.flexRowContent--product-main {
padding: 0;
padding: 0 40px;
margin: 0;
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
// INICIO INDISPONIVEL
.flexRow--indisponivel {
:global(.vtex-store-components-3-x-productImagesGallerySlide) {
width: 100%;
}
:global(.vtex-store-components-3-x-container) {
padding: 0;
.flexRowContent--indisponivel {
padding: 0;
padding: 0 40px;
margin: 0;
gap: 32px;
@media (max-width:1024px) {
padding: 0 40px;
// padding: 0 40px;
flex-direction: column;
}
@ -30,20 +45,58 @@
padding: 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) {
// width: 100% !important;
// max-width: none;
height: 402px;
}
.flexColChild--info-availability {
height: 68px;
margin-bottom: 8px;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
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

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
// INICIO MAIN
:global(.vtex-store-components-3-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
}
// FIM MAIN
// INICIO INDISPONIVEL
.subscriberContainer {
max-width: 399px;
// max-width: 399px;
@media (max-width:1024px) {
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 {
max-height: 632px !important;

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

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