forked from M3-Academy/challenge-vtex-io
feat: estiliza as informações sobre o produto
This commit is contained in:
parent
c9a06914fb
commit
c32372103b
@ -15,7 +15,6 @@
|
||||
"postreleasy": "vtex publish --verbose"
|
||||
},
|
||||
"dependencies": {
|
||||
"agenciamagma.store-theme": "5.x",
|
||||
"vtex.store": "2.x",
|
||||
"vtex.store-header": "2.x",
|
||||
"vtex.product-summary": "2.x",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import { useCssHandles } from "vtex.css-handles";
|
||||
import "./styles.css"
|
||||
|
||||
const CSS_HANDLES = ["html"] as const;
|
||||
|
||||
|
||||
3
react/components/Html/styles.css
Normal file
3
react/components/Html/styles.css
Normal file
@ -0,0 +1,3 @@
|
||||
[data-testeid="breadcrumb"] {
|
||||
background-color: yellow;
|
||||
}
|
||||
@ -2,7 +2,8 @@
|
||||
"add-to-cart-button": {
|
||||
"props": {
|
||||
"addToCartFeedback": "customEvent",
|
||||
"customPixelEventId": "add-to-cart-button"
|
||||
"customPixelEventId": "add-to-cart-button",
|
||||
"blockClass": "button-add"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
},
|
||||
"displayThumbnailsArrows": true
|
||||
"displayThumbnailsArrows": false
|
||||
}
|
||||
},
|
||||
"flex-layout.col#right-col": {
|
||||
@ -101,12 +101,11 @@
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"product-identifier.product",
|
||||
"product-rating-summary",
|
||||
"flex-layout.row#list-price-savings",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"product-separator",
|
||||
"product-identifier.product",
|
||||
"product-installments#m3-academy",
|
||||
"sku-selector",
|
||||
"product-quantity",
|
||||
"product-assembly-options",
|
||||
@ -118,6 +117,15 @@
|
||||
]
|
||||
},
|
||||
|
||||
"product-installments#m3-academy": {
|
||||
"props": {
|
||||
"installmentsCriteria": "max-quantity-without-interest",
|
||||
"markers": ["discount", "vezes"],
|
||||
"blockClass": "m3-custom-installments",
|
||||
"message": "ou {installmentsNumber}<vezes>x</vezes> de {installmentValue} <discount>sem juros</discount>"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#product-name": {
|
||||
"props": {
|
||||
"marginBottom": 3
|
||||
|
||||
@ -7,10 +7,9 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.html {
|
||||
/*.html {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.html--pdp-breadcrumb {
|
||||
}*/
|
||||
/*.html--pdp-breadcrumb {
|
||||
background-color: green;
|
||||
}
|
||||
}*/
|
||||
44
styles/css/vtex.add-to-cart-button.css
Normal file
44
styles/css/vtex.add-to-cart-button.css
Normal file
@ -0,0 +1,44 @@
|
||||
.add-to-cart-button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.buttonText {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.button-add {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
.__label {
|
||||
padding: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.buttonText::after {
|
||||
width: 398px;
|
||||
height: 25px;
|
||||
content: "Adicionar à sacola";
|
||||
visibility: visible;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.buttonDataContainer {
|
||||
background: black;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
35
styles/css/vtex.breadcrumb.css
Normal file
35
styles/css/vtex.breadcrumb.css
Normal file
@ -0,0 +1,35 @@
|
||||
.homeIcon {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.arrow--1 {
|
||||
visibility: hidden;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.arrow--1::after {
|
||||
visibility: visible;
|
||||
content: "Home";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.link--2 {
|
||||
visibility: hidden;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.link--2::after {
|
||||
visibility: visible;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
content: "Sapatos";
|
||||
}
|
||||
@ -43,7 +43,7 @@
|
||||
}
|
||||
|
||||
.flexRow--deals {
|
||||
background-color: #0F3E99;
|
||||
background-color: #0f3e99;
|
||||
padding: 14px 0px;
|
||||
}
|
||||
|
||||
@ -83,6 +83,7 @@
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.flexColChild--quickviewDetails:first-child {
|
||||
overflow-y: auto;
|
||||
height: 66% !important;
|
||||
|
||||
@ -1,3 +1,29 @@
|
||||
.product-identifier--productReference {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.product-identifier__label,
|
||||
.product-identifier__separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-identifier__value {
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.product-identifier--productReference {
|
||||
position: relative;
|
||||
font-family: "Open Sans";
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: right;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.listPrice {
|
||||
color: #727273;
|
||||
margin-bottom: .25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@ -10,8 +10,12 @@
|
||||
}
|
||||
|
||||
.sellingPriceValue {
|
||||
font-size: 2.25rem;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.installments {
|
||||
@ -20,18 +24,19 @@
|
||||
}
|
||||
|
||||
.savings {
|
||||
display: none;
|
||||
font-weight: 500;
|
||||
color: #79B03A;
|
||||
color: #79b03a;
|
||||
}
|
||||
|
||||
.sellingPriceValue--summary {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #2E2E2E;
|
||||
color: #2e2e2e;
|
||||
}
|
||||
|
||||
.savings--summary {
|
||||
background: #8BC34A;
|
||||
background: #8bc34a;
|
||||
border-radius: 1000px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -41,21 +46,24 @@
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
vertical-align: baseline;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
.listPrice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.savings-discount--summary {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
vertical-align: baseline;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.listPrice--summary {
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.installments--summary {
|
||||
@ -74,6 +82,6 @@
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
vertical-align: baseline;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
4
styles/css/vtex.product-quantity.css
Normal file
4
styles/css/vtex.product-quantity.css
Normal file
@ -0,0 +1,4 @@
|
||||
.quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -10,3 +10,16 @@
|
||||
.newsletter {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.productNameContainer {
|
||||
width: 664px;
|
||||
height: 34px;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
text-align: right;
|
||||
color: #575757;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
4
styles/css/vtex.styleguide.css
Normal file
4
styles/css/vtex.styleguide.css
Normal file
@ -0,0 +1,4 @@
|
||||
.hideDecorators {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
@ -1,8 +1,7 @@
|
||||
.html {
|
||||
/*.html {
|
||||
background-color: red;
|
||||
}
|
||||
}*/
|
||||
|
||||
.html--pdp-breadcrumb {
|
||||
/*.html--pdp-breadcrumb {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
}*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user