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

develop #8

Merged
HenriqueSantosSantana merged 23 commits from develop into master 2023-02-09 11:53:23 +00:00
Conversation 0 Commits 23 Files Changed 74 +467 -54
10 changed files with 467 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 35364d362f - Show all commits

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

@ -60,7 +60,6 @@
"rowGap": 7,
"marginTop": 5,
"marginBottom": 7,
"paddingBottom": 7,
"blockClass": "productMain"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
@ -149,10 +148,16 @@
"children": [
"vtex.store-components:product-name",
"product-identifier.product"
"product-identifier.product#pdp-identifier"
]
},
"product-identifier.product#pdp-identifier": {
"props": {
"label": "hide"
}
},
"html#sku-selector": {
"props": {
"testId": "sku-selector"
@ -169,6 +174,14 @@
},
"flex-layout.row#pdp-buy-actions": {
"props": {
"marginTop": 5,
"marginBottom": 5,
"colSizing": "auto",
"colGap": 5,
"rowGap": 5,
"blockClass": "productActions"
},
"children": ["html#pdp-product-quantity", "html#add-to-cart-button"]
},
@ -211,9 +224,10 @@
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
"rowGap": 7,
"marginTop": 5,
"marginBottom": 7,
"paddingTop": 7
"blockClass": "productAvailability"
},
"children": [
"flex-layout.col#stack",
@ -227,16 +241,18 @@
"blockClass": "info-availability"
},
"children": [
"vtex.store-components:product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.row#product-name",
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#availability": {
"props": {
"blockClass": "message-availability"
},
"children": ["availability-subscriber"]
}
},
"availability-subscriber": {}
}

2
styles/configs/style.json
View File

@ -200,7 +200,7 @@
"muted-5": "#f2f4f5"
},
"on": {
"base": "#3f3f40",
"base": "#B9B9B999",
"base--inverted": "#ffffff",
"action-primary": "#ffffff",
"action-secondary": "#000000",

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

@ -104,15 +104,18 @@
padding-bottom: 1rem;
}
.flexRow--productAvailability,
.flexRow--productMain {
padding: 0 40px;
}
.flexColChild--productInformations :global(.vtex-product-identifier-0-x-product-identifier__label),
.flexColChild--productInformations :global(.vtex-product-identifier-0-x-product-identifier__separator) {
font-size: 0;
width: 0;
height: 0;
@media screen and (max-width: 1024px) {
.flexRowContent--productMain {
flex-direction: column !important;
}
.flexRowContent--productMain .stretchChildrenWidth {
width: 100% !important;
}
}
@media screen and (min-width: 1025px) {
@ -121,24 +124,42 @@
}
}
.flexRowContent--productAddToCart :global(.vtex-button) {
.flexRowContent--productActions .stretchChildrenWidth {
width: auto !important;
}
@media screen and (min-width: 768px) {
.flexRowContent--productActions .stretchChildrenWidth:last-child {
flex-grow: 1;
}
}
.flexRowContent--productActions {
flex-direction: column;
}
@media screen and (min-width: 768px) {
.flexRowContent--productActions {
max-height: 49px;
flex-direction: row;
}
}
.flexRowContent--productActions :global(.vtex-button) {
height: 72px;
line-height: 24.51px;
}
@media screen and (min-width: 1025px) {
.flexRowContent--productAddToCart :global(.vtex-button) {
@media screen and (min-width: 768px) {
.flexRowContent--productActions :global(.vtex-button) {
height: 49px;
}
}
.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-button__label) {
.flexRowContent--productActions :global(.vtex-button) :global(.vtex-button__label) {
justify-content: stretch;
padding: 12px 64px;
}
.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
.flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
flex-grow: 1;
width: 100%;
}
.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) {
.flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) {
width: 99%;
}

17
styles/css/vtex.product-quantity.css
View File

@ -11,11 +11,22 @@
width: 128px;
min-height: 49px;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-container) {
height: 49px;
border: 1px solid #cccccc;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
width: 100%;
height: 100%;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button-container),
.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button-container) {
.quantitySelectorStepper :global(.vtex-numeric-stepper__input),
.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button),
.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
height: 100%;
border: none;
background-color: transparent;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button__text),
.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button__text) {
font-size: 16px;
line-height: 21.79px;
}

