feature/sabrinamiranda #1

Merged
SabrinaMiranda merged 33 commits from feature/sabrinamiranda into master 2023-02-10 23:17:10 +00:00
14 changed files with 428 additions and 63 deletions
Showing only changes of commit 07a8c1d92a - Show all commits

View File

@ -257,6 +257,12 @@
[class*="html--newsletter"] { [class*="html--newsletter"] {
padding: 64px 0 32px 0; padding: 64px 0 32px 0;
margin-top: 17px;
}
@media screen and (max-width: 768px) {
[class*="html--newsletter"] {
padding-top: 32px;
}
} }
[class*="html--newsletter"] input { [class*="html--newsletter"] input {
@ -312,3 +318,8 @@
position: relative; position: relative;
} }
} }
[class*="html--product-summary-shelf"] {
display: flex;
flex-direction: column;
}

View File

@ -6,8 +6,10 @@
"html#product-description", "html#product-description",
//"html#specifications-title", //"html#specifications-title",
//"product-specification-group#table", //"product-specification-group#table",
"shelf.relatedProducts", //"shelf.relatedProducts",
"product-questions-and-answers", "product-questions-and-answers",
"rich-text#shelf-title",
"list-context.product-list#shelf",
"html#newsletter" "html#newsletter"
] ]
}, },
@ -425,7 +427,7 @@
"rich-text#newsletter-title": { "rich-text#newsletter-title": {
"props": { "props": {
"text": "Assine nossa newsletter", "text": "# Assine nossa newsletter",
"blockClass": "newsletter-title" "blockClass": "newsletter-title"
} }
}, },
@ -435,6 +437,57 @@
"blockClass": "newsletter" "blockClass": "newsletter"
}, },
"children": ["rich-text#newsletter-title" , "newsletter#newsletter-product"] "children": ["rich-text#newsletter-title" , "newsletter#newsletter-product"]
} },
"rich-text#shelf-title": {
"props": {
"text": "#### Você também pode gostar:",
"blockClass": "shelf-title"
}
},
"slider-layout#shelf": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"showNavigationArrows": "always",
"blockClass": "carousel",
"showPaginationDots": "always",
"fullWidth": true
}
},
"html#slider-layout-shelf": {
"props": {
"blockClass": "slider-layout-shelf",
"testId": "product-summary-list"
},
"children": ["slider-layout#shelf"]
},
"product-summary.shelf#product-summary": {
"children": ["html#product-summary-shelf"]
},
"html#product-summary-shelf": {
"props": {
"blockClass": "product-summary-shelf",
"testId": "vtex-product-summary"
},
"children": [
"product-summary-image#shelf",
"product-summary-name",
"product-list-price#summary",
"product-selling-price#summary"
]
},
"list-context.product-list#shelf": {
"blocks": ["product-summary.shelf#product-summary"],
"children": ["html#slider-layout-shelf"]
}
} }

View File

@ -17,7 +17,7 @@
width: 71.875%; width: 71.875%;
} }
} }
@media screen and ((min-width: 769) and (max-width: 1024px)) { @media screen and ((min-width: 769px) and (max-width: 1024px)) {
.container { .container {
width: 92.1875%; width: 92.1875%;
} }

View File

@ -23,3 +23,44 @@
.installments-highlight--m3-custom-installments { .installments-highlight--m3-custom-installments {
font-weight: 700; font-weight: 700;
} }
.listPriceValue--summary {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: #BABABA;
}
@media screen and (max-width: 1024px) {
.listPriceValue--summary {
font-size: 12px;
line-height: 16px;
}
}
.listPriceValue--summary::before {
content: "de ";
}
.listPriceValue--summary::after {
content: " por";
}
.sellingPrice--summary--hasListPrice {
font-size: 24px;
line-height: 33px;
margin-top: 8px;
margin-bottom: 32px;
}
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
.sellingPrice--summary--hasListPrice {
font-size: 18px;
line-height: 25px;
margin-bottom: 24px;
}
}
@media screen and (max-width: 768px) {
.sellingPrice--summary--hasListPrice {
font-size: 18px;
line-height: 25px;
margin-bottom: 16px;
}
}

View File

@ -1,42 +1,43 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { /*
border-radius: 50%; 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 */
.nameContainer {
padding: 16px 0 8px 0;
} }
.container :global(.vtex-modal-layout-0-x-triggerContainer) { .productBrand {
opacity: 0; font-weight: 400;
transition: opacity 200ms ease-in-out; font-size: 18px;
line-height: 25px;
color: #000000;
} }
@media screen and (max-width: 1024px) {
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { .productBrand {
opacity: 1; font-size: 14px;
} line-height: 19px;
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
} }
} }
.nameContainer { .containerNormal {
justify-content: start; margin: 0;
padding-top: 1rem; }
padding-bottom: 1rem; @media screen and ((min-width: 769px) and (max-width: 1024px)) {
.containerNormal {
margin: 0 12px;
}
}
@media screen and (max-width: 768px) {
.containerNormal {
margin: 0 8px;
}
} }
.brandName { .element {
font-weight: 600; padding: 0;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
text-align: center;
}
.image {
border-radius: 0.25rem;
} }

