forked from M3-Academy/challenge-vtex-io
Merge pull request 'development' (#11) from development into feature/shelf
Reviewed-on: #11
This commit is contained in:
commit
c19c1ee108
11
.vscode/settings.json
vendored
11
.vscode/settings.json
vendored
@ -164,5 +164,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.svn": true,
|
||||
"**/.hg": true,
|
||||
"**/CVS": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/Thumbs.db": false
|
||||
},
|
||||
"explorerExclude.backup": {}
|
||||
}
|
||||
|
||||
3
react/PaymentPix.tsx
Normal file
3
react/PaymentPix.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import { PaymentPix } from "./components/PaymentPix/PaymentPix";
|
||||
|
||||
export default PaymentPix;
|
||||
@ -1,3 +0,0 @@
|
||||
import { ProductDescription } from "./components/ProductDescription/ProductDescription";
|
||||
|
||||
export default ProductDescription;
|
||||
32
react/components/PaymentPix/PaymentPix.tsx
Normal file
32
react/components/PaymentPix/PaymentPix.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import { useProduct } from "vtex.product-context";
|
||||
|
||||
import styles from "./styles.css";
|
||||
|
||||
const PaymentPix = () => {
|
||||
const product = useProduct();
|
||||
const pricePix = (
|
||||
(product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9
|
||||
).toFixed(2);
|
||||
|
||||
const imagePix =
|
||||
"https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png";
|
||||
|
||||
const convertPrice = pricePix.toString().replace(".", ",");
|
||||
|
||||
return (
|
||||
<div className={styles.paymentPixWrapper}>
|
||||
<img
|
||||
className={styles.paymentPixImg}
|
||||
src={imagePix}
|
||||
alt="Imagem do Pix"
|
||||
/>
|
||||
<div className={styles.paymentPixText}>
|
||||
<p className={styles.paymentPixValue}>R$ {convertPrice}</p>
|
||||
<p className={styles.paymentPixDiscount}>10% de desconto</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { PaymentPix };
|
||||
38
react/components/PaymentPix/styles.css
Normal file
38
react/components/PaymentPix/styles.css
Normal file
@ -0,0 +1,38 @@
|
||||
.paymentPixWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 16px;
|
||||
height: 39px;
|
||||
gap: 26px;
|
||||
align-items: center;
|
||||
}
|
||||
.paymentPixImg {
|
||||
display: flex;
|
||||
width: 66px;
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
.paymentPixText {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.paymentPixValue {
|
||||
margin: 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
}
|
||||
.paymentPixDiscount {
|
||||
margin: 0;
|
||||
color: #929292;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const ProductDescription = () => {
|
||||
return <div>Oaswq</div>;
|
||||
};
|
||||
|
||||
export { ProductDescription };
|
||||
@ -79,7 +79,7 @@
|
||||
"flex-layout.col#stack": {
|
||||
"children": ["stack-layout"],
|
||||
"props": {
|
||||
"width": "60%",
|
||||
"width": "50%",
|
||||
"rowGap": 0
|
||||
}
|
||||
},
|
||||
@ -88,12 +88,15 @@
|
||||
},
|
||||
"product-images": {
|
||||
"props": {
|
||||
"thumbnailsOrientation": "horizontal",
|
||||
|
||||
"aspectRatio": {
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
"phone": "auto"
|
||||
},
|
||||
"displayThumbnailsArrows": false,
|
||||
"displayMode": "list"
|
||||
|
||||
"showPaginationDots": false,
|
||||
"showNavigationArrows": false
|
||||
}
|
||||
},
|
||||
"product-images#descricao": {
|
||||
@ -113,22 +116,26 @@
|
||||
},
|
||||
"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-paymentPix-component",
|
||||
"sku-selector",
|
||||
"product-quantity",
|
||||
|
||||
"flex-layout.row#cart",
|
||||
"product-assembly-options",
|
||||
"product-gifts",
|
||||
"flex-layout.row#buy-button",
|
||||
"availability-subscriber",
|
||||
"shipping-simulator"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.row#cart": {
|
||||
"props": {
|
||||
"blockClass": "cart"
|
||||
},
|
||||
"children": ["product-quantity", "flex-layout.row#buy-button"]
|
||||
},
|
||||
"flex-layout.row#product-name": {
|
||||
"props": {
|
||||
"marginBottom": 3
|
||||
@ -145,9 +152,10 @@
|
||||
|
||||
"flex-layout.row#buy-button": {
|
||||
"props": {
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7
|
||||
"width": "80%",
|
||||
"blockClass": "buyButton"
|
||||
},
|
||||
|
||||
"children": ["add-to-cart-button"]
|
||||
},
|
||||
|
||||
@ -191,7 +199,13 @@
|
||||
}
|
||||
},
|
||||
"tab-list#product": {
|
||||
"children": ["tab-list.item#product1", "tab-list.item#product2"]
|
||||
"children": [
|
||||
"tab-list.item#product1",
|
||||
"tab-list.item#product2",
|
||||
"tab-list.item#product3",
|
||||
"tab-list.item#product4",
|
||||
"tab-list.item#product5"
|
||||
]
|
||||
},
|
||||
"tab-list.item#product1": {
|
||||
"props": {
|
||||
@ -206,8 +220,32 @@
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product3": {
|
||||
"props": {
|
||||
"tabId": "product3",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product4": {
|
||||
"props": {
|
||||
"tabId": "product4",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product5": {
|
||||
"props": {
|
||||
"tabId": "product5",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-content#product": {
|
||||
"children": ["tab-content.item#product1", "tab-content.item#product2"]
|
||||
"children": [
|
||||
"tab-content.item#product1",
|
||||
"tab-content.item#product2",
|
||||
"tab-content.item#product3",
|
||||
"tab-content.item#product4",
|
||||
"tab-content.item#product5"
|
||||
]
|
||||
},
|
||||
"tab-content.item#product1": {
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
@ -216,11 +254,29 @@
|
||||
}
|
||||
},
|
||||
"tab-content.item#product2": {
|
||||
"children": ["product-description"],
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
"props": {
|
||||
"tabId": "product2"
|
||||
}
|
||||
},
|
||||
"tab-content.item#product3": {
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
"props": {
|
||||
"tabId": "product3"
|
||||
}
|
||||
},
|
||||
"tab-content.item#product4": {
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
"props": {
|
||||
"tabId": "product4"
|
||||
}
|
||||
},
|
||||
"tab-content.item#product5": {
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
"props": {
|
||||
"tabId": "product5"
|
||||
}
|
||||
},
|
||||
"list-context.product-list#shelf": {
|
||||
"blocks": ["product-summary.shelf#shelf"],
|
||||
"children": ["slider-layout#shelf-products"]
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
"component": "html",
|
||||
"composition": "children"
|
||||
},
|
||||
"product-payment-component": {
|
||||
"component": "ProductDescription"
|
||||
"product-paymentPix-component": {
|
||||
"component": "PaymentPix"
|
||||
}
|
||||
}
|
||||
|
||||
0
styles/configs/font-faces.css
Normal file
0
styles/configs/font-faces.css
Normal file
@ -6,6 +6,7 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.html {
|
||||
background-color: red;
|
||||
|
||||
10
styles/css/vtex.add-to-cart-button.css
Normal file
10
styles/css/vtex.add-to-cart-button.css
Normal file
@ -0,0 +1,10 @@
|
||||
/*
|
||||
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 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
13
styles/css/vtex.address-form.css
Normal file
13
styles/css/vtex.address-form.css
Normal file
@ -0,0 +1,13 @@
|
||||
/*
|
||||
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 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.input::placeholder {
|
||||
content: "Digite seu CEP";
|
||||
}
|
||||
@ -6,6 +6,7 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.homeIcon {
|
||||
display: none;
|
||||
@ -13,9 +14,4 @@
|
||||
|
||||
.homeLink::after {
|
||||
content: "Home";
|
||||
}
|
||||
|
||||
.link--1 {
|
||||
display: flex;
|
||||
order: -1;
|
||||
}
|
||||
@ -1,98 +1,32 @@
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40em) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 80rem) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--menu-link {
|
||||
background-color: #03044e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flexRowContent--main-header {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.flexRowContent--main-header-mobile {
|
||||
align-items: center;
|
||||
padding: 0.625rem 0.5rem;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
|
||||
color: #727273;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.flexRow--deals {
|
||||
background-color: #0F3E99;
|
||||
padding: 14px 0px;
|
||||
}
|
||||
|
||||
.flexRow--deals .stretchChildrenWidth {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flexRow--deals .flexCol {
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.flexCol--filterCol {
|
||||
max-width: 500px;
|
||||
min-width: 230px;
|
||||
}
|
||||
|
||||
.flexCol--productCountCol {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.flexCol--orderByCol {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.flexCol--orderByMobileCol {
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
.flexCol--filterMobileCol {
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.flexRow--quickviewMainRow {
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
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 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.flexRowContent--cart {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:first-child {
|
||||
overflow-y: auto;
|
||||
height: 66% !important;
|
||||
overflow-x: hidden;
|
||||
.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:last-child {
|
||||
height: 34% !important;
|
||||
}
|
||||
|
||||
.flexRow--addToCartRow {
|
||||
padding-bottom: 1rem;
|
||||
.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after {
|
||||
content: "adicionar à sacola";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -1,3 +1,32 @@
|
||||
/*
|
||||
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 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.product-identifier--productReference {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.product-identifier__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-identifier__separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-identifier__value {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
}
|
||||
30
styles/css/vtex.product-quantity.css
Normal file
30
styles/css/vtex.product-quantity.css
Normal file
@ -0,0 +1,30 @@
|
||||
/*
|
||||
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 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quantitySelectorStepper {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__input) {
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__minus-button) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.quantitySelectorStepper {
|
||||
border: none;
|
||||
}
|
||||
@ -6,4 +6,5 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
@ -6,7 +6,172 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.productDescriptionContainer {
|
||||
background: red;
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 0 0 0 !important;
|
||||
}
|
||||
|
||||
.productImageTag {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.thumbImg {
|
||||
width: 86%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.productImagesThumb {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.productBrand {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
|
||||
content: "OUTRAS CORES";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
|
||||
border-radius: 30px;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
|
||||
border-radius: 21px;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
|
||||
font-size: 0;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 30px;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
background-color: black;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
|
||||
content: "Ok";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
|
||||
content: "CALCULAR FRETE:";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input-prefix__group) {
|
||||
height: 49px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 127px;
|
||||
top: 27px;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
position: relative;
|
||||
left: 70px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
}
|
||||
.productDescriptionContainer .productDescriptionText {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
@ -1,4 +1,64 @@
|
||||
/*
|
||||
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 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.listContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.listContainer .listItem {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.listContainer .listItem :global(.vtex-button) {
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
text-transform: initial;
|
||||
}
|
||||
.listContainer .listItemActive :global(.vtex-button) {
|
||||
background: white;
|
||||
border-bottom: 2px solid #000000;
|
||||
border-radius: 0;
|
||||
}
|
||||
.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
.contentItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
gap: 32px;
|
||||
}
|
||||
5
styles/sass/pages/product/vtex.address-form.scss
Normal file
5
styles/sass/pages/product/vtex.address-form.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.input {
|
||||
&::placeholder {
|
||||
content: "Digite seu CEP";
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,3 @@
|
||||
content: "Home";
|
||||
}
|
||||
}
|
||||
.link--1 {
|
||||
display: flex;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
23
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
23
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.flexRowContent--cart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
.flexRow--buyButton {
|
||||
:global(.vtex-button) {
|
||||
background-color: black;
|
||||
}
|
||||
:global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "adicionar à sacola";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
19
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.product-identifier--productReference {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.product-identifier__label {
|
||||
display: none;
|
||||
}
|
||||
.product-identifier__separator {
|
||||
display: none;
|
||||
}
|
||||
.product-identifier__value {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
}
|
||||
20
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
20
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quantitySelectorStepper {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__input) {
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__minus-button) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.quantitySelectorStepper {
|
||||
border: none;
|
||||
}
|
||||
@ -1,3 +1,181 @@
|
||||
.productDescriptionContainer {
|
||||
background: red;
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 0 0 0 !important;
|
||||
}
|
||||
|
||||
.productImageTag {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.thumbImg {
|
||||
width: 86%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.productImagesThumb {
|
||||
height: auto !important;
|
||||
}
|
||||
.productBrand {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
.valueWrapper .skuSelectorItemTextValue {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--cor {
|
||||
.skuSelectorName {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "OUTRAS CORES";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
.frameAround {
|
||||
border-radius: 30px;
|
||||
}
|
||||
.skuSelectorItemImageValue,
|
||||
.skuSelectorInternalBox {
|
||||
border-radius: 21px;
|
||||
}
|
||||
.skuSelectorSelectorImageValue {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
.skuSelectorName {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
.frameAround {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.skuSelectorInternalBox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 30px;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.skuSelectorItemTextValue {
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
:global(.vtex-button) {
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
background-color: black;
|
||||
:global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "Ok";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
:global(.vtex-input) {
|
||||
:global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "CALCULAR FRETE:";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
:global(.vtex-input-prefix__group) {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
:global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 127px;
|
||||
top: 27px;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
}
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
position: relative;
|
||||
left: 70px;
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
//Estilização da descrição do produto
|
||||
.productDescriptionContainer {
|
||||
.productDescriptionTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
}
|
||||
.productDescriptionText {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
|
||||
54
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
54
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,54 @@
|
||||
.container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.listContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
margin-bottom: 32px;
|
||||
.listItem {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
:global(.vtex-button) {
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
:global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listItemActive {
|
||||
:global(.vtex-button) {
|
||||
background: white;
|
||||
border-bottom: 2px solid #000000;
|
||||
border-radius: 0;
|
||||
:global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 32px;
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
|
||||
$color-black: #292929;
|
||||
|
||||
$color-white: #fff;
|
||||
@ -14,18 +16,18 @@ $color-green: #4caf50;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
level1: 5,
|
||||
level2: 10,
|
||||
level3: 15,
|
||||
level4: 20,
|
||||
level5: 25
|
||||
level1: 5,
|
||||
level2: 10,
|
||||
level3: 15,
|
||||
level4: 20,
|
||||
level5: 25,
|
||||
) !default;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user