7
styles/css/vtex.shelf.css
View File

@ -7,10 +7,3 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.relatedProducts {
padding: 0 40px;
}
.shelfContentContainer :global(.vtex-slider-0-x-sliderFrame) {
gap: 12px;
}

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -120,6 +121,17 @@
z-index: 2;
}
.skuSelectorItem--selected .skuSelectorItemTextValue {
color: #292929;
}
.skuSelectorItem--selected .diagonalCross {
width: 100%;
background: transparent;
}
.skuSelectorItem--selected .diagonalCross::before {
border-top: 1px solid #292929;
}
.skuSelectorItemTextValue {
width: 100%;
padding: 0;
@ -128,7 +140,156 @@
align-items: center;
}
.skuSelectorSubcontainer--cor {
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorItem {
width: 48px;
height: 48px;
}
.shippingContainer {
position: relative;
}
@media screen and (min-width: 769px) {
.shippingContainer {
width: 280px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) {
position: relative;
width: 100%;
padding: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
height: 49px;
border: 1px solid #cccccc;
border-radius: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
display: none;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
text-align: right;
}
@media screen and (min-width: 769px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
text-align: unset;
position: absolute;
right: -50.7%;
top: 70%;
margin-left: 16px;
padding: 0;
transform: translateY(-50%);
}
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::before {
content: "Calcular frete:";
font-size: 14px;
line-height: 19.07px;
text-transform: uppercase;
color: inherit;
}
.shippingContainer :global(.vtex-button) {
background-color: #292929;
position: absolute;
top: 27px;
right: 0;
color: #fff;
height: 49px;
width: 49px;
margin: 0;
border: 0;
border-radius: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before {
content: "OK";
font-size: 14px;
}
.shippingTable {
border: 0;
margin: 0;
padding: 16px 0 0;
}
.shippingTableHead {
display: table-header-group !important;
}
.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate,
.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
width: auto;
text-align: left;
color: #292929;
font-weight: 400;
font-size: 14px;
line-height: 19.07px;
text-transform: uppercase;
}
.shippingTableRadioBtn {
display: none;
}
.shippingTableCell {
padding: 15px 0;
}
.subscriberContainer .title {
font-size: 0;
}
.subscriberContainer .title::before {
content: "Produto indisponível";
font-size: 14px;
font-weight: 700;
color: #868686;
}
.subscriberContainer .subscribeLabel {
font-size: 0;
}
.subscriberContainer .subscribeLabel::before {
content: "Deseja saber quando estiver disponível?";
font-size: 14px;
font-weight: 400;
color: #868686;
}
.subscriberContainer .form .content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 40px 48px;
gap: 16px 8px;
}
.subscriberContainer .form .input {
margin: 0;
width: 100%;
height: 100%;
}
.subscriberContainer .form .input :global(.vtex-input-prefix__group) {
border: 1px solid #989898;
border-radius: 0;
}
.subscriberContainer .submit {
grid-column: 1/2 span;
margin: 0;
}
.subscriberContainer .submit :global(.vtex-button) {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
}
.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
}
.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label)::before {
content: "Avise-se";
font-size: 14px;
text-transform: uppercase;
}

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