View File

@ -25,3 +25,28 @@
margin-top: 64px; margin-top: 64px;
} }
} }
.heading-level-4 {
margin: 0;
}
.container--shelf-title {
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
padding: 16px 0 32px 0;
justify-content: center;
}
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
.container--shelf-title {
padding-bottom: 24px;
}
}
@media screen and (max-width: 768px) {
.container--shelf-title {
font-size: 20px;
padding-bottom: 16px;
}
}

View File

@ -1,31 +1,95 @@
.sliderLayoutContainer { /*
justify-content: center; 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 */
.sliderLayoutContainer--carousel { .sliderLayoutContainer--carousel {
background-color: #F0F0F0; width: 90%;
min-height: 450px; margin: 0 auto;
}
@media screen and (min-width: 1920px) {
.sliderLayoutContainer--carousel {
width: 69.375%;
}
}
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
.sliderLayoutContainer--carousel {
width: 92.1875%;
}
}
@media screen and (max-width: 768px) {
.sliderLayoutContainer--carousel {
width: 79%;
}
} }
.sliderTrackContainer { .paginationDot {
max-width: 100%; height: 10px;
width: 10px;
background-color: #000000;
padding: 0;
margin: 0 6px;
}
.paginationDot--isActive {
height: 17px !important;
width: 17px !important;
border: 0.5px solid #000000;
background-color: #FFFFFF;
} }
.paginationDotsContainer { .paginationDotsContainer {
margin-top: .5rem; align-items: center;
margin-bottom: .5rem; bottom: -17px;
} }
.layoutContainer--shelf { .sliderRightArrow--carousel,
margin-top: 20px; .sliderLeftArrow--carousel {
margin-bottom: 20px; padding: 0;
max-width: 96rem;
min-height: 550px;
} }
.slide--shelf { .sliderRightArrow--carousel {
margin-bottom: 25px; right: -32px;
padding-left: .5rem; }
padding-right: .5rem; @media screen and ((min-width: 769px) and (max-width: 1024px)) {
min-height: 550px; .sliderRightArrow--carousel {
right: -24px;
}
}
@media screen and (max-width: 768px) {
.sliderRightArrow--carousel {
right: -16px;
}
}
.sliderLeftArrow--carousel {
left: -32px;
}
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
.sliderLeftArrow--carousel {
left: -24px;
}
}
@media screen and (max-width: 768px) {
.sliderLeftArrow--carousel {
left: -16px;
}
}
.sliderTrack--carousel {
gap: 16px;
}
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
.sliderTrack--carousel {
gap: 12px;
}
}
@media screen and (max-width: 768px) {
.sliderTrack--carousel {
gap: 8px;
}
} }

View File

