develop #3
@ -1,24 +1,24 @@
|
||||
import React from 'react';
|
||||
import {useProduct} from 'vtex.product-context';
|
||||
import styles from "./styles.css";
|
||||
|
||||
|
||||
const paymentWithPix =() => {
|
||||
const PaymentWithPix =() => {
|
||||
|
||||
const product = useProduct();
|
||||
|
||||
|
||||
let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_souza.svg"
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.wrapperPix}>
|
||||
<img className={styles.wrapperPixImage}src={imagePix} alt="Imagem do icone do pix" />
|
||||
<div className={styles.wrapperPrices}>
|
||||
<p className={styles.wrapperTitle}>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</p>
|
||||
<p className={styles.wrapperSubtitle}>R$ 10 % de desconto</p>
|
||||
<div className="wrapperPix">
|
||||
<img className="wrapperPixImage" src={imagePix} alt="Imagem do icone do pix" />
|
||||
<div className="wrapperPrices">
|
||||
<p className="wrapperTitle">{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</p>
|
||||
<p className="wrapperSubtitle">R$ 10 % de desconto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default paymentWithPix
|
||||
export default PaymentWithPix;
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
|
||||
.wrapperPix {
|
||||
[class*="wrapperPix"] {
|
||||
display: flex;
|
||||
gap: 26px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.wrapperPixImage {
|
||||
|
||||
[class*="wrapperPixImage"] {
|
||||
width: 66px;
|
||||
height: 24px;
|
||||
}
|
||||
.wrapperPrices {
|
||||
[class*="wrapperPrices"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wrapperTitle {
|
||||
[class*="wrapperTitle"] {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
@ -25,7 +26,7 @@
|
||||
}
|
||||
|
||||
|
||||
.wrapperSubtitle {
|
||||
[class*="wrapperSubtitle"] {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import { useCssHandles } from "vtex.css-handles";
|
||||
import "./styles.css"
|
||||
|
||||
|
||||
const CSS_HANDLES = ["html"] as const;
|
||||
|
||||
|
||||
28
react/components/Html/styles.css
Normal file
28
react/components/Html/styles.css
Normal file
@ -0,0 +1,28 @@
|
||||
|
||||
/* estilização do botão da sacola */
|
||||
[class*="m3-boxBuy"] {
|
||||
display: flex;
|
||||
gap:10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
[class*="html--m3buyButton"] >[class*="button"] {
|
||||
width: 100%;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
background-color: black;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import paymentWithPix from "./components/Example/paymentWithPix";
|
||||
import paymentWithPix from "./components/Example/PaymentWithPix";
|
||||
|
||||
export default paymentWithPix;
|
||||
|
||||
@ -100,7 +100,8 @@
|
||||
"props": {
|
||||
"aspectRatio": {
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
"phone": "auto"
|
||||
|
||||
},
|
||||
|
||||
"displayThumbnailsArrows": false,
|
||||
@ -121,9 +122,8 @@
|
||||
"html#codigo",
|
||||
"product-rating-summary",
|
||||
"flex-layout.row#selling-price",
|
||||
"example-component",
|
||||
"html#pixzap",
|
||||
"html#product-installments",
|
||||
// "html#pixzap",
|
||||
// "product-separator",
|
||||
// "product-identifier.product",
|
||||
"html#sku-selector",
|
||||
@ -276,7 +276,11 @@
|
||||
"defaultActiveTab": true
|
||||
},
|
||||
"children": [
|
||||
"tab-content.item#home1"
|
||||
"tab-content.item#home1",
|
||||
"tab-content.item#home2",
|
||||
"tab-content.item#home3",
|
||||
"tab-content.item#home4",
|
||||
"tab-content.item#home5"
|
||||
]
|
||||
},
|
||||
|
||||
@ -289,6 +293,42 @@
|
||||
"tabId":"description1"
|
||||
}
|
||||
},
|
||||
"tab-content.item#home2": {
|
||||
"children": [
|
||||
"image#image-1",
|
||||
"product-description"
|
||||
],
|
||||
"props": {
|
||||
"tabId":"description2"
|
||||
}
|
||||
},
|
||||
"tab-content.item#home3": {
|
||||
"children": [
|
||||
"image#image-1",
|
||||
"product-description"
|
||||
],
|
||||
"props": {
|
||||
"tabId":"description3"
|
||||
}
|
||||
},
|
||||
"tab-content.item#home4": {
|
||||
"children": [
|
||||
"image#image-1",
|
||||
"product-description"
|
||||
],
|
||||
"props": {
|
||||
"tabId":"description4"
|
||||
}
|
||||
},
|
||||
"tab-content.item#home5": {
|
||||
"children": [
|
||||
"image#image-1",
|
||||
"product-description"
|
||||
],
|
||||
"props": {
|
||||
"tabId":"description5"
|
||||
}
|
||||
},
|
||||
|
||||
"html#box-buy" : {
|
||||
"props":{
|
||||
@ -304,7 +344,7 @@
|
||||
"html#add-to-cart-button": {
|
||||
"props":{
|
||||
"testId": "add-to-cart-button",
|
||||
"blockClass": "m3-buyButton"
|
||||
"blockClass": "m3buyButton"
|
||||
},
|
||||
"children":["add-to-cart-button"]
|
||||
},
|
||||
@ -345,14 +385,15 @@
|
||||
"phone": 2
|
||||
},
|
||||
"infinite": true,
|
||||
"showNavigationArrows": "desktopOnly",
|
||||
"showNavigationArrows": "always",
|
||||
"blockClass": "carousel"
|
||||
}
|
||||
|
||||
},
|
||||
"rich-text#1": {
|
||||
"props": {
|
||||
"text": "Você também pode gostar:"
|
||||
"text": "Você também pode gostar:",
|
||||
"blockClass": "m3-richText"
|
||||
}
|
||||
},
|
||||
|
||||
@ -377,15 +418,16 @@
|
||||
},
|
||||
"children":["product-installments"]
|
||||
},
|
||||
// "html#pixzap": {
|
||||
// "props":{
|
||||
// "testId": "pix-price"
|
||||
// },
|
||||
// "children":["paymentWithPix"]
|
||||
// },
|
||||
"html#pixzap": {
|
||||
"props":{
|
||||
"testId": "pix-price"
|
||||
},
|
||||
"children":["example-component"]
|
||||
},
|
||||
"html#sku-selector": {
|
||||
"props":{
|
||||
"testId": "sku-selector"
|
||||
"testId": "sku-selector",
|
||||
"blockClass": "m3-skuSelector"
|
||||
},
|
||||
"children":["sku-selector"]
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"example-component": {
|
||||
"component": "paymentWithPix"
|
||||
"component": "PaymentWithPix"
|
||||
},
|
||||
|
||||
"html": {
|
||||
|
||||
@ -9,14 +9,4 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
|
||||
/*font*/
|
||||
/*colors*/
|
||||
/* Grid breakpoints */
|
||||
.m3-buyButton :global(.vtex-button) {
|
||||
background-color: black;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
.m3-boxBuy {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: green;
|
||||
}
|
||||
/* Grid breakpoints */
|
||||
@ -47,4 +47,10 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
@media (min-width: 1900px) {
|
||||
.container {
|
||||
padding-left: 70px;
|
||||
}
|
||||
}
|
||||
@ -27,25 +27,12 @@
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.flexRow--m3-buyButton {
|
||||
width: 100%;
|
||||
}
|
||||
.flexRow--m3-buyButton .buttonText {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.flexRow--m3-buyButton :global(.vtex-button) {
|
||||
background-color: black;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
.-html--m3-boxBuy {
|
||||
background-color: red;
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.flexRowContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flexRowContent .stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@ -27,4 +27,10 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.product-identifier__value {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@ -54,4 +54,12 @@
|
||||
.imageContainer .imageNormal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.imageContainer {
|
||||
margin-bottom: 16px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
@ -19,4 +19,14 @@
|
||||
color: #575757;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.m3-richText {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #575757;
|
||||
}
|
||||
@ -9,4 +9,28 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
|
||||
/*font*/
|
||||
/*colors*/
|
||||
/* Grid breakpoints */
|
||||
/* Grid breakpoints */
|
||||
.sliderLayoutContainer--carousel {
|
||||
width: 100%;
|
||||
padding: 0 16px 0 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
.sliderLayoutContainer--carousel .paginationDotsContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sliderLayoutContainer--carousel .paginationDot {
|
||||
background: black;
|
||||
}
|
||||
.sliderLayoutContainer--carousel .paginationDot--isActive {
|
||||
background: white;
|
||||
border: 0.5px solid black;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.sliderLayoutContainer--carousel {
|
||||
padding: 24px 62px;
|
||||
}
|
||||
}
|
||||
@ -12,17 +12,41 @@
|
||||
/* Grid breakpoints */
|
||||
.newsletter {
|
||||
background: black;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.newsletter :global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
}
|
||||
.newsletter :global(.vtex-button):hover {
|
||||
border-bottom: 5px solid #bfbfbf;
|
||||
}
|
||||
.newsletter :global(.vtex-input-prefix__group) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
.newsletter :global(.vtex-styleguide-9-x-input) {
|
||||
background: transparent;
|
||||
padding: 0 0 0 0;
|
||||
width: 774px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -33,13 +57,13 @@
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.label::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-family: sans-serif;
|
||||
font-family: "Opens Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
@ -53,7 +77,7 @@
|
||||
}
|
||||
|
||||
.productDescriptionTitle {
|
||||
font-family: sans-serif;
|
||||
font-family: "Opens Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
@ -76,11 +100,6 @@
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
@media (min-width: 375px) and (max-width: 1444px) {
|
||||
.stack {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
.shippingTableHead {
|
||||
display: grid;
|
||||
margin-bottom: 15px;
|
||||
@ -88,14 +107,32 @@
|
||||
|
||||
.shippingTableHeadDeliveryName {
|
||||
display: flex;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
display: flex;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.shippingTableRow {
|
||||
@ -112,16 +149,40 @@
|
||||
grid-area: t;
|
||||
padding: 0;
|
||||
margin-bottom: 15px;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
grid-area: d;
|
||||
padding: 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice {
|
||||
grid-area: p;
|
||||
padding: 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shareContainer {
|
||||
@ -138,8 +199,14 @@
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
|
||||
content: "Ok";
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
|
||||
@ -248,4 +315,10 @@
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.productBrand--quickview {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@ -45,4 +45,18 @@
|
||||
background-color: white;
|
||||
padding: 0 16px;
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
@media (min-width: 637px) and (max-width: 1024px) {
|
||||
.listContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.contentItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 32px 40px 16px 40px;
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
// .flexRow--m3-buyButton {
|
||||
// width: 100%;
|
||||
// .buttonText {
|
||||
// font-family: 'Open Sans';
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// font-size: 18px;
|
||||
// line-height: 25px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// text-align: center;
|
||||
// color: #FFFFFF;
|
||||
// }
|
||||
// :global(.vtex-button) {
|
||||
// background-color: black;
|
||||
// height: 49px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.m3-buyButton {
|
||||
:global(.vtex-button) {
|
||||
background-color: black;
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
.m3-boxBuy {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: green;
|
||||
}
|
||||
@ -47,3 +47,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1900px) {
|
||||
.container {
|
||||
padding-left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
padding: 0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.flexCol--stack {
|
||||
padding-left: 40px;
|
||||
}
|
||||
@ -17,24 +16,14 @@
|
||||
width:0;
|
||||
}
|
||||
|
||||
.flexRow--m3-buyButton {
|
||||
width: 100%;
|
||||
.buttonText {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
@media (min-width:768px) and (max-width:1024px) {
|
||||
.flexRowContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
flex-direction: column;
|
||||
|
||||
.stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
background-color: black;
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
.-html--m3-boxBuy {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
.product-identifier__separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.product-identifier__value {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
@ -17,3 +14,9 @@
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.product-identifier__value {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,3 +44,12 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px) and (max-width:1024px) {
|
||||
.imageContainer {
|
||||
margin-bottom: 16px;
|
||||
// background-color: #EDEDED;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,3 +8,14 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.m3-richText {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #575757;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,27 @@
|
||||
// .slideChildrenContainer{
|
||||
// width: 314.4px;
|
||||
// height: 448.4px;
|
||||
// }
|
||||
|
||||
.sliderLayoutContainer--carousel {
|
||||
width: 100%;
|
||||
padding: 0 16px 0 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 64px;
|
||||
|
||||
.paginationDotsContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.paginationDot {
|
||||
background: black;
|
||||
}
|
||||
.paginationDot--isActive {
|
||||
background: white;
|
||||
border: 0.5px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width:768px) and (max-width:1024px) {
|
||||
.sliderLayoutContainer--carousel {
|
||||
padding: 24px 62px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +1,58 @@
|
||||
.newsletter{
|
||||
background: black;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
margin:0;
|
||||
.newsletter {
|
||||
background: black;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
:global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
&:hover {
|
||||
border-bottom: 5px solid #bfbfbf;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
background: transparent;
|
||||
padding: 0 0 0 0;
|
||||
width: 774px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin:0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
.label::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-family: sans-serif;
|
||||
font-family: "Opens Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
@ -40,7 +66,7 @@
|
||||
}
|
||||
|
||||
.productDescriptionTitle {
|
||||
font-family:sans-serif;
|
||||
font-family: "Opens Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
@ -49,8 +75,8 @@
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.productDescriptionText {
|
||||
text-align: left;
|
||||
.productDescriptionText {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.thumbImg {
|
||||
@ -63,10 +89,14 @@
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
@media (min-width: 375px) and (max-width:1444px) {
|
||||
.stack {
|
||||
width: 40%;
|
||||
}
|
||||
@media (min-width: 375px) and (max-width: 1444px) {
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1898px) and (max-width: 2000px) {
|
||||
// .carouselGaleryThumbs {
|
||||
// margin-left: 28px;
|
||||
// }
|
||||
}
|
||||
|
||||
// estilização do frete
|
||||
@ -78,12 +108,30 @@
|
||||
}
|
||||
.shippingTableHeadDeliveryName {
|
||||
display: flex;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
display: flex;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
//estilização das colunas
|
||||
@ -100,16 +148,40 @@
|
||||
grid-area: t;
|
||||
padding: 0;
|
||||
margin-bottom: 15px;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
grid-area:d;
|
||||
padding: 0;
|
||||
grid-area: d;
|
||||
padding: 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice {
|
||||
grid-area: p;
|
||||
padding: 0;
|
||||
.shippingTableCellDeliveryPrice {
|
||||
grid-area: p;
|
||||
padding: 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #afafaf;
|
||||
}
|
||||
|
||||
.shareContainer {
|
||||
@ -121,30 +193,37 @@
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
background-color: black;
|
||||
:global(.vtex-button__label ){
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "Ok";
|
||||
color:white;
|
||||
font-size: 10px;
|
||||
}
|
||||
:global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "Ok";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: #afafaf;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -155,11 +234,11 @@
|
||||
}
|
||||
|
||||
:global(.vtex-button) {
|
||||
position: relative;
|
||||
right: 49px;
|
||||
top: 27px;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
position: relative;
|
||||
right: 49px;
|
||||
top: 27px;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -168,7 +247,7 @@
|
||||
.productBrand--quickview {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
@ -179,7 +258,6 @@
|
||||
|
||||
//estilização do container de skus ( tamanhos e cores )
|
||||
|
||||
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
@ -254,3 +332,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.productBrand--quickview{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,4 +38,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:637px) and (max-width:1024px) {
|
||||
|
||||
// .container {
|
||||
// display: block;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
.listContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.contentItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 32px 40px 16px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user