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

develop #3

Merged
victor_souza merged 21 commits from develop into master 2023-02-10 19:01:56 +00:00
Conversation 0 Commits 21 Files Changed 56 +281 -107
17 changed files with 281 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e17c4ccc25 - Show all commits

2
react/components/Html/index.tsx
View File

@ -1,5 +1,7 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.css"
const CSS_HANDLES = ["html"] as const;

28
react/components/Html/styles.css Normal file
View File

@ -0,0 +1,28 @@
/* estilização do botão da sacola */
[class*="m3-boxBuy"] {
display: flex;
gap:10px;
margin-bottom: 16px;
}
[class*="html--m3buyButton"] >[class*="button"] {
width: 100%;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
background-color: black;
height: 49px;
}

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

@ -304,7 +304,7 @@
"html#add-to-cart-button": {
"props":{
"testId": "add-to-cart-button",
"blockClass": "m3-buyButton"
"blockClass": "m3buyButton"
},
"children":["add-to-cart-button"]
},
@ -385,7 +385,8 @@
// },
"html#sku-selector": {
"props":{
"testId": "sku-selector"
"testId": "sku-selector",
"blockClass": "m3-skuSelector"
},
"children":["sku-selector"]
},

12
styles/css/vtex.add-to-cart-button.css
View File

@ -9,14 +9,4 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
/*font*/
/*colors*/
/* Grid breakpoints */
.m3-buyButton :global(.vtex-button) {
background-color: black;
height: 49px;
}
.m3-boxBuy {
display: flex;
flex-direction: row;
background-color: green;
}
/* Grid breakpoints */

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

@ -47,4 +47,10 @@
font-size: 14px;
line-height: 19px;
color: #929292;
}
@media (min-width: 1900px) {
.container {
padding-left: 70px;
}
}

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

