feat: Container da imagem do produto principal finalizado Desktop
This commit is contained in:
parent
d88ca7f69a
commit
58d1f94bd7
BIN
assets/fonts/OpenSans-Bold.ttf
Normal file
BIN
assets/fonts/OpenSans-Bold.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/OpenSans-Light.ttf
Normal file
BIN
assets/fonts/OpenSans-Light.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/OpenSans-Regular.ttf
Normal file
BIN
assets/fonts/OpenSans-Regular.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/OpenSans-SemiBold.ttf
Normal file
BIN
assets/fonts/OpenSans-SemiBold.ttf
Normal file
Binary file not shown.
3
react/Installments.tsx
Normal file
3
react/Installments.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import { Installments } from "./components/installments";
|
||||
|
||||
export default Installments;
|
3
react/ProductReference.tsx
Normal file
3
react/ProductReference.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import { ProductReference } from "./components/product-reference";
|
||||
|
||||
export default ProductReference;
|
17
react/components/installments/index.tsx
Normal file
17
react/components/installments/index.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React, { FC } from 'react'
|
||||
import { useProduct } from 'vtex.product-context'
|
||||
import styles from "./styles.css";
|
||||
|
||||
export const Installments: FC = () => {
|
||||
|
||||
const productContextValue = useProduct();
|
||||
console.log(productContextValue?.product?.priceRange.sellingPrice)
|
||||
|
||||
let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice)/4;
|
||||
|
||||
return (
|
||||
<div className={styles.containerProductReference}>
|
||||
<span className={styles.sellingPrice}><span className={styles.sellingPriceBold}>4 x</span> de <span className={styles.sellingPriceBold}>R$ {sellingPrice.toFixed(2).replace(".", ",")}</span> sem juros</span>
|
||||
</div>
|
||||
);
|
||||
}
|
10
react/components/installments/styles.css
Normal file
10
react/components/installments/styles.css
Normal file
@ -0,0 +1,10 @@
|
||||
.sellingPrice{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.sellingPriceBold{
|
||||
font-weight: 700;
|
||||
}
|
15
react/components/product-reference/index.tsx
Normal file
15
react/components/product-reference/index.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React, { FC } from 'react'
|
||||
import { useProduct } from 'vtex.product-context'
|
||||
import styles from "./styles.css";
|
||||
|
||||
export const ProductReference: FC = () => {
|
||||
|
||||
const productContextValue = useProduct();
|
||||
console.log(productContextValue)
|
||||
|
||||
return (
|
||||
<div className={styles.containerProductReference}>
|
||||
<span className={styles.productReference}>{productContextValue?.product?.productReference}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
12
react/components/product-reference/styles.css
Normal file
12
react/components/product-reference/styles.css
Normal file
@ -0,0 +1,12 @@
|
||||
.containerProductReference{
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.productReference{
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: right;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
}
|
1
react/types/index.d.ts
vendored
Normal file
1
react/types/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module "*.css";
|
@ -8,7 +8,10 @@
|
||||
"product-specification-group#table",
|
||||
"shelf.relatedProducts",
|
||||
"product-questions-and-answers"
|
||||
]
|
||||
],
|
||||
"props": {
|
||||
"paddingLeft": 7
|
||||
}
|
||||
},
|
||||
"html#breadcrumb": {
|
||||
"props": {
|
||||
@ -34,6 +37,7 @@
|
||||
},
|
||||
"condition-layout.product#availability": {
|
||||
"props": {
|
||||
"blockClass": "vtex.store-components-3",
|
||||
"conditions": [
|
||||
{
|
||||
"subject": "isProductAvailable"
|
||||
@ -42,6 +46,7 @@
|
||||
"Then": "flex-layout.row#product-main",
|
||||
"Else": "flex-layout.row#product-availability"
|
||||
}
|
||||
|
||||
},
|
||||
"flex-layout.row#product-main": {
|
||||
"props": {
|
||||
@ -50,9 +55,10 @@
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7,
|
||||
"paddingTop": 7,
|
||||
"paddingBottom": 7
|
||||
"paddingBottom": 7,
|
||||
"blockClass": "container-product-main"
|
||||
},
|
||||
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
|
||||
"children": ["html#stack", "flex-layout.col#right-col"]
|
||||
},
|
||||
|
||||
"stack-layout": {
|
||||
@ -75,12 +81,12 @@
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.col#stack": {
|
||||
"html#stack": {
|
||||
"children": ["stack-layout"],
|
||||
"props": {
|
||||
"width": "46.18%",
|
||||
"rowGap": 7,
|
||||
"colGap": 7
|
||||
"width": "100%",
|
||||
"rowGap": 0,
|
||||
"colGap": 0
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-image": {
|
||||
@ -88,6 +94,7 @@
|
||||
},
|
||||
"product-images": {
|
||||
"props": {
|
||||
"blockClass": "product-images-pdp",
|
||||
"aspectRatio": {
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
@ -95,22 +102,21 @@
|
||||
"showNavigationArrows": false,
|
||||
"displayThumbnailsArrows": false,
|
||||
"thumbnailsOrientation": "horizontal",
|
||||
"colGap": 7,
|
||||
"defaultSize": 665,
|
||||
"maxHeight": 665
|
||||
"showPaginationDots": false,
|
||||
"thumbnailMaxHeight": 90
|
||||
}
|
||||
},
|
||||
"flex-layout.col#right-col": {
|
||||
"props": {
|
||||
"preventVerticalStretch": true,
|
||||
"rowGap": 0
|
||||
"rowGap": 0,
|
||||
"width": "100%"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"product-rating-summary",
|
||||
"flex-layout.row#list-price-savings",
|
||||
"product-reference",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"installments",
|
||||
"product-separator",
|
||||
"product-identifier.product",
|
||||
"sku-selector",
|
||||
@ -124,9 +130,16 @@
|
||||
]
|
||||
},
|
||||
|
||||
"product-reference": {
|
||||
"props": {
|
||||
"blockClass": "title-product-reference"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#product-name": {
|
||||
"props": {
|
||||
"marginBottom": 3
|
||||
"marginBottom": 3,
|
||||
"blockClass": "name-product-h1"
|
||||
},
|
||||
"children": ["vtex.store-components:product-name"]
|
||||
},
|
||||
@ -154,7 +167,7 @@
|
||||
"paddingTop": 7
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.col#stack",
|
||||
"html#stack",
|
||||
"flex-layout.col#right-col-availability"
|
||||
]
|
||||
},
|
||||
|
@ -2,6 +2,12 @@
|
||||
"example-component": {
|
||||
"component": "Example"
|
||||
},
|
||||
"product-reference": {
|
||||
"component": "ProductReference"
|
||||
},
|
||||
"installments": {
|
||||
"component": "Installments"
|
||||
},
|
||||
"html": {
|
||||
"component": "html",
|
||||
"composition": "children"
|
||||
|
@ -1,5 +1,25 @@
|
||||
|
||||
|
||||
@font-face {
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap') format("opentype");
|
||||
font-family: "Open Sans", sans-serif;
|
||||
src: url('assets/fonts/OpenSans-Light.ttf');
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
src: url('assets/fonts/OpenSans-Regular.ttf');
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
src: url('assets/fonts/OpenSans-SemiBold.ttf');
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
src: url('assets/fonts/OpenSans-Bold.ttf');
|
||||
font-weight: 700;
|
||||
}
|
||||
|
@ -253,84 +253,84 @@
|
||||
"measure": [30, 34, 20],
|
||||
"styles": {
|
||||
"heading-1": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "700",
|
||||
"fontSize": "3rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-2": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "700",
|
||||
"fontSize": "2.25rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-3": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "700",
|
||||
"fontSize": "1.75rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-4": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1.5rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-5": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1.25rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-6": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1.25rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"body": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"small": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "0.875rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"mini": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "0.75rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"action": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "500",
|
||||
"fontSize": "1rem",
|
||||
"textTransform": "uppercase",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"action--small": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "500",
|
||||
"fontSize": "0.875rem",
|
||||
"textTransform": "uppercase",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"action--large": {
|
||||
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, arial, sans-serif",
|
||||
"fontWeight": "500",
|
||||
"fontSize": "1.25rem",
|
||||
"textTransform": "uppercase",
|
||||
|
@ -7,6 +7,3 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.html--pdp-breadcrumb {
|
||||
padding-left: 40px;
|
||||
}
|
14
styles/css/vtex-store-components-3.css
Normal file
14
styles/css/vtex-store-components-3.css
Normal file
@ -0,0 +1,14 @@
|
||||
/*
|
||||
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 */
|
||||
/* Grid breakpoints */
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: max-content;
|
||||
}
|
@ -7,6 +7,10 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
:global(.vtex-breadcrumb-1-x-container) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.homeIcon, .caretIcon {
|
||||
display: none;
|
||||
}
|
||||
|
@ -1,98 +1,27 @@
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.5rem;
|
||||
/*
|
||||
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 */
|
||||
/* Grid breakpoints */
|
||||
.flexRow--container-product-main {
|
||||
padding: 0 40px;
|
||||
}
|
||||
.flexRow--container-product-main .flexRowContent--container-product-main {
|
||||
display: grid;
|
||||
grid-template-columns: 48.824% 1fr;
|
||||
grid-column-gap: 32px;
|
||||
}
|
||||
.flexRow--container-product-main .flexRowContent--container-product-main .stretchChildrenWidth {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40em) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.swiper-wrapper .swiper-slide-active {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@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 {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:first-child {
|
||||
overflow-y: auto;
|
||||
height: 66% !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:last-child {
|
||||
height: 34% !important;
|
||||
}
|
||||
|
||||
.flexRow--addToCartRow {
|
||||
padding-bottom: 1rem;
|
||||
.swiper-wrapper .swiper-slide {
|
||||
width: 100%;
|
||||
}
|
@ -1,79 +1,22 @@
|
||||
.listPrice {
|
||||
color: #727273;
|
||||
margin-bottom: .25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.sellingPrice {
|
||||
color: #3f3f40;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.sellingPriceValue {
|
||||
font-size: 2.25rem;
|
||||
/*
|
||||
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 */
|
||||
/* Grid breakpoints */
|
||||
.currencyContainer {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.installments {
|
||||
color: #727273;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.savings {
|
||||
font-weight: 500;
|
||||
color: #79B03A;
|
||||
}
|
||||
|
||||
.sellingPriceValue--summary {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #2E2E2E;
|
||||
}
|
||||
|
||||
.savings--summary {
|
||||
background: #8BC34A;
|
||||
border-radius: 1000px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
vertical-align: baseline;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.savings-discount--summary {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
vertical-align: baseline;
|
||||
color: #FFFFFF;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.listPrice--summary {
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.installments--summary {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.savings--summaryPercentage {
|
||||
background: #0f3e99;
|
||||
border-radius: 1000px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.savingsPercentage--summaryPercentage {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
vertical-align: baseline;
|
||||
color: #FFFFFF;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
@ -10,3 +10,35 @@
|
||||
.newsletter {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.productImage .productImageTag--main {
|
||||
object-fit: fill !important;
|
||||
max-height: max-content !important;
|
||||
}
|
||||
|
||||
.carouselGaleryThumbs {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.productImagesThumb--product-images-pdp {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 0;
|
||||
width: 90px !important;
|
||||
}
|
||||
.productImagesThumb--product-images-pdp:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.productNameContainer {
|
||||
text-align: right;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
color: #575757;
|
||||
}
|
@ -1,10 +1 @@
|
||||
.html {
|
||||
// background-color: red;
|
||||
}
|
||||
|
||||
.html--pdp-breadcrumb {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
@ -1,3 +1,7 @@
|
||||
:global(.vtex-breadcrumb-1-x-container){
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.homeIcon, .caretIcon{
|
||||
display: none;
|
||||
}
|
||||
|
21
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
21
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.flexRow--container-product-main{
|
||||
padding: 0 40px;
|
||||
.flexRowContent--container-product-main {
|
||||
display: grid;
|
||||
grid-template-columns: 48.824% 1fr;
|
||||
grid-column-gap: 32px;
|
||||
.stretchChildrenWidth{
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-wrapper{
|
||||
.swiper-slide-active{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper-slide{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
13
styles/sass/pages/product/vtex.product-price.scss
Normal file
13
styles/sass/pages/product/vtex.product-price.scss
Normal file
@ -0,0 +1,13 @@
|
||||
.currencyContainer{
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.installments{
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
@ -1,3 +1,38 @@
|
||||
.newsletter{
|
||||
background: red;
|
||||
}
|
||||
|
||||
.productImage{
|
||||
.productImageTag--main{
|
||||
object-fit: fill !important;
|
||||
max-height: max-content !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.carouselGaleryThumbs{
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.productImagesThumb--product-images-pdp{
|
||||
margin-right: 16px;
|
||||
margin-bottom: 0;
|
||||
width: 90px !important;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.productNameContainer{
|
||||
text-align: right;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
color: #575757;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user