@ -97,16 +97,18 @@
padding-bottom: 1rem;
}
.flexRow--productAvailability,
.flexRow--productMain {
padding: 0 40px;
}
.flexColChild--productInformations {
:global(.vtex-product-identifier-0-x-product-identifier__label),
:global(.vtex-product-identifier-0-x-product-identifier__separator) {
font-size: 0;
width: 0;
height: 0;
.flexRowContent--productMain {
@media screen and (max-width: 1024px) {
flex-direction: column !important;
.stretchChildrenWidth {
width: 100% !important;
}
}
}
@ -116,12 +118,31 @@
}
}
.flexRowContent--productAddToCart {
.flexRowContent--productActions {
.stretchChildrenWidth {
width: auto !important;
&:last-child {
@media screen and (min-width: 768px) {
flex-grow: 1;
}
}
}
}
.flexRowContent--productActions {
flex-direction: column;
@media screen and (min-width: 768px) {
max-height: 49px;
flex-direction: row;
}
:global(.vtex-button) {
height: 72px;
line-height: 24.51px;
@media screen and (min-width: 1025px) {
@media screen and (min-width: 768px) {
height: 49px;
}

22
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -4,13 +4,25 @@
min-height: 49px;
}
:global(.vtex-numeric-stepper__input) {
width: 100%;
height: 100%;
:global(.vtex-numeric-stepper-container) {
height: 49px;
border: 1px solid #cccccc;
}
:global(.vtex-numeric-stepper__plus-button-container),
:global(.vtex-numeric-stepper__minus-button-container) {
:global(.vtex-numeric-stepper__input) {
width: 100%;
}
:global(.vtex-numeric-stepper__input),
:global(.vtex-numeric-stepper__plus-button),
:global(.vtex-numeric-stepper__minus-button) {
height: 100%;
border: none;
background-color: transparent;
}
:global(.vtex-numeric-stepper__minus-button__text),
:global(.vtex-numeric-stepper__plus-button__text) {
font-size: 16px;
line-height: 21.79px;
}
}

9
styles/sass/pages/product/vtex.shelf.scss
View File

@ -1,9 +0,0 @@
.relatedProducts {
padding: 0 40px;
}
.shelfContentContainer {
:global(.vtex-slider-0-x-sliderFrame) {
gap: 12px;
}
}

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

@ -125,6 +125,21 @@
}
}
.skuSelectorItem--selected {
.skuSelectorItemTextValue {
color: $color-black;
}
.diagonalCross {
width: 100%;
background: transparent;
&::before {
border-top: 1px solid $color-black;
}
}
}
.skuSelectorItemTextValue {
width: 100%;
padding: 0;
@ -135,10 +150,182 @@
}
.skuSelectorSubcontainer--cor {
margin: 0;
.skuSelectorItem {
width: 48px;
height: 48px;
}
}
.shippingContainer {
position: relative;
@media screen and (min-width: 769px) {
width: 280px;
}
:global(.vtex-address-form__postalCode) {
position: relative;
width: 100%;
padding: 0;
:global(.vtex-input-prefix__group) {
height: 49px;
border: 1px solid #cccccc;
border-radius: 0;
:global(.vtex-input__suffix) {
display: none;
}
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
text-align: right;
@media screen and (min-width: 769px) {
text-align: unset;
position: absolute;
right: -50.7%;
top: 70%;
margin-left: 16px;
padding: 0;
transform: translateY(-50%);
}
}
:global(.vtex-input__label) {
font-size: 0;
&::before {
content: "Calcular frete:";
font-size: 14px;
line-height: 19.07px;
text-transform: uppercase;
color: inherit;
}
}
:global(.vtex-button) {
background-color: $color-black;
position: absolute;
top: 27px;
right: 0;
color: $color-white;
height: 49px;
width: 49px;
margin: 0;
border: 0;
border-radius: 0;
:global(.vtex-button__label) {
font-size: 0;
&::before {
content: "OK";
font-size: 14px;
}
}
}
}
.shippingTable {
border: 0;
margin: 0;
padding: 16px 0 0;
}
.shippingTableHead {
display: table-header-group !important;
.shippingTableRow {
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
width: auto;
text-align: left;
color: $color-black;
font-weight: 400;
font-size: 14px;
line-height: 19.07px;
text-transform: uppercase;
}
}
}
.shippingTableRadioBtn {
display: none;
}
.shippingTableCell {
padding: 15px 0;
}
.subscriberContainer {
.title {
font-size: 0;
&::before {
content: "Produto indisponível";
font-size: 14px;
font-weight: 700;
color: #868686;
}
}
.subscribeLabel {
font-size: 0;
&::before {
content: "Deseja saber quando estiver disponível?";
font-size: 14px;
font-weight: 400;
color: #868686;
}
}
.form {
.content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 40px 48px;
gap: 16px 8px;
}
.input {
margin: 0;
width: 100%;
height: 100%;
:global(.vtex-input-prefix__group) {
border: 1px solid #989898;
border-radius: 0;
}
}
}
.submit {
grid-column: 1 / 2 span;
margin: 0;
:global(.vtex-button) {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
:global(.vtex-button__label) {
font-size: 0;
&::before {
content: "Avise-se";
font-size: 14px;
text-transform: uppercase;
}
}
}
}
}