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

feat: adiciona css 375px

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2023-02-02 15:43:33 -03:00
parent 5ce7bb1ced
commit a08f527d28
11 changed files with 255 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,6 +25,24 @@
padding: 0 40px;
}
[class*="html--descriptionText"] {
width: 100%;
@media (max-width: 1024px) {
[class*="html--buy-button"] {
margin-bottom: 16px;
}
[class*="html--descriptionText"] {
width: 100%;
}
}
@media (max-width: 463px) {
[class*="html--buy-button"] {
flex-direction: column;
gap: 0;
}
[class*="html--buy-button"] :global(.vtex-button) {
height: 74px;
padding: 0 64px;
}
}

5
store/blocks/pdp/product-description.jsonc
View File

@ -112,5 +112,10 @@
"displayMode": "first-image",
"zoomMode": "disabled"
}
},
"product-description": {
"props": {
"collapseContent": false
}
}
}

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

@ -252,11 +252,11 @@
]
},
"product-summary-image": {
"props": {
"showBadge": false
}
},
// "product-summary-image": {
// "props": {
// "showBadge": false
// }
// },
"list-context.product-list#shelfProducts": {
"blocks": ["product-summary.shelf#shelfProducts"],

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

@ -114,11 +114,29 @@
padding-bottom: 1rem;
}
.flexRowContent {
gap: 32px;
}
.flexRowContent--product-container {
width: 94.973%;
width: 94.445%;
}
.flexRow--product-container :global(.vtex-store-components-3-x-container) {
display: flex;
justify-content: center;
margin: 0;
padding: 0;
max-width: 100%;
}
.flexRow--product-container :global(.vtex-store-components-3-x-container) .stretchChildrenWidth {
padding: 0;
}
@media (max-width: 1024px) {
.flexRow--product-container :global(.vtex-store-components-3-x-container) {
padding: 0 40px;
}
.flexRowContent--product-container {
width: 100%;
}

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

@ -9,20 +9,45 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
/* Grid breakpoints */
.imageWrapper {
height: 314px;
display: flex;
justify-content: center;
align-items: center;
}
.image {
width: 314.4px;
height: 314.4px;
}
.brandName {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #000000;
}
.nameContainer {
padding: 16px 0 0 0;
}
.containerNormal {
max-width: 314px !important;
}
@media (max-width: 1024px) {
.brandName {
font-size: 14px;
}
.image {
width: 291.2px;
height: 291.2px;
}
}
@media (min-width: 375px) and (max-width: 768px) {
.image {
width: 124.8px;
height: 124.8px;
}
}

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

@ -27,6 +27,11 @@
background: transparent;
}
.sliderTrack--shelf {
display: flex;
gap: 16px;
}
.sliderLayoutContainer--shelf {
padding-left: 40px !important;
padding-right: 40px !important;
@ -55,3 +60,20 @@
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
}
@media (max-width: 1024px) {
.sliderTrack--shelf {
gap: 12px !important;
}
}
@media (min-width: 375px) and (max-width: 755px) {
.sliderLeftArrow--shelf {
margin-left: 0;
}
.sliderRightArrow--shelf {
margin-right: 0;
}
.sliderTrack--shelf {
gap: 8px !important;
}
}

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

@ -13,11 +13,6 @@
background: red;
}
.container {
display: flex;
justify-content: center;
}
.productBrand--quickview {
display: flex;
justify-content: end;
@ -30,6 +25,7 @@
.carouselGaleryThumbs {
max-height: 90px;
width: 150%;
display: block;
}
@ -195,6 +191,7 @@
.shippingTableRow {
position: relative;
width: 100%;
}
.shippingTableHeadDeliveryName {
@ -215,7 +212,7 @@
font-size: 0;
position: absolute;
top: 5%;
left: 342%;
left: 61%;
}
.shippingTableHeadDeliveryEstimate::after {
@ -232,7 +229,7 @@
font-size: 0;
position: absolute;
top: 5%;
left: 198%;
left: 36%;
}
.shippingTableHeadDeliveryPrice::after {
@ -263,7 +260,7 @@
.shippingTableCellDeliveryEstimate {
position: absolute;
left: 62%;
left: 61%;
}
.shippingTableCellDeliveryPrice {
@ -275,6 +272,10 @@
margin: 0;
}
.skuSelectorNameContainer {
margin-bottom: 0;
}
:global(.vtex-address-form-4-x-input)::placeholder {
font-style: normal;
font-weight: 400;
@ -352,6 +353,10 @@
color: #fff;
}
.inputGroup--pageProduct {
display: flex;
}
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
@ -363,6 +368,10 @@
padding: 0;
}
.inputGroup--pageProduct :global(.vtex-input__error) {
margin-top: 8px;
}
.subscriberContainer {
margin-top: 43px;
}
@ -464,14 +473,19 @@
width: 100% !important;
}
:global(.vtex-input__error) {
position: absolute;
margin: 0;
}
@media (max-width: 1024px) {
.container {
padding: 0 40px;
}
.productBrand--quickview {
justify-content: flex-start;
margin-top: 32px;
}
.price_sellingPrice {
font-size: 18px;
}
.container--pageProduct {
width: 96%;
}
@ -480,3 +494,15 @@
max-width: 100%;
}
}
@media (max-width: 492px) {
.shippingContainer {
margin-bottom: 22px;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: 170px;
top: 95%;
}
.shippingTable {
margin-top: 32px;
}
}

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

