feat(product): adicionando description e estilos na mesma
product
This commit is contained in:
parent
d6bd6c9dd2
commit
5a508361a1
@ -3,7 +3,7 @@
|
||||
"children": [
|
||||
"html#breadcrumb",
|
||||
"condition-layout.product#availability",
|
||||
"flex-layout.row#description",
|
||||
"tab-layout#description",
|
||||
"flex-layout.row#specifications-title",
|
||||
"product-specification-group#table",
|
||||
"shelf.relatedProducts",
|
||||
@ -32,6 +32,102 @@
|
||||
},
|
||||
"children": ["product-description"]
|
||||
},
|
||||
"product-images#description-content": {
|
||||
"props": {
|
||||
"displayMode": "first-image",
|
||||
"zoomMode": "disable",
|
||||
"blockClass": "image-description"
|
||||
}
|
||||
},
|
||||
"tab-layout#description": {
|
||||
"children": ["tab-list#description", "tab-content#description"],
|
||||
"props": {
|
||||
"blockClass": "description-block",
|
||||
"defaultActiveTabId": "firstTab"
|
||||
}
|
||||
},
|
||||
"tab-list#description": {
|
||||
"children": [
|
||||
"tab-list.item#firstTab",
|
||||
"tab-list.item#secondTab",
|
||||
"tab-list.item#thirdTab",
|
||||
"tab-list.item#fourthTab",
|
||||
"tab-list.item#fifthTab"
|
||||
]
|
||||
},
|
||||
"tab-list.item#firstTab": {
|
||||
"props": {
|
||||
"tabId": "firstTab",
|
||||
"label": "Descrição",
|
||||
"defaultActiveTab": true
|
||||
}
|
||||
},
|
||||
"tab-list.item#secondTab": {
|
||||
"props": {
|
||||
"tabId": "secondTab",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#thirdTab": {
|
||||
"props": {
|
||||
"tabId": "thirdTab",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#fourthTab": {
|
||||
"props": {
|
||||
"tabId": "fourthTab",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#fifthTab": {
|
||||
"props": {
|
||||
"tabId": "fifthTab",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-content#description": {
|
||||
"children": [
|
||||
"tab-content.item#firstTab",
|
||||
"tab-content.item#secondTab",
|
||||
"tab-content.item#thirdTab",
|
||||
"tab-content.item#fourthTab",
|
||||
"tab-content.item#fifthTab"
|
||||
],
|
||||
"props": {
|
||||
"blockClass": "description-content"
|
||||
}
|
||||
},
|
||||
"tab-content.item#firstTab": {
|
||||
"children": ["product-images#description-content", "product-description"],
|
||||
"props": {
|
||||
"tabId": "firstTab"
|
||||
}
|
||||
},
|
||||
"tab-content.item#secondTab": {
|
||||
"children": ["product-images#description-content", "product-description"],
|
||||
"props": {
|
||||
"tabId": "secondTab"
|
||||
}
|
||||
},
|
||||
"tab-content.item#thirdTab": {
|
||||
"children": ["product-images#description-content", "product-description"],
|
||||
"props": {
|
||||
"tabId": "thirdTab"
|
||||
}
|
||||
},
|
||||
"tab-content.item#fourthTab": {
|
||||
"children": ["product-images#description-content", "product-description"],
|
||||
"props": {
|
||||
"tabId": "fourthTab"
|
||||
}
|
||||
},
|
||||
"tab-content.item#fifthTab": {
|
||||
"children": ["product-images#description-content", "product-description"],
|
||||
"props": {
|
||||
"tabId": "fifthTab"
|
||||
}
|
||||
},
|
||||
"condition-layout.product#availability": {
|
||||
"props": {
|
||||
"conditions": [
|
||||
@ -122,7 +218,7 @@
|
||||
// "flex-layout.row#buy-button",
|
||||
"availability-subscriber",
|
||||
"html#shipping-simulator"
|
||||
// "share#default"
|
||||
// "share#default" //reder social
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
@ -253,84 +253,84 @@
|
||||
"measure": [30, 34, 20],
|
||||
"styles": {
|
||||
"heading-1": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "700",
|
||||
"fontSize": "3rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-2": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "700",
|
||||
"fontSize": "2.25rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-3": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "700",
|
||||
"fontSize": "1.75rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-4": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1.5rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-5": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1.25rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"heading-6": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1.25rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"body": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "1rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"small": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "0.875rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"mini": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": "0.75rem",
|
||||
"textTransform": "initial",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"action": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "500",
|
||||
"fontSize": "1rem",
|
||||
"textTransform": "uppercase",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"action--small": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "500",
|
||||
"fontSize": "0.875rem",
|
||||
"textTransform": "uppercase",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"action--large": {
|
||||
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
|
||||
"fontFamily": "Open Sans, sans-serif",
|
||||
"fontWeight": "500",
|
||||
"fontSize": "1.25rem",
|
||||
"textTransform": "uppercase",
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.container {
|
||||
padding: 16px 40px;
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.container {
|
||||
padding: 16px 40px;
|
||||
}
|
||||
@ -32,7 +32,7 @@
|
||||
max-height: 904px !important;
|
||||
cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
|
||||
}
|
||||
@media (min-width: 1025px) and (max-width: 2560px) {
|
||||
@media (min-width: 1025px) and (max-width: 1920px) {
|
||||
.productImageTag--main, .videoContainer {
|
||||
max-height: 664px !important;
|
||||
}
|
||||
@ -63,7 +63,7 @@
|
||||
border-radius: 8px;
|
||||
max-width: calc(100% - 16px);
|
||||
}
|
||||
@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.carouselGaleryThumbs .productImagesThumb {
|
||||
width: 90px !important;
|
||||
height: 90px !important;
|
||||
|
||||
176
styles/css/vtex.tab-layout.css
Normal file
176
styles/css/vtex.tab-layout.css
Normal file
@ -0,0 +1,176 @@
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
900 - 1200px: Tablet landscape
|
||||
[1200 - 1800] is where our nortal styles apply
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.container--description-block {
|
||||
padding: 16px 360px;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.container--description-block {
|
||||
padding: 16px 40px;
|
||||
}
|
||||
}
|
||||
.container--description-block .listContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #B9B9B9;
|
||||
height: 38px;
|
||||
margin-bottom: 32px;
|
||||
padding: 0 64px;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.container--description-block .listContainer {
|
||||
flex-direction: column;
|
||||
row-gap: 16px;
|
||||
border-top: 1px solid #B9B9B9;
|
||||
border-bottom: 1px solid #B9B9B9;
|
||||
height: auto;
|
||||
padding: 16px 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.container--description-block .listContainer .listItem {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.container--description-block .listContainer .listItem :global(.vtex-button__label) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: #BFBFBF;
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
@media (min-width: 1025px) and (max-width: 1920px) {
|
||||
.container--description-block .listContainer .listItem :global(.vtex-button__label) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.container--description-block .listContainer .listItem :global(.vtex-button__label) {
|
||||
font-size: 18px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
.container--description-block .listContainer .listItem :global(.vtex-button) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.container--description-block .listContainer .listItemActive {
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.container--description-block .listContainer .listItemActive {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.container--description-block .listContainer .listItemActive :global(.vtex-button__label) {
|
||||
color: #000;
|
||||
}
|
||||
.container--description-block .contentContainer--description {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.contentContainer--description-content {
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #BFBFBF;
|
||||
}
|
||||
}
|
||||
.contentContainer--description-content .contentItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.contentContainer--description-content .contentItem {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productImagesContainer--image-description) {
|
||||
width: 50%;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productImagesContainer--image-description) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
|
||||
width: 50%;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@media (min-width: 1025px) and (max-width: 1920px) {
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
@media (min-width: 1025px) and (max-width: 1920px) {
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-fadeBottom) {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-showMoreButton) {
|
||||
display: none;
|
||||
}
|
||||
170
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
170
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,170 @@
|
||||
.container--description-block {
|
||||
padding:16px 360px;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
|
||||
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
|
||||
padding: 16px 40px;
|
||||
}
|
||||
|
||||
.listContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #B9B9B9;
|
||||
height: 38px;
|
||||
margin-bottom: 32px;
|
||||
padding: 0 64px;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile}{
|
||||
flex-direction: column;
|
||||
row-gap: 16px;
|
||||
border-top: 1px solid #B9B9B9;
|
||||
border-bottom: 1px solid #B9B9B9;
|
||||
height: auto;
|
||||
padding: 16px 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: #BFBFBF;
|
||||
padding: 0 16px !important;
|
||||
|
||||
@media #{$mq-desktop}{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
font-size: 18px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.listItemActive {
|
||||
border-bottom: 2px solid $color-black0;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile} {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
color: $color-black0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentContainer--description {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.contentContainer--description-content{
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile}{
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #BFBFBF;
|
||||
}
|
||||
|
||||
.contentItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile}{
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-productImagesContainer--image-description){
|
||||
width: 50%;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile}{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-productDescriptionContainer){
|
||||
width: 50%;
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile}{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-productDescriptionTitle ) {
|
||||
font-family:$font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
color: $color-gray7;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile}{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-container) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 0;
|
||||
|
||||
:global(.vtex-store-components-3-x-content) {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
color: $color-gray6;
|
||||
|
||||
@media #{$mq-desktop} {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media #{$mq-tablet}, #{$mq-mobile}{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-fadeBottom ){
|
||||
@media #{$mq-tablet}, #{$mq-mobile}{
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-store-components-3-x-showMoreButton) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -41,6 +41,6 @@ $z-index: (
|
||||
) !default;
|
||||
|
||||
//media-queries
|
||||
$mq-desktop: "(min-width: 1025px) and (max-width: 2560px)";
|
||||
$mq-desktop: "(min-width: 1025px) and (max-width: 1920px)";
|
||||
$mq-tablet: "(min-width: 769px) and (max-width: 1024px)";
|
||||
$mq-mobile: "(min-width: 280px) and (max-width: 768px)";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user