feat(product/responsividade): Adiciona uma parte do css de produto e responsividade
This commit is contained in:
amanda almeida
parent
78fd45f39b
commit
faeb5ed817
3
react/Placeholder.tsx
Normal file
3
react/Placeholder.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import { Placeholder } from "./components/placeholder";
|
||||
|
||||
export default Placeholder;
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import { useCssHandles } from "vtex.css-handles";
|
||||
import "./styles.css";
|
||||
const CSS_HANDLES = ["html"] as const;
|
||||
|
||||
type HtmlProps = {
|
||||
|
||||
50
react/components/Html/styles.css
Normal file
50
react/components/Html/styles.css
Normal file
@ -0,0 +1,50 @@
|
||||
[class*="html--product-main"] {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
padding: 16px 40px 0;
|
||||
}
|
||||
|
||||
[class*="html--stack-layout"],
|
||||
[class*="html--right-col"] {
|
||||
width: 48.824%;
|
||||
}
|
||||
|
||||
[class*="html--right-col"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
[class*="html--container-quantity-button"] {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
[class*="html--cart-button"] {
|
||||
width: 78.94%;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
[class*="html--product-main"] {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
[class*="html--stack-layout"],
|
||||
[class*="html--right-col"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[class*="html--cart-button"] {
|
||||
width: 85.39%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
[class*="html--container-quantity-button"] {
|
||||
flex-direction: column;
|
||||
}
|
||||
[class*="html--cart-button"] {
|
||||
width: 100%;
|
||||
height: 74px;
|
||||
}
|
||||
}
|
||||
8
react/components/placeholder/index.tsx
Normal file
8
react/components/placeholder/index.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
const Placeholder = () => {
|
||||
const placeholderCep = ((document.getElementsByClassName(
|
||||
"vtex-address-form-4-x-input"
|
||||
)[0] as HTMLInputElement).placeholder = "Digite seu CEP");
|
||||
return placeholderCep;
|
||||
};
|
||||
|
||||
export { Placeholder };
|
||||
@ -7,5 +7,10 @@
|
||||
"moduleResolution": "node",
|
||||
"target": "es2017"
|
||||
},
|
||||
"include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
|
||||
}
|
||||
"include": [
|
||||
"./typings/*.d.ts",
|
||||
"./**/*.tsx",
|
||||
"./**/*.ts",
|
||||
"components/placeholder/index.jsx"
|
||||
]
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"props": {
|
||||
"position": "bottom"
|
||||
},
|
||||
"children": ["flex-layout.row#buy-button"]
|
||||
"children": ["html#buy-button"]
|
||||
},
|
||||
"product-assembly-options": {
|
||||
"children": [
|
||||
@ -32,17 +32,13 @@
|
||||
"props": {
|
||||
"verticalAlign": "middle"
|
||||
},
|
||||
"children": [
|
||||
"assembly-option-item-quantity-selector"
|
||||
]
|
||||
"children": ["assembly-option-item-quantity-selector"]
|
||||
},
|
||||
"flex-layout.col#product-assembly-image": {
|
||||
"props": {
|
||||
"marginRight": 4
|
||||
},
|
||||
"children": [
|
||||
"assembly-option-item-image"
|
||||
]
|
||||
"children": ["assembly-option-item-image"]
|
||||
},
|
||||
"flex-layout.col#product-assembly-middle": {
|
||||
"props": {
|
||||
@ -96,9 +92,7 @@
|
||||
"horizontalAlign": "right",
|
||||
"verticalAlign": "middle"
|
||||
},
|
||||
"children": [
|
||||
"assembly-option-item-quantity-selector"
|
||||
]
|
||||
"children": ["assembly-option-item-quantity-selector"]
|
||||
},
|
||||
"assembly-option-item-customize#sec-level": {
|
||||
"props": {
|
||||
|
||||
@ -20,8 +20,22 @@
|
||||
"props": {
|
||||
"marginBottom": 7
|
||||
},
|
||||
"children": ["product-description"]
|
||||
"children": ["html#product-image", "product-description"]
|
||||
},
|
||||
|
||||
"html#product-image": {
|
||||
"children": ["product-images#description"]
|
||||
},
|
||||
|
||||
"product-images#description": {
|
||||
"props": {
|
||||
"blockClass": "product-images-description",
|
||||
"thumbnailVisibility": "hidden",
|
||||
"showNavigationArrows": false,
|
||||
"showPaginationDots": false
|
||||
}
|
||||
},
|
||||
|
||||
"condition-layout.product#availability": {
|
||||
"props": {
|
||||
"conditions": [
|
||||
@ -29,20 +43,15 @@
|
||||
"subject": "isProductAvailable"
|
||||
}
|
||||
],
|
||||
"Then": "flex-layout.row#product-main",
|
||||
"Else": "flex-layout.row#product-availability"
|
||||
"Then": "html#product-main",
|
||||
"Else": "html#product-availability"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-main": {
|
||||
"html#product-main": {
|
||||
"props": {
|
||||
"colGap": 7,
|
||||
"rowGap": 7,
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7,
|
||||
"paddingTop": 7,
|
||||
"paddingBottom": 7
|
||||
"blockClass": "product-main"
|
||||
},
|
||||
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
|
||||
"children": ["html#stack", "html#right-col"]
|
||||
},
|
||||
|
||||
"stack-layout": {
|
||||
@ -65,14 +74,20 @@
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.col#stack": {
|
||||
"children": ["stack-layout"],
|
||||
"html#stack": {
|
||||
"props": {
|
||||
"width": "49%",
|
||||
"rowGap": 0
|
||||
}
|
||||
"blockClass": "stack-layout"
|
||||
},
|
||||
"children": ["stack-layout"]
|
||||
},
|
||||
"flex-layout.row#product-image": {
|
||||
"children": ["html#product-images"]
|
||||
},
|
||||
"html#product-images": {
|
||||
"props": {
|
||||
"blockClass": "product-images",
|
||||
"testId": "product-images"
|
||||
},
|
||||
"children": ["product-images"]
|
||||
},
|
||||
"product-images": {
|
||||
@ -80,18 +95,15 @@
|
||||
"thumbnailsOrientation": "horizontal",
|
||||
"aspectRatio": {
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
"phone": "auto"
|
||||
},
|
||||
"showNavigationArrows": false,
|
||||
"showPaginationDots": false,
|
||||
"displayThumbnailsArrows": true
|
||||
"showPaginationDots": false
|
||||
}
|
||||
},
|
||||
"flex-layout.col#right-col": {
|
||||
"html#right-col": {
|
||||
"props": {
|
||||
"width": "49%",
|
||||
"preventVerticalStretch": true,
|
||||
"rowGap": 0
|
||||
"blockClass": "right-col"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
@ -99,10 +111,9 @@
|
||||
"product-rating-summary",
|
||||
"product-selling-price",
|
||||
"product-installments",
|
||||
"sku-selector",
|
||||
"product-assembly-options",
|
||||
"html#sku-selector",
|
||||
"product-gifts",
|
||||
"flex-layout.row#buy-button",
|
||||
"html#buy-button",
|
||||
"availability-subscriber",
|
||||
"shipping-simulator"
|
||||
]
|
||||
@ -115,6 +126,22 @@
|
||||
"children": ["vtex.store-components:product-name"]
|
||||
},
|
||||
|
||||
"product-installments": {
|
||||
"props": {
|
||||
"markers": ["discount"],
|
||||
"blockClass": "custom-installments",
|
||||
"message": "{installmentsNumber} x <discount>de</discount> {installmentValue} <discount>sem juros</discount>"
|
||||
}
|
||||
},
|
||||
|
||||
"html#sku-selector": {
|
||||
"props": {
|
||||
"blockClass": "sku-selector",
|
||||
"testId": "sku-selector"
|
||||
},
|
||||
"children": ["sku-selector"]
|
||||
},
|
||||
|
||||
"sku-selector": {
|
||||
"props": {
|
||||
"variationsSpacing": 3,
|
||||
@ -122,12 +149,28 @@
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#buy-button": {
|
||||
"html#buy-button": {
|
||||
"props": {
|
||||
"blockClass": "container-quantity-button"
|
||||
},
|
||||
"children": ["product-quantity", "add-to-cart-button"]
|
||||
"children": ["html#product-quantity", "html#add-to-cart-button"]
|
||||
},
|
||||
"html#product-quantity": {
|
||||
"props": {
|
||||
"blockClass": "product-quantity",
|
||||
"testId": "product-quantity"
|
||||
},
|
||||
"children": ["product-quantity"]
|
||||
},
|
||||
|
||||
"html#add-to-cart-button": {
|
||||
"props": {
|
||||
"blockClass": "cart-button",
|
||||
"testId": "add-to-cart-button"
|
||||
},
|
||||
"children": ["add-to-cart-button"]
|
||||
},
|
||||
|
||||
"product-quantity": {
|
||||
"props": {
|
||||
"width": 128
|
||||
@ -135,23 +178,21 @@
|
||||
},
|
||||
"add-to-cart-button": {
|
||||
"props": {
|
||||
"blockClass": "cardButton",
|
||||
"blockClass": "add-to-cart-button",
|
||||
"text": "ADICIONAR À SACOLA"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-availability": {
|
||||
|
||||
"html#product-availability": {
|
||||
"props": {
|
||||
"colGap": 7,
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7,
|
||||
"paddingTop": 7
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.col#stack",
|
||||
"flex-layout.col#right-col-availability"
|
||||
]
|
||||
"children": ["html#stack", "html#right-col-availability"]
|
||||
},
|
||||
"flex-layout.col#right-col-availability": {
|
||||
"html#right-col-availability": {
|
||||
"props": {
|
||||
"preventVerticalStretch": true,
|
||||
"rowGap": 0,
|
||||
|
||||
@ -5,5 +5,8 @@
|
||||
"html": {
|
||||
"component": "html",
|
||||
"composition": "children"
|
||||
},
|
||||
"placeholder": {
|
||||
"component": "Placeholder"
|
||||
}
|
||||
}
|
||||
|
||||
4
styles/configs/font-faces.css
Normal file
4
styles/configs/font-faces.css
Normal file
@ -0,0 +1,4 @@
|
||||
@font-face {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
|
||||
}
|
||||
@ -23,29 +23,29 @@
|
||||
],
|
||||
"customMedia": [
|
||||
{
|
||||
"s": 20
|
||||
"s": "375px"
|
||||
},
|
||||
{
|
||||
"ns": {
|
||||
"value": 40,
|
||||
"value": "1024px",
|
||||
"minWidth": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"m": {
|
||||
"value": 40,
|
||||
"value": "1024px",
|
||||
"minWidth": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"l": {
|
||||
"value": 64,
|
||||
"value": "1024px",
|
||||
"minWidth": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"xl": {
|
||||
"value": 80,
|
||||
"value": "2501px",
|
||||
"minWidth": true
|
||||
}
|
||||
}
|
||||
@ -80,7 +80,7 @@
|
||||
"background": {
|
||||
"base": "#ffffff",
|
||||
"base--inverted": "#03044e",
|
||||
"action-primary": "#0F3E99",
|
||||
"action-primary": "#000000",
|
||||
"action-secondary": "#eef3f7",
|
||||
"emphasis": "#f71963",
|
||||
"disabled": "#f2f4f5",
|
||||
@ -97,7 +97,7 @@
|
||||
"muted-5": "#f2f4f5"
|
||||
},
|
||||
"hover-background": {
|
||||
"action-primary": "#072c75",
|
||||
"action-primary": "#1f1f1f",
|
||||
"action-secondary": "#dbe9fd",
|
||||
"emphasis": "#dd1659",
|
||||
"success": "#8bc34a",
|
||||
@ -172,7 +172,7 @@
|
||||
"warning--faded": "#fff6e0"
|
||||
},
|
||||
"border": {
|
||||
"action-primary": "#0F3E99",
|
||||
"action-primary": "#000000",
|
||||
"action-secondary": "#eef3f7",
|
||||
"emphasis": "#f71963",
|
||||
"disabled": "#e3e4e6",
|
||||
@ -189,7 +189,7 @@
|
||||
"muted-5": "#f2f4f5"
|
||||
},
|
||||
"hover-border": {
|
||||
"action-primary": "#072c75",
|
||||
"action-primary": "#1f1f1f",
|
||||
"action-secondary": "#dbe9fd",
|
||||
"emphasis": "#dd1659",
|
||||
"success": "#8bc34a",
|
||||
|
||||
28
styles/css/vtex.add-to-cart-button.css
Normal file
28
styles/css/vtex.add-to-cart-button.css
Normal file
@ -0,0 +1,28 @@
|
||||
/*
|
||||
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 */
|
||||
:global(.vtex-button) {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.buttonText--add-to-cart-button {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
.buttonText--add-to-cart-button {
|
||||
width: 168px;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,12 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
|
||||
|
||||
/*
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -10,6 +17,7 @@
|
||||
content: "Home";
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.homeIcon,
|
||||
.termArrow,
|
||||
.term {
|
||||
@ -32,4 +40,4 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,12 @@
|
||||
.product-identifier--productReference {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
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 */
|
||||
.product-identifier {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -9,10 +14,16 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-identifier__label,
|
||||
.product-identifier__separator {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.product-identifier--productReference {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,12 @@
|
||||
/*
|
||||
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 */
|
||||
.sellingPriceValue .currencyContainer {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
@ -16,12 +25,16 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.installments {
|
||||
font-weight: 400;
|
||||
.installments--custom-installments {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.installments-discount--custom-installments {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.interestRate {
|
||||
@ -44,7 +57,6 @@
|
||||
border-radius: 1000px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
@ -85,4 +97,4 @@
|
||||
vertical-align: baseline;
|
||||
color: #ffffff;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,16 @@
|
||||
/*
|
||||
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 */
|
||||
.quantitySelectorContainer {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.quantitySelectorTitle {
|
||||
font-size: 0;
|
||||
margin: 0;
|
||||
@ -19,6 +32,7 @@
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
height: 100%;
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__minus-button),
|
||||
@ -31,12 +45,15 @@
|
||||
align-items: center;
|
||||
color: #000000;
|
||||
height: 100%;
|
||||
width: 26px !important;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__minus-button) {
|
||||
border-width: 1px 0 1px 1px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__plus-button) {
|
||||
border-width: 1px 1px 1px 0;
|
||||
}
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.productNameContainer {
|
||||
@ -38,8 +38,8 @@
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.productImageTag {
|
||||
max-height: 664px;
|
||||
.productImageTag--main {
|
||||
max-height: 664px !important;
|
||||
}
|
||||
|
||||
.productImagesThumb {
|
||||
@ -47,6 +47,23 @@
|
||||
margin-right: 16px;
|
||||
width: 90px !important;
|
||||
height: 90px !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.figure--video {
|
||||
width: 90px !important;
|
||||
height: 90px !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.thumbImg--video {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.productImagesThumbActive .carouselThumbBorder {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33));
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.skuSelectorContainer {
|
||||
@ -138,4 +155,99 @@
|
||||
left: 19px;
|
||||
top: 1px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.productDescriptionText .container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input__label)::after {
|
||||
content: "CALCULAR FRETE:";
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input__suffix) {
|
||||
display: none;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input-prefix__group) {
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
padding: 0;
|
||||
padding-top: 24.5px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration-line: underline;
|
||||
color: #000000;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
|
||||
width: 0;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
background-color: #000000;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 230px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button__label)::after {
|
||||
content: "Ok";
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.productImageTag--main {
|
||||
max-height: 994px !important;
|
||||
}
|
||||
.productNameContainer {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 375px) {
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.shippingContainer :global(.vtex-input-prefix__group) {
|
||||
width: 100%;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
padding: 0;
|
||||
}
|
||||
.shippingContainer :global(.vtex-button) {
|
||||
bottom: 56px;
|
||||
left: 245px;
|
||||
}
|
||||
}
|
||||
21
styles/sass/pages/product/vtex.add-to-cart-button.scss
Normal file
21
styles/sass/pages/product/vtex.add-to-cart-button.scss
Normal file
@ -0,0 +1,21 @@
|
||||
:global(.vtex-button) {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.buttonText--add-to-cart-button {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
.buttonText--add-to-cart-button {
|
||||
width: 168px;
|
||||
}
|
||||
}
|
||||
34
styles/sass/pages/product/vtex.breadcrumb.scss
Normal file
34
styles/sass/pages/product/vtex.breadcrumb.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.homeLink::after {
|
||||
content: "Home";
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.homeIcon,
|
||||
.termArrow,
|
||||
.term {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link--1 {
|
||||
font-size: 0;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
.link--1::after {
|
||||
content: "Sapatos";
|
||||
font-size: 14px;
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
:global(.vtex-breadcrumb-1-x-container) {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
21
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
21
styles/sass/pages/product/vtex.product-identifier.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.product-identifier {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-identifier__label,
|
||||
.product-identifier__separator {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.product-identifier--productReference {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
92
styles/sass/pages/product/vtex.product-price.scss
Normal file
92
styles/sass/pages/product/vtex.product-price.scss
Normal file
@ -0,0 +1,92 @@
|
||||
.sellingPriceValue .currencyContainer {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.sellingPrice {
|
||||
color: #3f3f40;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.sellingPriceValue {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.installments--custom-installments {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.installments-discount--custom-installments {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.interestRate {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.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: 0.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;
|
||||
}
|
||||
50
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
50
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.quantitySelectorContainer {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.quantitySelectorTitle {
|
||||
font-size: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.quantitySelectorStepper {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper-container) {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__input) {
|
||||
border: 1px solid #cccccc;
|
||||
border-width: 1px 0;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
height: 100%;
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__minus-button),
|
||||
:global(.vtex-numeric-stepper__plus-button) {
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 0;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000000;
|
||||
height: 100%;
|
||||
width: 26px !important;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__minus-button) {
|
||||
border-width: 1px 0 1px 1px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper__plus-button) {
|
||||
border-width: 1px 1px 1px 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.productNameContainer {
|
||||
@ -29,8 +29,8 @@
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.productImageTag {
|
||||
max-height: 664px;
|
||||
.productImageTag--main {
|
||||
max-height: 664px !important;
|
||||
}
|
||||
|
||||
.productImagesThumb {
|
||||
@ -38,6 +38,25 @@
|
||||
margin-right: 16px;
|
||||
width: 90px !important;
|
||||
height: 90px !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.figure--video {
|
||||
width: 90px !important;
|
||||
height: 90px !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.thumbImg--video {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.productImagesThumbActive {
|
||||
.carouselThumbBorder {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33));
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorContainer {
|
||||
@ -142,3 +161,122 @@
|
||||
top: 1px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.productDescriptionText {
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
position: relative;
|
||||
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
:global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
content: "CALCULAR FRETE:";
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-input__suffix) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
padding: 0;
|
||||
padding-top: 24.5px;
|
||||
|
||||
:last-child {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration-line: underline;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:global(.vtex__icon-external-link) {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:global(.vtex-button) {
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
background-color: #000000;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 230px;
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
content: "Ok";
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.productImageTag--main {
|
||||
max-height: 994px !important;
|
||||
}
|
||||
|
||||
.productNameContainer {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
.shippingContainer {
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:global(.vtex-button) {
|
||||
bottom: 56px;
|
||||
left: 245px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user