@ -106,20 +106,38 @@
padding-bottom: 1rem;
}
.flexRowContent {
gap: 32px;
}
.flexRowContent--product-container {
width: 94.973%;
width: 94.445%;
}
.flexRow--product-container :global(.vtex-store-components-3-x-container) {
display: flex;
justify-content: center;
margin: 0;
padding: 0;
max-width: 100%;
.stretchChildrenWidth {
padding: 0;
}
}
@media (max-width: 1024px) {
.flexRow--product-container :global(.vtex-store-components-3-x-container) {
padding: 0 40px;
}
.flexRowContent--product-container {
width: 100%;
.flexRowContent {
flex-direction: column;
}
.stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}
.flexRowContent--product-container .flexRowContent {
flex-direction: column;
}
.flexRowContent--product-container .stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}

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

@ -1,18 +1,46 @@
.imageWrapper {
height: 314px;
// height: 245px;
display: flex;
justify-content: center;
align-items: center;
}
.image {
width: 314.4px;
height: 314.4px;
}
.brandName {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: $color-black;
}
.nameContainer {
padding: 16px 0 0 0;
}
.containerNormal {
max-width: 314px !important;
}
@media (max-width: 1024px) {
.brandName {
font-size: 14px;
}
.image {
width: 291.2px;
height: 291.2px;
}
}
@media (min-width: 375px) and (max-width: 768px) {
.image {
width: 124.8px;
height: 124.8px;
}
}

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

@ -17,6 +17,11 @@
background: transparent;
}
.sliderTrack--shelf {
display: flex;
gap: 16px;
}
.sliderLayoutContainer--shelf {
padding-left: 40px !important;
padding-right: 40px !important;
@ -47,3 +52,23 @@
content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
}
}
@media (max-width: 1024px) {
.sliderTrack--shelf {
gap: 12px !important;
}
}
@media (min-width: 375px) and (max-width: 755px) {
.sliderLeftArrow--shelf {
margin-left: 0;
}
.sliderRightArrow--shelf {
margin-right: 0;
}
.sliderTrack--shelf {
gap: 8px !important;
}
}

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

@ -2,11 +2,6 @@
background: red;
}
.container {
display: flex;
justify-content: center;
}
.productBrand--quickview {
display: flex;
justify-content: end;
@ -19,6 +14,7 @@
.carouselGaleryThumbs {
max-height: 90px;
width: 150%;
display: block;
}
@ -190,6 +186,7 @@
.shippingTableRow {
position: relative;
width: 100%;
}
.shippingTableHeadDeliveryName {
@ -210,7 +207,7 @@
font-size: 0;
position: absolute;
top: 5%;
left: 342%;
left: 61%;
}
.shippingTableHeadDeliveryEstimate::after {
@ -227,7 +224,7 @@
font-size: 0;
position: absolute;
top: 5%;
left: 198%;
left: 36%;
}
.shippingTableHeadDeliveryPrice::after {
@ -258,7 +255,7 @@
.shippingTableCellDeliveryEstimate {
position: absolute;
left: 62%;
left: 61%;
}
.shippingTableCellDeliveryPrice {
@ -270,6 +267,10 @@
margin: 0;
}
.skuSelectorNameContainer {
margin-bottom: 0;
}
:global(.vtex-address-form-4-x-input)::placeholder {
font-style: normal;
font-weight: 400;
@ -347,6 +348,10 @@
color: $color-white;
}
.inputGroup--pageProduct {
display: flex;
}
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
@ -358,6 +363,10 @@
padding: 0;
}
.inputGroup--pageProduct :global(.vtex-input__error) {
margin-top: 8px;
}
.subscriberContainer {
margin-top: 43px;
@ -476,15 +485,21 @@
width: 100% !important;
}
:global(.vtex-input__error) {
position: absolute;
margin: 0;
}
@media (max-width: 1024px) {
.container {
padding: 0 40px;
}
.productBrand--quickview {
justify-content: flex-start;
margin-top: 32px;
}
.price_sellingPrice {
font-size: 18px;
}
.container--pageProduct {
width: 96%;
}
@ -496,3 +511,17 @@
}
}
}
@media (max-width: 492px) {
.shippingContainer {
margin-bottom: 22px;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
left: 170px;
top: 95%;
}
.shippingTable {
margin-top: 32px;
}
}