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

feature/productPurchase #19

Merged
SavioCarvalhoMoraes merged 6 commits from feature/productPurchase into development 2023-02-10 14:02:29 +00:00
Conversation 0 Commits 6 Files Changed 12 +234 -96
9 changed files with 234 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8a5c9887e4 - Show all commits

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

@ -42,4 +42,11 @@
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.flexRowContent {
display: flex;
flex-direction: column;
}
}

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

@ -1,42 +1,10 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
border-radius: 50%;
}
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
.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;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
text-align: center;
}
.image {
border-radius: 0.25rem;
}
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */

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

@ -178,24 +178,97 @@
color: #929292;
}
/*
.newsletter {
margin-top: 64px;
}
.newsletter .container {
display: flex;
height: 175px;
padding: 0 0 0 0;
background: black;
align-items: center;
justify-content: center;
}
.newsletter .container .label {
border-bottom: 1px solid #ffffff;
margin: 0;
display: flex;
flex-direction: column;
font-size: 0;
justify-content: center;
align-items: center;
.container {
display: flex;
//height: 175px;
//padding: 0 0 0 0;
//background: black;
align-items: center;
justify-content: center;
.label {
display: flex;
flex-direction: column;
font-size: 0;
&::before {
content: "Assine nossa Newsletter";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #ffffff;
}
&::after {
content: "Receba ofertas e novidades por e-mail";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #929292;
}
}
:global(.vtex-input-prefix__group) {
display: flex;
justify-content: center;
width: 774px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #929292;
}
:global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0 0 0 0;
}
:global(.vtex-button) {
position: relative;
left: 145px;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 3px solid #bfbfbf;
&:hover {
border-bottom: 5px solid #bfbfbf;
}
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #ffffff;
border: 1px solid #000000;
text-transform: uppercase;
}
}
}
}
.newsletter .container .label::before {
content: "Assine nossa Newsletter";
*/
.newsletter {
background: black;
border-bottom: 1px solid #ffffff;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.label {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
@ -203,49 +276,41 @@
line-height: 38px;
text-align: center;
color: #ffffff;
border: none;
}
.newsletter .container .label::after {
.label::after {
content: "Receba ofertas e novidades por e-mail";
font-family: "Open Sans";
font-family: sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #929292;
}
.newsletter .container :global(.vtex-input-prefix__group) {
display: flex;
justify-content: center;
width: 774px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #929292;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.newsletter .container :global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0 0 0 0;
}
.newsletter .container :global(.vtex-button) {
position: relative;
left: 145px;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 3px solid #bfbfbf;
}
.newsletter .container :global(.vtex-button):hover {
border-bottom: 5px solid #bfbfbf;
}
.newsletter .container :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
.productDescriptionTitle {
font-family: sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #ffffff;
border: 1px solid #000000;
text-transform: uppercase;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
margin-bottom: 8px;
}
.productDescriptionText {
text-align: left;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.container {
display: flex;
flex-direction: column;
}
}

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

@ -61,4 +61,20 @@
display: flex;
flex-direction: row;
gap: 32px;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.listContainer {
display: flex;
flex-direction: column;
}
.contentItem {
display: flex;
flex-direction: column;
border-bottom: 1px solid #b9b9b9;
padding-bottom: 16px;
}
.productDescriptionText {
text-align: justify;
}
}

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

@ -33,3 +33,9 @@
}
}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.flexRowContent {
display: flex;
flex-direction: column;
}
}

2
styles/sass/pages/product/vtex.product-summary.scss Normal file
View File

@ -0,0 +1,2 @@
@media screen and (max-width: 1024px) and (min-width: 768px) {
}

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

@ -10,3 +10,5 @@
display: flex;
justify-content: center;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
}

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

@ -181,14 +181,20 @@
color: #929292;
}
}
/*
.newsletter {
margin-top: 64px;
background: black;
border-bottom: 1px solid #ffffff;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.container {
display: flex;
height: 175px;
padding: 0 0 0 0;
background: black;
//height: 175px;
//padding: 0 0 0 0;
//background: black;
align-items: center;
justify-content: center;
.label {
@ -254,6 +260,57 @@
}
}
}
@media screen and (max-width: 1024px) {
*/
.newsletter {
background: black;
border-bottom: 1px solid #ffffff;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.label {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #ffffff;
border: none;
}
.label::after {
content: "Receba ofertas e novidades por e-mail";
font-family: sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #929292;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.productDescriptionTitle {
font-family: sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
margin-bottom: 8px;
}
.productDescriptionText {
text-align: left;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.container {
display: flex;
flex-direction: column;
}
}

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

@ -52,3 +52,18 @@
flex-direction: row;
gap: 32px;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.listContainer {
display: flex;
flex-direction: column;
}
.contentItem {
display: flex;
flex-direction: column;
border-bottom: 1px solid #b9b9b9;
padding-bottom: 16px;
}
.productDescriptionText {
text-align: justify;
}
}