forked from M3-Academy/challenge-vtex-io
develop #8
@ -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": {}
|
||||
}
|
||||
|
@ -200,7 +200,7 @@
|
||||
"muted-5": "#f2f4f5"
|
||||
},
|
||||
"on": {
|
||||
"base": "#3f3f40",
|
||||
"base": "#B9B9B999",
|
||||
"base--inverted": "#ffffff",
|
||||
"action-primary": "#ffffff",
|
||||
"action-secondary": "#000000",
|
||||
|
@ -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%;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
@ -6,11 +6,4 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.relatedProducts {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.shelfContentContainer :global(.vtex-slider-0-x-sliderFrame) {
|
||||
gap: 12px;
|
||||
}
|
||||
/* Grid breakpoints */
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -1,9 +0,0 @@
|
||||
.relatedProducts {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.shelfContentContainer {
|
||||
:global(.vtex-slider-0-x-sliderFrame) {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user