SabrinaMiranda/challenge-vtex-io-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/sabrinamiranda #1

Merged
SabrinaMiranda merged 33 commits from feature/sabrinamiranda into master 2023-02-10 23:17:10 +00:00
Conversation 0 Commits 33 Files Changed 56 +428 -63
14 changed files with 428 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 07a8c1d92a - Show all commits

11
react/components/Html/styles.css
View File

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

59
store/blocks/pdp/product.jsonc
View File

@ -6,8 +6,10 @@
"html#product-description",
//"html#specifications-title",
//"product-specification-group#table",
"shelf.relatedProducts",
//"shelf.relatedProducts",
"product-questions-and-answers",
"rich-text#shelf-title",
"list-context.product-list#shelf",
"html#newsletter"
]
},
@ -425,7 +427,7 @@
"rich-text#newsletter-title": {
"props": {
"text": "Assine nossa newsletter",
"text": "# Assine nossa newsletter",
"blockClass": "newsletter-title"
}
},
@ -435,6 +437,57 @@
"blockClass": "newsletter"
},
"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"]
}
}

2
styles/css/vtex.breadcrumb.css
View File

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

41
styles/css/vtex.product-price.css
View File

@ -22,4 +22,45 @@
.installments-highlight--m3-custom-installments {
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;
}
}

69
styles/css/vtex.product-summary.css
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) {
opacity: 0;
transition: opacity 200ms ease-in-out;
.productBrand {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #000000;
}
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 1;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
@media screen and (max-width: 1024px) {
.productBrand {
font-size: 14px;
line-height: 19px;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
.containerNormal {
margin: 0;
}
@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 {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
text-align: center;
}
.image {
border-radius: 0.25rem;
}
.element {
padding: 0;
}

25
styles/css/vtex.rich-text.css
View File

@ -24,4 +24,29 @@
.headingLevel1--newsletter-title {
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;
}
}

104
styles/css/vtex.slider-layout.css
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 {
background-color: #F0F0F0;
min-height: 450px;
width: 90%;
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 {
max-width: 100%;
.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 {
margin-top: .5rem;
margin-bottom: .5rem;
align-items: center;
bottom: -17px;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
.sliderRightArrow--carousel,
.sliderLeftArrow--carousel {
padding: 0;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
.sliderRightArrow--carousel {
right: -32px;
}
@media screen and ((min-width: 769px) and (max-width: 1024px)) {
.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;
}
}

4
styles/css/vtex.tab-layout.css
View File

@ -28,7 +28,7 @@
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 {
width: 92.1875%;
}
@ -60,7 +60,7 @@
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 {
width: 92.1875%;
}

2
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -6,7 +6,7 @@
@media screen and (min-width: 1920px) {
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%;
}
@media screen and (max-width: 768px) {

40
styles/sass/pages/product/vtex.product-price.scss
View File

@ -14,3 +14,43 @@
.installments-highlight--m3-custom-installments {
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;
}
}

31
styles/sass/pages/product/vtex.product-summary.scss Normal file
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;
}

23
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -15,3 +15,26 @@
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;
}
}

76
styles/sass/pages/product/vtex.slider-layout.scss Normal file
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;
}
}

4
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -18,7 +18,7 @@
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%;
}
@ -47,7 +47,7 @@
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%;
}