adicionado descrição e imagem
This commit is contained in:
parent
879fc0fc98
commit
c2adfe1159
BIN
assets/font/OpenSans-Bold.ttf
Normal file
BIN
assets/font/OpenSans-Bold.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-BoldItalic.ttf
Normal file
BIN
assets/font/OpenSans-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-ExtraBold.ttf
Normal file
BIN
assets/font/OpenSans-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-ExtraBoldItalic.ttf
Normal file
BIN
assets/font/OpenSans-ExtraBoldItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-Italic.ttf
Normal file
BIN
assets/font/OpenSans-Italic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-Light.ttf
Normal file
BIN
assets/font/OpenSans-Light.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-LightItalic.ttf
Normal file
BIN
assets/font/OpenSans-LightItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-Medium.ttf
Normal file
BIN
assets/font/OpenSans-Medium.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-MediumItalic.ttf
Normal file
BIN
assets/font/OpenSans-MediumItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-Regular.ttf
Normal file
BIN
assets/font/OpenSans-Regular.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-SemiBold.ttf
Normal file
BIN
assets/font/OpenSans-SemiBold.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans-SemiBoldItalic.ttf
Normal file
BIN
assets/font/OpenSans-SemiBoldItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-Bold.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-Bold.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-BoldItalic.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-ExtraBold.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-ExtraBoldItalic.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-ExtraBoldItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-Italic.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-Italic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-Light.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-Light.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-LightItalic.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-LightItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-Medium.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-Medium.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-MediumItalic.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-MediumItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-Regular.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-Regular.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-SemiBold.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-SemiBold.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_Condensed-SemiBoldItalic.ttf
Normal file
BIN
assets/font/OpenSans_Condensed-SemiBoldItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-Bold.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-Bold.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-BoldItalic.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-ExtraBold.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-ExtraBoldItalic.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-ExtraBoldItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-Italic.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-Italic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-Light.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-Light.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-LightItalic.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-LightItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-Medium.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-Medium.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-MediumItalic.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-MediumItalic.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-Regular.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-Regular.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-SemiBold.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-SemiBold.ttf
Normal file
Binary file not shown.
BIN
assets/font/OpenSans_SemiCondensed-SemiBoldItalic.ttf
Normal file
BIN
assets/font/OpenSans_SemiCondensed-SemiBoldItalic.ttf
Normal file
Binary file not shown.
@ -1,6 +1,6 @@
|
|||||||
import React, { ReactNode } from "react";
|
import React, { ReactNode } from "react";
|
||||||
import { useCssHandles } from "vtex.css-handles";
|
import { useCssHandles } from "vtex.css-handles";
|
||||||
import "./style.css"
|
import "./styles.css"
|
||||||
|
|
||||||
const CSS_HANDLES = ["html"] as const;
|
const CSS_HANDLES = ["html"] as const;
|
||||||
|
|
||||||
|
@ -3,13 +3,139 @@
|
|||||||
"children": [
|
"children": [
|
||||||
"html#breadcrumb",
|
"html#breadcrumb",
|
||||||
"condition-layout.product#availability",
|
"condition-layout.product#availability",
|
||||||
"flex-layout.row#description",
|
"tab-layout#Descricao",
|
||||||
"flex-layout.row#specifications-title",
|
|
||||||
"product-specification-group#table",
|
|
||||||
"shelf.relatedProducts",
|
|
||||||
"product-questions-and-answers"
|
"product-questions-and-answers"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"tab-layout#Descricao": {
|
||||||
|
"children": ["tab-list#Descricao", "tab-content#Descricao"],
|
||||||
|
"props": {
|
||||||
|
"blockClass": "Descricao",
|
||||||
|
"defaultActiveTabId": "Descricao1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list#Descricao": {
|
||||||
|
"children": [
|
||||||
|
"tab-list.item#Descricao1",
|
||||||
|
"tab-list.item#Descricao2",
|
||||||
|
"tab-list.item#Descricao3",
|
||||||
|
"tab-list.item#Descricao4",
|
||||||
|
"tab-list.item#Descricao5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"tab-list.item#Descricao1": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "DescricaoTab",
|
||||||
|
"tabId": "Descricao1",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#Descricao2": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "DescricaoTab",
|
||||||
|
"tabId": "Descricao2",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list.item#Descricao3": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "DescricaoTab",
|
||||||
|
"tabId": "Descricao3",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list.item#Descricao4": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "DescricaoTab",
|
||||||
|
"tabId": "Descricao4",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-list.item#Descricao5": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "DescricaoTab",
|
||||||
|
"tabId": "Descricao5",
|
||||||
|
"label": "Descrição"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content#Descricao": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "DescricaoCont"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
"tab-content.item#Descricao1",
|
||||||
|
"tab-content.item#Descricao2",
|
||||||
|
"tab-content.item#Descricao3",
|
||||||
|
"tab-content.item#Descricao4",
|
||||||
|
"tab-content.item#Descricao5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"tab-content.item#Descricao1": {
|
||||||
|
"children": ["flex-layout.row#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Descricao1",
|
||||||
|
"blockClass": "DescricaoCont1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#Descricao2": {
|
||||||
|
"children": ["flex-layout.row#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Descricao2",
|
||||||
|
"blockClass": "DescricaoCont1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"tab-content.item#Descricao3": {
|
||||||
|
"children": ["flex-layout.row#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Descricao3",
|
||||||
|
"blockClass": "DescricaoCont1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#Descricao4": {
|
||||||
|
"children": ["flex-layout.row#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Descricao4",
|
||||||
|
"blockClass": "DescricaoCont1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#Descricao5": {
|
||||||
|
"children": ["flex-layout.row#description"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "Descricao5",
|
||||||
|
"blockClass": "DescricaoCont1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"flex-layout.row#description": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "description",
|
||||||
|
"marginBottom": 7
|
||||||
|
},
|
||||||
|
"children": ["product-images#imageDescription", "product-description"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"flex-layout.row#wrapperImageDescription": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "imageDescription",
|
||||||
|
"width": "50%"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"product-images#imageDescription": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "imageDescription",
|
||||||
|
"displayMode": "first-image"
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
"html#breadcrumb": {
|
"html#breadcrumb": {
|
||||||
@ -30,12 +156,7 @@
|
|||||||
"text": "##### Product Specifications"
|
"text": "##### Product Specifications"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"flex-layout.row#description": {
|
|
||||||
"props": {
|
|
||||||
"marginBottom": 7
|
|
||||||
},
|
|
||||||
"children": ["product-description"]
|
|
||||||
},
|
|
||||||
"condition-layout.product#availability": {
|
"condition-layout.product#availability": {
|
||||||
"props": {
|
"props": {
|
||||||
"conditions": [
|
"conditions": [
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
1800px + : Big desktop
|
1800px + : Big desktop
|
||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.buttonText {
|
.buttonText {
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: "Open Sans", sans-serif;
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
1800px + : Big desktop
|
1800px + : Big desktop
|
||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -6,14 +6,12 @@
|
|||||||
1800px + : Big desktop
|
1800px + : Big desktop
|
||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.flexRowContent--product-main {
|
.flexRowContent--product-main {
|
||||||
gap: 32px;
|
gap: 32px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 40px;
|
|
||||||
padding-right: 40px;
|
|
||||||
}
|
}
|
||||||
.flexRowContent--product-main .stretchChildrenWidth {
|
.flexRowContent--product-main .stretchChildrenWidth {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
1800px + : Big desktop
|
1800px + : Big desktop
|
||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.product-identifier__value {
|
.product-identifier__value {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
1800px + : Big desktop
|
1800px + : Big desktop
|
||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.sellingPriceValue {
|
.sellingPriceValue {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
1800px + : Big desktop
|
1800px + : Big desktop
|
||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.quantitySelectorTitle {
|
.quantitySelectorTitle {
|
||||||
display: none;
|
display: none;
|
||||||
@ -24,8 +24,9 @@
|
|||||||
height: 49px;
|
height: 49px;
|
||||||
}
|
}
|
||||||
.quantitySelectorContainer :global(.vtex-numeric-stepper__input) {
|
.quantitySelectorContainer :global(.vtex-numeric-stepper__input) {
|
||||||
height: 49px !important;
|
|
||||||
width: 48px;
|
width: 48px;
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -6,5 +6,5 @@
|
|||||||
1800px + : Big desktop
|
1800px + : Big desktop
|
||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
@ -1,3 +1,4 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
/*
|
/*
|
||||||
0 - 600PX: Phone
|
0 - 600PX: Phone
|
||||||
600 - 900px: Table portrait
|
600 - 900px: Table portrait
|
||||||
@ -6,12 +7,12 @@
|
|||||||
1800px + : Big desktop
|
1800px + : Big desktop
|
||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.container {
|
.container {
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
}
|
}
|
||||||
.container .productImagesGallerySlide {
|
.container .productImagesGallerySlide {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
@ -83,6 +84,7 @@
|
|||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
}
|
}
|
||||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
|
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
|
||||||
|
color: rgba(185, 185, 185, 0.6);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
@ -109,6 +111,7 @@
|
|||||||
|
|
||||||
.shippingContainer {
|
.shippingContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
.shippingContainer :global(.vtex-input-prefix__group) {
|
.shippingContainer :global(.vtex-input-prefix__group) {
|
||||||
height: 49px;
|
height: 49px;
|
||||||
@ -125,6 +128,7 @@
|
|||||||
}
|
}
|
||||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
.shippingContainer :global(.vtex-button) {
|
.shippingContainer :global(.vtex-button) {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
@ -157,4 +161,92 @@
|
|||||||
}
|
}
|
||||||
.shippingContainer :global(.vtex__icon-external-link) {
|
.shippingContainer :global(.vtex__icon-external-link) {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTable {
|
||||||
|
border: none;
|
||||||
|
color: #202020;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableLabel {
|
||||||
|
color: #AFAFAF;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableRadioBtn {
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
color: #AFAFAF;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
min-width: 140px;
|
||||||
|
padding-top: 15px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableHead {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableHead .shippingTableRow {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 300px;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 163px;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "FRETE";
|
||||||
|
visibility: visible;
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableBody .shippingTableRow {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
|
||||||
|
display: flex;
|
||||||
|
order: 2;
|
||||||
|
margin-left: 66px;
|
||||||
|
}
|
||||||
|
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
|
||||||
|
margin-left: 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productDescriptionTitle {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
padding-left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productDescriptionText {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.productDescriptionText::after {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 19px;
|
||||||
|
display: block;
|
||||||
|
color: #929292;
|
||||||
|
padding-left: 32px;
|
||||||
|
content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
|
||||||
}
|
}
|
63
styles/css/vtex.tab-layout.css
Normal file
63
styles/css/vtex.tab-layout.css
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
/*
|
||||||
|
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:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.listContainer {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.listContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listContainer .listItem {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem--DescricaoTab :global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 38px;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
background-color: white;
|
||||||
|
color: #BFBFBF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemActive--DescricaoTab {
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.listItemActive--DescricaoTab {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listItemActive--DescricaoTab :global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 38px;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
background-color: white;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .contentContainer--DescricaoCont {
|
||||||
|
padding-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--Descricao {
|
||||||
|
padding-top: 16px;
|
||||||
|
margin: 0 40px 0 40px;
|
||||||
|
}
|
@ -3,8 +3,8 @@
|
|||||||
gap: 32px;
|
gap: 32px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 40px;
|
// padding-left: 40px;
|
||||||
padding-right: 40px;
|
// padding-right: 40px;
|
||||||
|
|
||||||
.stretchChildrenWidth {
|
.stretchChildrenWidth {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -9,14 +9,16 @@
|
|||||||
.quantitySelectorContainer{
|
.quantitySelectorContainer{
|
||||||
width: 128px;
|
width: 128px;
|
||||||
height: 49px;
|
height: 49px;
|
||||||
|
|
||||||
|
|
||||||
:global(.vtex-numeric-stepper-container){
|
:global(.vtex-numeric-stepper-container){
|
||||||
height: 49px;
|
height: 49px;
|
||||||
}
|
}
|
||||||
:global(.vtex-numeric-stepper__input){
|
:global(.vtex-numeric-stepper__input){
|
||||||
height: 49px !important;
|
// height: 49px !important;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,16 @@
|
|||||||
.container{
|
.container {
|
||||||
margin: 0;
|
// margin: 0;
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
|
||||||
.productImagesGallerySlide{
|
.productImagesGallerySlide {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.productImageTag--main{
|
.productImageTag--main {
|
||||||
max-height: 100% !important;
|
max-height: 100% !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
}
|
}
|
||||||
@ -118,7 +120,7 @@
|
|||||||
|
|
||||||
.skuSelectorItemTextValue {
|
.skuSelectorItemTextValue {
|
||||||
|
|
||||||
|
color:rgba(185, 185, 185, 0.6);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
@ -150,7 +152,10 @@
|
|||||||
color: $color-black2;
|
color: $color-black2;
|
||||||
font-family: $font-open;
|
font-family: $font-open;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -162,74 +167,197 @@
|
|||||||
|
|
||||||
.shippingContainer {
|
.shippingContainer {
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
:global(.vtex-input-prefix__group) {
|
:global(.vtex-input-prefix__group) {
|
||||||
|
|
||||||
height: 49px;
|
height: 49px;
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.vtex-input__label) {
|
|
||||||
|
|
||||||
font-size: 0;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "CALCULAR FRETE:";
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 19px;
|
|
||||||
font-weight: 400;
|
|
||||||
font-family: $font-open;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
:global(.vtex-input__label) {
|
||||||
|
|
||||||
:global(.vtex-address-form__postalCode) {
|
font-size: 0;
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.vtex-button) {
|
&::after {
|
||||||
font-size: 0;
|
content: "CALCULAR FRETE:";
|
||||||
position: relative;
|
font-size: 14px;
|
||||||
right: 164px;
|
line-height: 19px;
|
||||||
width: 49px;
|
font-weight: 400;
|
||||||
height: 49px;
|
font-family: $font-open;
|
||||||
margin-top: 27px;
|
}
|
||||||
background-color: $color-black2;
|
|
||||||
border: none;
|
}
|
||||||
|
|
||||||
|
:global(.vtex-address-form__postalCode) {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-button) {
|
||||||
|
font-size: 0;
|
||||||
|
position: relative;
|
||||||
|
right: 164px;
|
||||||
|
width: 49px;
|
||||||
|
height: 49px;
|
||||||
|
margin-top: 27px;
|
||||||
|
background-color: $color-black2;
|
||||||
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
|
||||||
|
content: "OK";
|
||||||
|
color: $color-white;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-button__label) {
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||||
|
position: relative;
|
||||||
|
left: 20px;
|
||||||
|
margin-top: 31px;
|
||||||
|
|
||||||
|
:last-child {
|
||||||
|
color: $color-black2;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex__icon-external-link) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTable {
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
color: $color-black300;
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: $font-open;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
.shippingTableLabel{
|
||||||
|
color: $color-gray9;
|
||||||
|
font-weight: 400 ;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableRadioBtn {
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
color: $color-gray9;
|
||||||
|
font-weight: 400 ;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
min-width: 140px;
|
||||||
|
padding-top: 15px;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableHead {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
|
||||||
|
.shippingTableRow {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
.shippingTableHeadDeliveryEstimate {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 300px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableHeadDeliveryPrice {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 163px;
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
content: "FRETE";
|
||||||
|
visibility: visible;
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableBody {
|
||||||
|
|
||||||
|
.shippingTableRow {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
|
||||||
|
.shippingTableCellDeliveryName {
|
||||||
|
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableCellDeliveryEstimate {
|
||||||
|
display: flex;
|
||||||
|
order: 2;
|
||||||
|
margin-left: 66px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingTableCellDeliveryPrice{
|
||||||
|
margin-left: 58px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// cep-fim
|
||||||
|
|
||||||
|
// tab-descrição
|
||||||
|
|
||||||
|
.productDescriptionTitle {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
font-family: $font-open;
|
||||||
|
padding-left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productDescriptionText {
|
||||||
|
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
position: absolute;
|
||||||
content: "OK";
|
font-size: 16px;
|
||||||
color: $color-white;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
font-weight: 600;
|
display: block;
|
||||||
|
color: $color-gray6;
|
||||||
|
padding-left: 32px;
|
||||||
|
content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.vtex-button__label) {
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
|
||||||
position: relative;
|
|
||||||
left: 20px;
|
|
||||||
margin-top: 31px;
|
|
||||||
|
|
||||||
:last-child {
|
|
||||||
color: $color-black2;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
:global(.vtex__icon-external-link) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
61
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
61
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
|
||||||
|
.listContainer {
|
||||||
|
border-bottom: 1px solid rgb(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
@include mq (md, max) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem--DescricaoTab{
|
||||||
|
:global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 38px;
|
||||||
|
font-family: $font-open;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
color: $color-gray7;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemActive--DescricaoTab {
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
@include mq (md, max) {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
:global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 38px;
|
||||||
|
font-family: $font-open;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
color: $color-black2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
.contentContainer--DescricaoCont {
|
||||||
|
padding-top: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--Descricao{
|
||||||
|
padding-top: 16px;
|
||||||
|
margin: 0 40px 0 40px;
|
||||||
|
}
|
@ -1,4 +1,4 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
|
||||||
$font-open: 'Open Sans', sans-serif;
|
$font-open: 'Open Sans', sans-serif;
|
||||||
$color-black2:#000000;
|
$color-black2:#000000;
|
||||||
$color-black300: #202020;
|
$color-black300: #202020;
|
||||||
@ -13,6 +13,7 @@ $color-gray5: #e5e5e5;
|
|||||||
$color-gray6: #929292;
|
$color-gray6: #929292;
|
||||||
$color-gray7: #BFBFBF;
|
$color-gray7: #BFBFBF;
|
||||||
$color-gray8: #868686;
|
$color-gray8: #868686;
|
||||||
|
$color-gray9: #AFAFAF;
|
||||||
$color-blue: #4267b2;
|
$color-blue: #4267b2;
|
||||||
|
|
||||||
$color-green: #4caf50;
|
$color-green: #4caf50;
|
||||||
|
Loading…
Reference in New Issue
Block a user