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

development #1

Merged
Vitor_soares merged 20 commits from development into master 2023-02-09 17:48:40 +00:00
Conversation 0 Commits 20 Files Changed 49 +228 -25
9 changed files with 228 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4ecde7b8d7 - Show all commits

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

@ -9,4 +9,11 @@
background: black;
border: none;
border-radius: 0;
width: 99.432%;
}
@media only screen and (max-width: 1024px) {
[class*="html--buy-button"] :global(.vtex-button) {
width: 100%;
}
}

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

@ -17,8 +17,14 @@
width: 100%;
}
.strechChildrenWidth {
width: 640px;
.stretchChildrenWidth {
margin: 0;
}
@media only screen and (max-width: 1025px) {
.stretchChildrenWidth {
width: 100% !important;
padding: 0 !important;
}
}
.flexRowContent--buy-button-row {

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

@ -11,8 +11,10 @@
/* Cores */
/* Grid breakpoints */
.imageNormal {
width: 314px;
width: 105%;
height: 314px;
max-height: unset;
max-width: 314px;
}
.brandName {

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

@ -28,6 +28,7 @@
border-right: none;
border-left: none;
border-color: #cccccc;
width: 32px;
}
:global(.vtex-numeric-stepper__minus-button) {
@ -69,8 +70,17 @@
}
.productImage .productImageTag {
width: unset !important;
max-height: unset !important;
width: 103% !important;
height: 100%;
max-height: 664px !important;
object-fit: contain;
max-width: 664px !important;
}
@media only screen and (max-width: 1025px) {
.productImage .productImageTag {
max-height: 100% !important;
max-width: 100% !important;
}
}
.carouselGaleryThumbs {
@ -208,6 +218,12 @@
.productImageTag {
max-width: 664px;
}
@media only screen and (max-width: 1025px) {
.productImageTag {
max-width: 100%;
max-height: max-content;
}
}
.address-form__field .input__label {
font-size: 40px;
@ -486,10 +502,18 @@
display: flex;
justify-content: center;
max-width: unset;
width: 53.75%;
width: 100%;
}
.newsletter .container .form {
max-width: 774px;
width: 100%;
padding-bottom: 16px;
margin: 0;
}
@media only screen and (max-width: 1025px) {
.newsletter .container .form {
max-width: 1024px;
}
}
.newsletter .container .form .label {
display: flex;
@ -507,12 +531,10 @@
line-height: 25px;
color: #929292;
}
.newsletter .input-group {
display: flex;
}
.newsletter .form {
width: 100%;
margin: 0;
@media only screen and (max-width: 1025px) {
.newsletter :global(.vtex-store-components-3-x-inputGroup) {
padding: 16px 16px 0;
}
}
.newsletter .buttonContainer {
padding: 0;

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

@ -28,6 +28,11 @@
.contentContainer {
padding: 0 32px;
}
@media only screen and (max-width: 1025px) {
.contentContainer {
padding: 16px 0 0 0;
}
}
.listContainer {
border-bottom: 1px solid #b9b9b9;
@ -36,6 +41,37 @@
padding: 0 64px;
margin-bottom: 32px;
}
@media only screen and (min-width: 1920px) {
.listContainer {
height: 49px;
}
}
@media only screen and (max-width: 1025px) {
.listContainer {
border-top: 1px solid #b9b9b9;
flex-direction: column;
height: fit-content;
padding: 16px 0 0 0;
margin: 0;
}
}
@media only screen and (max-width: 1025px) {
.listContainer .listItem {
align-self: flex-start;
flex-direction: column;
height: fit-content;
padding: 0 0 16px;
margin: 0;
}
}
.listContainer .listItem :global(.vtex-button) {
border: none;
}
@media only screen and (max-width: 1025px) {
.listContainer .listItem :global(.vtex-button) {
width: 100%;
}
}
.listContainer .listItem :global(.vtex-button):hover {
background-color: transparent;
}
@ -47,18 +83,57 @@
text-transform: capitalize;
padding: 0.25em 10px 0.32em;
}
@media only screen and (min-width: 1920px) {
.listContainer .listItem :global(.vtex-button__label) {
font-size: 24px;
line-height: 24px;
}
}
@media only screen and (max-width: 1025px) {
.listContainer .listItem :global(.vtex-button__label) {
text-align: left;
flex-direction: column;
height: fit-content;
padding: 0 !important;
font-size: 18px;
line-height: 18px;
}
}
@media only screen and (max-width: 1025px) {
.listContainer .listItemActive {
align-self: flex-start;
flex-direction: column;
height: fit-content;
padding: 0 0 16px;
margin: 0;
}
}
.listContainer .listItemActive :global(.vtex-button) {
background-color: #fff;
width: 114px;
border: none;
padding: 0;
}
@media only screen and (max-width: 1025px) {
.listContainer .listItemActive :global(.vtex-button) {
width: 100%;
}
}
.listContainer .listItemActive :global(.vtex-button__label) {
color: #000000;
background-color: #fff;
border-bottom: 2px solid #000000;
padding: 0;
}
@media only screen and (max-width: 1025px) {
.listContainer .listItemActive :global(.vtex-button__label) {
flex-direction: column;
text-align: left;
height: fit-content;
padding: 0;
border-bottom: none;
}
}
@media only screen and (max-width: 1025px) {
:global(.vtex-tab-layout-0-x-contentItem--content-render) :global(.vtex-flex-layout-0-x-flexRowContent) {

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

@ -5,8 +5,13 @@
width: 100%;
}
.strechChildrenWidth {
width: 640px;
.stretchChildrenWidth {
margin: 0;
@include mq(md, max) {
width: 100% !important;
padding: 0 !important;
}
}
.flexRowContent--buy-button-row {

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

@ -1,6 +1,8 @@
.imageNormal {
width: 314px;
width: 105%;
height: 314px;
max-height: unset;
max-width: 314px;
}
.brandName {

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

@ -14,6 +14,7 @@
border-right: none;
border-left: none;
border-color: $gray-200;
width: 32px;
}
:global(.vtex-numeric-stepper__minus-button) {
@ -61,8 +62,19 @@
.productImage {
.productImageTag {
width: unset !important;
max-height: unset !important;
width: 103% !important;
height: 100%;
max-height: 664px !important;
object-fit: contain;
max-width: 664px !important;
@include mq(md, max) {
max-height: 100% !important;
max-width: 100% !important;
}
// width: unset !important;
// max-height: unset !important;
}
}
@ -237,6 +249,11 @@ margin-top: 16px;
.productImageTag {
max-width: 664px;
@include mq(md, max) {
max-width: 100%;
max-height: max-content;
}
}
.address-form__field {
@ -581,12 +598,19 @@ margin-top: 16px;
display: flex;
justify-content: center;
max-width: unset;
width: 53.75%;
width: 100%;
// padding-top: 32px;
// margin: 0;
.form {
max-width: 774px;
width: 100%;
padding-bottom: 16px;
margin: 0;
@include mq(md, max) {
max-width: 1024px;
}
.label {
display: flex;
@ -610,13 +634,10 @@ margin-top: 16px;
}
}
.input-group {
display: flex;
}
.form {
width: 100%;
margin: 0;
:global(.vtex-store-components-3-x-inputGroup) {
@include mq(md, max) {
padding: 16px 16px 0;
}
}
.buttonContainer {

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

@ -16,6 +16,10 @@
.contentContainer {
padding: 0 32px;
@include mq(md, max) {
padding: 16px 0 0 0;
}
}
.listContainer {
@ -25,8 +29,33 @@
padding: 0 64px;
margin-bottom: 32px;
@include mq(xl, min) {
height: 49px;
}
@include mq(md, max) {
border-top: 1px solid $gray-500;
flex-direction: column;
height: fit-content;
padding: 16px 0 0 0;
margin: 0;
}
.listItem {
@include mq(md, max) {
align-self: flex-start;
flex-direction: column;
height: fit-content;
padding: 0 0 16px;
margin: 0;
}
:global(.vtex-button) {
border: none;
@include mq(md, max) {
width: 100%;
}
&:hover {
background-color: transparent;
@ -40,15 +69,41 @@
color: $gray-400;
text-transform: capitalize;
padding: 0.25em 10px 0.32em;
@include mq(xl, min) {
font-size: 24px;
line-height: 24px;
}
@include mq(md, max) {
text-align: left;
flex-direction: column;
height: fit-content;
padding: 0 !important;
font-size: 18px;
line-height: 18px;
}
}
}
.listItemActive {
@include mq(md, max) {
align-self: flex-start;
flex-direction: column;
height: fit-content;
padding: 0 0 16px;
margin: 0;
}
:global(.vtex-button) {
background-color: $white;
width: 114px;
border: none;
padding: 0;
@include mq(md, max) {
width: 100%;
}
}
:global(.vtex-button__label) {
@ -56,6 +111,14 @@
background-color: $white;
border-bottom: 2px solid $black;
padding: 0;
@include mq(md, max) {
flex-direction: column;
text-align: left;
height: fit-content;
padding: 0;
border-bottom: none;
}
}
}
}