forked from M3-Academy/challenge-vtex-io
Merge branch 'feature/prateleira' into desenvolvimento
This commit is contained in:
commit
133ce31d4a
@ -1,17 +1,10 @@
|
||||
/* [class*=html--pdp-breadcrumb]{
|
||||
background: blue;
|
||||
} */
|
||||
/* .html {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.html--pdp-breadcrumb {
|
||||
background-color: green;
|
||||
} */
|
||||
.html--pdp-section_descriptions{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32;
|
||||
gap: 32px;
|
||||
padding: 0px 40px 0px 40px;
|
||||
}
|
||||
.html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
|
||||
@ -20,6 +13,15 @@
|
||||
.html--pdp-descriptions{
|
||||
display: flex;
|
||||
}
|
||||
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRow){
|
||||
width: 100%;
|
||||
}
|
||||
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
|
||||
max-width: 100%;
|
||||
}
|
||||
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
|
||||
padding-left: 28px;
|
||||
}
|
||||
.html--pdp-departamens{
|
||||
background: transparent;
|
||||
margin-top: 32px;
|
||||
@ -36,6 +38,7 @@
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.html--pdp-departamens div ul li button{
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -51,3 +54,56 @@
|
||||
color: #000000;
|
||||
border-bottom: 1px solid #000000;
|
||||
}
|
||||
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.html--pdp-productMain :global(.vtex-store-components-3-x-container){
|
||||
max-width: 100%;
|
||||
}
|
||||
:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){
|
||||
background: #000000;
|
||||
}
|
||||
:global(.vtex-slider-layout-0-x-paginationDotsContainer--pdp-carrousel){
|
||||
align-items: center;
|
||||
}
|
||||
:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel--isActive){
|
||||
min-width: 17px;
|
||||
min-height: 17px;
|
||||
border: 0.5px solid black;
|
||||
background: #ffffff;
|
||||
}
|
||||
@media screen and (max-width: 375px){
|
||||
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
|
||||
min-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
|
||||
min-width: 296px;
|
||||
}
|
||||
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
|
||||
flex-direction: column;
|
||||
}
|
||||
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
|
||||
align-items: center;
|
||||
width: 100% !important;
|
||||
}
|
||||
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImagesContainer){
|
||||
width: auto;
|
||||
}
|
||||
.html--pdp-departamens div ul{
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
padding: 0;
|
||||
}
|
||||
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
|
||||
padding-left: 0px;
|
||||
}
|
||||
.html--pdp-departamens div ul li :global(button.open){
|
||||
border-bottom: none;
|
||||
}
|
||||
.html--pdp-departamens ul{
|
||||
border-top: 1px solid rgba(185, 185, 185, 1);
|
||||
}
|
||||
}
|
||||
|
@ -1,11 +1,94 @@
|
||||
{
|
||||
"store.product": {
|
||||
"children": [
|
||||
"html#breadcrumb",
|
||||
"condition-layout.product#availability",
|
||||
"html#departaments"
|
||||
"html#departaments",
|
||||
"flex-layout.row#specifications-title",
|
||||
"html#carousel"
|
||||
]
|
||||
},
|
||||
"html#prateleira": {
|
||||
"props": {
|
||||
"testId": "vtex-product-sumary"
|
||||
},
|
||||
"children": [
|
||||
"product-summary-image#shelfpdp",
|
||||
"product-summary-name",
|
||||
"product-list-price#summary",
|
||||
"product-selling-price#summary"
|
||||
]
|
||||
},
|
||||
"html#carousel": {
|
||||
"children": ["flex-layout.row#shelfpdp"]
|
||||
},
|
||||
"flex-layout.row#shelfpdp": {
|
||||
"props": {
|
||||
"blockClass": "pdp-carrousel"
|
||||
},
|
||||
"children": ["list-context.product-list#pdp"]
|
||||
},
|
||||
"list-context.product-list#pdp": {
|
||||
"blocks": ["product-summary.shelf#Pdp"],
|
||||
"children": ["slider-layout#demo-products#pdp"],
|
||||
"props": {
|
||||
"orderBy": "OrderByTopSaleDESC"
|
||||
}
|
||||
},
|
||||
"slider-layout#demo-products#pdp": {
|
||||
"props": {
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
"tablet": 3,
|
||||
"phone": 2
|
||||
},
|
||||
"infinite": true,
|
||||
"fullWidth": true,
|
||||
"blockClass": "pdp-carrousel"
|
||||
}
|
||||
},
|
||||
|
||||
"product-summary.shelf#Pdp": {
|
||||
"children": [
|
||||
"stack-layout#pdp",
|
||||
"product-summary-name",
|
||||
"product-list-price#summary",
|
||||
"product-selling-price#summarypdp",
|
||||
"flex-layout.row#selling-price-savingspdp"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.row#selling-price-savingspdp": {
|
||||
"props": {
|
||||
"blockClass": "pdp-price",
|
||||
"colGap": 2,
|
||||
"preserveLayoutOnMobile": true,
|
||||
"preventHorizontalStretch": true,
|
||||
"marginBottom": 4
|
||||
},
|
||||
"children": [
|
||||
"product-selling-price#summary",
|
||||
"product-price-savings#summary"
|
||||
]
|
||||
},
|
||||
"product-summary-name": {
|
||||
"props": {
|
||||
"blockClass": "pdp-name"
|
||||
}
|
||||
},
|
||||
"stack-layout#pdp": {
|
||||
"children": [
|
||||
"product-summary-image#shelfpdp",
|
||||
"modal-trigger#quickview" // Check quickview.jsonc
|
||||
]
|
||||
},
|
||||
|
||||
"product-summary-image#shelfpdp": {
|
||||
"props": {
|
||||
"blockClass": "pdp-imgpdp",
|
||||
"showBadge": false,
|
||||
"aspectRatio": "1:1",
|
||||
"maxHeight": 334.4
|
||||
}
|
||||
},
|
||||
"html#breadcrumb": {
|
||||
"props": {
|
||||
"tag": "section",
|
||||
@ -34,16 +117,23 @@
|
||||
"flex-layout.row#specifications-title": {
|
||||
"children": ["rich-text#specifications"]
|
||||
},
|
||||
|
||||
"rich-text#specifications": {
|
||||
"props": {
|
||||
"text": "##### Product Specifications"
|
||||
"text": "##### Você também pode gostar:",
|
||||
"blockClass": "pdp-specifications"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#description": {
|
||||
"props": {
|
||||
"width": "50%"
|
||||
"width": "66%"
|
||||
},
|
||||
"children": ["product-images#description","product-description"]
|
||||
"children": ["product-images#description", "product-description"]
|
||||
},
|
||||
"product-description": {
|
||||
"props": {
|
||||
"collapseContent": false
|
||||
}
|
||||
},
|
||||
"condition-layout.product#availability": {
|
||||
"props": {
|
||||
@ -52,10 +142,19 @@
|
||||
"subject": "isProductAvailable"
|
||||
}
|
||||
],
|
||||
"Then": "flex-layout.row#product-main",
|
||||
"Then": "html#product-main",
|
||||
"Else": "flex-layout.row#product-availability"
|
||||
}
|
||||
},
|
||||
|
||||
"html#product-main": {
|
||||
"props": {
|
||||
"tag": "div",
|
||||
"testId": "Product-Images",
|
||||
"blockClass": "pdp-productMain"
|
||||
},
|
||||
"children": ["flex-layout.row#product-main"]
|
||||
},
|
||||
"flex-layout.row#product-main": {
|
||||
"props": {
|
||||
"colGap": 7,
|
||||
@ -94,28 +193,28 @@
|
||||
"testId": "description",
|
||||
"blockClass": "pdp-section_descriptions"
|
||||
},
|
||||
"children": ["html#Sections","html#description"]
|
||||
"children": ["html#Sections", "html#description"]
|
||||
},
|
||||
|
||||
"html#description": {
|
||||
"props": {
|
||||
"tag": "div",
|
||||
"testId": "description",
|
||||
"blockClass": "pdp-descriptions"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#description"
|
||||
]
|
||||
"children": ["flex-layout.row#description"]
|
||||
},
|
||||
|
||||
"flex-layout.col#stack": {
|
||||
"children": ["stack-layout"],
|
||||
"props": {
|
||||
"rowGap": 10,
|
||||
"width":"46%",
|
||||
"width": "50%",
|
||||
"blockClass": "StackLayout",
|
||||
"htmlId":"teste"
|
||||
"htmlId": "teste"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#product-image": {
|
||||
"children": ["product-images"]
|
||||
},
|
||||
@ -134,6 +233,7 @@
|
||||
},
|
||||
"product-images#description": {
|
||||
"props": {
|
||||
"maxHeight": 872,
|
||||
"testid": "product-images",
|
||||
"aspectRatio": {
|
||||
"desktop": "1:1",
|
||||
@ -143,7 +243,7 @@
|
||||
"showPaginationDots": false,
|
||||
"thumbnailVisibility": "hiden",
|
||||
"displayMode": "first-image",
|
||||
"zoomMode":"disabled"
|
||||
"zoomMode": "disabled"
|
||||
}
|
||||
},
|
||||
"flex-layout.col#right-col": {
|
||||
@ -174,7 +274,12 @@
|
||||
"message": "{installmentsNumber} de {installmentValue} sem juros"
|
||||
}
|
||||
},
|
||||
|
||||
"product-selling-price#summarypdp": {
|
||||
"props": {
|
||||
"blockClass": "desconto",
|
||||
"message": "de {sellingPriceWithTax} por"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-name": {
|
||||
"props": {
|
||||
"marginBottom": 3,
|
||||
|
@ -13,7 +13,7 @@
|
||||
margin-right: auto;
|
||||
max-width: 96rem;
|
||||
}
|
||||
@media screen and (max-width: 64.0625em) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 0 0 10.67%;
|
||||
}
|
||||
|
@ -29,13 +29,13 @@
|
||||
max-width: 526px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40em) {
|
||||
@media screen and (min-width: 1024px) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 80rem) {
|
||||
@media screen and (min-width: 1280px) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.25rem;
|
||||
@ -140,4 +140,37 @@
|
||||
.flexRowContent--title {
|
||||
align-items: end;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
|
||||
top: 33%;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
|
||||
max-width: 11.2px;
|
||||
max-height: 29.6px;
|
||||
top: 25%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) {
|
||||
width: 4.9344% !important;
|
||||
height: max-content;
|
||||
min-height: max-content;
|
||||
max-width: 274px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel) {
|
||||
height: 100%;
|
||||
max-height: 392px;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
|
||||
max-width: 100%;
|
||||
}
|
||||
.flexRow--pdp-price .flexRowContent--pdp-price {
|
||||
justify-content: center;
|
||||
}
|
@ -107,4 +107,49 @@
|
||||
}
|
||||
.installments .installmentsNumber::after {
|
||||
content: "x";
|
||||
}
|
||||
|
||||
.sellingPriceValue--summary-pdp {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.sellingPriceValue--summary-pdp {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPrice--desconto {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
text-decoration-line: line-through;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #BABABA;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.sellingPrice--desconto {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.sellingPrice--desconto .sellingPriceValue--desconto {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.sellingPrice--desconto .sellingPriceValue--desconto {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
@ -20,7 +20,7 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
display: none;
|
||||
}
|
||||
@ -54,4 +54,34 @@
|
||||
}
|
||||
.nameContainer .productNameContainer {
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.nameContainer .productNameContainer--pdp-name {
|
||||
max-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.image--pdp-imgpdp {
|
||||
min-width: 334.4px;
|
||||
}
|
||||
}
|
||||
|
||||
.nameContainer--pdp-name {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.productBrand--pdp-name {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.productBrand--pdp-name {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
@ -6,4 +6,15 @@
|
||||
1800px + : Big desktop
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
/* Grid breakpoints */
|
||||
.container--pdp-specifications {
|
||||
justify-content: center;
|
||||
}
|
||||
.container--pdp-specifications .wrapper--pdp-specifications .heading {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: #575757;
|
||||
}
|
@ -90,19 +90,19 @@
|
||||
.carouselContainer .productImage {
|
||||
max-width: 85.238%;
|
||||
}
|
||||
@media screen and (min-width: 156.25em) {
|
||||
@media screen and (min-width: 1920px) {
|
||||
.carouselContainer .productImage {
|
||||
min-width: 904px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 64.0625em) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.carouselContainer .productImage {
|
||||
min-width: 296px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 23.375em) {
|
||||
@media screen and (max-width: 375px) {
|
||||
.carouselContainer .productImage {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
@ -127,7 +127,7 @@
|
||||
background: white;
|
||||
margin-right: 1em;
|
||||
}
|
||||
@media screen and (max-width: 64.0625em) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.carouselGaleryThumbs .productImagesThumb {
|
||||
width: 30% !important;
|
||||
}
|
||||
@ -142,7 +142,7 @@
|
||||
border-radius: 8px;
|
||||
min-height: 5.54em;
|
||||
}
|
||||
@media screen and (max-width: 64.0625em) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
|
||||
min-height: 4.9em;
|
||||
}
|
||||
@ -150,4 +150,43 @@
|
||||
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
|
||||
border-radius: 8px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer .content {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.productDescriptionContainer .content {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.productDescriptionContainer .content {
|
||||
font-size: 14px !important;
|
||||
line-height: 19px !important;
|
||||
}
|
||||
}
|
@ -4,7 +4,7 @@
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
@media only screen and (min-width: 280px) {
|
||||
.videoContainer {
|
||||
height: 700px;
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 96rem;
|
||||
@media screen and (max-width: 64.0625em){
|
||||
@media screen and (max-width: 1024px){
|
||||
padding: 0 0 0 10.67%;
|
||||
}
|
||||
.term,.termArrow{
|
||||
|
@ -18,14 +18,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40em) {
|
||||
@media screen and (min-width: 1024px) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 80rem) {
|
||||
@media screen and (min-width: 1280px) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.25rem;
|
||||
@ -133,5 +133,42 @@
|
||||
align-items: end;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.flexRowContent--pdp-carrousel{
|
||||
:global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){
|
||||
top: 33%;
|
||||
@media screen and (max-width: 1024px){
|
||||
max-width: 11.2px;
|
||||
max-height: 29.6px;
|
||||
top: 25%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
:global(.vtex-slider-layout-0-x-slide--pdp-carrousel){
|
||||
@media screen and (max-width: 1024px){
|
||||
width: 4.9344% !important;
|
||||
height: max-content;
|
||||
min-height: max-content;
|
||||
max-width: 274px;
|
||||
}
|
||||
}
|
||||
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
|
||||
@media screen and (max-width: 1024px){
|
||||
height: 100%;
|
||||
max-height: 392px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flexRow--pdp-carrousel{
|
||||
:global(.vtex-store-components-3-x-container){
|
||||
max-width: 100%;
|
||||
}
|
||||
@media screen and (max-width: 1024px){
|
||||
|
||||
}
|
||||
}
|
||||
.flexRow--pdp-price{
|
||||
.flexRowContent--pdp-price{
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -11,7 +11,7 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
display: none;
|
||||
}
|
||||
@ -46,4 +46,30 @@
|
||||
.productNameContainer{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.productNameContainer--pdp-name{
|
||||
@media screen and (max-width: 1024px){
|
||||
max-height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.image--pdp-imgpdp{
|
||||
@media screen and (min-width: 1920px){
|
||||
min-width: 334.4px;
|
||||
}
|
||||
}
|
||||
.nameContainer--pdp-name{
|
||||
justify-content: center;
|
||||
}
|
||||
.productBrand--pdp-name{
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
@media screen and (max-width: 1024px){
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,15 @@
|
||||
.container{
|
||||
&--pdp-specifications{
|
||||
justify-content: center;
|
||||
.wrapper--pdp-specifications{
|
||||
.heading{
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: #575757;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -90,15 +90,15 @@
|
||||
padding: 0 40px 0;
|
||||
.productImage{
|
||||
max-width:85.238%;
|
||||
@media screen and (min-width: 156.25em){
|
||||
@media screen and (min-width: 1920px){
|
||||
min-width: 904px;
|
||||
max-width:100%;
|
||||
}
|
||||
@media screen and (max-width: 64.0625em){
|
||||
@media screen and (max-width: 1024px){
|
||||
min-width: 296px;
|
||||
max-width:100%;
|
||||
}
|
||||
@media screen and (max-width: 23.375em){
|
||||
@media screen and (max-width: 375px){
|
||||
min-width: 0;
|
||||
max-width:100%;
|
||||
}
|
||||
@ -120,7 +120,7 @@
|
||||
width: max-content !important;
|
||||
background:white;
|
||||
margin-right: 1em;
|
||||
@media screen and (max-width: 64.0625em){
|
||||
@media screen and (max-width: 1024px){
|
||||
width: 30% !important;
|
||||
}
|
||||
.figure{
|
||||
@ -130,7 +130,7 @@
|
||||
.thumbImg{
|
||||
border-radius: 8px;
|
||||
min-height: 5.54em;
|
||||
@media screen and (max-width: 64.0625em){
|
||||
@media screen and (max-width: 1024px){
|
||||
min-height: 4.9em;
|
||||
}
|
||||
}
|
||||
@ -142,4 +142,36 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer{
|
||||
.productDescriptionTitle{
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
@media screen and (min-width: 1920px){
|
||||
font-size: 32px;
|
||||
}
|
||||
@media screen and (max-width: 1024px){
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
@media screen and (min-width: 1920px){
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
@media screen and (max-width: 1024px){
|
||||
font-size: 14px !important;
|
||||
line-height: 19px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -102,3 +102,40 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.sellingPriceValue--summary-pdp{
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
@media screen and (max-width: 1024px){
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
.sellingPrice--desconto{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
text-decoration-line: line-through;
|
||||
font-family: 'Open Sans',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #BABABA;
|
||||
margin-bottom: 8px;
|
||||
@media screen and (max-width: 1024px){
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.sellingPriceValue--desconto{
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
@media screen and (max-width: 1024px){
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -24,7 +24,7 @@
|
||||
} //375px
|
||||
}
|
||||
@if $breakpoint == phone {
|
||||
@media only screen and (max-width: 37.5em) {
|
||||
@media only screen and (max-width:1024px) {
|
||||
@content;
|
||||
} //600px
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
} //1200px
|
||||
}
|
||||
@if $breakpoint == big-desktop {
|
||||
@media only screen and (min-width: 112.5em) {
|
||||
@media only screen and (min-width: 1900px) {
|
||||
@content;
|
||||
} //1800px
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user