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

feat: css mobile

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-02-07 22:08:34 -03:00
parent e19920424b
commit 14f3177d73
10 changed files with 250 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
react/components/Html/style.css
View File

@ -1,6 +1,5 @@
[class*='html--Quantity-Button'] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
@ -22,3 +21,23 @@
display: flex;
flex-direction: column;
}
[class*='html--codigo'] {
margin-bottom: 16px;
}
[class*='html--product-installments'] {
margin-bottom: 8px;
}
@media (max-width: 576px) {
[class*='html--Quantity-Button'] {
flex-direction: column;
}
}
@media (min-width: 577px) {
[class*='html--Quantity-Button'] {
align-items: center;
}
}

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

@ -130,7 +130,8 @@
"html#product-installments": {
"props": {
"testId": "product-installments"
"testId": "product-installments",
"blockClass": "product-installments"
},
"children": ["product-installments"]
},

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

@ -16,6 +16,9 @@
flex-direction: column;
}
}
:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselContainer) {
margin-bottom: 32px;
}
:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) {
max-height: none;
}
@ -30,7 +33,20 @@
display: flex;
}
@media (max-width: 1024px) {
.flexColChild--image-description :global(.vtex-store-components-3-x-imageElement) {
width: 100%;
}
}
.flexRowContent {
margin-bottom: 0;
padding-bottom: 0;
}
@media (max-width: 1024px) {
.stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}

7
styles/css/vtex.product-identifier.css
View File

@ -9,7 +9,7 @@
/* Grid breakpoints */
.product-identifier {
display: flex;
justify-content: flex-end;
justify-content: flex-start;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
@ -18,6 +18,11 @@
text-align: right;
color: rgba(146, 146, 146, 0.48);
}
@media (min-width: 1025px) {
.product-identifier {
justify-content: flex-end;
}
}
.product-identifier .product-identifier__label,
.product-identifier .product-identifier__separator {
display: none;

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

@ -92,22 +92,30 @@
}
}
.carouselGaleryThumbs :first-child {
height: 90px;
.carouselGaleryThumbs {
width: 47.67%;
}
@media (min-width: 1025px) {
.carouselGaleryThumbs {
width: 68.02%;
}
}
.carouselGaleryThumbs :first-child :first-child {
gap: 16px !important;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb {
width: 13.605%;
height: fit-content !important;
max-height: 90px;
margin: 0;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg {
border-radius: 8px;
min-height: 90px;
}
.productBrand {
display: flex;
justify-content: flex-end;
justify-content: flex-start;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 300;
@ -115,10 +123,16 @@
line-height: 34px;
color: #575757;
}
@media (min-width: 1025px) {
.productBrand {
justify-content: flex-end;
}
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin: 16px 0;
}
.skuSelectorContainer .frameAround {
width: 43px;
@ -133,12 +147,18 @@
.skuSelectorContainer .skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
margin-left: 0 !important;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
font-size: 0;
@ -235,6 +255,11 @@
display: flex;
padding-bottom: 16px;
}
@media (max-width: 376px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
flex-direction: column;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
display: flex;
flex-direction: column;
@ -280,6 +305,12 @@
left: 312px;
top: 41.5px;
}
@media (max-width: 376px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
position: unset;
justify-content: right;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000;
}
@ -325,7 +356,6 @@
margin-bottom: 15px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
@ -333,6 +363,7 @@
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
order: 2;
font-weight: 400 !important;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
font-size: 0;
@ -344,6 +375,11 @@
font-weight: 400;
line-height: 19px;
}
.shippingTable .shippingTableBody {
display: flex;
flex-direction: column;
gap: 15px;
}
.shippingTable .shippingTableBody .shippingTableRow {
display: flex;
}
@ -355,7 +391,6 @@
line-height: 16px;
align-items: center;
color: #afafaf;
margin-bottom: 15px;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
order: 2;
@ -443,4 +478,20 @@
line-height: 25px;
text-transform: uppercase;
padding: 12px;
}
@media (max-width: 1024px) {
.productDescriptionContainer {
position: relative;
padding: 16px 0;
}
.productDescriptionContainer::before {
content: "";
background-color: #bfbfbf;
display: inline-block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
}
}

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

@ -23,6 +23,25 @@
position: relative;
bottom: 9px;
}
@media (max-width: 1024px) {
.listContainer {
flex-direction: column;
padding: 0 40px 16px;
margin-bottom: 0px;
}
.listContainer::before {
content: "";
background-color: #bfbfbf;
display: inline-block;
width: 100%;
height: 1px;
position: relative;
top: 0px;
}
.listContainer::after {
bottom: 0px;
}
}
.listItem :global(.vtex-button) {
background-color: white;
@ -37,14 +56,32 @@
border-radius: 0;
}
@media (max-width: 1024px) {
.listItem {
margin: 0;
padding: 0;
}
.listItem :global(.vtex-button) {
margin: 0;
padding: 0;
}
.listItem :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}
}
.listItemActive :global(.vtex-button) {
background-color: white;
color: black;
border: 0;
border-bottom: 2px black solid;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
@media (min-width: 1025px) {
.listItemActive :global(.vtex-button) {
border-bottom: 2px black solid;
}
}

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

@ -8,6 +8,10 @@
}
}
:global(.vtex-store-components-3-x-carouselContainer) {
margin-bottom: 32px;
}
:global(.vtex-store-components-3-x-productImageTag) {
max-height: none;
}
@ -27,7 +31,22 @@
}
}
.flexColChild--image-description {
:global(.vtex-store-components-3-x-imageElement) {
@media (max-width: 1024px) {
width: 100%;
}
}
}
.flexRowContent {
margin-bottom: 0;
padding-bottom: 0;
}
.stretchChildrenWidth {
@media (max-width: 1024px) {
width: 100% !important;
padding: 0;
}
}

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

