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

feat: adiciona query mobile

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-02-10 20:54:44 -03:00
parent 7157d1e7c2
commit 4ed3c142ee
12 changed files with 185 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,12 +35,23 @@
width: unset !important;
flex: 1;
}
@media (max-width: 768px) {
.flexRowContent--addToBag .stretchChildrenWidth:last-child {
padding: 0;
margin-top: 10px;
}
}
.flexRowContent--addToBag .stretchChildrenWidth:last-child :global(.vtex-button) {
background-color: #000000;
border: none;
height: 49px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.flexRowContent--addToBag .stretchChildrenWidth:last-child :global(.vtex-button) {
height: 74px;
}
}
:global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
@ -53,4 +64,10 @@
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
@media (max-width: 768px) {
:global(.vtex-add-to-cart-button-0-x-buttonText)::after {
width: 116px;
display: block;
}
}

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

@ -28,4 +28,8 @@
.element {
padding: 0;
}
.imageWrapper {
margin-bottom: 16px;
}

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

@ -13,6 +13,16 @@
margin-bottom: 32px;
margin-top: 0;
}
@media (max-width: 1024px) {
.heading {
margin-bottom: 24px;
}
}
@media (max-width: 768px) {
.heading {
margin-bottom: 16px;
}
}
.heading::after {
content: "Você também pode gostar:";
font-family: "Open Sans";
@ -22,6 +32,11 @@
line-height: 38px;
color: #575757;
}
@media (max-width: 768px) {
.heading::after {
font-size: 20px;
}
}
.container {
justify-content: center;

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

@ -43,7 +43,12 @@
}
.sliderRightArrow--carousel {
right: 20px;
right: 50px;
}
@media (max-width: 768px) {
.sliderRightArrow--carousel {
right: 10px;
}
}
.sliderRightArrow--carousel::after {
content: url(assets/right-arrow.png);
@ -56,7 +61,12 @@
}
.sliderLeftArrow--carousel {
left: 20px;
left: 50px;
}
@media (max-width: 768px) {
.sliderLeftArrow--carousel {
left: 10px;
}
}
.sliderLeftArrow--carousel::after {
content: url(assets/left-arrow.png);

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

@ -20,6 +20,12 @@
text-align: left;
}
}
@media (max-width: 768px) {
.productNameContainer--quickview .productBrand {
width: 220px !important;
display: block;
}
}
.skuSelectorContainer--sku-selector {
display: flex;
@ -121,6 +127,11 @@
width: 231px;
height: 49px;
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-input-prefix__group) {
width: 100%;
}
}
.shippingContainer :global(.vtex-button) {
position: absolute;
border: 0;
@ -129,6 +140,12 @@
top: 27px;
left: 229px;
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-button) {
right: 0;
left: unset;
}
}
.shippingContainer :global(.vtex-button__label) {
background-color: #000000;
width: 49px;
@ -148,6 +165,11 @@
padding: 0;
margin-top: 16px;
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
display: block;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
width: 280px;
}
@ -167,6 +189,12 @@
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
justify-content: right;
padding: 0;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :first-child {
font-style: normal;
font-weight: 400;
@ -178,6 +206,13 @@
top: 5px;
left: 37px;
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :first-child {
position: initial;
padding: 0;
padding-top: 8px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}
@ -196,6 +231,11 @@
margin-bottom: 32px;
}
}
@media (max-width: 768px) {
.carouselGaleryThumbs {
display: block !important;
}
}
.carouselGaleryThumbs :global(.vtex-store-components-3-x-thumbImg) {
width: 90px;
height: 90px;

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

@ -15,6 +15,12 @@
padding: 16px 24px 0 24px;
}
}
@media (max-width: 768px) {
.contentContainer {
padding-left: 0;
padding-right: 0;
}
}
.contentContainer .contentItem {
display: flex;
}
@ -149,4 +155,10 @@
line-height: 38px;
text-transform: capitalize;
color: #000000;
}
@media (max-width: 768px) {
.container--description {
padding: 0 40px;
}
}

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

@ -27,11 +27,20 @@
width: unset !important;
flex: 1;
@media (max-width: 768px) {
padding: 0;
margin-top: 10px;
}
:global(.vtex-button) {
background-color: #000000;
border: none;
height: 49px;
box-sizing: border-box;
@media (max-width: 768px) {
height: 74px;
}
}
}
}
@ -47,5 +56,10 @@
font-size: 18px;
line-height: 25px;
color: #ffffff;
@media (max-width: 768px) {
width: 116px;
display: block;
}
}
}

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

@ -20,3 +20,7 @@
.element {
padding: 0;
}
.imageWrapper {
margin-bottom: 16px;
}

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

@ -2,6 +2,13 @@
font-size: 0;
margin-bottom: 32px;
margin-top: 0;
@media (max-width: 1024px) {
margin-bottom: 24px;
}
@media (max-width: 768px) {
margin-bottom: 16px;
}
&::after {
content: "Você também pode gostar:";
@ -11,6 +18,10 @@
font-size: 24px;
line-height: 38px;
color: #575757;
@media (max-width: 768px) {
font-size: 20px;
}
}
}

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

@ -33,7 +33,11 @@
}
.sliderRightArrow--carousel {
right: 20px;
right: 50px;
@media (max-width: 768px) {
right: 10px;
}
&::after {
content: url(assets/right-arrow.png);
height: 30px;
@ -47,7 +51,10 @@
}
.sliderLeftArrow--carousel {
left: 20px;
left: 50px;
@media (max-width: 768px) {
left: 10px;
}
&::after {
content: url(assets/left-arrow.png);
height: 30px;

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

@ -9,6 +9,13 @@
@media (max-width: 1024px) {
text-align: left;
}
.productBrand {
@media (max-width: 768px) {
width: 220px !important;
display: block;
}
}
}
.skuSelectorContainer--sku-selector {
@ -117,6 +124,10 @@
:global(.vtex-input-prefix__group) {
width: 231px;
height: 49px;
@media (max-width: 768px) {
width: 100%;
}
}
:global(.vtex-button) {
position: absolute;
@ -125,6 +136,11 @@
height: 49px;
top: 27px;
left: 229px;
@media (max-width: 768px) {
right: 0;
left: unset;
}
}
:global(.vtex-button__label) {
background-color: #000000;
@ -144,6 +160,11 @@
display: flex;
padding: 0;
margin-top: 16px;
@media (max-width: 768px) {
display: block;
}
:global(.vtex-input) {
width: 280px;
}
@ -163,6 +184,12 @@
:global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
align-items: center;
@media (max-width: 768px) {
justify-content: right;
padding: 0;
}
:first-child {
font-style: normal;
font-weight: 400;
@ -173,6 +200,12 @@
position: relative;
top: 5px;
left: 37px;
@media (max-width: 768px) {
position: initial;
padding: 0;
padding-top: 8px;
}
}
:global(.vtex__icon-external-link) {
display: none;
@ -190,6 +223,10 @@
@media (max-width: 1024px) {
margin-bottom: 32px;
}
@media (max-width: 768px) {
display: block !important;
}
:global(.vtex-store-components-3-x-thumbImg) {
width: 90px;
height: 90px;

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

@ -3,6 +3,10 @@
@media (max-width: 1024px) {
padding: 16px 24px 0 24px;
}
@media (max-width: 768px) {
padding-left: 0;
padding-right: 0;
}
.contentItem {
display: flex;
@ -135,3 +139,9 @@
color: #000000;
}
}
.container--description {
@media (max-width: 768px) {
padding: 0 40px;
}
}