@ -28,7 +28,7 @@
width: 71.875%; width: 71.875%;
} }
} }
@media screen and ((min-width: 769) and (max-width: 1024px)) { @media screen and ((min-width: 769px) and (max-width: 1024px)) {
.listContainer--list-product { .listContainer--list-product {
width: 92.1875%; width: 92.1875%;
} }
@ -60,7 +60,7 @@
padding-top: 64px; padding-top: 64px;
} }
} }
@media screen and ((min-width: 769) and (max-width: 1024px)) { @media screen and ((min-width: 769px) and (max-width: 1024px)) {
.contentContainer--content-product { .contentContainer--content-product {
width: 92.1875%; width: 92.1875%;
} }

View File

@ -6,7 +6,7 @@
@media screen and (min-width: 1920px) { @media screen and (min-width: 1920px) {
width: 71.875%; width: 71.875%;
} }
@media screen and ((min-width: 769) and (max-width: 1024px)) { @media screen and ((min-width: 769px) and (max-width: 1024px)) {
width: 92.1875%; width: 92.1875%;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {

View File

@ -14,3 +14,43 @@
.installments-highlight--m3-custom-installments { .installments-highlight--m3-custom-installments {
font-weight: 700; font-weight: 700;
} }
.listPriceValue--summary {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: #BABABA;
@media screen and (max-width: 1024px){
font-size: 12px;
line-height: 16px;
}
&::before {
content: "de ";
}
&::after {
content: " por";
}
}
.sellingPrice--summary--hasListPrice {
font-size: 24px;
line-height: 33px;
margin-top: 8px;
margin-bottom: 32px;
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
font-size: 18px;
line-height: 25px;
margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
font-size: 18px;
line-height: 25px;
margin-bottom: 16px;
}
}

View File

@ -0,0 +1,31 @@
.nameContainer {
padding: 16px 0 8px 0;
}
.productBrand {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #000000;
@media screen and (max-width: 1024px){
font-size: 14px;
line-height: 19px;
}
}
.containerNormal {
margin: 0;
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
margin: 0 12px;
}
@media screen and (max-width: 768px) {
margin: 0 8px;
}
}
.element {
padding: 0;
}

View File

@ -15,3 +15,26 @@
margin-top: 64px; margin-top: 64px;
} }
} }
.heading-level-4 {
margin: 0;
}
.container--shelf-title {
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
padding: 16px 0 32px 0;
justify-content: center;
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
padding-bottom: 24px;
}
@media screen and (max-width: 768px) {
font-size: 20px;
padding-bottom: 16px;
}
}

View File

@ -0,0 +1,76 @@
.sliderLayoutContainer--carousel {
width: 90%;
margin: 0 auto;
@media screen and (min-width: 1920px) {
width: 69.375%;
}
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
width: 92.1875%;
}
@media screen and (max-width: 768px) {
width: 79%;
}
}
.paginationDot {
height: 10px;
width: 10px;
background-color: #000000;
padding: 0;
margin: 0 6px;
}
.paginationDot--isActive {
height: 17px !important;
width: 17px !important;
border: 0.5px solid #000000;
background-color: #FFFFFF;
}
.paginationDotsContainer {
align-items: center;
bottom: -17px;
}
.sliderRightArrow--carousel,
.sliderLeftArrow--carousel {
padding: 0;
}
.sliderRightArrow--carousel {
right: -32px;
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
right: -24px;
}
@media screen and (max-width: 768px) {
right: -16px;
}
}
.sliderLeftArrow--carousel {
left: -32px;
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
left: -24px;
}
@media screen and (max-width: 768px) {
left: -16px;
}
}
.sliderTrack--carousel {
gap: 16px;
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
gap: 12px;
}
@media screen and (max-width: 768px) {
gap: 8px;
}
}

View File

@ -18,7 +18,7 @@
width: 71.875%; width: 71.875%;
} }
@media screen and ((min-width: 769) and (max-width: 1024px)) { @media screen and ((min-width: 769px) and (max-width: 1024px)) {
width: 92.1875%; width: 92.1875%;
} }
@ -47,7 +47,7 @@
padding-top: 64px; padding-top: 64px;
} }
@media screen and ((min-width: 769) and (max-width: 1024px)) { @media screen and ((min-width: 769px) and (max-width: 1024px)) {
width: 92.1875%; width: 92.1875%;
} }