@ -1,8 +1,8 @@
.product-identifier {
display: flex;
justify-content: flex-end;
justify-content: flex-start;
font-family: "Open Sans", sans-serif;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -11,6 +11,10 @@
color: rgba(146, 146, 146, 0.48);
@media (min-width: 1025px) {
justify-content: flex-end;
}
.product-identifier__label,
.product-identifier__separator {
display: none;

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

@ -87,17 +87,25 @@
}
.carouselGaleryThumbs {
width: 47.67%;
@media (min-width: 1025px) {
width: 68.02%;
}
:first-child {
height: 90px;
:first-child {
gap: 16px !important;
.productImagesThumb {
width: 13.605%;
height: fit-content !important;
max-height: 90px;
margin: 0;
.figure {
.thumbImg {
border-radius: 8px;
min-height: 90px;
}
}
}
}
}
@ -105,7 +113,7 @@
.productBrand {
display: flex;
justify-content: flex-end;
justify-content: flex-start;
font-family: 'Open Sans', sans-serif;
font-style: normal;
@ -114,11 +122,16 @@
line-height: 34px;
color: #575757;
@media (min-width: 1025px) {
justify-content: flex-end;
}
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin: 16px 0;
.frameAround {
width: 43px;
@ -136,10 +149,14 @@
}
.skuSelectorSubcontainer--cor {
margin: 0;
.skuSelectorNameContainer {
margin: 0;
.skuSelectorOptionsList {
margin-left: 0 !important;
.skuSelectorItem {
margin: 0;
}
}
.skuSelectorTextContainer {
.skuSelectorName,
@ -252,6 +269,10 @@
display: flex;
padding-bottom: 16px;
@media (max-width: 376px) {
flex-direction: column;
}
:global(.vtex-input) {
display: flex;
flex-direction: column;
@ -303,6 +324,10 @@
padding: 0;
left: 312px;
top: 41.5px;
@media (max-width: 376px) {
position: unset;
justify-content: right;
}
:last-child {
color: #000;
@ -359,7 +384,6 @@
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
@ -367,6 +391,7 @@
.shippingTableHeadDeliveryEstimate {
order: 2;
font-weight: 400 !important;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
@ -382,6 +407,10 @@
}
.shippingTableBody {
display: flex;
flex-direction: column;
gap: 15px;
.shippingTableRow {
display: flex;
@ -393,7 +422,6 @@
line-height: 16px;
align-items: center;
color: #afafaf;
margin-bottom: 15px;
}
.shippingTableCellDeliveryEstimate {
@ -502,3 +530,19 @@
}
}
}
.productDescriptionContainer {
@media (max-width: 1024px) {
position: relative;
padding: 16px 0;
&::before {
content: '';
background-color: #bfbfbf;
display: inline-block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
}
}
}

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

@ -14,6 +14,24 @@
position: relative;
bottom: 9px;
}
@media (max-width: 1024px) {
flex-direction: column;
padding: 0 40px 16px;
margin-bottom: 0px;
&::before {
content: '';
background-color: #bfbfbf;
display: inline-block;
width: 100%;
height: 1px;
position: relative;
top: 0px;
}
&::after {
bottom: 0px;
}
}
}
.listItem :global(.vtex-button) {
background-color: white;
@ -27,14 +45,31 @@
text-transform: capitalize;
border-radius: 0;
}
.listItem {
@media (max-width: 1024px) {
margin: 0;
padding: 0;
:global(.vtex-button) {
margin: 0;
padding: 0;
:global(.vtex-button__label) {
padding: 0;
}
}
}
}
.listItemActive :global(.vtex-button) {
background-color: white;
color: black;
border: 0;
border-bottom: 2px black solid;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
@media (min-width: 1025px) {
border-bottom: 2px black solid;
}
}