@ -27,25 +27,9 @@
width: 0;
}
.flexRow--m3-buyButton {
width: 100%;
}
.flexRow--m3-buyButton .buttonText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
}
.flexRow--m3-buyButton :global(.vtex-button) {
background-color: black;
height: 49px;
}
.-html--m3-boxBuy {
background-color: red;
@media (min-width: 768px) and (max-width: 1024px) {
.flexRowContent {
display: flex;
flex-direction: column;
}
}

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

@ -54,4 +54,12 @@
.imageContainer .imageNormal {
width: 100%;
height: 100%;
}
@media (min-width: 768px) and (max-width: 1024px) {
.imageContainer {
margin-bottom: 16px;
width: 200px;
height: 200px;
}
}

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

@ -9,4 +9,9 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
/*font*/
/*colors*/
/* Grid breakpoints */
/* Grid breakpoints */
@media (min-width: 768px) and (max-width: 1024px) {
.sliderLayoutContainer--carousel {
padding: 24px 62px;
}
}

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

@ -19,10 +19,34 @@
justify-content: center;
align-items: center;
}
.container {
.newsletter :global(.vtex-button) {
position: relative;
right: 40px;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 3px solid #bfbfbf;
}
.newsletter :global(.vtex-button):hover {
border-bottom: 5px solid #bfbfbf;
}
.newsletter :global(.vtex-input-prefix__group) {
display: flex;
justify-content: center;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #929292;
border-radius: 0;
}
.newsletter :global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0 0 0 0;
width: 774px;
}
.newsletter .container {
max-width: 100%;
padding: 0;
padding: 32px 0 16px 0;
margin: 0;
}
@ -39,7 +63,7 @@
.label::after {
content: "Receba ofertas e novidades por e-mail";
font-family: sans-serif;
font-family: "Opens Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
@ -53,7 +77,7 @@
}
.productDescriptionTitle {
font-family: sans-serif;
font-family: "Opens Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
@ -88,14 +112,32 @@
.shippingTableHeadDeliveryName {
display: flex;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.shippingTableHeadDeliveryEstimate {
display: flex;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.shippingTableHeadDeliveryPrice {
display: flex;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.shippingTableRow {
@ -112,16 +154,40 @@
grid-area: t;
padding: 0;
margin-bottom: 15px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
.shippingTableCellDeliveryEstimate {
grid-area: d;
padding: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
.shippingTableCellDeliveryPrice {
grid-area: p;
padding: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
.shareContainer {
@ -138,8 +204,14 @@
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
content: "Ok";
color: white;
font-size: 10px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {

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

@ -45,4 +45,18 @@
background-color: white;
padding: 0 16px;
text-transform: initial;
}
@media (min-width: 768px) and (max-width: 1024px) {
.listContainer {
display: flex;
flex-direction: column;
padding-left: 40px;
padding-right: 40px;
}
.contentItem {
display: flex;
flex-direction: column;
padding: 32px 40px 16px 40px;
}
}

30
styles/sass/pages/product/vtex.add-to-cart-button.scss
View File

@ -1,30 +0,0 @@
// .flexRow--m3-buyButton {
// width: 100%;
// .buttonText {
// font-family: 'Open Sans';
// font-style: normal;
// font-weight: 400;
// font-size: 18px;
// line-height: 25px;
// display: flex;
// align-items: center;
// text-align: center;
// color: #FFFFFF;
// }
// :global(.vtex-button) {
// background-color: black;
// height: 49px;
// }
// }
.m3-buyButton {
:global(.vtex-button) {
background-color: black;
height: 49px;
}
}
.m3-boxBuy {
display: flex;
flex-direction: row;
background-color: green;
}

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

@ -47,3 +47,9 @@
}
}
}
@media (min-width:1900px) {
.container {
padding-left: 70px;
}
}

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

@ -4,7 +4,6 @@
padding: 0;
margin:0;
}
.flexCol--stack {
padding-left: 40px;
}
@ -17,24 +16,9 @@
width:0;
}
.flexRow--m3-buyButton {
width: 100%;
.buttonText {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
@media (min-width:768px) and (max-width:1024px) {
.flexRowContent {
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
}
:global(.vtex-button) {
background-color: black;
height: 49px;
flex-direction: column;
}
}
.-html--m3-boxBuy {
background-color: red;
}

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

@ -44,3 +44,12 @@
height: 100%;
}
}
@media (min-width:768px) and (max-width:1024px) {
.imageContainer {
margin-bottom: 16px;
// background-color: #EDEDED;
width: 200px;
height: 200px;
}
}

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

@ -1,5 +1,10 @@
// .slideChildrenContainer{
// width: 314.4px;
// height: 448.4px;
// .sliderLayoutContainer--carousel {
// padding: ;
// }
@media (min-width:768px) and (max-width:1024px) {
.sliderLayoutContainer--carousel {
padding: 24px 62px;
}
}

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

@ -6,12 +6,38 @@
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
max-width: 100%;
padding: 0;
margin:0;
:global(.vtex-button) {
position: relative;
right: 40px;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 3px solid #bfbfbf;
&:hover {
border-bottom: 5px solid #bfbfbf;
}
}
:global(.vtex-input-prefix__group) {
display: flex;
justify-content: center;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #929292;
border-radius: 0;
}
:global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0 0 0 0;
width: 774px;
}
.container {
max-width: 100%;
padding: 32px 0 16px 0;
margin:0;
}
}
.label {
@ -26,7 +52,7 @@
}
.label::after {
content: "Receba ofertas e novidades por e-mail";
font-family: sans-serif;
font-family:'Opens Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
@ -40,7 +66,7 @@
}
.productDescriptionTitle {
font-family:sans-serif;
font-family:'Opens Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
@ -78,12 +104,30 @@
}
.shippingTableHeadDeliveryName {
display: flex;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.shippingTableHeadDeliveryEstimate {
display: flex;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.shippingTableHeadDeliveryPrice {
display: flex;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
//estilização das colunas
@ -100,16 +144,40 @@
grid-area: t;
padding: 0;
margin-bottom: 15px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
.shippingTableCellDeliveryEstimate {
grid-area:d;
padding: 0;
grid-area:d;
padding: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
.shippingTableCellDeliveryPrice {
grid-area: p;
padding: 0;
grid-area: p;
padding: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
.shareContainer {
@ -125,8 +193,15 @@
font-size: 0;
&::after {
content: "Ok";
color:white;
font-size: 10px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
}
}
}
@ -252,5 +327,7 @@
margin: auto;
}
}
}

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

@ -38,4 +38,17 @@
}
}
@media (min-width:768px) and (max-width:1024px) {
.listContainer {
display: flex;
flex-direction: column;
padding-left: 40px;
padding-right: 40px;
}
.contentItem {
display: flex;
flex-direction: column;
padding: 32px 40px 16px 40px;
}
}