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

feat: Responsividade Mobile finalizada

Browse Source
This commit is contained in:
José Carlos Lins 2023-01-25 09:52:39 -03:00
parent bcc7f9ec18
commit b378e8a467
16 changed files with 208 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
react/components/description-section/styles.css
View File

@ -46,7 +46,14 @@
border-bottom: 1px solid #BFBFBF;
}
.descriptionSectionTitle{
font-size: 20px;
line-height: 32px;
}
.descriptionSectionParagraph{
font-size: 14px;
line-height: 19px;
margin-bottom: 16px;
}
}

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

@ -160,7 +160,8 @@
"blockClass": "container-slider-related-products-pdp",
"itemsPerPage": {
"desktop": 4,
"tablet": 3
"tablet": 3,
"phone": 2
}
}
},

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

@ -42,6 +42,9 @@
border: 0;
border-radius: 0;
}
.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) {
padding: 12px 0 !important;
}
.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100%;
@ -60,5 +63,25 @@
display: flex;
flex-direction: column;
padding-top: 16px;
padding-bottom: 0;
}
.flexRowContent--container-related-products-pdp {
padding: 0 53px;
}
}
@media screen and (max-width: 768px) {
.flexRowContent--container-quantity-and-buy-button {
display: flex;
flex-direction: column;
}
.flexRowContent--container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
justify-content: flex-start;
}
.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) {
display: inline-block;
width: 56.7567%;
}
.flexRowContent--container-related-products-pdp {
padding: 0 48px;
}
}

10
styles/css/vtex.product-quantity.css
View File

@ -7,10 +7,6 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.quantitySelectorContainer {
margin-top: 6px;
}
.quantitySelectorTitle {
display: none;
}
@ -40,4 +36,10 @@
font-size: 16px;
line-height: 22px;
color: #000000;
}
@media screen and (max-width: 768px) {
.quantitySelectorContainer {
width: 128px !important;
}
}

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

@ -78,4 +78,27 @@
}
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .installmentContainer {
display: none;
}
@media screen and (max-width: 1024px) {
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer .productBrand {
font-size: 14px;
line-height: 19px;
}
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::before {
font-size: 12px;
line-height: 16px;
}
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::after {
font-size: 12px;
line-height: 16px;
}
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice .currencyContainer {
font-size: 12px;
line-height: 16px;
}
.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer .currencyContainer {
font-size: 18px;
line-height: 25px;
}
}

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

@ -24,4 +24,9 @@
.container--title-related-products {
margin-bottom: 24px;
}
}
@media screen and (max-width: 768px) {
.container--title-related-products .heading--title-related-products {
font-size: 20px;
}
}

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

@ -44,4 +44,21 @@
height: 17px !important;
background-color: #FFFFFF;
border: 0.5px solid #000000;
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp {
left: -23px;
}
.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp {
right: -22px;
}
}
@media screen and (max-width: 768px) {
.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp {
left: -21px;
}
.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp {
right: -20px;
}
}

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

@ -185,10 +185,10 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000;
text-decoration-line: underline;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
@ -296,6 +296,8 @@
width: 100%;
grid-template-areas: "label button" "notCep notCep";
grid-template-columns: 83.4459% 1fr;
padding-bottom: 23px;
margin-bottom: 16px;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
padding: 0;

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

@ -52,11 +52,15 @@
.listContainer--container-list-tab-layout-pdp {
flex-direction: column;
padding: 0;
gap: 16px;
margin-bottom: 16px;
border-top: 1px solid #B9B9B9;
}
.listContainer--container-list-tab-layout-pdp .listItem {
width: max-content;
margin-bottom: 16px;
}
.listContainer--container-list-tab-layout-pdp .listItem:first-child {
margin-top: 16px;
}
.listContainer--container-list-tab-layout-pdp .listItemActive {
border: 0;

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

@ -36,6 +36,10 @@
background-color: #000000;
border: 0;
border-radius: 0;
:global(.vtex-button__label){
padding: 12px 0 !important;
}
}
}
@ -58,6 +62,33 @@
display: flex;
flex-direction: column;
padding-top: 16px;
padding-bottom: 0;
}
}
.flexRowContent--container-related-products-pdp{
padding: 0 53px;
}
}
@media screen and (max-width: 768px) {
.flexRowContent--container-quantity-and-buy-button{
display: flex;
flex-direction: column;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth){
justify-content: flex-start;
}
:global(.vtex-button){
:global(.vtex-button__label){
display: inline-block;
width: 56.7567%;
}
}
}
.flexRowContent--container-related-products-pdp{
padding: 0 48px;
}
}

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

@ -1,7 +1,3 @@
.quantitySelectorContainer{
margin-top: 6px;
}
.quantitySelectorTitle {
display: none;
}
@ -36,3 +32,9 @@
color: #000000;
}
}
@media screen and (max-width: 768px) {
.quantitySelectorContainer{
width: 128px !important;
}
}

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

@ -86,3 +86,42 @@
}
}
}
@media screen and (max-width: 1024px) {
.containerNormal--container-product-summary-related-products-pdp{
.element--container-product-summary-related-products-pdp{
.nameContainer{
.productBrand{
font-size: 14px;
line-height: 19px;
}
}
.priceContainer{
.listPrice{
&::before{
font-size: 12px;
line-height: 16px;
}
&::after{
font-size: 12px;
line-height: 16px;
}
.currencyContainer{
font-size: 12px;
line-height: 16px;
}
}
.sellingPriceContainer{
.currencyContainer{
font-size: 18px;
line-height: 25px;
}
}
}
}
}
}

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

@ -18,3 +18,11 @@
margin-bottom: 24px;
}
}
@media screen and (max-width: 768px) {
.container--title-related-products{
.heading--title-related-products{
font-size: 20px;
}
}
}

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

@ -46,4 +46,26 @@
}
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--container-slider-related-products-pdp {
.sliderLeftArrow--container-slider-related-products-pdp{
left: -23px;
}
.sliderRightArrow--container-slider-related-products-pdp{
right: -22px;
}
}
}
@media screen and (max-width: 768px) {
.sliderLayoutContainer--container-slider-related-products-pdp {
.sliderLeftArrow--container-slider-related-products-pdp{
left: -21px;
}
.sliderRightArrow--container-slider-related-products-pdp{
right: -20px;
}
}
}

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

@ -207,10 +207,10 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
:last-child{
color: #000000;
text-decoration-line: underline;
}
:global(.vtex__icon-external-link){
@ -341,6 +341,8 @@
grid-template-areas: "label button"
"notCep notCep";
grid-template-columns: 83.4459% 1fr;
padding-bottom: 23px;
margin-bottom: 16px;
:global(.vtex-address-form__postalCode){
padding: 0;

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

@ -54,11 +54,18 @@
.listContainer--container-list-tab-layout-pdp{
flex-direction: column;
padding: 0;
gap: 16px;
// gap: 16px;
margin-bottom: 16px;
border-top: 1px solid #B9B9B9;
.listItem{
width: max-content;
margin-bottom: 16px;
&:first-child{
margin-top: 16px;
}
}
.listItemActive{