HenriqueSantosSantana/challenge-vtex-io-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: created styles for large devices

Browse Source
This commit is contained in:
Henrique Santos Santana 2023-02-06 12:35:24 -03:00
parent 371c663c97
commit 68cefb0c52
22 changed files with 358 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -37,4 +37,5 @@ lib
react/package-lock.json
# alternatives
/.workspace
/.workspace
/workspace

4
.vtexignore
View File

@ -13,4 +13,6 @@ service/node_modules/
react/__tests__/**
react/.babelrc
react/.eslintrc
react/setupTests.js
react/setupTests.js
workspace
.workspace

1
manifest.json
View File

@ -37,6 +37,7 @@
"vtex.locale-switcher": "0.x",
"vtex.product-quantity": "1.x",
"vtex.product-identifier": "0.x",
"vtex.store-newsletter": "1.x",
"vtex.breadcrumb": "1.x",
"vtex.sticky-layout": "0.x",
"vtex.product-customizer": "2.x",

0
react/components/PixCustomInstallments/_PixCustomInstallments.module.scss Normal file
View File

0
react/components/PixCustomInstallments/_PixCustomInstallments.ts Normal file
View File

0
react/components/PixCustomInstallments/index.ts Normal file
View File

2
store/blocks/home/home.jsonc
View File

@ -9,7 +9,7 @@
"info-card#home",
"rich-text#question",
"rich-text#link",
"newsletter"
"flex-layout.row#newsletter"
]
},

65
store/blocks/newsletter.json Normal file
View File

@ -0,0 +1,65 @@
{
"flex-layout.row#newsletter": {
"props": {
"blockClass": "newsletter",
"preserveLayoutOnMobile": true
},
"children": ["newsletter-form"]
},
"newsletter-form": {
"props": {
"blockClass": "newsletter"
},
"children": [
"rich-text#newsletter-title",
"rich-text#newsletter-subtitle",
"flex-layout.row#newsletter-inputs"
]
},
"flex-layout.row#newsletter-inputs": {
"props": {
"preserveLayoutOnMobile": true,
"blockClass": "newsletterInputs",
"colSizing": "auto"
},
"children": ["newsletter-input-email", "newsletter-submit"]
},
"newsletter-input-email": {
"props": {
"placeholderText": "Digite seu E-mail",
"errorMessage": "E-mail ínvalido"
}
},
"newsletter-submit": {
"props": {
"submitButtonLabel": "ENVIAR"
}
},
"rich-text#newsletter-title": {
"props": {
"blockClass": "newsletterTitle",
"text": "## Assine nossa newsletter",
"textAlignment": "CENTER",
"textPosition": "CENTER",
"font": "t-body",
"textColor": "c-on-base--inverted"
}
},
"rich-text#newsletter-subtitle": {
"props": {
"blockClass": "newsletterSubtitle",
"text": "Receba ofertas e novidades por e-mail",
"textAlignment": "CENTER",
"textPosition": "CENTER",
"textColor": "c-on-base-300"
}
}
}

10
store/blocks/pdp/product-shelf.jsonc
View File

@ -27,6 +27,7 @@
"text": "## Você também pode gostar:",
"textPosition": "CENTER",
"textAlignment": "CENTER",
"textColor": "c-on-base-200",
"blockClass": "productShelfTitle"
}
},
@ -39,7 +40,6 @@
"(min-width:1025px)": 4,
"(min-width:768px)": 3,
"tablet": 2,
"phone": 2
},
"fullWidth": true
@ -59,6 +59,14 @@
"showBadge": false,
"alabelSellingPricespectRatio": "1:1",
"aspectRatio": "1:1",
"maxHeight": {
"(min-width: 1921px)": "434.4px",
"desktop": "314.4px",
"(min-width:1025px)": "314.4px",
"(min-width:768px)": "291.2px",
"tablet": "291.2px",
"phone": "124.8px"
},
"width": {
"(min-width: 1921px)": "434.4px",
"desktop": "314.4px",

44
store/blocks/pdp/product-specifications-table.jsonc
View File

@ -109,9 +109,18 @@
"flex-layout.row#product-specification-1": {
"props": {
"blockClass": "productSpecificationItemContainer",
"colGap": 7,
"colGap": {
"desktop": 7,
"(min-width:1025px)": 7,
"(min-iwdth:769px)": 0,
"tablet": 0,
"phone": 0
},
"marginTop": 7,
"rowGap": 5
"marginBottom": 5,
"border": "bottom",
"borderWidth": 1,
"borderColor": "action-third"
},
"children": [
@ -123,9 +132,18 @@
"flex-layout.row#product-specification-2": {
"props": {
"blockClass": "productSpecificationItemContainer",
"colGap": 7,
"colGap": {
"desktop": 7,
"(min-width:1025px)": 7,
"(min-iwdth:769px)": 0,
"tablet": 0,
"phone": 0
},
"marginTop": 7,
"rowGap": 5
"marginBottom": 5,
"border": "bottom",
"borderWidth": 1,
"borderColor": "action-third"
},
"children": [
@ -143,14 +161,28 @@
"flex-layout.row#description-1": {
"props": {
"marginBottom": 7
"marginBottom": 7,
"marginTop": {
"desktop": 0,
"(min-width:1025px)": 0,
"(min-width:769px)": 5,
"tablet": 5,
"phone": 5
}
},
"children": ["product-description#product-specification-1"]
},
"flex-layout.row#description-2": {
"props": {
"marginBottom": 7
"marginBottom": 7,
"marginTop": {
"desktop": 0,
"(min-width:1025px)": 0,
"(min-width:769px)": 5,
"tablet": 5,
"phone": 5
}
},
"children": ["product-description#product-specification-2"]
},

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

@ -6,7 +6,7 @@
"flex-layout.row#product-specifications",
"html#pdp-slider-shelf-title",
"html#list-context-pdp-shelf",
"newsletter",
"flex-layout.row#newsletter",
"product-questions-and-answers"
]
},
@ -56,14 +56,18 @@
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
"rowGap": 7,
"colGap": {
"desktop": 7,
"(min-width:1025px)": 7,
"tablet": 0,
"phone": 0
},
"marginTop": 5,
"marginBottom": 7,
"preserveLayoutOnMobile": false,
"blockClass": "productMain"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
"children": ["flex-layout.col#stack", "flex-layout.row#right-col"]
},
"stack-layout": {
@ -105,6 +109,18 @@
"rowGap": 0
}
},
"flex-layout.row#right-col": {
"props": {
"marginTop": {
"desktop": 0,
"(min-width:1025px)": 0,
"(min-width:769px)": 7,
"tablet": 7,
"phone": 7
}
},
"children": ["flex-layout.col#right-col"]
},
"flex-layout.col#right-col": {
"props": {
@ -169,6 +185,7 @@
"sku-selector": {
"props": {
"showValueForVariation": "none",
"variationsSpacing": 3,
"showValueNameForImageVariation": true
}

9
styles/configs/style.json
View File

@ -153,6 +153,7 @@
"border": {
"action-primary": "#000000",
"action-secondary": "#eef3f7",
"action-third": "#b9b9b9",
"emphasis": "#f71963",
"disabled": "#e3e4e6",
"success": "#8bc34a",
@ -201,6 +202,10 @@
},
"on": {
"base": "#B9B9B999",
"base-100": "#000000",
"base-200": "#575757",
"base-300": "#929292",
"base--inverted": "#ffffff",
"action-primary": "#ffffff",
"action-secondary": "#000000",
@ -263,8 +268,8 @@
},
"heading-2": {
"fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"fontWeight": "400",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},

59
styles/css/vtex.flex-layout.css
View File

@ -110,10 +110,12 @@
}
@media screen and (max-width: 1024px) {
.flexRowContent--productSpecificationItemContainer,
.flexRowContent--productAvailability,
.flexRowContent--productMain {
flex-direction: column !important;
}
.flexRowContent--productSpecificationItemContainer .stretchChildrenWidth,
.flexRowContent--productAvailability .stretchChildrenWidth,
.flexRowContent--productMain .stretchChildrenWidth {
width: 100% !important;
@ -172,4 +174,61 @@
.flexRow--productSpecificationItemContainer {
padding: 0 32px;
}
}
.flexRowContent--productSpecificationItemContainer {
border-width: 1px !important;
}
@media screen and (min-width: 1025px) {
.flexRowContent--productSpecificationItemContainer {
border: none;
}
}
.flexRow--newsletter {
background-color: #000;
margin-top: 32px;
}
@media screen and (min-width: 769px) {
.flexRow--newsletter {
margin-top: 64px;
}
}
.flexRow--newsletter .flexRowContent--newsletter {
max-width: 774px;
margin: 0 auto;
padding: 64px 16px 32px;
}
@media screen and (min-width: 1025px) {
.flexRow--newsletter .flexRowContent--newsletter {
padding: 32px 0px 16px;
}
}
.flexRowContent--newsletterInputs .stretchChildrenWidth:first-child {
flex-grow: 1;
}
.flexRowContent--newsletterInputs .stretchChildrenWidth:first-child :global(.vtex-input-prefix__group) {
border-radius: 0;
border: none;
}
.flexRowContent--newsletterInputs .stretchChildrenWidth:first-child :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
border-radius: 0;
background-color: #000;
padding-left: 0;
border-bottom: 1px solid #fff;
}
.flexRowContent--newsletterInputs :global(.vtex-store-newsletter-1-x-formSubmitContainer) :global(.vtex-button) {
position: relative;
border-radius: 0;
border: none;
}
.flexRowContent--newsletterInputs :global(.vtex-store-newsletter-1-x-formSubmitContainer) :global(.vtex-button)::before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
position: absolute;
left: 0;
bottom: 0px;
}

4
styles/css/vtex.product-summary.css
View File

@ -26,6 +26,10 @@
display: none;
}
}
.element {
padding: 0;
}
.nameContainer {
padding-top: 1rem;
padding-bottom: 1rem;

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

@ -14,10 +14,18 @@
font-size: 20px;
font-weight: 400;
line-height: 38px;
color: #575757;
margin: 0 0 24px;
}
@media screen and (min-width: 768px) {
@media screen and (min-width: 769px) {
.container--productShelfTitle .heading {
font-size: 24px;
}
}
.container--newsletterTitle .heading {
margin: 0;
}
.container--newsletterSubtitle .paragraph {
margin: 16px;
}

21
styles/css/vtex.slider-layout.css
View File

@ -43,9 +43,30 @@
width: 100%;
padding: 0 40px;
}
@media screen and (min-width: 1921px) {
.sliderLayoutContainer--productShelf {
width: 68.75%;
margin: 0 auto;
}
}
.sliderTrackContainer--productShelf {
padding-bottom: 33px;
}
@media screen and (min-width: 769px) {
.sliderTrackContainer--productShelf {
padding-bottom: 41px;
}
}
@media screen and (min-width: 1025px) {
.sliderTrackContainer--productShelf {
padding-bottom: 49px;
}
}
.paginationDotsContainer--productShelf {
align-items: center;
margin: 0;
}
.paginationDot--productShelf {

10
styles/css/vtex.store-components.css
View File

@ -292,4 +292,14 @@
content: "Avise-se";
font-size: 14px;
text-transform: uppercase;
}
.productDescriptionTitle {
font-size: 20px;
line-height: 32px;
}
@media screen and (min-width: 1025px) {
.productDescriptionTitle {
font-size: 24px;
}
}

63
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -102,6 +102,7 @@
padding: 0 40px;
}
.flexRowContent--productSpecificationItemContainer,
.flexRowContent--productAvailability,
.flexRowContent--productMain {
@media screen and (max-width: 1024px) {
@ -171,3 +172,65 @@
padding: 0 32px;
}
}
.flexRowContent--productSpecificationItemContainer {
border-width: 1px !important;
@media screen and (min-width: 1025px) {
border: none;
}
}
.flexRow--newsletter {
background-color: #000;
margin-top: 32px;
@media screen and (min-width: 769px) {
margin-top: 64px;
}
.flexRowContent--newsletter {
max-width: 774px;
margin: 0 auto;
padding: 64px 16px 32px;
@media screen and (min-width: 1025px) {
padding: 32px 0px 16px;
}
}
}
.flexRowContent--newsletterInputs {
.stretchChildrenWidth:first-child {
flex-grow: 1;
:global(.vtex-input-prefix__group) {
border-radius: 0;
border: none;
:global(.vtex-styleguide-9-x-input) {
border-radius: 0;
background-color: #000;
padding-left: 0;
border-bottom: 1px solid #fff;
}
}
}
:global(.vtex-store-newsletter-1-x-formSubmitContainer) {
:global(.vtex-button) {
position: relative;
border-radius: 0;
border: none;
&::before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
position: absolute;
left: 0;
bottom: 0px;
}
}
}
}

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

@ -18,6 +18,10 @@
}
}
.element {
padding: 0;
}
.nameContainer {
padding-top: 1rem;
padding-bottom: 1rem;

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

@ -5,10 +5,22 @@
font-size: 20px;
font-weight: 400;
line-height: 38px;
color: #575757;
margin: 0 0 24px;
@media screen and (min-width: 768px) {
@media screen and (min-width: 769px) {
font-size: 24px;
}
}
}
.container--newsletterTitle {
.heading {
margin: 0;
}
}
.container--newsletterSubtitle {
.paragraph {
margin: 16px;
}
}

18
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -33,10 +33,28 @@
.sliderLayoutContainer--productShelf {
width: 100%;
padding: 0 40px;
@media screen and (min-width: 1921px) {
width: 68.75%;
margin: 0 auto;
}
}
.sliderTrackContainer--productShelf {
padding-bottom: 33px;
@media screen and (min-width: 769px) {
padding-bottom: 41px;
}
@media screen and (min-width: 1025px) {
padding-bottom: 49px;
}
}
.paginationDotsContainer--productShelf {
align-items: center;
margin: 0;
}
.paginationDot--productShelf {

8
styles/sass/pages/product/vtex.store-components.scss
View File

@ -329,3 +329,11 @@
}
}
}
.productDescriptionTitle {
font-size: 20px;
line-height: 32px;
@media screen and (min-width: 1025px) {
font-size: 24px;
}
}